github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

handle listing errors gracefully (#66986) (#67475)

Browse source 
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Joe Reuter 2020-05-28 11:18:39 +02:00 • committed by GitHub
parent d49eb7fd46
commit a7b6bfa398
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
View file

@ -37,7 +37,7 @@ import {
EuiCallOut,
EuiBasicTableColumn,
} from '@elastic/eui';
import { ToastsStart } from 'kibana/public';
import { HttpFetchError, ToastsStart } from 'kibana/public';
import { toMountPoint } from '../util';
interface Column {
@ -79,6 +79,7 @@ export interface TableListViewState {
isDeletingItems: boolean;
showDeleteModal: boolean;
showLimitError: boolean;
fetchError?: HttpFetchError;
filter: string;
selectedIds: string[];
totalItems: number;
@ -128,22 +129,33 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
}
debouncedFetch = debounce(async (filter: string) => {
const response = await this.props.findItems(filter);
try {
const response = await this.props.findItems(filter);
if (!this._isMounted) {
return;
}
if (!this._isMounted) {
return;
}
// We need this check to handle the case where search results come back in a different
// order than they were sent out. Only load results for the most recent search.
// Also, in case filter is empty, items are being pre-sorted alphabetically.
if (filter === this.state.filter) {
// We need this check to handle the case where search results come back in a different
// order than they were sent out. Only load results for the most recent search.
// Also, in case filter is empty, items are being pre-sorted alphabetically.
if (filter === this.state.filter) {
this.setState({
hasInitialFetchReturned: true,
isFetchingItems: false,
items: !filter ? sortBy(response.hits, 'title') : response.hits,
totalItems: response.total,
showLimitError: response.total > this.props.listingLimit,
});
}
} catch (fetchError) {
this.setState({
hasInitialFetchReturned: true,
isFetchingItems: false,
items: !filter ? sortBy(response.hits, 'title') : response.hits,
totalItems: response.total,
showLimitError: response.total > this.props.listingLimit,
items: [],
totalItems: 0,
showLimitError: false,
fetchError,
});
}
}, 300);
@ -152,6 +164,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
this.setState(
{
isFetchingItems: true,
fetchError: undefined,
},
this.debouncedFetch.bind(null, this.state.filter)
);
@ -312,6 +325,37 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
}
}
renderFetchError() {
if (this.state.fetchError) {
return (
<React.Fragment>
<EuiCallOut
title={
<FormattedMessage
id="kibana-react.tableListView.listing.fetchErrorTitle"
defaultMessage="Fetching listing failed"
/>
}
color="danger"
iconType="alert"
>
<p>
<FormattedMessage
id="kibana-react.tableListView.listing.fetchErrorDescription"
defaultMessage="The {entityName} listing could not be fetched: {message}."
values={{
entityName: this.props.entityName,
message: this.state.fetchError.body?.message || this.state.fetchError.message,
}}
/>
</p>
</EuiCallOut>
<EuiSpacer size="m" />
</React.Fragment>
);
}
}
renderNoItemsMessage() {
if (this.props.noItemsFragment) {
return this.props.noItemsFragment;
@ -431,7 +475,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
}
renderListingOrEmptyState() {
if (this.hasNoItems()) {
if (!this.state.fetchError && this.hasNoItems()) {
return this.renderNoItemsMessage();
}
@ -475,6 +519,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
<EuiSpacer size="m" />
{this.renderListingLimitWarning()}
{this.renderFetchError()}
{this.renderTable()}
</div>