feat: register data source as application (#101)

* feat: register data source as application Signed-off-by: SuZhou-Joe <suzhou@amazon.com> * feat: rename mountManagementSection Signed-off-by: SuZhou-Joe <suzhou@amazon.com> --------- Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
ruanyl · Aug 24, 2023 · 5a8e5b8 · 5a8e5b8
1 parent 8cc4ea2
commit 5a8e5b8
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 47 deletions.
diff --git a/src/plugins/data_source_management/opensearch_dashboards.json b/src/plugins/data_source_management/opensearch_dashboards.json
@@ -3,7 +3,7 @@
   "version": "opensearchDashboards",
   "server": false,
   "ui": true,
-  "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
+  "requiredPlugins": ["dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
   "requiredBundles": ["opensearchDashboardsReact"],
   "extraPublicDirs": ["public/components/utils"]

diff --git a/src/plugins/data_source_management/public/components/page_wrapper/index.ts b/src/plugins/data_source_management/public/components/page_wrapper/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { PageWrapper } from './page_wrapper';
diff --git a/src/plugins/data_source_management/public/components/page_wrapper/page_wrapper.tsx b/src/plugins/data_source_management/public/components/page_wrapper/page_wrapper.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiPageContent } from '@elastic/eui';
+import React from 'react';
+
+export const PageWrapper = (props: { fullWidth?: boolean; children?: React.ReactChild }) => {
+  return (
+    <EuiPageContent
+      style={props.fullWidth ? {} : { maxWidth: '75%', marginTop: '20px' }}
+      hasShadow={false}
+      hasBorder={false}
+      panelPaddingSize="none"
+      horizontalPosition="center"
+      color="transparent"
+      {...props}
+    />
+  );
+};
diff --git a/src/plugins/data_source_management/public/management_app/index.ts b/src/plugins/data_source_management/public/management_app/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { mountManagementSection } from './mount_management_section';
+export { mountDataSourcesManagementSection } from './mount_management_section';
diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
@@ -3,33 +3,42 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { StartServicesAccessor } from 'src/core/public';
+import {
+  AppMountParameters,
+  ChromeBreadcrumb,
+  ScopedHistory,
+  StartServicesAccessor,
+} from 'src/core/public';
 
 import { I18nProvider } from '@osd/i18n/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
-import { DataPublicPluginStart } from 'src/plugins/data/public';
-import { ManagementAppMountParams } from '../../../management/public';
-
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
 import { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard';
 import { DataSourceTableWithRouter } from '../components/data_source_table';
-import { DataSourceManagementContext } from '../types';
+import { DataSourceManagementContext, DataSourceManagementStartDependencies } from '../types';
 import { EditDataSourceWithRouter } from '../components/edit_data_source';
+import { PageWrapper } from '../components/page_wrapper';
+import { reactRouterNavigate } from '../../../opensearch_dashboards_react/public';
 
-export interface DataSourceManagementStartDependencies {
-  data: DataPublicPluginStart;
-}
-
-export async function mountManagementSection(
+export async function mountDataSourcesManagementSection(
   getStartServices: StartServicesAccessor<DataSourceManagementStartDependencies>,
-  params: ManagementAppMountParams
+  params: AppMountParameters
 ) {
   const [
     { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
   ] = await getStartServices();
 
+  const setBreadcrumbsScoped = (crumbs: ChromeBreadcrumb[] = []) => {
+    const wrapBreadcrumb = (item: ChromeBreadcrumb, scopedHistory: ScopedHistory) => ({
+      ...item,
+      ...(item.href ? reactRouterNavigate(scopedHistory, item.href) : {}),
+    });
+
+    chrome.setBreadcrumbs([...crumbs.map((item) => wrapBreadcrumb(item, params.history))]);
+  };
+
   const deps: DataSourceManagementContext = {
     chrome,
     application,
@@ -39,27 +48,29 @@ export async function mountManagementSection(
     overlays,
     http,
     docLinks,
-    setBreadcrumbs: params.setBreadcrumbs,
+    setBreadcrumbs: setBreadcrumbsScoped,
   };
 
   ReactDOM.render(
-    <OpenSearchDashboardsContextProvider services={deps}>
-      <I18nProvider>
-        <Router history={params.history}>
-          <Switch>
-            <Route path={['/create']}>
-              <CreateDataSourceWizardWithRouter />
-            </Route>
-            <Route path={['/:id']}>
-              <EditDataSourceWithRouter />
-            </Route>
-            <Route path={['/']}>
-              <DataSourceTableWithRouter />
-            </Route>
-          </Switch>
-        </Router>
-      </I18nProvider>
-    </OpenSearchDashboardsContextProvider>,
+    <PageWrapper>
+      <OpenSearchDashboardsContextProvider services={deps}>
+        <I18nProvider>
+          <Router history={params.history}>
+            <Switch>
+              <Route path={['/create']}>
+                <CreateDataSourceWizardWithRouter />
+              </Route>
+              <Route path={['/:id']}>
+                <EditDataSourceWithRouter />
+              </Route>
+              <Route path={['/']}>
+                <DataSourceTableWithRouter />
+              </Route>
+            </Switch>
+          </Router>
+        </I18nProvider>
+      </OpenSearchDashboardsContextProvider>
+    </PageWrapper>,
     params.element
   );
 

diff --git a/src/plugins/data_source_management/public/plugin.ts b/src/plugins/data_source_management/public/plugin.ts
@@ -3,13 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import {
+  AppMountParameters,
+  CoreSetup,
+  CoreStart,
+  DEFAULT_APP_CATEGORIES,
+  Plugin,
+  StartServicesAccessor,
+} from '../../../core/public';
 
 import { PLUGIN_NAME } from '../common';
 
 import { ManagementSetup } from '../../management/public';
 import { IndexPatternManagementSetup } from '../../index_pattern_management/public';
 import { DataSourceColumn } from './components/data_source_column/data_source_column';
+import { DataSourceManagementStartDependencies } from './types';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -20,31 +28,26 @@ const DSM_APP_ID = 'dataSources';
 
 export class DataSourceManagementPlugin
   implements Plugin<void, void, DataSourceManagementSetupDependencies> {
-  public setup(
-    core: CoreSetup,
-    { management, indexPatternManagement }: DataSourceManagementSetupDependencies
-  ) {
-    const opensearchDashboardsSection = management.sections.section.opensearchDashboards;
-
-    if (!opensearchDashboardsSection) {
-      throw new Error('`opensearchDashboards` management section not found.');
-    }
-
+  public setup(core: CoreSetup, { indexPatternManagement }: DataSourceManagementSetupDependencies) {
     const savedObjectPromise = core
       .getStartServices()
       .then(([coreStart]) => coreStart.savedObjects);
     const httpPromise = core.getStartServices().then(([coreStart]) => coreStart.http);
     const column = new DataSourceColumn(savedObjectPromise, httpPromise);
     indexPatternManagement.columns.register(column);
 
-    opensearchDashboardsSection.registerApp({
+    core.application.register({
       id: DSM_APP_ID,
       title: PLUGIN_NAME,
       order: 1,
-      mount: async (params) => {
-        const { mountManagementSection } = await import('./management_app');
-
-        return mountManagementSection(core.getStartServices, params);
+      category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
+      mount: async (params: AppMountParameters) => {
+        const { mountDataSourcesManagementSection } = await import('./management_app');
+
+        return mountDataSourcesManagementSection(
+          core.getStartServices as StartServicesAccessor<DataSourceManagementStartDependencies>,
+          params
+        );
       },
     });
   }

diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
@@ -14,6 +14,7 @@ import {
   HttpSetup,
 } from 'src/core/public';
 import { ManagementAppMountParams } from 'src/plugins/management/public';
+import { DataPublicPluginStart } from 'src/plugins/data/public';
 import { SavedObjectAttributes } from 'src/core/types';
 import { i18n } from '@osd/i18n';
 import { SigV4ServiceName } from '../../data_source/common/data_sources';
@@ -115,3 +116,7 @@ export interface SigV4Content extends SavedObjectAttributes {
   region: string;
   service?: SigV4ServiceName;
 }
+
+export interface DataSourceManagementStartDependencies {
+  data: DataPublicPluginStart;
+}