[MD] Expose picker using function in data source management plugin setup #6030

BionIT · 2024-03-05T05:52:57Z

Description

This change exposes data source picker as a function in the data source management plugin.

Issues Resolved

Fixes #6018

Screenshot

exposepicker.mp4

Testing the changes

The following was performed in the recording above:

enable data source plugin
go to add sample data page and add data from a data source is successful, note that the picker here is the same picker as used in alerting, query workbench plugins
go to query workbench plugin page, and query the indices from selected data source is successful, note that query workbench has been changed to use the function exposed by the plugin to render the picker
go to alerting plugin page, and query monitors from selected data source is successful, note that alerting has been changed to use the function exposed by the plugin to render the picker
run node scripts/build_opensearch_dashboards_platform_plugins.js is successful
run yarn build for alerting plugin is successful

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

Signed-off-by: Lu Yu <nluyu@amazon.com>

codecov · 2024-03-05T06:07:38Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 67.13%. Comparing base (54c36fe) to head (0aa33c4).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6030   +/-   ##
=======================================
  Coverage   67.13%   67.13%           
=======================================
  Files        3316     3317    +1     
  Lines       64015    64016    +1     
  Branches    10256    10256           
=======================================
+ Hits        42975    42977    +2     
+ Misses      18547    18546    -1     
  Partials     2493     2493

Flag	Coverage Δ
Linux_1	`31.63% <ø> (ø)`
Linux_2	`55.20% <ø> (ø)`
Linux_3	`44.58% <100.00%> (-0.01%)`	⬇️
Linux_4	`35.16% <0.00%> (-0.01%)`	⬇️
Windows_1	`31.65% <ø> (ø)`
Windows_2	`55.17% <ø> (ø)`
Windows_3	`44.60% <100.00%> (+<0.01%)`	⬆️
Windows_4	`35.16% <0.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

derek-ho

LGTM, thanks for this fix!

derek-ho · 2024-03-05T14:43:18Z

src/plugins/data_source_management/public/plugin.ts

-    return { registerAuthenticationMethod };
+    return {
+      registerAuthenticationMethod,
+      getDataSourcePicker: createClusterSelector(),


So if I am understanding correctly, this will expose a function getDataSourcePicker, that plugins should be able to consume via optionalPlugins?

seraphjiang · 2024-03-05T18:53:30Z

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
  id: '',
 };

-interface ClusterSelectorProps {
+export interface ClusterSelectorProps {


Suggested change

export interface ClusterSelectorProps {

export interface DataSourceSelectorProps {

Cut another issue to address the naming #6038

seraphjiang · 2024-03-05T18:54:02Z

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
  id: '',
 };

-interface ClusterSelectorProps {
+export interface ClusterSelectorProps {
  savedObjectsClient: SavedObjectsClientContract;
  notifications: ToastsStart;
  onSelectedDataSource: (clusterOption: ClusterOption[]) => void;


Suggested change

onSelectedDataSource: (clusterOption: ClusterOption[]) => void;

onSelectedDataSource: (dataSourceOption: DataSourceOption[]) => void;

seraphjiang · 2024-03-05T18:54:29Z

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
  id: '',
 };

-interface ClusterSelectorProps {
+export interface ClusterSelectorProps {
  savedObjectsClient: SavedObjectsClientContract;
  notifications: ToastsStart;
  onSelectedDataSource: (clusterOption: ClusterOption[]) => void;


Suggested change

onSelectedDataSource: (clusterOption: ClusterOption[]) => void;

onSelectedDataSource: (dataSourceOption: DataSourceOption[]) => void;

seraphjiang · 2024-03-05T18:55:10Z

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
  id: '',
 };



could we rename this file to DataSourceSelector.tsx

seraphjiang · 2024-03-05T18:55:48Z

...s/data_source_management/public/components/cluster_selector/create_cluster_selector.test.tsx

+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClusterSelector } from './create_cluster_selector';


Suggested change

import { createClusterSelector } from './create_cluster_selector';

import { dataSourceSelector } from './data_source_selector';

seraphjiang · 2024-03-05T18:56:32Z

src/plugins/data_source_management/public/plugin.ts

-    return { registerAuthenticationMethod };
+    return {
+      registerAuthenticationMethod,
+      getDataSourcePicker: createClusterSelector(),


Suggested change

getDataSourcePicker: createClusterSelector(),

getDataSourcePicker: createDataSourceSelector(),

seraphjiang · 2024-03-05T18:57:10Z

...lugins/data_source_management/public/components/cluster_selector/create_cluster_selector.tsx

+import React from 'react';
+import { ClusterSelector, ClusterSelectorProps } from './cluster_selector';
+
+export function createClusterSelector() {


Suggested change

export function createClusterSelector() {

export function createDataSourceSelector() {

seraphjiang · 2024-03-05T18:57:59Z

src/plugins/data_source_management/public/plugin.ts

@@ -7,6 +7,7 @@ import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';

 import { PLUGIN_NAME } from '../common';
+import { createClusterSelector } from './components/cluster_selector/create_cluster_selector';


Suggested change

import { createClusterSelector } from './components/cluster_selector/create_cluster_selector';

import { createDataSourceSelector } from './components/datasource_selector/create_datasource_selector';

seraphjiang · 2024-03-05T18:58:30Z

src/plugins/data_source_management/public/plugin.ts

@@ -17,6 +18,7 @@ import {
  AuthenticationMethodRegistery,
 } from './auth_registry';
 import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod } from './types';
+import { ClusterSelectorProps } from './components/cluster_selector/cluster_selector';


Suggested change

import { ClusterSelectorProps } from './components/cluster_selector/cluster_selector';

import { DataSourceSelectorProps } from './components/datasource_selector/datasource_selector';

seraphjiang · 2024-03-05T18:58:45Z

src/plugins/data_source_management/public/plugin.ts

@@ -26,6 +28,7 @@ export interface DataSourceManagementSetupDependencies {

 export interface DataSourceManagementPluginSetup {
  registerAuthenticationMethod: (authMethodValues: AuthenticationMethod) => void;
+  getDataSourcePicker: React.ComponentType<ClusterSelectorProps>;


Suggested change

getDataSourcePicker: React.ComponentType<ClusterSelectorProps>;

getDataSourcePicker: React.ComponentType<DataSourceSelectorProps>;

seraphjiang · 2024-03-05T18:59:14Z

CHANGELOG.md

@@ -19,6 +19,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Discover] Fix table cell content overflowing in Safari ([#5948](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5948))
 - [BUG][MD]Fix schema for test connection to separate validation based on auth type ([#5997](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5997))
 - [Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008))
+- [BUG][MD]Expose picker using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030)) 


Suggested change

- [BUG][MD]Expose picker using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030))

- [BUG][MD]Expose DataSourceSelector using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030))

seraphjiang · 2024-03-05T18:59:40Z

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
  id: '',
 };

-interface ClusterSelectorProps {
+export interface ClusterSelectorProps {
  savedObjectsClient: SavedObjectsClientContract;
  notifications: ToastsStart;
  onSelectedDataSource: (clusterOption: ClusterOption[]) => void;


Suggested change

onSelectedDataSource: (clusterOption: ClusterOption[]) => void;

onSelectedDataSource: (dataSourceOption: DataSourceOption[]) => void;

seraphjiang · 2024-03-05T18:59:55Z

...s/data_source_management/public/components/cluster_selector/create_cluster_selector.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('create cluster selector', () => {


Suggested change

describe('create cluster selector', () => {

describe('create datasource selector', () => {

seraphjiang · 2024-03-05T19:00:11Z

...s/data_source_management/public/components/cluster_selector/create_cluster_selector.test.tsx

+      hideLocalCluster: false,
+      fullWidth: false,
+    };
+    const TestComponent = createClusterSelector();


Suggested change

const TestComponent = createClusterSelector();

const TestComponent = createDataSourceSelector();

seraphjiang · 2024-03-05T19:00:45Z

...lugins/data_source_management/public/components/cluster_selector/create_cluster_selector.tsx

+ */
+
+import React from 'react';
+import { ClusterSelector, ClusterSelectorProps } from './cluster_selector';


Suggested change

import { ClusterSelector, ClusterSelectorProps } from './cluster_selector';

import { DataSourceSelector, DataSourceSelectorProps } from './datasource_selector';

seraphjiang · 2024-03-05T19:01:05Z

...lugins/data_source_management/public/components/cluster_selector/create_cluster_selector.tsx

+import { ClusterSelector, ClusterSelectorProps } from './cluster_selector';
+
+export function createClusterSelector() {
+  return (props: ClusterSelectorProps) => <ClusterSelector {...props} />;


Suggested change

return (props: ClusterSelectorProps) => <ClusterSelector {...props} />;

return (props: DataSourceSelectorProps) => <DataSourceSelector {...props} />;

…tup (#6030) * expose picker using function in plugin setup Signed-off-by: Lu Yu <nluyu@amazon.com> * add changelog and test Signed-off-by: Lu Yu <nluyu@amazon.com> --------- Signed-off-by: Lu Yu <nluyu@amazon.com> (cherry picked from commit 49d1649) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md

…tup (#6030) (#6037) * expose picker using function in plugin setup Signed-off-by: Lu Yu <nluyu@amazon.com> * add changelog and test Signed-off-by: Lu Yu <nluyu@amazon.com> --------- Signed-off-by: Lu Yu <nluyu@amazon.com> (cherry picked from commit 49d1649) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

expose picker using function in plugin setup

0422236

Signed-off-by: Lu Yu <nluyu@amazon.com>

BionIT requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, kristenTian, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, BSFishy, curq, bandinib-amzn, SuZhou-Joe and ruanyl as code owners March 5, 2024 05:52

github-actions bot added the valued-contributor label Mar 5, 2024

BionIT changed the title ~~Expose picker using function in data source management plugin setup~~ [MD] Expose picker using function in data source management plugin setup Mar 5, 2024

BionIT added 2 commits March 5, 2024 05:54

add changelog and test

89c8623

Signed-off-by: Lu Yu <nluyu@amazon.com>

Merge branch 'main' into exposepicker

9e1ffee

derek-ho approved these changes Mar 5, 2024

View reviewed changes

derek-ho reviewed Mar 5, 2024

View reviewed changes

yujin-emma approved these changes Mar 5, 2024

View reviewed changes

bandinib-amzn approved these changes Mar 5, 2024

View reviewed changes

Merge branch 'main' into exposepicker

2609a0c

BionIT added v2.13.0 backport 2.x labels Mar 5, 2024

BionIT added the multiple datasource multiple datasource project label Mar 5, 2024

Merge branch 'main' into exposepicker

0aa33c4

ZilongX approved these changes Mar 5, 2024

View reviewed changes

seraphjiang reviewed Mar 5, 2024

View reviewed changes

BionIT merged commit 49d1649 into opensearch-project:main Mar 5, 2024
67 checks passed

opensearch-trigger-bot bot mentioned this pull request Mar 5, 2024

[Backport 2.x] [MD] Expose picker using function in data source management plugin setup #6037

Merged

BionIT mentioned this pull request Mar 11, 2024

[Meta][2.13] Security, bug fix and enhancemanet for dashboards anywhere #5752

Open

28 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MD] Expose picker using function in data source management plugin setup #6030

[MD] Expose picker using function in data source management plugin setup #6030

BionIT commented Mar 5, 2024

codecov bot commented Mar 5, 2024 •

edited

Loading

derek-ho left a comment

derek-ho Mar 5, 2024

BionIT Mar 5, 2024

seraphjiang Mar 5, 2024

BionIT Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

seraphjiang Mar 5, 2024

	export interface ClusterSelectorProps {
	export interface DataSourceSelectorProps {

	onSelectedDataSource: (clusterOption: ClusterOption[]) => void;
	onSelectedDataSource: (dataSourceOption: DataSourceOption[]) => void;

		@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
		id: '',
		};

	import { createClusterSelector } from './create_cluster_selector';
	import { dataSourceSelector } from './data_source_selector';

	getDataSourcePicker: createClusterSelector(),
	getDataSourcePicker: createDataSourceSelector(),

	export function createClusterSelector() {
	export function createDataSourceSelector() {

	import { createClusterSelector } from './components/cluster_selector/create_cluster_selector';
	import { createDataSourceSelector } from './components/datasource_selector/create_datasource_selector';

	import { ClusterSelectorProps } from './components/cluster_selector/cluster_selector';
	import { DataSourceSelectorProps } from './components/datasource_selector/datasource_selector';

	getDataSourcePicker: React.ComponentType<ClusterSelectorProps>;
	getDataSourcePicker: React.ComponentType<DataSourceSelectorProps>;

	- [BUG][MD]Expose picker using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030))
	- [BUG][MD]Expose DataSourceSelector using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030))

	describe('create cluster selector', () => {
	describe('create datasource selector', () => {

	const TestComponent = createClusterSelector();
	const TestComponent = createDataSourceSelector();

	import { ClusterSelector, ClusterSelectorProps } from './cluster_selector';
	import { DataSourceSelector, DataSourceSelectorProps } from './datasource_selector';

	return (props: ClusterSelectorProps) => <ClusterSelector {...props} />;
	return (props: DataSourceSelectorProps) => <DataSourceSelector {...props} />;

[MD] Expose picker using function in data source management plugin setup #6030

[MD] Expose picker using function in data source management plugin setup #6030

Conversation

BionIT commented Mar 5, 2024

Description

Issues Resolved

Screenshot

Testing the changes

Check List

codecov bot commented Mar 5, 2024 • edited Loading

Codecov Report

derek-ho left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Mar 5, 2024 •

edited

Loading