navigation changes and overview page

Signed-off-by: Hailong Cui <ihailong@amazon.com>

src/core/types/index.ts

@@ -39,3 +39,4 @@ export * from './ui_settings';
 export * from './saved_objects';
 export * from './serializable';
 export * from './custom_branding';
+export * from './plugin_pages';

src/core/types/plugin_pages.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface PluginPages {
+  title: string;
+  url: string;
+  order: number;
+}

src/plugins/dev_tools/opensearch_dashboards.json

@@ -3,7 +3,7 @@
   "version": "opensearchDashboards",
   "server": false,
   "ui": true,
-  "optionalPlugins": ["dataSource"],
+  "optionalPlugins": ["dataSource", "managementOverview"],
   "requiredPlugins": ["urlForwarding"],
   "requiredBundles": ["dataSourceManagement"]
 }

src/plugins/dev_tools/public/plugin.ts

@@ -29,7 +29,7 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { Plugin, CoreSetup, AppMountParameters } from 'src/core/public';
+import { Plugin, CoreSetup, AppMountParameters, CoreStart } from 'src/core/public';
 import { AppUpdater } from 'opensearch-dashboards/public';
 import { i18n } from '@osd/i18n';
 import { sortBy } from 'lodash';
@@ -40,10 +40,17 @@ import { UrlForwardingSetup } from '../../url_forwarding/public';
 import { CreateDevToolArgs, DevToolApp, createDevToolApp } from './dev_tool';
 
 import './index.scss';
+import { PluginPages } from '../../../core/types';
+import { ManagementOverViewPluginStart } from '../../management_overview/public';
 
 export interface DevToolsSetupDependencies {
   dataSource?: DataSourcePluginStart;
 }
+
+export interface DevToolsStartDependencies {
+  managementOverview?: ManagementOverViewPluginStart;
+}
+
 export interface DevToolsSetup {
   /**
    * Register a developer tool. It will be available
@@ -79,7 +86,7 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
       }),
       updater$: this.appStateUpdater,
       icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
-      order: 9010,
+      order: 9070,
       category: DEFAULT_APP_CATEGORIES.management,
       mount: async (params: AppMountParameters) => {
         const { element, history } = params;
@@ -109,9 +116,26 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
     };
   }
 
-  public start() {
+  public start(core: CoreStart, { managementOverview }: DevToolsStartDependencies) {
     if (this.getSortedDevTools().length === 0) {
       this.appStateUpdater.next(() => ({ navLinkStatus: AppNavLinkStatus.hidden }));
+    } else {
+      const features: PluginPages[] = this.getSortedDevTools().map((devApp) => {
+        return {
+          title: devApp.title,
+          url: `#/${devApp.id}`,
+          order: devApp.order,
+        };
+      });
+
+      managementOverview?.register({
+        id: 'dev_tools',
+        title: i18n.translate('devTools.devToolsTitle', {
+          defaultMessage: 'Dev Tools',
+        }),
+        order: 9070,
+        pages: features,
+      });
     }
   }
 

src/plugins/management/opensearch_dashboards.json

@@ -3,6 +3,6 @@
   "version": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "optionalPlugins": ["home"],
-  "requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils", "home"]
+  "optionalPlugins": ["home", "managementOverview"],
+  "requiredBundles": ["opensearchDashboardsReact", "opensearchDashboardsUtils"]
 }

src/plugins/management/public/components/landing/landing.tsx

@@ -61,15 +61,15 @@ export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLan
             <h1>
               <FormattedMessage
                 id="management.landing.header"
-                defaultMessage="Welcome to Stack Management {version}"
+                defaultMessage="Welcome to Dashboard Management {version}"
                 values={{ version }}
               />
             </h1>
           </EuiTitle>
           <EuiText>
             <FormattedMessage
               id="management.landing.subhead"
-              defaultMessage="Manage your indices, index patterns, saved objects, OpenSearch Dashboards settings, and more."
+              defaultMessage="Manage your index patterns, saved objects, OpenSearch Dashboards settings, and more."
             />
           </EuiText>
         </div>

src/plugins/management/public/plugin.ts

@@ -31,7 +31,7 @@
 import { i18n } from '@osd/i18n';
 import { BehaviorSubject } from 'rxjs';
 import { ManagementSetup, ManagementStart } from './types';
-import { FeatureCatalogueCategory, HomePublicPluginSetup } from '../../home/public';
+import { HomePublicPluginSetup } from '../../home/public';
 import {
   CoreSetup,
   CoreStart,
@@ -49,11 +49,17 @@ import {
   ManagementSectionsService,
   getSectionsServiceStartPrivate,
 } from './management_sections_service';
+import { PluginPages } from '../../../core/types';
+import { ManagementOverViewPluginStart } from '../../management_overview/public';
 
 interface ManagementSetupDependencies {
   home?: HomePublicPluginSetup;
 }
 
+interface ManagementStartDependencies {
+  managementOverview?: ManagementOverViewPluginStart;
+}
+
 export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart> {
   private readonly managementSections = new ManagementSectionsService();
 
@@ -66,29 +72,12 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
   public setup(core: CoreSetup, { home }: ManagementSetupDependencies) {
     const opensearchDashboardsVersion = this.initializerContext.env.packageInfo.version;
 
-    if (home) {
-      home.featureCatalogue.register({
-        id: 'stack-management',
-        title: i18n.translate('management.stackManagement.managementLabel', {
-          defaultMessage: 'Stack Management',
-        }),
-        description: i18n.translate('management.stackManagement.managementDescription', {
-          defaultMessage: 'Your center console for managing the OpenSearch Stack.',
-        }),
-        icon: 'managementApp',
-        path: '/app/management',
-        showOnHomePage: false,
-        category: FeatureCatalogueCategory.ADMIN,
-        visible: () => this.hasAnyEnabledApps,
-      });
-    }
-
     core.application.register({
       id: MANAGEMENT_APP_ID,
       title: i18n.translate('management.stackManagement.title', {
-        defaultMessage: 'Stack Management',
+        defaultMessage: 'Dashboard Management',
       }),
-      order: 9040,
+      order: 9030,
       icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
       category: DEFAULT_APP_CATEGORIES.management,
       updater$: this.appUpdater,
@@ -109,7 +98,7 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
     };
   }
 
-  public start(core: CoreStart) {
+  public start(core: CoreStart, { managementOverview }: ManagementStartDependencies) {
     this.managementSections.start({ capabilities: core.application.capabilities });
     this.hasAnyEnabledApps = getSectionsServiceStartPrivate()
       .getSectionsEnabled()
@@ -124,6 +113,31 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
       });
     }
 
+    if (managementOverview) {
+      const enabledSections = getSectionsServiceStartPrivate().getSectionsEnabled();
+      const pluginPages: PluginPages[] = enabledSections
+        .map((section) => section.apps)
+        .flat()
+        .map((app) => {
+          return {
+            title: app.title,
+            url: app.basePath,
+            order: app.order,
+          };
+        });
+
+      if (pluginPages) {
+        managementOverview.register({
+          id: MANAGEMENT_APP_ID,
+          title: i18n.translate('management.stackManagement.title', {
+            defaultMessage: 'Dashboard Management',
+          }),
+          order: 9030,
+          pages: pluginPages,
+        });
+      }
+    }
+
     return {};
   }
 }

src/plugins/management_overview/common/constants.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const MANAGEMENT_OVERVIEW_PLUGIN_ID = 'opensearch_management_overview';

src/plugins/management_overview/opensearch_dashboards.json

@@ -0,0 +1,8 @@
+{
+  "id": "managementOverview",
+  "version": "opensearchDashboards",
+  "ui": true,
+  "server": false,
+  "requiredPlugins": ["navigation", "home"],
+  "optionalPlugins": []
+}

src/plugins/management_overview/public/application.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import ReactDOM from 'react-dom';
+import { I18nProvider } from '@osd/i18n/react';
+import React from 'react';
+import { EuiFlexGrid, EuiFlexItem, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { ApplicationStart, CoreStart } from '../../../core/public';
+import { OverviewApp } from './overview_app';
+import { OverviewCard } from './components/overview_card';
+
+export interface ManagementOverviewProps {
+  application: ApplicationStart;
+  overviewApps?: OverviewApp[];
+}
+
+function ManagementOverviewWrapper(props: ManagementOverviewProps) {
+  const { application, overviewApps } = props;
+
+  const onClick = (appId: string) => {
+    return (url: string) => {
+      const pageUrl = application.getUrlForApp(appId, { path: url });
+      application.navigateToUrl(pageUrl);
+    };
+  };
+
+  const title = i18n.translate('core.ui.managementNavList.label', {
+    defaultMessage: 'Management',
+  });
+
+  return (
+    <EuiPanel style={{ padding: '20px' }}>
+      <EuiTitle size="l">
+        <h1>{title}</h1>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiFlexGrid columns={3}>
+        {overviewApps?.map((app) => (
+          <EuiFlexItem key={app.title}>
+            <OverviewCard title={app.title} pages={app.pages || []} onClick={onClick(app.id)} />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGrid>
+    </EuiPanel>
+  );
+}
+
+export function renderApp(
+  { application, chrome }: CoreStart,
+  overviewApps: OverviewApp[],
+  element: HTMLElement
+) {
+  ReactDOM.render(
+    <I18nProvider>
+      <ManagementOverviewWrapper application={application} overviewApps={overviewApps} />
+    </I18nProvider>,
+    element
+  );
+
+  return () => {
+    chrome.docTitle.reset();
+    ReactDOM.unmountComponentAtNode(element);
+  };
+}