From c0e8d4a12805c677b50a9c24b5b87146d21620c0 Mon Sep 17 00:00:00 2001 From: Lu Yu Date: Wed, 3 Apr 2024 10:58:29 -0700 Subject: [PATCH] [Multiple Datasource] Create examples about how to consume data source components (#6302) * fix lint error Signed-off-by: Lu Yu * show useMemo Signed-off-by: Lu Yu * address comments Signed-off-by: Lu Yu --------- Signed-off-by: Lu Yu Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com> --- .../multiple_data_source_examples/README.md | 12 ++ .../opensearch_dashboards.json | 10 + .../public/application.tsx | 36 ++++ .../public/components/constants.ts | 29 +++ .../data_source_list_active_example.tsx | 144 ++++++++++++++ .../data_source_list_all_example.tsx | 137 +++++++++++++ .../data_source_multi_selectable_example.tsx | 143 ++++++++++++++ .../data_source_selectable_example.tsx | 151 +++++++++++++++ .../data_source_selector_example.tsx | 183 ++++++++++++++++++ .../data_source_via_top_nav_menu.tsx | 123 ++++++++++++ .../components/data_source_view_example.tsx | 115 +++++++++++ .../public/components/home.tsx | 180 +++++++++++++++++ .../public/components/types.ts | 11 ++ .../public/index.ts | 14 ++ .../public/plugin.ts | 74 +++++++ .../public/types.ts | 24 +++ .../tsconfig.json | 21 ++ 17 files changed, 1407 insertions(+) create mode 100644 examples/multiple_data_source_examples/README.md create mode 100644 examples/multiple_data_source_examples/opensearch_dashboards.json create mode 100644 examples/multiple_data_source_examples/public/application.tsx create mode 100644 examples/multiple_data_source_examples/public/components/constants.ts create mode 100644 examples/multiple_data_source_examples/public/components/data_source_list_active_example.tsx create mode 100644 examples/multiple_data_source_examples/public/components/data_source_list_all_example.tsx create mode 100644 examples/multiple_data_source_examples/public/components/data_source_multi_selectable_example.tsx create mode 100644 examples/multiple_data_source_examples/public/components/data_source_selectable_example.tsx create mode 100644 examples/multiple_data_source_examples/public/components/data_source_selector_example.tsx create mode 100644 examples/multiple_data_source_examples/public/components/data_source_via_top_nav_menu.tsx create mode 100644 examples/multiple_data_source_examples/public/components/data_source_view_example.tsx create mode 100644 examples/multiple_data_source_examples/public/components/home.tsx create mode 100644 examples/multiple_data_source_examples/public/components/types.ts create mode 100644 examples/multiple_data_source_examples/public/index.ts create mode 100644 examples/multiple_data_source_examples/public/plugin.ts create mode 100644 examples/multiple_data_source_examples/public/types.ts create mode 100644 examples/multiple_data_source_examples/tsconfig.json diff --git a/examples/multiple_data_source_examples/README.md b/examples/multiple_data_source_examples/README.md new file mode 100644 index 000000000000..c775ce5b5a36 --- /dev/null +++ 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 new file mode 100644 index 000000000000..e01b963f42af --- /dev/null +++ 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"] + } + \ No newline at end of file diff --git a/examples/multiple_data_source_examples/public/application.tsx b/examples/multiple_data_source_examples/public/application.tsx new file mode 100644 index 000000000000..16d9c928b04c --- /dev/null +++ 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( + , + 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 new file mode 100644 index 000000000000..05e0d1e76a09 --- /dev/null +++ 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> = [ + { + 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 new file mode 100644 index 000000000000..529d610c8132 --- /dev/null +++ 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 ( + + + {dataSourceEnabled && ( + + )} + + +

Data Source Aggregated View To List Active Example

+ + + + + + + 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 + + + + The component exposes a few properties via the DataSourceMenu component: + + + + + + ); +}; 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 new file mode 100644 index 000000000000..26545fef70c7 --- /dev/null +++ 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 ( + + + {dataSourceEnabled && ( + + )} + + +

Data Source Aggregated View To List All Example

+ + + + + + + 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 + + + + The component exposes a few properties via the DataSourceMenu component: + + + + + + ); +}; diff --git a/examples/multiple_data_source_examples/public/components/data_source_multi_selectable_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_multi_selectable_example.tsx new file mode 100644 index 000000000000..d9bba48630ea --- /dev/null +++ b/examples/multiple_data_source_examples/public/components/data_source_multi_selectable_example.tsx @@ -0,0 +1,143 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import React, { useMemo, useState } from 'react'; +import { + EuiBasicTable, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiText, + EuiTextColor, + EuiTitle, +} from '@elastic/eui'; +import { MountPoint } from 'opensearch-dashboards/public'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { + DataSourceManagementPluginSetup, + DataSourceMultiSelectableConfig, +} from 'src/plugins/data_source_management/public'; +import { ComponentProp } from './types'; +import { COLUMNS } from './constants'; + +interface DataSourceMultiSelectableExampleProps { + savedObjects: CoreStart['savedObjects']; + dataSourceEnabled: boolean; + notifications: CoreStart['notifications']; + setActionMenu?: (menuMount: MountPoint | undefined) => void; + dataSourceManagement: DataSourceManagementPluginSetup; +} + +export const DataSourceMultiSelectableExample = ({ + savedObjects, + dataSourceEnabled, + notifications, + setActionMenu, + dataSourceManagement, +}: DataSourceMultiSelectableExampleProps) => { + const [selectedDataSources, setSelectedDataSources] = useState([]); + const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu< + DataSourceMultiSelectableConfig + >(); + 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: 'onSelectedDataSources', + required: true, + defaultValue: 'undefined', + description: + 'The call back function which is triggered when there is a change in the data source selection', + deprecated: false, + }, + ]; + + const renderDataSourceComponent = useMemo(() => { + return ( + setSelectedDataSources(ds), + }} + /> + ); + }, [savedObjects, notifications, setActionMenu]); + + return ( + + + {dataSourceEnabled && renderDataSourceComponent} + + +

Data Source Multi Selectable Example

+ + + + + + +

+ The data source multi selectable component is introduced in 2.14 which uses + OuiFieldSearch 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 select multiple connected data sources. Find the mounted + example in the navigation bar with selected option +

+

+ + Selected: {selectedDataSources.map((ds) => ds.label).join(', ')} + +

+ + + + The component exposes a few properties via the DataSourceMenu component: + + + + + + ); +}; diff --git a/examples/multiple_data_source_examples/public/components/data_source_selectable_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_selectable_example.tsx new file mode 100644 index 000000000000..b81102645de2 --- /dev/null +++ b/examples/multiple_data_source_examples/public/components/data_source_selectable_example.tsx @@ -0,0 +1,151 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import React, { useMemo, useState } from 'react'; +import { + EuiBasicTable, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiText, + EuiTextColor, + EuiTitle, +} from '@elastic/eui'; +import { MountPoint } from 'opensearch-dashboards/public'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { + DataSourceManagementPluginSetup, + DataSourceSelectableConfig, +} from 'src/plugins/data_source_management/public'; +import { ComponentProp } from './types'; +import { COLUMNS } from './constants'; + +interface DataSourceSelectableExampleProps { + savedObjects: CoreStart['savedObjects']; + dataSourceEnabled: boolean; + notifications: CoreStart['notifications']; + setActionMenu?: (menuMount: MountPoint | undefined) => void; + dataSourceManagement: DataSourceManagementPluginSetup; +} + +export const DataSourceSelectableExample = ({ + savedObjects, + dataSourceEnabled, + notifications, + setActionMenu, + dataSourceManagement, +}: DataSourceSelectableExampleProps) => { + const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu(); + const [selectedDataSources, setSelectedDataSources] = useState([]); + + 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, + }, + ]; + + const renderDataSourceComponent = useMemo(() => { + return ( + { + setSelectedDataSources(ds); + }, + }} + /> + ); + }, [savedObjects, notifications, setActionMenu]); + + return ( + + + {dataSourceEnabled && renderDataSourceComponent} + + +

Data Source Selectable Example

+ + + + + + +

+ The data source selectable component is introduced in 2.14 which uses OuiFieldSearch + 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 select single connected data sources. Find the mounted example in the navigation + bar with selected option +

+

+ + Selected: {selectedDataSources.map((ds) => ds.label).join(', ')} + +

+ + + + The component exposes a few properties via the DataSourceMenu component: + + + + + + ); +}; diff --git a/examples/multiple_data_source_examples/public/components/data_source_selector_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_selector_example.tsx new file mode 100644 index 000000000000..ea05124e5b09 --- /dev/null +++ b/examples/multiple_data_source_examples/public/components/data_source_selector_example.tsx @@ -0,0 +1,183 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import React, { useState, useMemo } from 'react'; +import { + EuiBasicTable, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageHeaderSection, + EuiText, + EuiTitle, + EuiSpacer, + EuiTextColor, +} from '@elastic/eui'; +import { MountPoint } from 'opensearch-dashboards/public'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public'; +import { ComponentProp } from './types'; +import { COLUMNS } from './constants'; + +interface DataSourceSelectorExampleProps { + savedObjects: CoreStart['savedObjects']; + dataSourceEnabled: boolean; + notifications: CoreStart['notifications']; + setActionMenu?: (menuMount: MountPoint | undefined) => void; + dataSourceManagement: DataSourceManagementPluginSetup; +} + +export const DataSourceSelectorExample = ({ + savedObjects, + notifications, + dataSourceManagement, + dataSourceEnabled, +}: DataSourceSelectorExampleProps) => { + const [selectedDataSources, setSelectedDataSources] = useState([]); + + const data: ComponentProp[] = [ + { + name: 'savedObjectsClient', + 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: 'onSelectedDataSource', + required: true, + defaultValue: '-', + description: + 'The call back function which is triggered when there is a change in the data source selection', + deprecated: false, + }, + { + name: 'disabled', + required: true, + defaultValue: '-', + description: 'The property to disable the data source selection', + deprecated: false, + }, + { + name: 'hideLocalCluster', + required: true, + defaultValue: '-', + 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: 'defaultOption', + required: false, + defaultValue: 'undefined', + description: + 'When specified, it will override the option when the component is first rendered', + deprecated: false, + }, + { + name: 'placeholderText', + required: false, + defaultValue: 'undefined', + description: 'When specified, it will set the placeholder of the input', + deprecated: false, + }, + { + name: 'removePrepend', + required: false, + defaultValue: 'false', + description: 'When specified to true, it will hide the prepend from the component', + 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: 'compressed', + required: false, + defaultValue: 'false', + description: + 'When specified, the property will be passed to OuiComboBox component where true value creates a shorter height input', + deprecated: false, + }, + ]; + + const renderDataSourceComponent = useMemo(() => { + const DataSourceSelector = dataSourceManagement.ui.DataSourceSelector; + return ( + setSelectedDataSources(ds)} + disabled={false} + hideLocalCluster={true} + /> + ); + }, [savedObjects, notifications, dataSourceManagement]); + + return ( + + + + +

Data Source Selector Example

+ + + + + + +

+ The data source selector component is introduced in 2.12 which uses OuiComboBox as the + base component. When multi data source feature is enabled, this component would show + up in the devtools page and add sample data page. Here is an example to render the + data source selector within the page. This component can be used to select a single + connected data source. Find the selector component rendered below with selected option + below +

+

+ + Selected: {selectedDataSources.map((ds) => ds.label).join(', ')} + +

+ + + {dataSourceEnabled && renderDataSourceComponent} + + + + There are a few properties exposed by this component which can be used to customize the + behavior: + + + + + + ); +}; diff --git a/examples/multiple_data_source_examples/public/components/data_source_via_top_nav_menu.tsx b/examples/multiple_data_source_examples/public/components/data_source_via_top_nav_menu.tsx new file mode 100644 index 000000000000..ac983a696d9b --- /dev/null +++ b/examples/multiple_data_source_examples/public/components/data_source_via_top_nav_menu.tsx @@ -0,0 +1,123 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import { i18n } from '@osd/i18n'; +import React from 'react'; +import { + EuiBasicTable, + EuiPageBody, + EuiPageContent, + EuiPageContentBody, + EuiPageHeader, + EuiPageHeaderSection, + EuiSpacer, + EuiText, + EuiTitle, +} from '@elastic/eui'; +import { MountPoint } from 'opensearch-dashboards/public'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { NavigationPublicPluginStart, TopNavMenuData } from 'src/plugins/navigation/public'; +import { ComponentProp } from './types'; +import { COLUMNS } from './constants'; + +interface DataSourceViaTopNavMenuExampleProps { + savedObjects: CoreStart['savedObjects']; + dataSourceEnabled: boolean; + notifications: CoreStart['notifications']; + setActionMenu?: (menuMount: MountPoint | undefined) => void; + navigation: NavigationPublicPluginStart; +} + +export const DataSourceViaTopNavMenuExample = ({ + savedObjects, + dataSourceEnabled, + notifications, + setActionMenu, + navigation, +}: DataSourceViaTopNavMenuExampleProps) => { + const TopNavMenu = navigation.ui.TopNavMenu; + const data: ComponentProp[] = [ + { + name: 'showDataSourceMenu', + required: false, + defaultValue: '-', + description: + 'When set to true and dataSourceMenuConfig is specified, data source menu will be mounted along with other menus into the navigation bar', + deprecated: false, + }, + { + name: 'dataSourceMenuConfig', + required: false, + defaultValue: '-', + description: + 'The config for the data source menu to determine the component to mount and configuration for the component', + deprecated: false, + }, + ]; + + const config: TopNavMenuData[] = [ + { + iconType: 'save', + emphasize: true, + id: 'save', + label: i18n.translate('exampleApp.topNav', { + defaultMessage: `Save`, + }), + testId: 'mapSaveButton', + run: (_anchorElement: any) => { + // do nothing + return; + }, + }, + ]; + return ( + + + {dataSourceEnabled && ( + + )} + + +

Data Source List All Component Mounted Via TopNavMenu Example

+ + + + + + + The capability of TopNavMenu to mount data source component is introduced in 2.14. When + showDataSourceMenu is set to to true, specified component would show up in the + navigation bar behind the menus specified via the TopNavMenu via config. Here is an + example to render the data source list all within the TopNavMenu. This provides solution + for plugins which needs to mount menus in addition to data source component into the + navigation bar. + + + The newly added properties to TopNavMenu are as follows: + + + + + ); +}; diff --git a/examples/multiple_data_source_examples/public/components/data_source_view_example.tsx b/examples/multiple_data_source_examples/public/components/data_source_view_example.tsx new file mode 100644 index 000000000000..11ebe9ee343a --- /dev/null +++ b/examples/multiple_data_source_examples/public/components/data_source_view_example.tsx @@ -0,0 +1,115 @@ +/* + * 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 { CoreStart, MountPoint } from 'opensearch-dashboards/public'; +import { + DataSourceManagementPluginSetup, + DataSourceViewConfig, +} from 'src/plugins/data_source_management/public'; +import { ComponentProp } from './types'; +import { COLUMNS } from './constants'; + +interface DataSourceViewExampleProps { + savedObjects: CoreStart['savedObjects']; + dataSourceEnabled: boolean; + notifications: CoreStart['notifications']; + setActionMenu?: (menuMount: MountPoint | undefined) => void; + dataSourceManagement: DataSourceManagementPluginSetup; +} + +export const DataSourceViewExample = ({ + dataSourceEnabled, + setActionMenu, + dataSourceManagement, +}: DataSourceViewExampleProps) => { + const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu(); + const data: ComponentProp[] = [ + { + name: 'savedObjects', + required: false, + defaultValue: '-', + description: 'The saved object client is used to fetch available data sources', + deprecated: false, + }, + { + name: 'notifications', + required: false, + defaultValue: '-', + description: 'The notifications toasts object exposes interfaces to show toasts', + 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: 'activeOption', + required: true, + defaultValue: 'undefined', + description: 'Show specified compatible data source', + deprecated: false, + }, + ]; + + return ( + + + {dataSourceEnabled && ( + + )} + + +

Data Source View Example

+ + + + + + + The data source 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 specified connected data sources in the page. Find the mounted example in the + navigation bar + + + + The component exposes a few properties via the DataSourceMenu component: + + + + + + ); +}; diff --git a/examples/multiple_data_source_examples/public/components/home.tsx b/examples/multiple_data_source_examples/public/components/home.tsx new file mode 100644 index 000000000000..fe6ca1f285a4 --- /dev/null +++ b/examples/multiple_data_source_examples/public/components/home.tsx @@ -0,0 +1,180 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui'; +import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from 'react-router-dom'; +import { AppMountContext, CoreStart, MountPoint } from 'opensearch-dashboards/public'; +import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public'; +import { NavigationPublicPluginStart } from 'src/plugins/navigation/public'; +import { DataSourceListActiveExample } from './data_source_list_active_example'; +import { DataSourceListAllExample } from './data_source_list_all_example'; +import { DataSourceMultiSelectableExample } from './data_source_multi_selectable_example'; +import { DataSourceSelectableExample } from './data_source_selectable_example'; +import { DataSourceSelectorExample } from './data_source_selector_example'; +import { DataSourceViaTopNavMenuExample } from './data_source_via_top_nav_menu'; +import { DataSourceViewExample } from './data_source_view_example'; + +export interface HomeProps { + basename: string; + notifications: CoreStart['notifications']; + http: CoreStart['http']; + savedObjects: CoreStart['savedObjects']; + dataSourceEnabled: boolean; + dataSourceManagement: DataSourceManagementPluginSetup; + navigateToApp: CoreStart['application']['navigateToApp']; + navigation: NavigationPublicPluginStart; + setActionMenu?: (menuMount: MountPoint | undefined) => void; +} + +interface PageDef { + title: string; + id: string; + component: React.ReactNode; +} + +type NavProps = RouteComponentProps & { + navigateToApp: AppMountContext['core']['application']['navigateToApp']; + pages: PageDef[]; +}; + +const Nav = withRouter(({ history, pages }: NavProps) => { + const navItems = pages.map((page) => ({ + id: page.id, + name: page.title, + onClick: () => history.push(`/${page.id}`), + 'data-test-subj': page.id, + })); + + return ( + + ); +}); + +export const Home = ({ + basename, + notifications, + savedObjects, + dataSourceEnabled, + setActionMenu, + dataSourceManagement, + navigateToApp, + navigation, +}: HomeProps) => { + const pages = [ + { + title: 'Data Source Selector', + id: 'selector', + component: ( + + ), + }, + { + title: 'Data Source Multi Selectable', + id: 'multi_selectable', + component: ( + + ), + }, + { + title: 'Data Source Selectable', + id: 'single_selectable', + component: ( + + ), + }, + { + title: 'Data Source Readonly View', + id: 'single_readonly', + component: ( + + ), + }, + { + title: 'Data Source List All', + id: 'list_all', + component: ( + + ), + }, + { + title: 'Data Source List Active', + id: 'list_active', + component: ( + + ), + }, + { + title: 'Data Source View Via Top Nav Menu', + id: 'top_nav_menu', + component: ( + + ), + }, + ]; + + const routes = pages.map((page, i) => ( + page.component} /> + )); + return ( + + + +