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 error state to all data source menu components to show error component and consolidate all fetch errors #6440

Merged
merged 9 commits into from
Apr 16, 2024
Merged
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
- [Dynamic Configurations] Improve dynamic configurations by adding cache and simplifying client fetch ([#6364](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6364))
- [CSP Handler] Update CSP handler to only query and modify frame ancestors instead of all CSP directives ([#6398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6398))
- [MD] Add OpenSearch cluster group label to top of single selectable dropdown ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))
- [Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors ([#6440](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6440))
- [Workspace] Support workspace in saved objects client in server side. ([#6365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6365))
- [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ import {
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
import { getDataSourcesWithFields } from '../utils';
import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
import { SavedObject } from '../../../../../core/public';
import { DataSourceAttributes } from '../../types';
import { DataSourceErrorMenu } from '../data_source_error_menu';
import { DataSourceBaseState } from '../data_source_menu/types';

interface DataSourceAggregatedViewProps {
savedObjectsClient: SavedObjectsClientContract;
Expand All @@ -27,7 +29,7 @@ interface DataSourceAggregatedViewProps {
displayAllCompatibleDataSources: boolean;
}

interface DataSourceAggregatedViewState {
interface DataSourceAggregatedViewState extends DataSourceBaseState {
isPopoverOpen: boolean;
allDataSourcesIdToTitleMap: Map<string, any>;
}
Expand All @@ -44,6 +46,7 @@ export class DataSourceAggregatedView extends React.Component<
this.state = {
isPopoverOpen: false,
allDataSourcesIdToTitleMap: new Map(),
showError: false,
};
}

Expand Down Expand Up @@ -89,15 +92,18 @@ export class DataSourceAggregatedView extends React.Component<
}
})
.catch(() => {
this.props.notifications.addWarning(
i18n.translate('dataSource.fetchDataSourceError', {
defaultMessage: 'Unable to fetch existing data sources',
})
);
handleDataSourceFetchError(this.onError.bind(this), this.props.notifications);
});
}

onError() {
this.setState({ showError: true });
}

render() {
if (this.state.showError) {
return <DataSourceErrorMenu />;
}
const button = (
<EuiButtonIcon
data-test-subj="dataSourceAggregatedViewInfoButton"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiIcon, EuiText } from '@elastic/eui';
import React from 'react';

export const DataSourceErrorMenu = () => {
return (
<>
<EuiIcon type={'crossInCircleFilled'} color={'danger'} />
<EuiText color={'danger'}>Error</EuiText>
</>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
export { DataSourceErrorMenu } from './data_source_error_menu';

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export interface DataSourceBaseConfig {
disabled?: boolean;
}

export interface DataSourceBaseState {
showError: boolean;
}

export interface DataSourceMenuProps<T = any> {
componentType: DataSourceComponentType;
componentConfig: T;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@

import React from 'react';
import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
import { i18n } from '@osd/i18n';
import { IUiSettingsClient } from 'src/core/public';
import { DataSourceFilterGroup, SelectedDataSourceOption } from './data_source_filter_group';
import { getDataSourcesWithFields } from '../utils';
import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
import { DataSourceBaseState } from '../data_source_menu/types';
import { DataSourceErrorMenu } from '../data_source_error_menu';

export interface DataSourceMultiSeletableProps {
savedObjectsClient: SavedObjectsClientContract;
Expand All @@ -19,7 +20,7 @@ export interface DataSourceMultiSeletableProps {
uiSettings?: IUiSettingsClient;
}

interface DataSourceMultiSeletableState {
interface DataSourceMultiSeletableState extends DataSourceBaseState {
dataSourceOptions: SelectedDataSourceOption[];
selectedOptions: SelectedDataSourceOption[];
defaultDataSource: string | null;
Expand All @@ -38,6 +39,7 @@ export class DataSourceMultiSelectable extends React.Component<
dataSourceOptions: [],
selectedOptions: [],
defaultDataSource: null,
showError: false,
};
}

Expand Down Expand Up @@ -84,14 +86,18 @@ export class DataSourceMultiSelectable extends React.Component<

this.props.onSelectedDataSources(selectedOptions);
} catch (error) {
this.props.notifications.addWarning(
i18n.translate('dataSource.fetchDataSourceError', {
defaultMessage: 'Unable to fetch existing data sources',
})
handleDataSourceFetchError(
this.onError.bind(this),
this.props.notifications,
this.props.onSelectedDataSources
);
}
}

onError() {
this.setState({ showError: true });
}

onChange(selectedOptions: SelectedDataSourceOption[]) {
if (!this._isMounted) return;
this.setState({
Expand All @@ -101,6 +107,9 @@ export class DataSourceMultiSelectable extends React.Component<
}

render() {
if (this.state.showError) {
return <DataSourceErrorMenu />;
}
return (
<DataSourceFilterGroup
selectedOptions={this.state.selectedOptions}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ describe('DataSourceSelectable', () => {
label: 'test2',
},
],
showError: false,
});

containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
Expand All @@ -165,6 +166,7 @@ describe('DataSourceSelectable', () => {
label: 'test2',
},
],
showError: false,
});

expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
Expand Down Expand Up @@ -341,6 +343,7 @@ describe('DataSourceSelectable', () => {
label: 'test2',
},
],
showError: false,
});
});

Expand All @@ -362,12 +365,13 @@ describe('DataSourceSelectable', () => {

const containerInstance = container.instance();

expect(onSelectedDataSource).toBeCalledTimes(0);
expect(onSelectedDataSource).toBeCalledWith([]);
expect(containerInstance.state).toEqual({
dataSourceOptions: [],
defaultDataSource: null,
isPopoverOpen: false,
selectedOption: [],
showError: true,
});

containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
Expand All @@ -388,6 +392,7 @@ describe('DataSourceSelectable', () => {
label: 'test2',
},
],
showError: true,
});

expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,17 @@ import {
getDataSourcesWithFields,
getDefaultDataSource,
getFilteredDataSources,
handleDataSourceFetchError,
} from '../utils';
import { LocalCluster } from '../data_source_selector/data_source_selector';
import { SavedObject } from '../../../../../core/public';
import { DataSourceAttributes } from '../../types';
import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
import {
DataSourceBaseState,
DataSourceGroupLabelOption,
DataSourceOption,
} from '../data_source_menu/types';
import { DataSourceErrorMenu } from '../data_source_error_menu';
import { DataSourceItem } from '../data_source_item';
import './data_source_selectable.scss';
import { DataSourceDropDownHeader } from '../drop_down_header';
Expand All @@ -47,7 +53,7 @@ interface DataSourceSelectableProps {
uiSettings?: IUiSettingsClient;
}

interface DataSourceSelectableState {
interface DataSourceSelectableState extends DataSourceBaseState {
dataSourceOptions: DataSourceOption[];
isPopoverOpen: boolean;
selectedOption?: DataSourceOption[];
Expand All @@ -74,6 +80,7 @@ export class DataSourceSelectable extends React.Component<
isPopoverOpen: false,
selectedOption: [],
defaultDataSource: null,
showError: false,
};

this.onChange.bind(this);
Expand Down Expand Up @@ -192,14 +199,18 @@ export class DataSourceSelectable extends React.Component<
// handle default data source if there is no valid active option
this.handleDefaultDataSource(dataSourceOptions, defaultDataSource);
} catch (error) {
this.props.notifications.addWarning(
i18n.translate('dataSource.fetchDataSourceError', {
defaultMessage: 'Unable to fetch existing data sources',
})
handleDataSourceFetchError(
this.onError.bind(this),
this.props.notifications,
this.props.onSelectedDataSources
);
}
}

onError() {
this.setState({ showError: true });
}

onChange(options: DataSourceOption[]) {
if (!this._isMounted) return;
const optionsWithoutGroupLabel = options.filter(
Expand Down Expand Up @@ -231,6 +242,9 @@ export class DataSourceSelectable extends React.Component<
};

render() {
if (this.state.showError) {
return <DataSourceErrorMenu />;
}
const button = (
<>
<EuiButtonEmpty
Expand Down
Loading
Loading