handle listing errors gracefully (#66986)

src/plugins/kibana_react/public/table_list_view/table_list_view.tsx

@@ -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>