[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315

yujin-emma · 2024-04-02T19:00:22Z

Description

Today the datasource menu does not populate the label of the datasource based on the datasourceId. This can be confusing to users, who may not know what human-readable datasource they are looking at.

This PR fix the issue in DataSourceView component. Adding the getDataSourceById to get the complete data source saved object when plugin only pass id

Issues Resolved

#6274

Screenshot

Testing the changes

When only pass id in the DataSourceMenu

<DataSourceMenu
        setMenuMountPoint={setActionMenu}
        componentType={'DataSourceView'}
        componentConfig={{fullWidth: true, savedObjects: savedObjects.client,
        notifications: notifications,
        activeOption: [{id: '5aaa7880-f116-11ee-9a73-d3c4f99fbc1f'}],
      }}

when pass invalid dataSourceId

<DataSourceMenu
        setMenuMountPoint={setActionMenu}
        componentType={'DataSourceView'}
        componentConfig={{fullWidth: true, savedObjects: savedObjects.client,
        notifications: notifications,
        activeOption: [{id: '5aaa7880-f116-11ee-9a73'}], // format incorrect 
        // onSelectedDataSources: (dataSources) => console.log(dataSources)
      }}

When activeOption is empty, getDataSourceById throw out exception

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

…nly pass id Signed-off-by: yujin-emma <[email protected]>

Signed-off-by: yujin-emma <[email protected]>

codecov · 2024-04-02T19:16:26Z

Codecov Report

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

Project coverage is 67.49%. Comparing base (fb31b2d) to head (ef5066d).

Files	Patch %	Lines
...c/components/data_source_view/data_source_view.tsx	71.42%	3 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6315      +/-   ##
==========================================
- Coverage   67.51%   67.49%   -0.03%     
==========================================
  Files        3376     3376              
  Lines       65783    65798      +15     
  Branches    10637    10639       +2     
==========================================
- Hits        44415    44408       -7     
- Misses      18785    18804      +19     
- Partials     2583     2586       +3

Flag	Coverage Δ
Linux_1	`?`
Linux_2	`55.60% <ø> (ø)`
Linux_3	`?`
Linux_4	`?`
Windows_1	`32.62% <ø> (-0.03%)`	⬇️
Windows_2	`55.57% <ø> (ø)`
Windows_3	`44.85% <72.72%> (+<0.01%)`	⬆️
Windows_4	`35.02% <0.00%> (-0.02%)`	⬇️

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.

bandinib-amzn · 2024-04-02T20:07:07Z

Hi @yujin-emma

Can you add more clear and detailed description in PR overview? It is hard to understand what problem this PR is fixing without any context?
Can you fix codecov/patch CI failure by adding more tests?
As a improvement I would suggest in render method only render component and extract all logic to separate private method. It would be easy to read and test.

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

bandinib-amzn · 2024-04-02T20:07:59Z

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

+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+  async componentDidMount() {


just curious: why do we need componentDidMount and componentWillUnmount for this change?

We need to check the props.selectedOption.label exist, if not, need to call getDataSourceById to get the title back and set this value, since we only have one option, we only need to call at most once before rendering, this is the reason why put a componentDidMount here. As for this._isMounted = false; in componentWillUnmount, this refer to code here: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx#L65

bandinib-amzn · 2024-04-02T20:09:59Z

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

+    if (this.state.selectedOption) {
+      items = this.state.selectedOption.map((option) => {


Can you please explain me this - why are we using this.state for selectedOption now instead of this.props?

we pass the selectedOption from props, there can be some empty field, e.g. label is optional, we will use state to reconstruct this and render with the state one

+1, props should be enough.

We do not only copy the value from props, but also add missing label in the state, therefore, only state.selectedOption contains sufficient information to render, props.selectedOption can miss the label for some plugins

Signed-off-by: yujin-emma <[email protected]>

BionIT · 2024-04-02T22:14:17Z

test coverage check failed, can you add more tests?

BionIT · 2024-04-02T22:05:09Z

CHANGELOG.md

@@ -83,6 +83,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [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))
 - [Discover] Fix lazy loading of the legacy table from getting stuck ([#6041](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6041))
+- [MDS] Add data source query to fetch missing lable for DataSourceView ([#6315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6315))


Is it a bug or a new feature/enhancement?

BionIT · 2024-04-02T22:05:43Z

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

    return (
      <DataSourceView
-        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
+        savedObjectsClient={savedObjects!}


saved object client is not required

BionIT · 2024-04-02T22:05:58Z

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

    return (
      <DataSourceView
-        selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined}
+        savedObjectsClient={savedObjects!}
+        notifications={notifications!.toasts}


notification service is not required

src/plugins/data_source_management/public/components/data_source_view/data_source_view.test.tsx

BionIT · 2024-04-02T22:07:20Z

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


 interface DataSourceViewProps {
+  savedObjectsClient: SavedObjectsClientContract;


savedobjects and notifications should be optional config

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

Signed-off-by: yujin-emma <[email protected]>

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

src/plugins/data_source_management/public/types.ts

Signed-off-by: yujin-emma <[email protected]>

CHANGELOG.md

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

Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]>

…ce_menu/data_source_menu.tsx Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]>

Signed-off-by: Yu Jin <[email protected]>

xinruiba · 2024-04-03T18:02:48Z

LGTM, thanks

…t to add label when only pass id (#6315) * Add datasource query for DataSourceView component to add label when only pass id Signed-off-by: yujin-emma <[email protected]> * update changelog Signed-off-by: yujin-emma <[email protected]> * fix the failed test Signed-off-by: yujin-emma <[email protected]> * fix comment Signed-off-by: yujin-emma <[email protected]> * extract interface Signed-off-by: yujin-emma <[email protected]> * revert yml Signed-off-by: yujin-emma <[email protected]> * add more test Signed-off-by: yujin-emma <[email protected]> * update snapshot Signed-off-by: yujin-emma <[email protected]> * update snpshot Signed-off-by: yujin-emma <[email protected]> * update change log Signed-off-by: yujin-emma <[email protected]> * update change log and address other comments Signed-off-by: yujin-emma <[email protected]> * Update CHANGELOG.md Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]> * Update src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]> --------- Signed-off-by: yujin-emma <[email protected]> Signed-off-by: Yu Jin <[email protected]> Co-authored-by: Lu Yu <[email protected]> (cherry picked from commit cf43af3) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md

…t to add label when only pass id (#6315) (#6332) * Add datasource query for DataSourceView component to add label when only pass id Signed-off-by: yujin-emma <[email protected]> * update changelog Signed-off-by: yujin-emma <[email protected]> * fix the failed test Signed-off-by: yujin-emma <[email protected]> * fix comment Signed-off-by: yujin-emma <[email protected]> * extract interface Signed-off-by: yujin-emma <[email protected]> * revert yml Signed-off-by: yujin-emma <[email protected]> * add more test Signed-off-by: yujin-emma <[email protected]> * update snapshot Signed-off-by: yujin-emma <[email protected]> * update snpshot Signed-off-by: yujin-emma <[email protected]> * update change log Signed-off-by: yujin-emma <[email protected]> * update change log and address other comments Signed-off-by: yujin-emma <[email protected]> * Update CHANGELOG.md Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]> * Update src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]> --------- Signed-off-by: yujin-emma <[email protected]> Signed-off-by: Yu Jin <[email protected]> Co-authored-by: Lu Yu <[email protected]> (cherry picked from commit cf43af3) 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>

Add datasource query for DataSourceView component to add label when o…

857b926

…nly pass id Signed-off-by: yujin-emma <[email protected]>

yujin-emma requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, BSFishy, curq, bandinib-amzn, SuZhou-Joe, ruanyl, BionIT and xinruiba as code owners April 2, 2024 19:00

github-actions bot added the repeat-contributor label Apr 2, 2024

update changelog

e0611bb

Signed-off-by: yujin-emma <[email protected]>

huyaboo mentioned this pull request Apr 2, 2024

[MDS] TSVB Support #6298

Merged

7 tasks

bandinib-amzn changed the title ~~Add datasource query for DataSourceView component to add label when o…~~ Add datasource query for DataSourceView component to add label when only pass id Apr 2, 2024

bandinib-amzn reviewed Apr 2, 2024

View reviewed changes

fix the failed test

11f4800

Signed-off-by: yujin-emma <[email protected]>

BionIT reviewed Apr 2, 2024

View reviewed changes

fix comment

1e5d17d

Signed-off-by: yujin-emma <[email protected]>

yujin-emma and others added 7 commits April 2, 2024 23:14

extract interface

e4e4230

Signed-off-by: yujin-emma <[email protected]>

revert yml

e06b312

Signed-off-by: yujin-emma <[email protected]>

Merge branch 'main' into 6274-emma

8050d63

add more test

7e0eee1

Signed-off-by: yujin-emma <[email protected]>

update snapshot

42204b2

Signed-off-by: yujin-emma <[email protected]>

update snpshot

c09bd5e

Signed-off-by: yujin-emma <[email protected]>

update change log

dc35342

Signed-off-by: yujin-emma <[email protected]>

BionIT reviewed Apr 3, 2024

View reviewed changes

src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx Outdated Show resolved Hide resolved

src/plugins/data_source_management/public/types.ts Outdated Show resolved Hide resolved

update change log and address other comments

1e95428

Signed-off-by: yujin-emma <[email protected]>

BionIT previously approved these changes Apr 3, 2024

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx Outdated Show resolved Hide resolved

yujin-emma dismissed BionIT’s stale review via 43989a3 April 3, 2024 03:58

yujin-emma and others added 3 commits April 2, 2024 20:58

Update CHANGELOG.md

43989a3

Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]>

Update src/plugins/data_source_management/public/components/data_sour…

13c0b45

…ce_menu/data_source_menu.tsx Co-authored-by: Lu Yu <[email protected]> Signed-off-by: Yu Jin <[email protected]>

Merge branch 'main' into 6274-emma

57206d8

BionIT previously approved these changes Apr 3, 2024

View reviewed changes

yujin-emma changed the title ~~Add datasource query for DataSourceView component to add label when only pass id~~ [Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id Apr 3, 2024

Merge branch 'main' into 6274-emma

ef5066d

Signed-off-by: Yu Jin <[email protected]>

yujin-emma dismissed BionIT’s stale review via ef5066d April 3, 2024 16:24

BionIT approved these changes Apr 3, 2024

View reviewed changes

xinruiba approved these changes Apr 3, 2024

View reviewed changes

BionIT added multiple datasource multiple datasource project v2.14.0 backport 2.x labels Apr 3, 2024

BionIT merged commit cf43af3 into opensearch-project:main Apr 3, 2024
77 checks passed

opensearch-trigger-bot bot mentioned this pull request Apr 3, 2024

[Backport 2.x] [Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6332

Merged

BionIT mentioned this pull request Apr 3, 2024

[MDS] Support label rendering when only given ID #6274

Closed

2 tasks

BionIT mentioned this pull request Apr 22, 2024

[Meta][UX][Multiple Datasource] Improvement to data source components in the navigation bar #6216

Closed

36 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315

[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315

yujin-emma commented Apr 2, 2024 •

edited

Loading

codecov bot commented Apr 2, 2024 •

edited

Loading

bandinib-amzn commented Apr 2, 2024

bandinib-amzn Apr 2, 2024

yujin-emma Apr 2, 2024

bandinib-amzn Apr 2, 2024

yujin-emma Apr 2, 2024

xinruiba Apr 2, 2024

yujin-emma Apr 2, 2024

BionIT commented Apr 2, 2024

BionIT Apr 2, 2024

BionIT Apr 2, 2024

BionIT Apr 2, 2024

BionIT Apr 2, 2024

xinruiba commented Apr 3, 2024

		if (this.state.selectedOption) {
		items = this.state.selectedOption.map((option) => {


		interface DataSourceViewProps {
		savedObjectsClient: SavedObjectsClientContract;

[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315

[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315

Conversation

yujin-emma commented Apr 2, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Check List

codecov bot commented Apr 2, 2024 • edited Loading

Codecov Report

bandinib-amzn commented Apr 2, 2024

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

BionIT commented Apr 2, 2024

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

xinruiba commented Apr 3, 2024

yujin-emma commented Apr 2, 2024 •

edited

Loading

codecov bot commented Apr 2, 2024 •

edited

Loading