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.

Sign up for GitHub

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

Jump to bottom

[Multiple Datasource] Create examples about how to consume data source components #6302

Merged
merged 5 commits into from
Apr 3, 2024
Merged

[Multiple Datasource] Create examples about how to consume data source components #6302

merged 5 commits into from
Apr 3, 2024

Conversation

BionIT
Copy link
Collaborator

@BionIT BionIT commented Apr 2, 2024 •
edited
Loading

Description

This change adds examples about how to configure the following components from data source management plugin:

  • data source selector component
  • data source view component
  • data source aggregated view to list all
  • data source aggregated view to list active options
  • data source multi selectable component
  • data source selectable component
    At the same time, there is one example shows how to configure the TopNavMenu to mount the data source component

Issues Resolved

Fixes #6275

Screenshot

examples.mp4

Testing the changes

The following was performed in the recording

  1. enable data source
  2. go to developer examples, and select Multiple Data source Integration
  3. go to the new data source selector page, should see page renders, and when selecting an option, the value is updated
  4. go to multi selectable page, should see page renders, and when selecting an option, the value is updated
  5. go to selectable page, should see page renders, and when selecting an option, the value is updated
  6. go to read only view page, should see page renders, and component is mounted
  7. go to list all page, should see page renders, and component is mounted
  8. go to list active page, should see page renders, and component is mounted
  9. go to last page, should see page renders, and component is mounted along with save button mounted with TopNavMenu

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

BionIT added 2 commits April 2, 2024 00:01
@BionIT
fix lint error
e8a2b8b 
Signed-off-by: Lu Yu <nluyu@amazon.com>
@BionIT
show useMemo
a75bf83 
Signed-off-by: Lu Yu <nluyu@amazon.com>
@codecov Codecov
Copy link

codecov bot commented Apr 2, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

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

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #6302      +/-   ##
==========================================
- Coverage   67.51%   67.49%   -0.03%     
==========================================
  Files        3376     3376              
  Lines       65783    65783              
  Branches    10637    10637              
==========================================
- Hits        44415    44401      -14     
- Misses      18785    18798      +13     
- Partials     2583     2584       +1
Flag Coverage Δ
Linux_1 32.60% <ø> (ø)
Linux_2 55.60% <ø> (ø)
Linux_3 44.81% <ø> (-0.02%) ⬇️
Linux_4 35.04% <ø> (ø)
Windows_1 32.62% <ø> (-0.03%) ⬇️
Windows_2 55.57% <ø> (ø)
Windows_3 44.83% <ø> (-0.01%) ⬇️
Windows_4 35.04% <ø> (ø)

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.

@BionIT BionIT changed the title [Multiple Datasource] Create example with multiple data source support [Multiple Datasource] Create examples about how to consume data source components Apr 2, 2024
@BionIT BionIT added the multiple datasource multiple datasource project label Apr 2, 2024
Flyingliuhub
Flyingliuhub reviewed Apr 2, 2024
View reviewed changes
examples/multiple_data_source_examples/public/application.tsx
*/
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
Copy link
Member

Choose a reason for hiding this comment

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

Should we use the relative path for the import?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We don't need to, similar here https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/examples/search_examples/server/routes/server_search_route.ts#L31

Flyingliuhub
Flyingliuhub reviewed Apr 2, 2024
View reviewed changes
examples/multiple_data_source_examples/public/components/data_source_selectable_example.tsx
const DataSourceMenu = dataSourceManagement.ui.getDataSourceMenu<DataSourceSelectableConfig>();
const [selectedDataSources, setSelectedDataSources] = useState<string[]>([]);

const data: ComponentProp[] = [
Copy link
Member

Choose a reason for hiding this comment

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

Several files use the exact same constant data. Is it possible to simplify it so that the same content doesn't need to be copied in each file?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

The data array content is different for each component

Flyingliuhub
Flyingliuhub reviewed Apr 2, 2024
View reviewed changes
examples/multiple_data_source_examples/public/components/home.tsx
pages: PageDef[];
};

const Nav = withRouter(({ history, pages }: NavProps) => {
Copy link
Member

Choose a reason for hiding this comment

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

if use Route component, probably don't need withRouter here

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

withRouter is different from Router component https://v5.reactrouter.com/web/api/withRouter

BionIT added 2 commits April 3, 2024 00:21
@ZilongX
Copy link
Collaborator

ZilongX commented Apr 3, 2024

We're missing a CHANGELOG entry here

@BionIT BionIT merged commit c0e8d4a into opensearch-project:main Apr 3, 2024
71 of 74 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Apr 3, 2024
@github-actions @ZilongX
[Multiple Datasource] Create examples about how to consume data sourc…
30b805e 
…e components (#6302)

* fix lint error

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

* show useMemo

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

* address comments

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

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>
Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com>
(cherry picked from commit c0e8d4a)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Apr 3, 2024
Merged
BionIT pushed a commit that referenced this pull request Apr 3, 2024
@opensearch-trigger-bot @github-actions @ZilongX
[Multiple Datasource] Create examples about how to consume data sourc…
6c7a823 
…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>
@BionIT BionIT mentioned this pull request Apr 9, 2024
Closed
77 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZilongX ZilongX ZilongX approved these changes

@Flyingliuhub Flyingliuhub Flyingliuhub approved these changes

@ananzh ananzh Awaiting requested review from ananzh ananzh is a code owner

@kavilla kavilla Awaiting requested review from kavilla kavilla is a code owner

@AMoo-Miki AMoo-Miki Awaiting requested review from AMoo-Miki AMoo-Miki is a code owner

@ashwin-pc ashwin-pc Awaiting requested review from ashwin-pc ashwin-pc is a code owner

@joshuarrrr joshuarrrr Awaiting requested review from joshuarrrr joshuarrrr is a code owner

@abbyhu2000 abbyhu2000 Awaiting requested review from abbyhu2000 abbyhu2000 is a code owner

@zengyan-amazon zengyan-amazon Awaiting requested review from zengyan-amazon zengyan-amazon is a code owner

@zhongnansu zhongnansu Awaiting requested review from zhongnansu zhongnansu is a code owner

@manasvinibs manasvinibs Awaiting requested review from manasvinibs manasvinibs is a code owner

@BSFishy BSFishy Awaiting requested review from BSFishy

@curq curq Awaiting requested review from curq curq is a code owner

@bandinib-amzn bandinib-amzn Awaiting requested review from bandinib-amzn bandinib-amzn is a code owner

@SuZhou-Joe SuZhou-Joe Awaiting requested review from SuZhou-Joe SuZhou-Joe is a code owner

@ruanyl ruanyl Awaiting requested review from ruanyl ruanyl is a code owner

@xinruiba xinruiba Awaiting requested review from xinruiba xinruiba is a code owner

Assignees
No one assigned
Labels
backport 2.x multiple datasource multiple datasource project seasoned-contributor v2.14.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Multiple Datasource] Create example plugin with multiple data source support
3 participants
@BionIT @ZilongX @Flyingliuhub