Graph - move custom views out of top_nav

x-pack/legacy/plugins/graph/public/app.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import _ from 'lodash';
 import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import 'ace';
@@ -56,6 +57,10 @@ import saveTemplate from './templates/save_workspace.html';
 import loadTemplate from './templates/load_workspace.html';
 import settingsTemplate from './templates/settings.html';
 
+import './directives/graph_load';
+import './directives/graph_save';
+import './directives/graph_settings';
+
 const app = uiModules.get('app/graph');
 
 function checkLicense(Private, Promise, kbnBaseUrl) {
@@ -837,7 +842,11 @@ app.controller('graphuiPlugin', function (
           defaultMessage: 'Save this workspace',
         }),
         disableButton: function () {return $scope.selectedFields.length === 0;},
-        template: saveTemplate,
+        run: () => {
+          const curState = $scope.menus.showSave;
+          $scope.closeMenus();
+          $scope.menus.showSave = !curState;
+        },
         testId: 'graphSaveButton',
       });
     } else {
@@ -868,7 +877,11 @@ app.controller('graphuiPlugin', function (
     tooltip: i18n.translate('xpack.graph.topNavMenu.loadWorkspaceTooltip', {
       defaultMessage: 'Load a saved workspace',
     }),
-    template: loadTemplate,
+    run: () => {
+      const curState = $scope.menus.showLoad;
+      $scope.closeMenus();
+      $scope.menus.showLoad = !curState;
+    },
     testId: 'graphOpenButton',
   });
   // if deleting is disabled using uiCapabilities, we don't want to render the delete
@@ -920,7 +933,7 @@ app.controller('graphuiPlugin', function (
           );
         }
       });
-    }else {
+    } else {
       $scope.topNavMenu.push({
         key: 'delete',
         disableButton: true,
@@ -946,9 +959,24 @@ app.controller('graphuiPlugin', function (
     description: i18n.translate('xpack.graph.topNavMenu.settingsAriaLabel', {
       defaultMessage: 'Settings',
     }),
-    template: settingsTemplate
+    run: () => {
+      const curState = $scope.menus.showSettings;
+      $scope.closeMenus();
+      $scope.menus.showSettings = !curState;
+    },
   });
 
+  $scope.menus = {
+    showSave: false,
+    showLoad: false,
+    showSettings: false,
+  };
+
+  $scope.closeMenus = () => {
+    _.forOwn($scope.menus, function (value, key) {
+      $scope.menus[key] = false;
+    });
+  };
 
   // Deal with situation of request to open saved workspace
   if ($route.current.locals.savedWorkspace) {

x-pack/legacy/plugins/graph/public/directives/graph_load.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { uiModules } from 'ui/modules';
+import template from '../templates/load_workspace.html';
+const app = uiModules.get('app/graph');
+
+app.directive('graphLoad', function () {
+  return {
+    replace: true,
+    restrict: 'E',
+    template,
+  };
+});

x-pack/legacy/plugins/graph/public/directives/graph_save.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { uiModules } from 'ui/modules';
+import template from '../templates/save_workspace.html';
+const app = uiModules.get('app/graph');
+
+app.directive('graphSave', function () {
+  return {
+    replace: true,
+    restrict: 'E',
+    template,
+  };
+});

x-pack/legacy/plugins/graph/public/directives/graph_settings.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { uiModules } from 'ui/modules';
+import template from '../templates/settings.html';
+const app = uiModules.get('app/graph');
+
+app.directive('graphSettings', function () {
+  return {
+    replace: true,
+    restrict: 'E',
+    template,
+  };
+});

x-pack/legacy/plugins/graph/public/templates/_graph.scss

@@ -71,6 +71,10 @@
   fill: $euiColorEmptyShade;
 }
 
+.gphGraph__menus, .gphGraph__bar {
+  margin: $euiSizeM;
+}
+
 .gphGraph__flexGroup {
   display: flex;
   width: 100%;

x-pack/legacy/plugins/graph/public/templates/index.html

@@ -1,72 +1,78 @@
 <div id="graphBasic" ng-controller="graphuiPlugin">
   <!-- Local nav. -->
   <kbn-top-nav name="workspacesTopNav" config="topNavMenu">
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
-      <div data-transclude-slot="bottomRow" class="gphGraph__flexGroup">
-        <!-- Select index pattern. -->
-        <select class="form-control gphIndexSelect" name="mySelect" ng-change="uiSelectIndex()" ng-class="{'gphIndexSelect-unselected':selectedIndex === null}"
-          ng-options="option.attributes.title for option in indices" ng-model="grr.proposedIndex">
-          <option
-            value=""
-            i18n-id="xpack.graph.topNavMenu.selectIndexPatternOptionLabel"
-            i18n-default-message="Select index pattern…"
-          ></option>
-        </select>
-
-        <!-- Added fields. -->
-        <span
-          class="gphNoUserSelect"
-          ng-repeat="f in selectedFields"
-          ng-attr-tooltip="{{ ::'xpack.graph.topNavMenu.addedFieldTooltip' | i18n: {
-            defaultMessage: 'Shift + click to toggle if search returns {fName}',
-            values: { fName: f.name }
-          } }}"
-        >
-          <svg class="gphNode" width="30" height="30" ng-click="clickVertexFieldIcon(f, $event)" ng-class="{'gphNode-disabled':f.hopSize<=0}">
-            <circle class="gphNode__circle" r="13" cx="15" cy="15" ng-class="{selectedNode:kbnTopNav.currentKey === 'fieldConfig'&&f === selectedFieldConfig}"
-              ng-attr-style="fill:{{f.color}}" />
-            <text ng-if="f.icon" class="gphNode__text fa" text-anchor="middle" x="15" y="20">
-              {{f.icon.code}}
-            </text>
-          </svg>
-        </span>
+  </kbn-top-nav>
 
-        <!-- Add field button. -->
-        <span
-          class="gphNoUserSelect"
-          ng-attr-tooltip="{{ ::'xpack.graph.topNavMenu.addFieldButtonTooltip' | i18n: { defaultMessage: 'Add a field source for vertices' } }}"
+  <div class="gphGraph__menus">
+    <graph-load ng-show="menus.showLoad"></graph-load>
+    <graph-save ng-show="menus.showSave"></graph-save>
+    <graph-settings ng-show="menus.showSettings"></graph-settings>
+  </div>
+
+  <div class="gphGraph__bar">
+    <div class="gphGraph__flexGroup">
+      <!-- Select index pattern. -->
+      <select class="form-control gphIndexSelect" name="mySelect" ng-change="uiSelectIndex()" ng-class="{'gphIndexSelect-unselected':selectedIndex === null}"
+        ng-options="option.attributes.title for option in indices" ng-model="grr.proposedIndex">
+        <option
+          value=""
+          i18n-id="xpack.graph.topNavMenu.selectIndexPatternOptionLabel"
+          i18n-default-message="Select index pattern…"
+        ></option>
+      </select>
+
+      <!-- Added fields. -->
+      <span
+        class="gphNoUserSelect"
+        ng-repeat="f in selectedFields"
+        ng-attr-tooltip="{{ ::'xpack.graph.topNavMenu.addedFieldTooltip' | i18n: {
+          defaultMessage: 'Shift + click to toggle if search returns {fName}',
+          values: { fName: f.name }
+        } }}"
+      >
+        <svg class="gphNode" width="30" height="30" ng-click="clickVertexFieldIcon(f, $event)" ng-class="{'gphNode-disabled':f.hopSize<=0}">
+          <circle class="gphNode__circle" r="13" cx="15" cy="15" ng-class="{selectedNode:kbnTopNav.currentKey === 'fieldConfig'&&f === selectedFieldConfig}"
+            ng-attr-style="fill:{{f.color}}" />
+          <text ng-if="f.icon" class="gphNode__text fa" text-anchor="middle" x="15" y="20">
+            {{f.icon.code}}
+          </text>
+        </svg>
+      </span>
+
+      <!-- Add field button. -->
+      <span
+        class="gphNoUserSelect"
+        ng-attr-tooltip="{{ ::'xpack.graph.topNavMenu.addFieldButtonTooltip' | i18n: { defaultMessage: 'Add a field source for vertices' } }}"
+      >
+        <button
+          class="gphAddButton"
+          ng-disabled="selectedIndex === null"
+          aria-label="{{ ::'xpack.graph.topNavMenu.addFieldButtonAriaLabel' | i18n: { defaultMessage: 'Add a field' } }}"
+          id="addVertexFieldButton"
+          ng-class="{'gphAddButton-focus':selectedIndex !== null&&selectedFields.length === 0}"
+          ng-click="toggleShowAdvancedFieldsConfig()"
         >
+          <span aria-hidden="true" class="kuiIcon fa-plus"></span>
+        </button>
+      </span>
+
+      <!-- Search. -->
+      <form ng-submit="submit()" name="graphBasicSearch" class="gphGraph__flexGroupFiller" style="width: 100%">
+        <div class="kuiLocalSearch">
+          <input name="searchTerm" type="text" class="kuiLocalSearchInput" ng-model="grr.searchTerm" ng-disabled="liveResponseFields.length === 0"
+            ng-focus="kbnTopNav.close()" placeholder="foo AND bar NOT baz" autocomplete="off">
           <button
-            class="gphAddButton"
-            ng-disabled="selectedIndex === null"
-            aria-label="{{ ::'xpack.graph.topNavMenu.addFieldButtonAriaLabel' | i18n: { defaultMessage: 'Add a field' } }}"
-            id="addVertexFieldButton"
-            ng-class="{'gphAddButton-focus':selectedIndex !== null&&selectedFields.length === 0}"
-            ng-click="toggleShowAdvancedFieldsConfig()"
+            class="kuiLocalSearchButton"
+            type="submit"
+            ng-disabled="liveResponseFields.length === 0"
+            aria-label="{{ ::'xpack.graph.topNavMenu.searchButtonAriaLabel' | i18n: { defaultMessage: 'Search' } }}"
           >
-            <span aria-hidden="true" class="kuiIcon fa-plus"></span>
+            <span aria-hidden="true" class="kuiIcon fa-search"></span>
           </button>
-        </span>
-
-        <!-- Search. -->
-        <form ng-submit="submit()" name="graphBasicSearch" class="gphGraph__flexGroupFiller" style="width: 100%">
-          <div class="kuiLocalSearch">
-            <input name="searchTerm" type="text" class="kuiLocalSearchInput" ng-model="grr.searchTerm" ng-disabled="liveResponseFields.length === 0"
-              ng-focus="kbnTopNav.close()" placeholder="foo AND bar NOT baz" autocomplete="off">
-            <button
-              class="kuiLocalSearchButton"
-              type="submit"
-              ng-disabled="liveResponseFields.length === 0"
-              aria-label="{{ ::'xpack.graph.topNavMenu.searchButtonAriaLabel' | i18n: { defaultMessage: 'Search' } }}"
-            >
-              <span aria-hidden="true" class="kuiIcon fa-search"></span>
-            </button>
-          </div>
-        </form>
-      </div>
+        </div>
+      </form>
     </div>
-  </kbn-top-nav>
+  </div>
 
   <div class="config" ng-show="kbnTopNav.currentKey === 'fields'" data-test-subj="fieldSelectionList">
     <div class="config">

x-pack/legacy/plugins/graph/public/templates/load_workspace.html

@@ -1,12 +1,15 @@
-<div
-  class="kuiLocalDropdownTitle"
-  i18n-id="xpack.graph.topNavMenu.open.openWorkspaceTitle"
-  i18n-default-message="Open Workspace"
-></div>
-
-<saved-object-finder
-  title="{{ ::'xpack.graph.topNavMenu.open.workspacesListTooltip' | i18n: { defaultMessage: 'Saved Workspaces' } }}"
-  type="Graph workspace"
-  use-local-management="true"
-  on-choose="openSavedWorkspace"
-></saved-object-finder>
+<div>
+    <div
+    class="kuiLocalDropdownTitle"
+    i18n-id="xpack.graph.topNavMenu.open.openWorkspaceTitle"
+    i18n-default-message="Open Workspace"
+  ></div>
+
+  <saved-object-finder
+    title="{{ ::'xpack.graph.topNavMenu.open.workspacesListTooltip' | i18n: { defaultMessage: 'Saved Workspaces' } }}"
+    type="Graph workspace"
+    use-local-management="true"
+    on-choose="openSavedWorkspace"
+  ></saved-object-finder>
+
+</div>

x-pack/legacy/plugins/graph/public/templates/settings.html

@@ -1,4 +1,5 @@
-<div
+<div>
+  <div
   class="kuiLocalDropdownTitle"
   i18n-id="xpack.graph.topNavMenu.settingsTitle"
   i18n-default-message="Settings"
@@ -486,3 +487,5 @@
   </form>
 </div>
 <!-- ====== end explore settings tab content ====== -->
+
+</div>