[Multiple Datasource] Add new error database icon to handle error state for data source component #6570

BionIT · 2024-04-21T04:10:02Z

Description

This change adds new error database icon, adds popover when the icon is clicked, and add button to refresh the page in both popover and toasts to handle network error state for data source component.

Issues Resolved

Screenshot

erroricon.mp4

Testing the changes

The following was performed in the recording

force to throw error in multi select, go to example plugin and click multi selectable and see error toasts, click on refresh will refresh page, click on error icon will see popover, click on refresh will refresh page, click on manage will go to data source management
force to throw error in selectable, go to example plugin and click selectable and see error toasts, click on refresh will refresh page, click on error icon will see popover, click on refresh will refresh page, click on manage will go to data source management
force to throw error in readonly single data source, go to example plugin and click data source view and see error toasts, click on refresh will refresh page, click on error icon will see popover, click on refresh will refresh page, click on manage will go to data source management
force to throw error in aggregated view, go to example plugin and click list all and see error toasts, click on refresh will refresh page, click on error icon will see popover, click on refresh will refresh page, click on manage will go to data source management
force to throw error in aggregated view, go to example plugin and click list active and see error toasts, click on refresh will refresh page, click on error icon will see popover, click on refresh will refresh page, click on manage will go to data source management

Find screenshots of toast and popover below

Changelog

skip

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 <[email protected]>

kavilla · 2024-04-21T20:37:17Z

src/plugins/data_source_management/public/components/custom_database_icon/error_icon.tsx

+ */
+import React from 'react';
+
+export const ErrorIcon = () => {


how's it look in dark mode?

This is dark mode

kavilla · 2024-04-21T20:39:07Z

when do we expect the error state to be present? should it always have a default connect and fall back to that?

kavilla · 2024-04-21T20:50:13Z

src/plugins/data_source_management/public/components/utils.ts

+    title: i18n.translate('dataSource.fetchDataSourceError', {
+      defaultMessage: 'Failed to fetch data sources',
+    }),
+    text: toMountPoint(getReloadButton()),


perhaps we can show the error in more detail similar to how the Discover page shows the error response if clicked in the toast.

This current implementation based on requirement from UX. Since this is more of network call failure, user needs to reload the page in order to trigger another call.

kavilla · 2024-04-21T20:52:28Z

totally unrelated to this PR. but every time the page refreshes is it getting data sources? if it is could we consider caching the data sources like how we cache index patterns. updating the data source on selection

BionIT · 2024-04-22T16:18:58Z

when do we expect the error state to be present? should it always have a default connect and fall back to that?

It only shows up when there is error when fetching data sources. Since the call failed, there will be no default data source. What we want user to do it to refresh the page

Flyingliuhub · 2024-04-22T16:38:18Z

...s/data_source_management/public/components/data_source_error_menu/data_source_error_menu.tsx

-      <EuiIcon type={'crossInCircleFilled'} color={'danger'} />
-      <EuiText color={'danger'}>Error</EuiText>
+      <EuiPopover
+        id={'dataSourceErrrorPopover'}


typo dataSourceErrrorPopover, it should dataSourceErrorPopover

Good catch! Will fix!

Fixed typo in new commit

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

codecov · 2024-04-22T17:18:53Z

Codecov Report

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

Project coverage is 45.22%. Comparing base (d2d410b) to head (9ede6f2).
Report is 16 commits behind head on main.

Files	Patch %	Lines
.../data_source_error_menu/data_source_error_menu.tsx	50.00%	4 Missing ⚠️
...lic/components/custom_database_icon/error_icon.tsx	50.00%	1 Missing ⚠️
...ce_aggregated_view/data_source_aggregated_view.tsx	0.00%	1 Missing ⚠️
...t/public/components/toast_button/reload_button.tsx	66.66%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #6570       +/-   ##
===========================================
+ Coverage   32.93%   45.22%   +12.28%     
===========================================
  Files        2260     1660      -600     
  Lines       45769    33701    -12068     
  Branches     7200     6409      -791     
===========================================
+ Hits        15075    15240      +165     
+ Misses      29984    17276    -12708     
- Partials      710     1185      +475

Flag	Coverage Δ
Linux_1	`?`
Windows_3	`45.22% <61.11%> (?)`

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.

…te for data source component (#6570) * add error icon and add popover Signed-off-by: Lu Yu <[email protected]> * fix tests Signed-off-by: Lu Yu <[email protected]> * fix typo Signed-off-by: Lu Yu <[email protected]> --------- Signed-off-by: Lu Yu <[email protected]> (cherry picked from commit b117fd3) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…te for data source component (#6570) (#6593) * add error icon and add popover * fix tests * fix typo --------- (cherry picked from commit b117fd3) Signed-off-by: Lu Yu <[email protected]> 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>

…te for data source component (opensearch-project#6570) * add error icon and add popover Signed-off-by: Lu Yu <[email protected]> * fix tests Signed-off-by: Lu Yu <[email protected]> * fix typo Signed-off-by: Lu Yu <[email protected]> --------- Signed-off-by: Lu Yu <[email protected]>

BionIT added 2 commits April 21, 2024 03:15

add error icon and add popover

7f10bf5

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

fix tests

2f91e1b

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

BionIT requested review from ananzh, kavilla, AMoo-Miki, ashwin-pc, joshuarrrr, abbyhu2000, zengyan-amazon, zhongnansu, manasvinibs, ZilongX, Flyingliuhub, curq, bandinib-amzn, SuZhou-Joe, ruanyl and xinruiba as code owners April 21, 2024 04:10

github-actions bot added all-star-contributor Skip-Changelog PRs that are too trivial to warrant a changelog or release notes entry labels Apr 21, 2024

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

kavilla reviewed Apr 21, 2024

View reviewed changes

Flyingliuhub reviewed Apr 22, 2024

View reviewed changes

fix typo

de12162

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

Merge branch 'main' into newerricon

9ede6f2

Flyingliuhub approved these changes Apr 22, 2024

View reviewed changes

zhongnansu approved these changes Apr 22, 2024

View reviewed changes

BionIT merged commit b117fd3 into opensearch-project:main Apr 22, 2024
67 checks passed

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

[Backport 2.x] [Multiple Datasource] Add new error database icon to handle error state for data source component #6593

Merged

This was referenced Apr 22, 2024

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

Closed

[Multiple Datasource] Improvement on the error state component for data source picker #6564

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Multiple Datasource] Add new error database icon to handle error state for data source component #6570

[Multiple Datasource] Add new error database icon to handle error state for data source component #6570

BionIT commented Apr 21, 2024 •

edited

Loading

kavilla Apr 21, 2024

BionIT Apr 22, 2024

kavilla commented Apr 21, 2024

kavilla Apr 21, 2024

BionIT Apr 22, 2024

kavilla commented Apr 21, 2024

BionIT commented Apr 22, 2024 •

edited

Loading

Flyingliuhub Apr 22, 2024

BionIT Apr 22, 2024

BionIT Apr 22, 2024

codecov bot commented Apr 22, 2024

[Multiple Datasource] Add new error database icon to handle error state for data source component #6570

[Multiple Datasource] Add new error database icon to handle error state for data source component #6570

Conversation

BionIT commented Apr 21, 2024 • edited Loading

Description

Issues Resolved

Screenshot

Testing the changes

Changelog

Check List

kavilla Apr 21, 2024

Choose a reason for hiding this comment

BionIT Apr 22, 2024

Choose a reason for hiding this comment

kavilla commented Apr 21, 2024

kavilla Apr 21, 2024

Choose a reason for hiding this comment

BionIT Apr 22, 2024

Choose a reason for hiding this comment

kavilla commented Apr 21, 2024

BionIT commented Apr 22, 2024 • edited Loading

Flyingliuhub Apr 22, 2024

Choose a reason for hiding this comment

BionIT Apr 22, 2024

Choose a reason for hiding this comment

BionIT Apr 22, 2024

Choose a reason for hiding this comment

codecov bot commented Apr 22, 2024

Codecov Report

BionIT commented Apr 21, 2024 •

edited

Loading

BionIT commented Apr 22, 2024 •

edited

Loading