New management overview page and rename stack management to dashboard…

… management (#4287)

Support navigation changes for administrative features. This change includes
* Rename stack management to Dashboard management
* Add new management overview page
* Replace Stack Management to Management overview page on home app categories page
* Make home plugin optional for managemnet overview

Issue Resolved:
#4132

---------

Signed-off-by: Hailong Cui <ihailong@amazon.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>

CHANGELOG.md

@@ -33,6 +33,8 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add `color-scheme` to the root styling ([#4477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4477))
 - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412))
 - Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
+- New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
+
 
 ### 🐛 Bug Fixes
 

src/plugins/advanced_settings/public/management_app/mount_management_section.tsx

@@ -43,7 +43,7 @@ import { ComponentRegistry } from '../types';
 import './index.scss';
 
 const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
-  defaultMessage: 'Advanced Settings',
+  defaultMessage: 'Advanced settings',
 });
 const crumb = [{ text: title }];
 

src/plugins/advanced_settings/public/plugin.ts

@@ -37,7 +37,7 @@ import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSet
 const component = new ComponentRegistry();
 
 const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
-  defaultMessage: 'Advanced Settings',
+  defaultMessage: 'Advanced settings',
 });
 
 export class AdvancedSettingsPlugin

src/plugins/data_source_management/common/index.ts

@@ -4,4 +4,4 @@
  */
 
 export const PLUGIN_ID = 'dataSourceManagement';
-export const PLUGIN_NAME = 'Data Sources';
+export const PLUGIN_NAME = 'Data sources';

src/plugins/data_source_management/public/components/breadcrumbs.test.ts

@@ -9,7 +9,7 @@ import { mockDataSourceAttributesWithAuth } from '../mocks';
 describe('DataSourceManagement: breadcrumbs.ts', () => {
   test('get listing breadcrumb', () => {
     const bc = getListBreadcrumbs();
-    expect(bc[0].text).toBe('Data Sources');
+    expect(bc[0].text).toBe('Data sources');
     expect(bc[0].href).toBe('/');
   });
 

src/plugins/data_source_management/public/components/breadcrumbs.ts

@@ -10,7 +10,7 @@ export function getListBreadcrumbs() {
   return [
     {
       text: i18n.translate('dataSourcesManagement.dataSources.listBreadcrumb', {
-        defaultMessage: 'Data Sources',
+        defaultMessage: 'Data sources',
       }),
       href: `/`,
     },

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

@@ -34,16 +34,20 @@ import { AppUpdater } from 'opensearch-dashboards/public';
 import { i18n } from '@osd/i18n';
 import { sortBy } from 'lodash';
 
-import { DataSourcePluginStart } from 'src/plugins/data_source/public';
+import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { AppNavLinkStatus, DEFAULT_APP_CATEGORIES } from '../../../core/public';
 import { UrlForwardingSetup } from '../../url_forwarding/public';
 import { CreateDevToolArgs, DevToolApp, createDevToolApp } from './dev_tool';
 
 import './index.scss';
+import { ManagementOverViewPluginSetup } from '../../management_overview/public';
 
 export interface DevToolsSetupDependencies {
-  dataSource?: DataSourcePluginStart;
+  dataSource?: DataSourcePluginSetup;
+  urlForwarding: UrlForwardingSetup;
+  managementOverview?: ManagementOverViewPluginSetup;
 }
+
 export interface DevToolsSetup {
   /**
    * Register a developer tool. It will be available
@@ -58,40 +62,51 @@ export interface DevToolsSetup {
   register: (devTool: CreateDevToolArgs) => DevToolApp;
 }
 
-export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
+export class DevToolsPlugin implements Plugin<DevToolsSetup> {
   private readonly devTools = new Map<string, DevToolApp>();
   private appStateUpdater = new BehaviorSubject<AppUpdater>(() => ({}));
 
   private getSortedDevTools(): readonly DevToolApp[] {
     return sortBy([...this.devTools.values()], 'order');
   }
 
-  public setup(
-    coreSetup: CoreSetup<DevToolsSetupDependencies>,
-    { urlForwarding }: { urlForwarding: UrlForwardingSetup }
-  ) {
+  private title = i18n.translate('devTools.devToolsTitle', {
+    defaultMessage: 'Dev Tools',
+  });
+
+  public setup(coreSetup: CoreSetup, deps: DevToolsSetupDependencies) {
     const { application: applicationSetup, getStartServices } = coreSetup;
+    const { urlForwarding, managementOverview } = deps;
 
     applicationSetup.register({
       id: 'dev_tools',
-      title: i18n.translate('devTools.devToolsTitle', {
-        defaultMessage: 'Dev Tools',
-      }),
+      title: this.title,
       updater$: this.appStateUpdater,
       icon: '/plugins/home/public/assets/logos/opensearch_mark_default.svg',
-      order: 9010,
+      /* the order of dev tools, it shows as last item of management section */
+      order: 9070,
       category: DEFAULT_APP_CATEGORIES.management,
       mount: async (params: AppMountParameters) => {
         const { element, history } = params;
         element.classList.add('devAppWrapper');
 
-        const [core, devSetup] = await getStartServices();
+        const [core] = await getStartServices();
 
         const { renderApp } = await import('./application');
-        return renderApp(core, element, history, this.getSortedDevTools(), devSetup);
+        return renderApp(core, element, history, this.getSortedDevTools(), deps);
       },
     });
 
+    managementOverview?.register({
+      id: 'dev_tools',
+      title: this.title,
+      description: i18n.translate('devTools.devToolsDescription', {
+        defaultMessage:
+          'Use the console to set up and troubleshoot your OpenSearch environment with the REST API.',
+      }),
+      order: 9070,
+    });
+
     urlForwarding.forwardApp('dev_tools', 'dev_tools');
 
     return {

src/plugins/index_pattern_management/public/plugin.ts

@@ -56,7 +56,7 @@ export type IndexPatternManagementSetup = IndexPatternManagementServiceSetup;
 export type IndexPatternManagementStart = IndexPatternManagementServiceStart;
 
 const sectionsHeader = i18n.translate('indexPatternManagement.indexPattern.sectionsHeader', {
-  defaultMessage: 'Index Patterns',
+  defaultMessage: 'Index patterns',
 });
 
 const IPM_APP_ID = 'indexPatterns';

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

@@ -46,7 +46,7 @@ interface ManagementLandingPageProps {
   setBreadcrumbs: () => void;
 }
 
-export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLandingPageProps) => {
+export const ManagementLandingPage = ({ setBreadcrumbs }: ManagementLandingPageProps) => {
   useMount(() => {
     setBreadcrumbs();
   });
@@ -61,15 +61,14 @@ export const ManagementLandingPage = ({ version, setBreadcrumbs }: ManagementLan
             <h1>
               <FormattedMessage
                 id="management.landing.header"
-                defaultMessage="Welcome to Stack Management {version}"
-                values={{ version }}
+                defaultMessage="Welcome to Dashboards Management"
               />
             </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/components/management_sections.tsx

@@ -64,7 +64,7 @@ const sectionTip = i18n.translate('management.sections.section.tip', {
 });
 
 const opensearchDashboardsTitle = i18n.translate('management.sections.opensearchDashboardsTitle', {
-  defaultMessage: 'OpenSearch Dashboards',
+  defaultMessage: 'Dashboards Management',
 });
 
 const opensearchDashboardsTip = i18n.translate('management.sections.opensearchDashboardsTip', {

src/plugins/management/public/components/management_sidebar_nav/management_sidebar_nav.scss

@@ -1,5 +1,5 @@
 .mgtSideBarNav {
-  width: 210px;
+  width: 220px;
   margin-right: $euiSize;
 }
 

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,9 +49,11 @@ import {
   ManagementSectionsService,
   getSectionsServiceStartPrivate,
 } from './management_sections_service';
+import { ManagementOverViewPluginSetup } from '../../management_overview/public';
 
 interface ManagementSetupDependencies {
   home?: HomePublicPluginSetup;
+  managementOverview?: ManagementOverViewPluginSetup;
 }
 
 export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart> {
@@ -63,32 +65,17 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
 
   constructor(private initializerContext: PluginInitializerContext) {}
 
-  public setup(core: CoreSetup, { home }: ManagementSetupDependencies) {
-    const opensearchDashboardsVersion = this.initializerContext.env.packageInfo.version;
+  private title = i18n.translate('management.dashboardManagement.title', {
+    defaultMessage: 'Dashboards Management',
+  });
 
-    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,
-      });
-    }
+  public setup(core: CoreSetup, { home, managementOverview }: ManagementSetupDependencies) {
+    const opensearchDashboardsVersion = this.initializerContext.env.packageInfo.version;
 
     core.application.register({
       id: MANAGEMENT_APP_ID,
-      title: i18n.translate('management.stackManagement.title', {
-        defaultMessage: 'Stack Management',
-      }),
-      order: 9040,
+      title: this.title,
+      order: 9030,
       icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
       category: DEFAULT_APP_CATEGORIES.management,
       updater$: this.appUpdater,
@@ -104,6 +91,16 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
       },
     });
 
+    managementOverview?.register({
+      id: MANAGEMENT_APP_ID,
+      title: this.title,
+      description: i18n.translate('management.dashboardManagement.description', {
+        defaultMessage:
+          'Manage Dashboards saved objects and data source connections. You can also modify advanced settings for Dashboards.',
+      }),
+      order: 9030,
+    });
+
     return {
       sections: this.managementSections.setup(),
     };

src/plugins/management/public/utils/breadcrumbs.ts

@@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n';
 
 export const MANAGEMENT_BREADCRUMB = {
   text: i18n.translate('management.breadcrumb', {
-    defaultMessage: 'Stack Management',
+    defaultMessage: 'Dashboards Management',
   }),
   href: '/',
 };

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,9 @@
+{
+  "id": "managementOverview",
+  "version": "opensearchDashboards",
+  "ui": true,
+  "server": false,
+  "requiredPlugins": ["navigation"],
+  "optionalPlugins": ["home"],
+  "requiredBundles": ["home"]
+}

src/plugins/management_overview/public/application.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import ReactDOM from 'react-dom';
+import { I18nProvider, FormattedMessage } from '@osd/i18n/react';
+import React from 'react';
+import { EuiFlexGrid, EuiFlexItem, EuiPage, EuiPageBody, EuiSpacer, EuiTitle } from '@elastic/eui';
+import useObservable from 'react-use/lib/useObservable';
+import { ApplicationStart, ChromeStart, CoreStart } from '../../../core/public';
+import { OverviewApp } from '.';
+import { OverviewCard } from './components/overview_card';
+
+export interface ManagementOverviewProps {
+  application: ApplicationStart;
+  chrome: ChromeStart;
+  overviewApps?: OverviewApp[];
+}
+
+function ManagementOverviewWrapper(props: ManagementOverviewProps) {
+  const { chrome, application, overviewApps } = props;
+
+  const hiddenAppIds =
+    useObservable(chrome.navLinks.getNavLinks$())
+      ?.filter((link) => link.hidden)
+      .map((link) => link.id) || [];
+
+  const availableApps = overviewApps?.filter((app) => hiddenAppIds.indexOf(app.id) === -1);
+
+  return (
+    <EuiPage restrictWidth={1200}>
+      <EuiPageBody component="main">
+        <EuiTitle size="l">
+          <h1>
+            <FormattedMessage id="management.overview.overviewTitle" defaultMessage="Overview" />
+          </h1>
+        </EuiTitle>
+        <EuiSpacer />
+        <EuiFlexGrid columns={3}>
+          {availableApps?.map((app) => (
+            <EuiFlexItem key={app.id}>
+              <OverviewCard
+                {...app}
+                onClick={() => {
+                  application.navigateToApp(app.id);
+                }}
+              />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}
+
+export function renderApp(
+  { application, chrome }: CoreStart,
+  overviewApps: OverviewApp[],
+  element: HTMLElement
+) {
+  ReactDOM.render(
+    <I18nProvider>
+      <ManagementOverviewWrapper
+        chrome={chrome}
+        application={application}
+        overviewApps={overviewApps}
+      />
+    </I18nProvider>,
+    element
+  );
+
+  return () => {
+    chrome.docTitle.reset();
+    ReactDOM.unmountComponentAtNode(element);
+  };
+}