[Multiple Datasource] Create examples about how to consume data sourc…

…e components (#6302) (#6331) * fix lint error * show useMemo * address comments --------- (cherry picked from commit c0e8d4a) Signed-off-by: Lu Yu <nluyu@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com>
opensearch-project · Apr 3, 2024 · 6c7a823 · 6c7a823
1 parent 8b1cf1a
commit 6c7a823
Show file tree

Hide file tree

Showing 17 changed files with 1,407 additions and 0 deletions.
diff --git a/examples/multiple_data_source_examples/README.md b/examples/multiple_data_source_examples/README.md
@@ -0,0 +1,12 @@
+## Developer examples
+
+The multiple data source examples adds a few pages to the developer example which is a landing page where developers go to search for working, tested examples of various developer 
+services. This example using the developerExamples `register` function offered on the `setup` contract to register the app.
+
+To run the example in OpenSearch Dashboards with developer examples:
+
+```
+yarn start --run-examples
+```
+
+Then navigate to "Developer examples" and click on "Multiple Data Source Integration"
diff --git a/examples/multiple_data_source_examples/opensearch_dashboards.json b/examples/multiple_data_source_examples/opensearch_dashboards.json
@@ -0,0 +1,10 @@
+{
+    "id": "multipleDataSourceExamples",
+    "version": "0.0.1",
+    "opensearchDashboardsVersion": "opensearchDashboards",
+    "server": false,
+    "ui": true,
+    "requiredPlugins": ["developerExamples", "navigation"],
+    "optionalPlugins": ["dataSource", "dataSourceManagement"]
+  }
+
diff --git a/examples/multiple_data_source_examples/public/application.tsx b/examples/multiple_data_source_examples/public/application.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { CoreStart, AppMountParameters } from '../../../src/core/public';
+import { Home } from './components/home';
+
+export const renderApp = (
+  { notifications, http, savedObjects, application }: CoreStart,
+  dataSource: DataSourcePluginSetup,
+  dataSourceManagement: DataSourceManagementPluginSetup,
+  { appBasePath, element, setHeaderActionMenu }: AppMountParameters,
+  navigation: NavigationPublicPluginStart
+) => {
+  ReactDOM.render(
+    <Home
+      basename={appBasePath}
+      notifications={notifications}
+      http={http}
+      savedObjects={savedObjects}
+      dataSourceEnabled={dataSource.dataSourceEnabled}
+      setActionMenu={setHeaderActionMenu}
+      dataSourceManagement={dataSourceManagement}
+      navigateToApp={application.navigateToApp}
+      navigation={navigation}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};
diff --git a/examples/multiple_data_source_examples/public/components/constants.ts b/examples/multiple_data_source_examples/public/components/constants.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { EuiBasicTableColumn } from '@elastic/eui';
+import { ComponentProp } from './types';
+
+export const COLUMNS: Array<EuiBasicTableColumn<ComponentProp>> = [
+  {
+    field: 'name',
+    name: 'Name',
+  },
+  {
+    field: 'required',
+    name: 'Required',
+  },
+  {
+    field: 'defaultValue',
+    name: 'Default Value',
+  },
+  {
+    field: 'description',
+    name: 'Description',
+  },
+  {
+    field: 'deprecated',
+    name: 'Deprecated',
+  },
+];
diff --git a/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx
@@ -0,0 +1,144 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import {
+  EuiBasicTable,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { MountPoint, CoreStart } from 'opensearch-dashboards/public';
+import {
+  DataSourceAggregatedViewConfig,
+  DataSourceManagementPluginSetup,
+} from 'src/plugins/data_source_management/public';
+import { ComponentProp } from './types';
+import { COLUMNS } from './constants';
+
+interface DataSourceListActiveExampleProps {
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean;
+  notifications: CoreStart['notifications'];
+  setActionMenu?: (menuMount: MountPoint | undefined) => void;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+}
+
+export const DataSourceListActiveExample = ({
+  savedObjects,
+  dataSourceEnabled,
+  notifications,
+  setActionMenu,
+  dataSourceManagement,
+}: DataSourceListActiveExampleProps) => {
+  const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu<
+    DataSourceAggregatedViewConfig
+  >();
+  const data: ComponentProp[] = [
+    {
+      name: 'savedObjects',
+      required: true,
+      defaultValue: '-',
+      description: 'The saved object client is used to fetch available data sources',
+      deprecated: false,
+    },
+    {
+      name: 'notifications',
+      required: true,
+      defaultValue: '-',
+      description: 'The notifications toasts object exposes interfaces to show toasts',
+      deprecated: false,
+    },
+    {
+      name: 'hideLocalCluster',
+      required: false,
+      defaultValue: 'false',
+      description: 'The property to hide local cluster from the data source selector',
+      deprecated: false,
+    },
+    {
+      name: 'fullWidth',
+      required: true,
+      defaultValue: '-',
+      description:
+        'The property of OutComboBox and when specified to true would expand to the entire width available',
+      deprecated: false,
+    },
+    {
+      name: 'displayAllCompatibleDataSources',
+      required: false,
+      defaultValue: 'undefined',
+      description: 'When specified to true, it will show all compatible data sources',
+      deprecated: false,
+    },
+    {
+      name: 'dataSourceFilter',
+      required: false,
+      defaultValue: 'undefined',
+      description:
+        'When specified, the filter function will be used to filter the available options before rendering',
+      deprecated: false,
+    },
+    {
+      name: 'activeDataSourceIds',
+      required: false,
+      defaultValue: 'undefined',
+      description:
+        'This property is only assessed when displayAllCompatibleDataSources is set to false, it is used to specify the active data source ids and the component will show active data sources',
+      deprecated: false,
+    },
+  ];
+
+  return (
+    <EuiPageBody component="main">
+      <EuiPageHeader>
+        {dataSourceEnabled && (
+          <DataSourceMenu
+            setMenuMountPoint={setActionMenu}
+            componentType={'DataSourceAggregatedView'}
+            componentConfig={{
+              fullWidth: false,
+              savedObjects: savedObjects.client,
+              notifications,
+              displayAllCompatibleDataSources: true,
+            }}
+          />
+        )}
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Data Source Aggregated View To List Active Example</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentBody>
+          <EuiText>
+            The data source aggregated view component is introduced in 2.14 which uses
+            OuiContextMenu and OuiPopOver as the base components. When multi data source feature is
+            enabled, this component can be consumed by adding dataSourceManagement as option plugin,
+            and then mounted to the navigation bar by passing setHeaderActionMenu from
+            AppMountParameters to the getDataSourceMenu function exposed from the plugin. This
+            component can be used to show active connected data sources in the page. Find the
+            mounted example in the navigation bar
+          </EuiText>
+          <EuiSpacer />
+          <EuiText>
+            The component exposes a few properties via the DataSourceMenu component:
+          </EuiText>
+          <EuiBasicTable
+            tableCaption="dataSourceListActiveEuiBasicTable"
+            items={data}
+            rowHeader="name"
+            columns={COLUMNS}
+          />
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};
diff --git a/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx
@@ -0,0 +1,137 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import {
+  EuiBasicTable,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiText,
+  EuiTitle,
+  EuiSpacer,
+} from '@elastic/eui';
+import { CoreStart, MountPoint } from 'opensearch-dashboards/public';
+import {
+  DataSourceAggregatedViewConfig,
+  DataSourceManagementPluginSetup,
+} from 'src/plugins/data_source_management/public';
+import { ComponentProp } from './types';
+import { COLUMNS } from './constants';
+
+interface DataSourceListAllExampleProps {
+  savedObjects: CoreStart['savedObjects'];
+  dataSourceEnabled: boolean;
+  notifications: CoreStart['notifications'];
+  setActionMenu?: (menuMount: MountPoint | undefined) => void;
+  dataSourceManagement: DataSourceManagementPluginSetup;
+}
+
+export const DataSourceListAllExample = ({
+  savedObjects,
+  dataSourceEnabled,
+  notifications,
+  setActionMenu,
+  dataSourceManagement,
+}: DataSourceListAllExampleProps) => {
+  const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu<
+    DataSourceAggregatedViewConfig
+  >();
+
+  const data: ComponentProp[] = [
+    {
+      name: 'savedObjects',
+      required: true,
+      defaultValue: '-',
+      description: 'The saved object client is used to fetch available data sources',
+      deprecated: false,
+    },
+    {
+      name: 'notifications',
+      required: true,
+      defaultValue: '-',
+      description: 'The notifications toasts object exposes interfaces to show toasts',
+      deprecated: false,
+    },
+    {
+      name: 'hideLocalCluster',
+      required: false,
+      defaultValue: 'false',
+      description: 'The property to hide local cluster from the data source selector',
+      deprecated: false,
+    },
+    {
+      name: 'fullWidth',
+      required: true,
+      defaultValue: '-',
+      description:
+        'The property of OutComboBox and when specified to true would expand to the entire width available',
+      deprecated: false,
+    },
+    {
+      name: 'displayAllCompatibleDataSources',
+      required: false,
+      defaultValue: 'undefined',
+      description: 'When specified to true, it will show all compatible data sources',
+      deprecated: false,
+    },
+    {
+      name: 'dataSourceFilter',
+      required: false,
+      defaultValue: 'undefined',
+      description:
+        'When specified, the filter function will be used to filter the available options before rendering',
+      deprecated: false,
+    },
+  ];
+
+  return (
+    <EuiPageBody component="main">
+      <EuiPageHeader>
+        {dataSourceEnabled && (
+          <DataSourceMenu
+            setMenuMountPoint={setActionMenu}
+            componentType={'DataSourceAggregatedView'}
+            componentConfig={{
+              fullWidth: false,
+              savedObjects: savedObjects.client,
+              notifications,
+              displayAllCompatibleDataSources: true,
+            }}
+          />
+        )}
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Data Source Aggregated View To List All Example</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiPageContent>
+        <EuiPageContentBody>
+          <EuiText>
+            The data source aggregated view component is introduced in 2.14 which uses
+            OuiContextMenu and OuiPopOver as the base components. When multi data source feature is
+            enabled, this component can be consumed by adding dataSourceManagement as option plugin,
+            and then mounted to the navigation bar by passing setHeaderActionMenu from
+            AppMountParameters to the getDataSourceMenu function exposed from the plugin. This
+            component can be used to show all qualified connected data sources in the page. Find the
+            mounted example in the navigation bar
+          </EuiText>
+          <EuiSpacer />
+          <EuiText>
+            The component exposes a few properties via the DataSourceMenu component:
+          </EuiText>
+          <EuiBasicTable
+            tableCaption="dataSourceListAllEuiBasicTable"
+            items={data}
+            rowHeader="name"
+            columns={COLUMNS}
+          />
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  );
+};