-
Notifications
You must be signed in to change notification settings - Fork 55
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Overview page add state for missing data source (#2237)
* added callout for no data sources pathway in workspaces Signed-off-by: Adam Tackett <[email protected]> * reset dashboard if datasource is deleted Signed-off-by: Adam Tackett <[email protected]> * handle refresh, adjust naming, unit test Signed-off-by: Adam Tackett <[email protected]> * add i18n, finally block, move function Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Adam Tackett <[email protected]>
- Loading branch information
Showing
11 changed files
with
415 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
179 changes: 179 additions & 0 deletions
179
...mponents/overview/components/__tests__/__snapshots__/add_datasource_callout.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Add dashboard callout renders add datasource callout 1`] = ` | ||
| <AddDataSourceCallout> | ||
| <EuiPanel | ||
| hasShadow={true} | ||
| paddingSize="m" | ||
| > | ||
| <div | ||
| className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow" | ||
| > | ||
| <EuiFlexGroup | ||
| alignItems="center" | ||
| direction="column" | ||
| gutterSize="m" | ||
| justifyContent="center" | ||
| > | ||
| <div | ||
| className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive" | ||
| > | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <div | ||
| className="euiFlexItem euiFlexItem--flexGrowZero" | ||
| > | ||
| <EuiIcon | ||
| size="xxl" | ||
| type="database" | ||
| > | ||
| <EuiIconBeaker | ||
| aria-hidden={true} | ||
| className="euiIcon euiIcon--xxLarge euiIcon-isLoading" | ||
| focusable="false" | ||
| role="img" | ||
| style={null} | ||
| > | ||
| <svg | ||
| aria-hidden={true} | ||
| className="euiIcon euiIcon--xxLarge euiIcon-isLoading" | ||
| focusable="false" | ||
| height={16} | ||
| role="img" | ||
| style={null} | ||
| viewBox="0 0 16 16" | ||
| width={16} | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z" | ||
| /> | ||
| </svg> | ||
| </EuiIconBeaker> | ||
| </EuiIcon> | ||
| </div> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <div | ||
| className="euiFlexItem euiFlexItem--flexGrowZero" | ||
| > | ||
| <EuiTitle | ||
| size="m" | ||
| > | ||
| <h3 | ||
| className="euiTitle euiTitle--medium" | ||
| > | ||
| No connected data sources | ||
| </h3> | ||
| </EuiTitle> | ||
| </div> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| style={ | ||
| Object { | ||
| "maxWidth": "40%", | ||
| } | ||
| } | ||
| > | ||
| <div | ||
| className="euiFlexItem euiFlexItem--flexGrowZero" | ||
| style={ | ||
| Object { | ||
| "maxWidth": "40%", | ||
| } | ||
| } | ||
| > | ||
| <EuiText | ||
| textAlign="center" | ||
| > | ||
| <div | ||
| className="euiText euiText--medium" | ||
| > | ||
| <EuiTextAlign | ||
| textAlign="center" | ||
| > | ||
| <div | ||
| className="euiTextAlign euiTextAlign--center" | ||
| > | ||
| <p | ||
| style={ | ||
| Object { | ||
| "margin": 0, | ||
| } | ||
| } | ||
| > | ||
| There are no data sources associated to the workspace. Associate data sources or request your administrator to associate data sources for you to get started. | ||
| </p> | ||
| </div> | ||
| </EuiTextAlign> | ||
| </div> | ||
| </EuiText> | ||
| </div> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem | ||
| grow={false} | ||
| > | ||
| <div | ||
| className="euiFlexItem euiFlexItem--flexGrowZero" | ||
| > | ||
| <EuiButton | ||
| color="primary" | ||
| fill={true} | ||
| onClick={[Function]} | ||
| > | ||
| <EuiButtonDisplay | ||
| baseClassName="euiButton" | ||
| color="primary" | ||
| disabled={false} | ||
| element="button" | ||
| fill={true} | ||
| isDisabled={false} | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| <button | ||
| className="euiButton euiButton--primary euiButton--fill" | ||
| disabled={false} | ||
| onClick={[Function]} | ||
| style={ | ||
| Object { | ||
| "minWidth": undefined, | ||
| } | ||
| } | ||
| type="button" | ||
| > | ||
| <EuiButtonContent | ||
| className="euiButton__content" | ||
| iconGap="m" | ||
| iconSide="left" | ||
| textProps={ | ||
| Object { | ||
| "className": "euiButton__text", | ||
| } | ||
| } | ||
| > | ||
| <span | ||
| className="euiButtonContent euiButton__content" | ||
| > | ||
| <span | ||
| className="euiButton__text" | ||
| > | ||
| Manage data sources | ||
| </span> | ||
| </span> | ||
| </EuiButtonContent> | ||
| </button> | ||
| </EuiButtonDisplay> | ||
| </EuiButton> | ||
| </div> | ||
| </EuiFlexItem> | ||
| </div> | ||
| </EuiFlexGroup> | ||
| </div> | ||
| </EuiPanel> | ||
| </AddDataSourceCallout> | ||
| `; |
2 changes: 1 addition & 1 deletion
2
...c/components/overview/components/__tests__/__snapshots__/dashboard_controls.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 19 additions & 0 deletions
19
public/components/overview/components/__tests__/add_datasource_callout.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import { configure, mount } from 'enzyme'; | ||
| import Adapter from 'enzyme-adapter-react-16'; | ||
| import React from 'react'; | ||
| import { AddDataSourceCallout } from '../add_datasource_callout'; | ||
|
|
||
| describe('Add dashboard callout', () => { | ||
| configure({ adapter: new Adapter() }); | ||
|
|
||
| const wrapper = mount(<AddDataSourceCallout />); | ||
|
|
||
| it('renders add datasource callout', async () => { | ||
| expect(wrapper).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 56 additions & 0 deletions
56
public/components/overview/components/add_datasource_callout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| /* | ||
| * Copyright OpenSearch Contributors | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiPanel, | ||
| EuiIcon, | ||
| EuiTitle, | ||
| EuiText, | ||
| EuiButton, | ||
| } from '@elastic/eui'; | ||
| import { i18n } from '@osd/i18n'; | ||
| import { coreRefs } from '../../../framework/core_refs'; | ||
| import { dataSourceManagementPluginId } from '../../../../common/constants/shared'; | ||
|
|
||
| export function AddDataSourceCallout() { | ||
| return ( | ||
| <EuiPanel paddingSize="m" hasShadow={true}> | ||
| <EuiFlexGroup justifyContent="center" alignItems="center" direction="column" gutterSize="m"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiIcon size="xxl" type="database" /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiTitle size="m"> | ||
| <h3>No connected data sources</h3> | ||
| </EuiTitle> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} style={{ maxWidth: '40%' }}> | ||
| <EuiText textAlign="center"> | ||
| <p style={{ margin: 0 }}> | ||
| {i18n.translate('traceAnalytics.noDataSourcesMessage', { | ||
| defaultMessage: | ||
| 'There are no data sources associated to the workspace. Associate data sources or request your administrator to associate data sources for you to get started.', | ||
| })} | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton | ||
| fill | ||
| color="primary" | ||
| onClick={() => | ||
| coreRefs.application?.navigateToApp(dataSourceManagementPluginId, { path: '#/' }) | ||
| } | ||
| > | ||
| Manage data sources | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiPanel> | ||
| ); | ||
| } |
Oops, something went wrong.