feat: register data source as application (opensearch-project#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>
Hailong-am · Sep 15, 2023 · 3d9fb63 · 3d9fb63
1 parent 83f7759
commit 3d9fb63
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;
+}