[Visualize] Vis listing page breaks on unknown vis type (#82018) (#83423

) * [Visualize] Vis listing page breaks on unknown vis type * Display a warning badge in case of an error Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 16, 2020 · d37d553 · d37d553
1 parent c59803f
commit d37d553
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx
@@ -427,6 +427,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
         ),
         icon: 'pencil',
         type: 'icon',
+        enabled: ({ error }: { error: string }) => !error,
         onClick: this.props.editItem,
       },
     ];

diff --git a/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts b/src/plugins/visualizations/public/vis_types/vis_type_alias_registry.ts
@@ -21,6 +21,7 @@ import { TriggerContextMapping } from '../../../ui_actions/public';
 export interface VisualizationListItem {
   editUrl: string;
   editApp?: string;
+  error?: string;
   icon: string;
   id: string;
   stage: 'experimental' | 'beta' | 'production';

diff --git a/src/plugins/visualize/public/application/components/visualize_listing.tsx b/src/plugins/visualize/public/application/components/visualize_listing.tsx
@@ -104,7 +104,9 @@ export const VisualizeListing = () => {
         .findListItems(filter, listingLimit)
         .then(({ total, hits }: { total: number; hits: object[] }) => ({
           total,
-          hits: hits.filter((result: any) => isLabsEnabled || result.type.stage !== 'experimental'),
+          hits: hits.filter(
+            (result: any) => isLabsEnabled || result.type?.stage !== 'experimental'
+          ),
         }));
     },
     [listingLimit, savedVisualizations, uiSettings]

diff --git a/src/plugins/visualize/public/application/utils/get_table_columns.tsx b/src/plugins/visualize/public/application/utils/get_table_columns.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { History } from 'history';
-import { EuiBetaBadge, EuiButton, EuiEmptyPrompt, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiBetaBadge, EuiButton, EuiEmptyPrompt, EuiIcon, EuiLink, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -87,34 +87,43 @@ export const getTableColumns = (application: ApplicationStart, history: History)
       defaultMessage: 'Title',
     }),
     sortable: true,
-    render: (field: string, { editApp, editUrl, title }: VisualizationListItem) => (
-      <EuiLink
-        onClick={() => {
-          if (editApp) {
-            application.navigateToApp(editApp, { path: editUrl });
-          } else if (editUrl) {
-            history.push(editUrl);
-          }
-        }}
-        data-test-subj={`visListingTitleLink-${title.split(' ').join('-')}`}
-      >
-        {field}
-      </EuiLink>
-    ),
+    render: (field: string, { editApp, editUrl, title, error }: VisualizationListItem) =>
+      // In case an error occurs i.e. the vis has wrong type, we render the vis but without the link
+      !error ? (
+        <EuiLink
+          onClick={() => {
+            if (editApp) {
+              application.navigateToApp(editApp, { path: editUrl });
+            } else if (editUrl) {
+              history.push(editUrl);
+            }
+          }}
+          data-test-subj={`visListingTitleLink-${title.split(' ').join('-')}`}
+        >
+          {field}
+        </EuiLink>
+      ) : (
+        field
+      ),
   },
   {
     field: 'typeTitle',
     name: i18n.translate('visualize.listing.table.typeColumnName', {
       defaultMessage: 'Type',
     }),
     sortable: true,
-    render: (field: string, record: VisualizationListItem) => (
-      <span>
-        {renderItemTypeIcon(record)}
-        {record.typeTitle}
-        {getBadge(record)}
-      </span>
-    ),
+    render: (field: string, record: VisualizationListItem) =>
+      !record.error ? (
+        <span>
+          {renderItemTypeIcon(record)}
+          {record.typeTitle}
+          {getBadge(record)}
+        </span>
+      ) : (
+        <EuiBadge iconType="alert" color="warning">
+          {record.error}
+        </EuiBadge>
+      ),
   },
   {
     field: 'description',