Switched graph to use new top nav (#41966) (#42857)

* Switched graph to use new top nav * Make sure fields and fieldConfig are properly shown * Removed unused translations * Hide config section * removed unneeded var reset * Fixed css rendering * Removed unneeded evalAsync * Removed unused var * css fixes * Simplified toggling behavior * ng-if
2025-04-23 09:19:04 -04:00 · 2019-08-07 22:52:23 +03:00 · 2019-08-07 22:52:23 +03:00 · f3c760140b
commit f3c760140b
parent 40c8e0ced5
5 changed files with 70 additions and 68 deletions
--- a/x-pack/legacy/plugins/graph/public/app.js
+++ b/x-pack/legacy/plugins/graph/public/app.js
@ -289,7 +289,7 @@ app.controller('graphuiPlugin', function (

  $scope.hideAllConfigPanels = function () {
    $scope.selectedFieldConfig = null;
-    $scope.kbnTopNav.close();
+    $scope.closeMenus();
  };

  $scope.setAllFieldStatesToDefault = function () {
@ -329,13 +329,12 @@ app.controller('graphuiPlugin', function (
    }

    // Check if user is toggling off an already-open config panel for the current field
-    if ($scope.kbnTopNav.currentKey === 'fieldConfig' && field === $scope.selectedFieldConfig) {
-      $scope.hideAllConfigPanels();
+    if ($scope.currentlyDisplayedKey === 'fieldConfig' && field === $scope.selectedFieldConfig) {
+      $scope.currentlyDisplayedKey = null;
      return;
    }
-    $scope.hideAllConfigPanels();
    $scope.selectedFieldConfig = field;
-    $scope.kbnTopNav.currentKey = 'fieldConfig';
+    $scope.currentlyDisplayedKey = 'fieldConfig';
  };

  function canWipeWorkspace(yesFn, noFn) {
@ -498,15 +497,12 @@ app.controller('graphuiPlugin', function (
  $scope.clearWorkspace = function () {
    $scope.workspace = null;
    $scope.detail = null;
-    if ($scope.kbnTopNav) {
-      $scope.kbnTopNav.close();
-    }
+    if ($scope.closeMenus) $scope.closeMenus();
  };

  $scope.toggleShowAdvancedFieldsConfig = function () {
-    if ($scope.kbnTopNav.currentKey !== 'fields') {
-      $scope.kbnTopNav.close();
-      $scope.kbnTopNav.currentKey = 'fields';
+    if ($scope.currentlyDisplayedKey !== 'fields') {
+      $scope.currentlyDisplayedKey = 'fields';
      //Default the selected field
      $scope.selectedField = null;
      $scope.filteredFields = $scope.allFields.filter(function (fieldDef) {
@ -516,7 +512,7 @@ app.controller('graphuiPlugin', function (
        $scope.selectedField = $scope.filteredFields[0];
      }
    } else {
-      $scope.hideAllConfigPanels();
+      $scope.currentlyDisplayedKey = undefined;
    }
  };

@ -843,49 +839,48 @@ app.controller('graphuiPlugin', function (
    tooltip: i18n.translate('xpack.graph.topNavMenu.newWorkspaceTooltip', {
      defaultMessage: 'Create a new workspace',
    }),
-    run: function () {canWipeWorkspace(function () {kbnUrl.change('/home', {}); });  },
+    run: function () {
+      canWipeWorkspace(function () {
+        kbnUrl.change('/home', {});
+      });  },
  });

  // if saving is disabled using uiCapabilities, we don't want to render the save
  // button so it's consistent with all of the other applications
  if (capabilities.get().graph.save) {
    // allSavingDisabled is based on the xpack.graph.savePolicy, we'll maintain this functionality
-    if (!$scope.allSavingDisabled) {
-      $scope.topNavMenu.push({
-        key: 'save',
-        label: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.enabledLabel', {
-          defaultMessage: 'Save',
-        }),
-        description: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.enabledAriaLabel', {
-          defaultMessage: 'Save Workspace',
-        }),
-        tooltip: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.enabledTooltip', {
-          defaultMessage: 'Save this workspace',
-        }),
-        disableButton: function () {return $scope.selectedFields.length === 0;},
-        run: () => {
+
+    $scope.topNavMenu.push({
+      key: 'save',
+      label: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.enabledLabel', {
+        defaultMessage: 'Save',
+      }),
+      description: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.enabledAriaLabel', {
+        defaultMessage: 'Save Workspace',
+      }),
+      tooltip: () => {
+        if ($scope.allSavingDisabled) {
+          return i18n.translate('xpack.graph.topNavMenu.saveWorkspace.disabledTooltip', {
+            defaultMessage: 'No changes to saved workspaces are permitted by the current save policy',
+          });
+        } else {
+          return i18n.translate('xpack.graph.topNavMenu.saveWorkspace.enabledTooltip', {
+            defaultMessage: 'Save this workspace',
+          });
+        }
+      },
+      disableButton: function () {
+        return $scope.allSavingDisabled || $scope.selectedFields.length === 0;
+      },
+      run: () => {
+        $scope.$evalAsync(() => {
          const curState = $scope.menus.showSave;
          $scope.closeMenus();
          $scope.menus.showSave = !curState;
-        },
-        testId: 'graphSaveButton',
-      });
-    } else {
-      $scope.topNavMenu.push({
-        key: 'save',
-        label: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.disabledLabel', {
-          defaultMessage: 'Save',
-        }),
-        description: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.disabledAriaLabel', {
-          defaultMessage: 'Save Workspace',
-        }),
-        tooltip: i18n.translate('xpack.graph.topNavMenu.saveWorkspace.disabledTooltip', {
-          defaultMessage: 'No changes to saved workspaces are permitted by the current save policy',
-        }),
-        disableButton: true,
-        testId: 'graphSaveButton',
-      });
-    }
+        });
+      },
+      testId: 'graphSaveButton',
+    });
  }
  $scope.topNavMenu.push({
    key: 'open',
@ -899,9 +894,11 @@ app.controller('graphuiPlugin', function (
      defaultMessage: 'Load a saved workspace',
    }),
    run: () => {
-      const curState = $scope.menus.showLoad;
-      $scope.closeMenus();
-      $scope.menus.showLoad = !curState;
+      $scope.$evalAsync(() => {
+        const curState = $scope.menus.showLoad;
+        $scope.closeMenus();
+        $scope.menus.showLoad = !curState;
+      });
    },
    testId: 'graphOpenButton',
  });
@ -981,9 +978,11 @@ app.controller('graphuiPlugin', function (
      defaultMessage: 'Settings',
    }),
    run: () => {
-      const curState = $scope.menus.showSettings;
-      $scope.closeMenus();
-      $scope.menus.showSettings = !curState;
+      $scope.$evalAsync(() => {
+        const curState = $scope.menus.showSettings;
+        $scope.closeMenus();
+        $scope.menus.showSettings = !curState;
+      });
    },
  });

@ -994,7 +993,7 @@ app.controller('graphuiPlugin', function (
  };

  $scope.closeMenus = () => {
-    _.forOwn($scope.menus, function (value, key) {
+    _.forOwn($scope.menus, function (_, key) {
      $scope.menus[key] = false;
    });
  };
@ -1242,7 +1241,7 @@ app.controller('graphuiPlugin', function (


    $scope.savedWorkspace.save().then(function (id) {
-      $scope.kbnTopNav.close('save');
+      $scope.closeMenus();
      $scope.userHasConfirmedSaveWorkspaceData = false; //reset flag
      if (id) {
        const title = i18n.translate('xpack.graph.saveWorkspace.successNotificationTitle', {
--- a/x-pack/legacy/plugins/graph/public/templates/_graph.scss
+++ b/x-pack/legacy/plugins/graph/public/templates/_graph.scss
@ -13,11 +13,18 @@
 * 1. Calculated px values come from the open/closed state of the global nav sidebar
 */

+
+ #graphBasic {
+   display: flex;
+   flex-direction: column;
+   flex: 1;
+   overflow: hidden;
+ }
+
 .gphGraph__container {
  background: $euiColorEmptyShade;
-  position: fixed;
-  height: 100%;
-  width: calc(100% - #{$kbnGlobalNavClosedWidth}); /* 1 */
+  position: relative;
+  flex: 1;
 }

 .kbnGlobalNav.kbnGlobalNav-isOpen + .app-wrapper .gphGraph__container {
@ -72,7 +79,7 @@
 }

 .gphGraph__menus, .gphGraph__bar {
-  margin: $euiSizeM;
+  margin: $euiSizeM $euiSizeM 0 $euiSizeM;
 }

 .gphGraph__flexGroup {
--- a/x-pack/legacy/plugins/graph/public/templates/index.html
+++ b/x-pack/legacy/plugins/graph/public/templates/index.html
@ -1,9 +1,9 @@
 <div id="graphBasic" ng-controller="graphuiPlugin">
  <!-- Local nav. -->
-  <kbn-top-nav name="workspacesTopNav" config="topNavMenu">
-  </kbn-top-nav>
+  <kbn-top-nav-v2 name="workspacesTopNav" config="topNavMenu">
+  </kbn-top-nav-v2>

-  <div class="gphGraph__menus">
+  <div class="gphGraph__menus" ng-show="menus.showLoad || menus.showSave || menus.showSettings">
    <graph-load ng-show="menus.showLoad"></graph-load>
    <graph-save ng-show="menus.showSave"></graph-save>
    <graph-settings ng-show="menus.showSettings"></graph-settings>
@ -31,7 +31,7 @@
        } }}"
      >
        <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}"
+          <circle class="gphNode__circle" r="13" cx="15" cy="15" ng-class="{selectedNode:currentlyDisplayedKey === '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}}
@ -74,7 +74,7 @@
    </div>
  </div>

-  <div class="config" ng-show="kbnTopNav.currentKey === 'fields'" data-test-subj="fieldSelectionList">
+  <div class="config" ng-show="currentlyDisplayedKey === 'fields'" data-test-subj="fieldSelectionList">
    <div class="config">
      <div class="container-fluid">
        <label
@ -123,7 +123,7 @@
    </div>
  </div>

-  <div class="config" ng-show="kbnTopNav.currentKey === 'fieldConfig'">
+  <div class="config" ng-show="currentlyDisplayedKey === 'fieldConfig' && selectedFieldConfig">
    <div class="config">
      <div class="container-fluid">

--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -4722,8 +4722,6 @@
    "xpack.graph.topNavMenu.save.saveConfigurationOnlyWarning": "このワークスペースのデータは消去され、構成のみが保存されます",
    "xpack.graph.topNavMenu.save.saveGraphContentCheckboxLabel": "Graph コンテンツを保存",
    "xpack.graph.topNavMenu.save.saveWorkspaceTitle": "ワークスペースの保存",
-    "xpack.graph.topNavMenu.saveWorkspace.disabledAriaLabel": "ワークスペースを保存",
-    "xpack.graph.topNavMenu.saveWorkspace.disabledLabel": "保存",
    "xpack.graph.topNavMenu.saveWorkspace.disabledTooltip": "現在の保存ポリシーでは、保存されたワークスペースへの変更が許可されていません",
    "xpack.graph.topNavMenu.saveWorkspace.enabledAriaLabel": "ワークスペースを保存",
    "xpack.graph.topNavMenu.saveWorkspace.enabledLabel": "保存",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -4865,8 +4865,6 @@
    "xpack.graph.topNavMenu.save.saveConfigurationOnlyWarning": "将清除此工作空间的数据，仅保存配置",
    "xpack.graph.topNavMenu.save.saveGraphContentCheckboxLabel": "保存 Graph 内容",
    "xpack.graph.topNavMenu.save.saveWorkspaceTitle": "保存工作空间",
-    "xpack.graph.topNavMenu.saveWorkspace.disabledAriaLabel": "保存工作空间",
-    "xpack.graph.topNavMenu.saveWorkspace.disabledLabel": "保存",
    "xpack.graph.topNavMenu.saveWorkspace.disabledTooltip": "当前保存策略不允许对已保存的工作空间做任何更改",
    "xpack.graph.topNavMenu.saveWorkspace.enabledAriaLabel": "保存工作空间",
    "xpack.graph.topNavMenu.saveWorkspace.enabledLabel": "保存",