Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Multiple Datasource] Add data source selection service to support storing and getting selected data source updates #6827

Merged
merged 14 commits into from
May 31, 2024

Conversation

raintygao
Copy link
Contributor

@raintygao raintygao commented May 24, 2024

Description

  1. Add data source selection service in DSM.
  2. Add dataSourceSelection instance as new props to each data source selector component and call selectDataSource when selecting data source.
  3. Return this instance as setup dependency for other plugins.

Screenshot

case1.mp4

Set selected value and other plugins can get selected value.

case2.mp4

A component lifecycle from mount and select data source to unmount and remove.

image
Multiple selector components in page and data stored.

Issues Resolved

#6825
opensearch-project/dashboards-assistant#192

Changelog

  • feat: Add data source selection service to support storing and getting selected data source updates

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

Copy link

codecov bot commented May 24, 2024

Codecov Report

Attention: Patch coverage is 91.52542% with 5 lines in your changes are missing coverage. Please review.

Project coverage is 67.43%. Comparing base (089a2de) to head (677bc9d).

Files Patch % Lines
...ents/data_source_selector/data_source_selector.tsx 75.00% 2 Missing ⚠️
...c/components/data_source_view/data_source_view.tsx 75.00% 1 Missing and 1 partial ⚠️
.../data_source_selectable/data_source_selectable.tsx 87.50% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6827      +/-   ##
==========================================
+ Coverage   67.38%   67.43%   +0.04%     
==========================================
  Files        3443     3444       +1     
  Lines       67797    67834      +37     
  Branches    11033    11031       -2     
==========================================
+ Hits        45688    45741      +53     
+ Misses      19440    19427      -13     
+ Partials     2669     2666       -3     
Flag Coverage Δ
Linux_1 33.07% <ø> (ø)
Linux_2 55.12% <ø> (ø)
Linux_3 45.24% <91.52%> (?)
Linux_4 34.82% <25.42%> (+<0.01%) ⬆️
Windows_1 33.12% <ø> (+0.02%) ⬆️
Windows_2 55.09% <ø> (ø)
Windows_3 45.26% <91.52%> (+0.07%) ⬆️
Windows_4 34.82% <25.42%> (+<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.

raintygao and others added 8 commits May 24, 2024 19:29
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
@zhyuanqi
Copy link
Collaborator

zhyuanqi commented May 24, 2024

Hi Tianyu. Could you help me to better understanding what we are trying to do here? I see that we have add the pops of DataSourceSelectable and states of ComponenId. What are we trying to achieve here? Thanks

@seraphjiang
Copy link
Member

@raintygao looks like there are lots of UI change, would you add a few screenshot and video to help the review.

@@ -133,6 +136,7 @@ describe('TopNavMenu', () => {
fullWidth: true,
activeOption: [{ label: 'what', id: '1' }],
},
dataSourceSelection,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it mean all the places that are using data source pickers need to pass the dataSourceSelection explicitly? I thought it is an internal state and plugins do not need to be aware of this context.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to pass this instance manually, because usually all components are created by functions provided by DSM and passed within the function. Except for some test cases when manually rendering components that need to pass.

@raintygao
Copy link
Contributor Author

Hi Tianyu. Could you help me to better understanding what we are trying to do here? I see that we have add the pops of DataSourceSelectable and states of ComponenId. What are we trying to achieve here? Thanks

Hi Ella, unlike other plugins that need to select their own data sources, chatbot needs to get the data source selected by other applications from the OSD page. As these selector components don't store selected value and there isn't a centralized way in DSM to manage this, so this PR mainly does two things:

  1. Add a new service to the DSM which supports storing and getting data source selected by each component.
  2. After each selector component completes the selection, the value will be stored in the instance of the service, which can be got by other plugins.

@raintygao
Copy link
Contributor Author

raintygao commented May 27, 2024

@raintygao looks like there are lots of UI change, would you add a few screenshot and video to help the review.

Sure. Although this PR makes updates in each UI component, it only adds the logic to store selected value in service after selecting the data source, and doesn't not make any changes to the UI view. The changes to assistant plugin are still in progress and depending on this PR, I have added a sample video to the PR content to demonstrate the purpose.

@ruanyl
Copy link
Member

ruanyl commented May 27, 2024

@raintygao could you update the PR description as well to includes the backgrounds of why you need to introduce these changes? I'm afraid many people don't have enough context to review the changes.

@raintygao
Copy link
Contributor Author

raintygao commented May 27, 2024

@raintygao could you update the PR description as well to includes the backgrounds of why you need to introduce these changes? I'm afraid many people don't have enough context to review the changes.

Sure. Already shared background and design offline. Created a new issue in plugin repo opensearch-project/dashboards-assistant#192 and link to provide more context.

@@ -40,6 +41,7 @@ export interface DataSourceMenuProps<T = any> {
uiSettings?: IUiSettingsClient;
application?: ApplicationStart;
setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
dataSourceSelection: DataSourceSelection;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be part of componentConfig since not all components need to provide this as prop. Also, enforcing this prop as required would break all consumers, since it is provided by the DSM plugin, we can make it optional?

Copy link
Contributor Author

@raintygao raintygao May 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to let it out of componentConfig because this instance should be passed from DSM not other plugins. As this instance is shared and limited in DSM, so we can set it as strict required.

I initially thought that other plugins only can render DS selector components through the two functions ui.DataSourceSelector and ui.getDataSourceMenu (like this way https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/dev_tools/public/application.tsx#L118), so I only need to pass the dataSourceSelection instance to the component through this two functions of DSM.

Until I saw home plugin directly importing component class for rendering without using two functions above(https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/home/public/application/components/tutorial_directory.js#L236), in this way the dataSourceSelection would be missing in the component.

So I'm thinking that in order to safely share dataSourceSelection instance among all components and be compatible with all usage ways, what about using a getter in each component to get instance directly (like this way https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6827/files#diff-ec5b6ef64504177e50cad326dcc07ada2135faafe924d25b0f4df088bc7b4823R80), so that I no longer have to manually pass dataSourceSelection through ui.DataSourceSelector and ui.getDataSourceMenu.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using getter sounds good

import { BehaviorSubject } from 'rxjs';
import { DataSourceOption } from '../components/data_source_menu/types';

export class DataSourceSelection {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can the class name match the module name like DataSourceSelectionService?

Signed-off-by: tygao <tygao@amazon.com>
raintygao and others added 4 commits May 29, 2024 11:27
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>
@BionIT BionIT merged commit e2c0df2 into opensearch-project:main May 31, 2024
67 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request May 31, 2024
…oring and getting selected data source updates (#6827)

* add data source selection service

Signed-off-by: tygao <tygao@amazon.com>

* export generateComponentId in util

Signed-off-by: tygao <tygao@amazon.com>

* update tests and type

Signed-off-by: tygao <tygao@amazon.com>

* update tests

Signed-off-by: tygao <tygao@amazon.com>

* update bind in components

Signed-off-by: tygao <tygao@amazon.com>

* Changeset file for PR #6827 created/updated

* test: add tests for service

Signed-off-by: tygao <tygao@amazon.com>

* move dataSourceSelection out of componoent props

Signed-off-by: tygao <tygao@amazon.com>

* update service class name

Signed-off-by: tygao <tygao@amazon.com>

* use getter to replace dataSourceSelection props

Signed-off-by: tygao <tygao@amazon.com>

* add fallback for getter

Signed-off-by: tygao <tygao@amazon.com>

* test: add selection test case for component

Signed-off-by: tygao <tygao@amazon.com>

---------

Signed-off-by: tygao <tygao@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Lu Yu <nluyu@amazon.com>
(cherry picked from commit e2c0df2)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
BionIT added a commit that referenced this pull request May 31, 2024
…oring and getting selected data source updates (#6827) (#6875)

* add data source selection service



* export generateComponentId in util



* update tests and type



* update tests



* update bind in components



* Changeset file for PR #6827 created/updated

* test: add tests for service



* move dataSourceSelection out of componoent props



* update service class name



* use getter to replace dataSourceSelection props



* add fallback for getter



* test: add selection test case for component



---------




(cherry picked from commit e2c0df2)

Signed-off-by: tygao <tygao@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: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Lu Yu <nluyu@amazon.com>
LDrago27 pushed a commit to LDrago27/OpenSearch-Dashboards that referenced this pull request Jun 3, 2024
…oring and getting selected data source updates (opensearch-project#6827)

* add data source selection service

Signed-off-by: tygao <tygao@amazon.com>

* export generateComponentId in util

Signed-off-by: tygao <tygao@amazon.com>

* update tests and type

Signed-off-by: tygao <tygao@amazon.com>

* update tests

Signed-off-by: tygao <tygao@amazon.com>

* update bind in components

Signed-off-by: tygao <tygao@amazon.com>

* Changeset file for PR opensearch-project#6827 created/updated

* test: add tests for service

Signed-off-by: tygao <tygao@amazon.com>

* move dataSourceSelection out of componoent props

Signed-off-by: tygao <tygao@amazon.com>

* update service class name

Signed-off-by: tygao <tygao@amazon.com>

* use getter to replace dataSourceSelection props

Signed-off-by: tygao <tygao@amazon.com>

* add fallback for getter

Signed-off-by: tygao <tygao@amazon.com>

* test: add selection test case for component

Signed-off-by: tygao <tygao@amazon.com>

---------

Signed-off-by: tygao <tygao@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Lu Yu <nluyu@amazon.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants