New Navigation UX change

public/pages/Main/Main.tsx

@@ -501,7 +501,8 @@ export default class Main extends Component<MainProps, MainState> {
                             <ModalRoot services={services} />
                             <EuiPage restrictWidth="100%">
                               {/* Hide side navigation bar when creating or editing rollup job*/}
-                              {!HIDDEN_NAV_ROUTES.includes(pathname) &&
+                              {!core.chrome.navGroup.getNavGroupEnabled() &&
+                              !HIDDEN_NAV_ROUTES.includes(pathname) &&
                               !HIDDEN_NAV_STARTS_WITH_ROUTE.some((item) => pathname.startsWith(item)) ? (
                                 <EuiPageSideBar style={{ minWidth: 200 }}>
                                   <EuiSideNav style={{ width: 200 }} items={sideNav} />

public/plugin.ts

@@ -6,12 +6,15 @@
 import { i18n } from "@osd/i18n";
 import { IndexManagementPluginStart, IndexManagementPluginSetup } from ".";
 import {
+  AppCategory,
   AppMountParameters,
   CoreSetup,
   CoreStart,
   DEFAULT_APP_CATEGORIES,
+  DEFAULT_NAV_GROUPS,
   Plugin,
   PluginInitializerContext,
+  WorkspaceAvailability,
 } from "../../../src/core/public";
 import { actionRepoSingleton } from "./pages/VisualCreatePolicy/utils/helpers";
 import { ROUTES } from "./utils/constants";
@@ -24,6 +27,21 @@ interface IndexManagementSetupDeps {
   dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
+const ISM_CATEGORIES: Record<string, AppCategory> = Object.freeze({
+  indexes: {
+    id: "indexes",
+    label: "Indexes",
+    order: 2000,
+    euiIconType: "managementApp",
+  },
+  index_backup_and_recovery: {
+    id: "index_backup_and_recovery",
+    label: "Index Backup and Recovery",
+    order: 3000,
+    euiIconType: "managementApp",
+  },
+});
+
 export class IndexManagementPlugin implements Plugin<IndexManagementPluginSetup, IndexManagementPluginStart, IndexManagementSetupDeps> {
   constructor(private readonly initializerContext: PluginInitializerContext) {
     // can retrieve config from initializerContext
@@ -32,6 +50,12 @@ export class IndexManagementPlugin implements Plugin<IndexManagementPluginSetup,
   public setup(core: CoreSetup, { managementOverview, dataSourceManagement }: IndexManagementSetupDeps): IndexManagementPluginSetup {
     JobHandlerRegister(core);
 
+    const mountWrapper = async (params: AppMountParameters, redirect: string) => {
+      const { renderApp } = await import("./index_management_app");
+      const [coreStart, depsStart] = await core.getStartServices();
+      return renderApp(coreStart, depsStart, params, redirect, dataSourceManagement);
+    };
+
     if (managementOverview) {
       managementOverview.register({
         id: "opensearch_index_management_dashboards",
@@ -52,11 +76,15 @@ export class IndexManagementPlugin implements Plugin<IndexManagementPluginSetup,
       });
     }
 
+    const imApplicationID = "opensearch_index_management_dashboards";
+    const smApplicationID = "opensearch_snapshot_management_dashboards";
+
     core.application.register({
-      id: "opensearch_index_management_dashboards",
+      id: imApplicationID,
       title: "Index Management",
       order: 9010,
       category: DEFAULT_APP_CATEGORIES.management,
+      workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import("./index_management_app");
         const [coreStart, depsStart] = await core.getStartServices();
@@ -65,17 +93,232 @@ export class IndexManagementPlugin implements Plugin<IndexManagementPluginSetup,
     });
 
     core.application.register({
-      id: "opensearch_snapshot_management_dashboards",
+      id: smApplicationID,
       title: "Snapshot Management",
       order: 9020,
       category: DEFAULT_APP_CATEGORIES.management,
+      workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
       mount: async (params: AppMountParameters) => {
         const { renderApp } = await import("./index_management_app");
         const [coreStart, depsStart] = await core.getStartServices();
         return renderApp(coreStart, depsStart, params, ROUTES.SNAPSHOT_POLICIES, dataSourceManagement);
       },
     });
 
+    // Register with category and use case information
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.dataAdministration, [
+      {
+        id: imApplicationID,
+        category: DEFAULT_APP_CATEGORIES.management,
+      },
+    ]);
+
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.dataAdministration, [
+      {
+        id: smApplicationID,
+        category: DEFAULT_APP_CATEGORIES.management,
+      },
+    ]);
+
+    // In-app navigation registration
+
+    if (core.chrome.navGroup.getNavGroupEnabled()) {
+      // indices route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.INDICES)}`,
+        title: "Indexes",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.INDICES);
+        },
+      });
+
+      // policy managed index route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.MANAGED_INDICES)}`,
+        title: "Policy Managed Indexes",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.MANAGED_INDICES);
+        },
+      });
+
+      // data streams route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.DATA_STREAMS)}`,
+        title: "Data Streams",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.DATA_STREAMS);
+        },
+      });
+
+      // index alias route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.ALIASES)}`,
+        title: "Index Aliases",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.ALIASES);
+        },
+      });
+
+      // index state management policies route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.INDEX_POLICIES)}`,
+        title: "Index State Management Policies",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.INDEX_POLICIES);
+        },
+      });
+
+      // index templates route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.TEMPLATES)}`,
+        title: "Index Templates",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.TEMPLATES);
+        },
+      });
+
+      // notification settings route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.NOTIFICATIONS)}`,
+        title: "Notification Settings",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.NOTIFICATIONS);
+        },
+      });
+
+      // rollup jobs route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.ROLLUPS)}`,
+        title: "Rollup Jobs",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.ROLLUPS);
+        },
+      });
+
+      // transform jobs route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.TRANSFORMS)}`,
+        title: "Transform Jobs",
+        order: 8040,
+        category: ISM_CATEGORIES.indexes,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.TRANSFORMS);
+        },
+      });
+
+      // index snapshots route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.SNAPSHOTS)}`,
+        title: "Index Snapshots",
+        order: 8040,
+        category: ISM_CATEGORIES.index_backup_and_recovery,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.SNAPSHOTS);
+        },
+      });
+
+      // snapshot policies route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.SNAPSHOT_POLICIES)}`,
+        title: "Snapshot Policies",
+        order: 8040,
+        category: ISM_CATEGORIES.index_backup_and_recovery,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.SNAPSHOT_POLICIES);
+        },
+      });
+
+      // snapshot repositories route
+      core.application.register({
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.REPOSITORIES)}`,
+        title: "Snapshot Repositories",
+        order: 8040,
+        category: ISM_CATEGORIES.index_backup_and_recovery,
+        workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+        mount: async (params: AppMountParameters) => {
+          return mountWrapper(params, ROUTES.REPOSITORIES);
+        },
+      });
+    }
+
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.dataAdministration, [
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.INDICES)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.MANAGED_INDICES)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.DATA_STREAMS)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.ALIASES)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.INDEX_POLICIES)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.TEMPLATES)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.NOTIFICATIONS)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.ROLLUPS)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.TRANSFORMS)}`,
+        category: ISM_CATEGORIES.indexes,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.SNAPSHOTS)}`,
+        category: ISM_CATEGORIES.index_backup_and_recovery,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.SNAPSHOT_POLICIES)}`,
+        category: ISM_CATEGORIES.index_backup_and_recovery,
+      },
+      {
+        id: `opensearch_index_management_dashboards_${encodeURIComponent(ROUTES.REPOSITORIES)}`,
+        category: ISM_CATEGORIES.index_backup_and_recovery,
+      },
+    ]);
+
     return {
       registerAction: (actionType, uiActionCtor, defaultAction) => {
         actionRepoSingleton.registerAction(actionType, uiActionCtor, defaultAction);

yarn.lock

@@ -2461,6 +2461,11 @@ glob-parent@^6.0.0:
   dependencies:
     is-glob "^4.0.3"
 
+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
 glob@^7.1.3, glob@^7.1.4, glob@^7.2.3:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -5074,10 +5079,10 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-"webpack@npm:@amoo-miki/webpack@4.46.0-rc.2":
-  version "4.46.0-rc.2"
-  resolved "https://registry.yarnpkg.com/@amoo-miki/webpack/-/webpack-4.46.0-rc.2.tgz#36824597c14557a7bb0a8e13203e30275e7b02bd"
-  integrity sha512-Y/ZqxTHOoDF1kz3SR63Y9SZGTDUpZNNFrisTRHofWhP8QvNX3LMN+TCmEP56UfLaiLVKMcaiFjx8kFb2TgyBaQ==
+"webpack@npm:@amoo-miki/webpack@4.46.0-xxhash.1":
+  version "4.46.0-xxhash.1"
+  resolved "https://registry.yarnpkg.com/@amoo-miki/webpack/-/webpack-4.46.0-xxhash.1.tgz#e8fdb0399d36715e558ad35e3ff70fd1d4ea47a7"
+  integrity sha512-gPwQMqfrE9326g+rZoU4BPOfcYvEcAR0XxfpV9AGUcRwl2oHoqEwq7nxSWchilpGV1i9XI7mCa8u8k4ePz6ziA==
   dependencies:
     "@node-rs/xxhash" "^1.3.0"
     "@webassemblyjs/ast" "1.9.0"
@@ -5090,11 +5095,11 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     chrome-trace-event "^1.0.2"
     enhanced-resolve "^4.5.0"
     eslint-scope "^4.0.3"
+    glob-to-regexp "^0.4.1"
     json-parse-better-errors "^1.0.2"
     loader-runner "^2.4.0"
     loader-utils "^2.0.4"
     memory-fs "^0.4.1"
-    micromatch "^3.1.10"
     mkdirp "^0.5.3"
     neo-async "^2.6.1"
     node-libs-browser "^2.2.1"