New management overview page and rename stack management to dashboard management

CHANGELOG.md

@@ -78,6 +78,12 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### 🔩 Tests
 
+## [2.9.0 - TBD]
+
+### 📈 Features/Enhancements
+
+- New management overview page and rename stack management to dashboard management ([#4287](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4287))
+
 ## [2.8.0 - 2023-06-06](https://github.com/opensearch-project/OpenSearch-Dashboards/releases/tag/2.8.0)
 
 ### Deprecations

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

@@ -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,16 @@ import { UrlForwardingSetup } from '../../url_forwarding/public';
 import { CreateDevToolArgs, DevToolApp, createDevToolApp } from './dev_tool';
 
 import './index.scss';
+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
@@ -66,6 +72,10 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
     return sortBy([...this.devTools.values()], 'order');
   }
 
+  private title = i18n.translate('devTools.devToolsTitle', {
+    defaultMessage: 'Dev Tools',
+  });
+
   public setup(
     coreSetup: CoreSetup<DevToolsSetupDependencies>,
     { urlForwarding }: { urlForwarding: UrlForwardingSetup }
@@ -74,12 +84,10 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, void> {
 
     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,
+      order: 9070,
       category: DEFAULT_APP_CATEGORIES.management,
       mount: async (params: AppMountParameters) => {
         const { element, history } = params;
@@ -109,9 +117,19 @@ 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 {
+      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,
+      });
     }
   }
 

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,11 +49,16 @@ import {
   ManagementSectionsService,
   getSectionsServiceStartPrivate,
 } from './management_sections_service';
+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();
 
@@ -63,32 +68,17 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
 
   constructor(private initializerContext: PluginInitializerContext) {}
 
+  private title = i18n.translate('management.dashboardManagement.title', {
+    defaultMessage: 'Dashboards Management',
+  });
+
   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',
-      }),
-      order: 9040,
+      title: this.title,
+      order: 9030,
       icon: '/plugins/home/assets/logos/opensearch_mark_default.svg',
       category: DEFAULT_APP_CATEGORIES.management,
       updater$: this.appUpdater,
@@ -109,7 +99,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 +114,18 @@ export class ManagementPlugin implements Plugin<ManagementSetup, ManagementStart
       });
     }
 
+    if (managementOverview && this.hasAnyEnabledApps) {
+      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 {};
   }
 }

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

src/plugins/management_overview/public/application.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { ApplicationStart, CoreStart } from '../../../core/public';
+import { OverviewApp } from '.';
+import { OverviewCard } from './components/overview_card';
+
+export interface ManagementOverviewProps {
+  application: ApplicationStart;
+  overviewApps?: OverviewApp[];
+}
+
+function ManagementOverviewWrapper(props: ManagementOverviewProps) {
+  const { application, overviewApps } = props;
+
+  return (
+    <EuiPage restrictWidth={1200}>
+      <EuiPageBody component="main">
+        <EuiTitle size="l">
+          <h1>
+            <FormattedMessage id="management.overview.overviewTitle" defaultMessage="Overview" />
+          </h1>
+        </EuiTitle>
+        <EuiSpacer />
+        <EuiFlexGrid columns={3}>
+          {overviewApps?.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 application={application} overviewApps={overviewApps} />
+    </I18nProvider>,
+    element
+  );
+
+  return () => {
+    chrome.docTitle.reset();
+    ReactDOM.unmountComponentAtNode(element);
+  };
+}