Merge branch 'visualization-wizard-new' of https://github.com/stratou…

…la/kibana into visualization-wizard-new
elastic · Nov 2, 2020 · 07d7a5e · 07d7a5e
2 parents cc2c53d + 3a9b4d1
commit 07d7a5e
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 98 deletions.
diff --git a/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx b/src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 import {
@@ -86,7 +86,11 @@ export function ActionBar({
       onChangeCount(newDocCount);
     }
   };
-
+  useEffect(() => {
+    if (newDocCount !== docCount && newDocCount === 0) {
+      setNewDocCount(docCount);
+    }
+  }, [docCount, newDocCount]);
   return (
     <I18nProvider>
       <form onSubmit={onSubmit}>

diff --git a/src/plugins/discover/public/application/angular/context_app.html b/src/plugins/discover/public/application/angular/context_app.html
@@ -10,33 +10,23 @@
 >
 </kbn-top-nav>
 
-<!-- Error feedback -->
-<context-error-message
+<!-- Context App Legacy -->
+<context-app-legacy
+  filter="contextApp.actions.addFilter"
+  hits="contextApp.state.rows.all"
+  index-pattern="contextApp.indexPattern"
+  sorting="contextApp.state.queryParameters.sort"
+  columns="contextApp.state.queryParameters.columns"
+  minimum-visible-rows="contextApp.state.rows.all.length"
   status="contextApp.state.loadingStatus.anchor.status"
-  reason="contextApp.state.loadingStatus.anchor.reason">
-</context-error-message>
-
-<main
-  class="kuiViewContent kuiViewContentItem"
-  ng-if="contextApp.state.loadingStatus.anchor.status !== contextApp.constants.LOADING_STATUS.FAILED"
->
-  <!-- Table -->
-  <context-app-legacy
-    filter="contextApp.actions.addFilter"
-    hits="contextApp.state.rows.all"
-    index-pattern="contextApp.indexPattern"
-    sorting="contextApp.state.queryParameters.sort"
-    columns="contextApp.state.queryParameters.columns"
-    minimum-visible-rows="contextApp.state.rows.all.length"
-    status="contextApp.state.loadingStatus.anchor.status"
-    default-step-size="contextApp.state.queryParameters.defaultStepSize"
-    predecessor-count="contextApp.state.queryParameters.predecessorCount"
-    predecessor-available="contextApp.state.rows.predecessors.length"
-    predecessor-status="contextApp.state.loadingStatus.predecessors.status"
-    on-change-predecessor-count="contextApp.actions.fetchGivenPredecessorRows"
-    successor-count="contextApp.state.queryParameters.successorCount"
-    successor-available="contextApp.state.rows.successors.length"
-    successor-status="contextApp.state.loadingStatus.successors.status"
-    on-change-successor-count="contextApp.actions.fetchGivenSuccessorRows"
-  ></context-app-legacy>
-</main>
+  reason="contextApp.state.loadingStatus.anchor.reason"
+  default-step-size="contextApp.state.queryParameters.defaultStepSize"
+  predecessor-count="contextApp.state.queryParameters.predecessorCount"
+  predecessor-available="contextApp.state.rows.predecessors.length"
+  predecessor-status="contextApp.state.loadingStatus.predecessors.status"
+  on-change-predecessor-count="contextApp.actions.fetchGivenPredecessorRows"
+  successor-count="contextApp.state.queryParameters.successorCount"
+  successor-available="contextApp.state.rows.successors.length"
+  successor-status="contextApp.state.loadingStatus.successors.status"
+  on-change-successor-count="contextApp.actions.fetchGivenSuccessorRows"
+></context-app-legacy>
diff --git a/src/plugins/discover/public/application/components/context_app/context_app_legacy.scss b/src/plugins/discover/public/application/components/context_app/context_app_legacy.scss
@@ -0,0 +1,5 @@
+.dscCxtAppContent {
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+}
diff --git a/src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx b/src/plugins/discover/public/application/components/context_app/context_app_legacy.test.tsx
@@ -24,6 +24,7 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DocTableLegacy } from '../../angular/doc_table/create_doc_table_react';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { ActionBar } from '../../angular/context/components/action_bar/action_bar';
+import { ContextErrorMessage } from '../context_error_message';
 
 describe('ContextAppLegacy test', () => {
   const hit = {
@@ -53,6 +54,7 @@ describe('ContextAppLegacy test', () => {
     minimumVisibleRows: 5,
     indexPattern,
     status: 'loaded',
+    reason: 'no reason',
     defaultStepSize: 5,
     predecessorCount: 10,
     successorCount: 10,
@@ -76,9 +78,19 @@ describe('ContextAppLegacy test', () => {
     const props = { ...defaultProps };
     props.status = 'loading';
     const component = mountWithIntl(<ContextAppLegacy {...props} />);
-    expect(component.find('DocTableLegacy').length).toBe(0);
+    expect(component.find(DocTableLegacy).length).toBe(0);
     const loadingIndicator = findTestSubject(component, 'contextApp_loadingIndicator');
     expect(loadingIndicator.length).toBe(1);
     expect(component.find(ActionBar).length).toBe(2);
   });
+
+  it('renders error message', () => {
+    const props = { ...defaultProps };
+    props.status = 'failed';
+    props.reason = 'something went wrong';
+    const component = mountWithIntl(<ContextAppLegacy {...props} />);
+    expect(component.find(DocTableLegacy).length).toBe(0);
+    const errorMessage = component.find(ContextErrorMessage);
+    expect(errorMessage.length).toBe(1);
+  });
 });
diff --git a/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx b/src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import './context_app_legacy.scss';
 import React from 'react';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
-import { EuiPanel, EuiText } from '@elastic/eui';
+import { EuiPanel, EuiText, EuiPageContent, EuiPage } from '@elastic/eui';
+import { ContextErrorMessage } from '../context_error_message';
 import {
   DocTableLegacy,
   DocTableLegacyProps,
@@ -35,6 +37,7 @@ export interface ContextAppProps {
   minimumVisibleRows: number;
   sorting: string[];
   status: string;
+  reason: string;
   defaultStepSize: number;
   predecessorCount: number;
   successorCount: number;
@@ -56,6 +59,7 @@ function isLoading(status: string) {
 export function ContextAppLegacy(renderProps: ContextAppProps) {
   const status = renderProps.status;
   const isLoaded = status === LOADING_STATUS.LOADED;
+  const isFailed = status === LOADING_STATUS.FAILED;
 
   const actionBarProps = (type: string) => {
     const {
@@ -111,18 +115,24 @@ export function ContextAppLegacy(renderProps: ContextAppProps) {
 
   return (
     <I18nProvider>
-      <React.Fragment>
-        <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
-        {loadingFeedback()}
-        {isLoaded ? (
-          <EuiPanel paddingSize="none">
-            <div className="discover-table">
-              <DocTableLegacy {...docTableProps()} />
-            </div>
-          </EuiPanel>
-        ) : null}
-        <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
-      </React.Fragment>
+      {isFailed ? (
+        <ContextErrorMessage status={status} reason={renderProps.reason} />
+      ) : (
+        <EuiPage>
+          <EuiPageContent paddingSize="s" className="dscCxtAppContent">
+            <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
+            {loadingFeedback()}
+            {isLoaded ? (
+              <EuiPanel paddingSize="none">
+                <div className="discover-table">
+                  <DocTableLegacy {...docTableProps()} />
+                </div>
+              </EuiPanel>
+            ) : null}
+            <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
+          </EuiPageContent>
+        </EuiPage>
+      )}
     </I18nProvider>
   );
 }
diff --git a/...lugins/discover/public/application/components/context_app/context_app_legacy_directive.ts b/...lugins/discover/public/application/components/context_app/context_app_legacy_directive.ts
@@ -27,6 +27,7 @@ export function createContextAppLegacy(reactDirective: any) {
     ['columns', { watchDepth: 'collection' }],
     ['minimumVisibleRows', { watchDepth: 'reference' }],
     ['status', { watchDepth: 'reference' }],
+    ['reason', { watchDepth: 'reference' }],
     ['defaultStepSize', { watchDepth: 'reference' }],
     ['predecessorCount', { watchDepth: 'reference' }],
     ['predecessorAvailable', { watchDepth: 'reference' }],

diff --git a/...er/public/application/components/context_error_message/context_error_message_directive.ts b/...er/public/application/components/context_error_message/context_error_message_directive.ts
diff --git a/src/plugins/discover/public/application/components/context_error_message/index.ts b/src/plugins/discover/public/application/components/context_error_message/index.ts
@@ -18,4 +18,3 @@
  */
 
 export { ContextErrorMessage } from './context_error_message';
-export { createContextErrorMessageDirective } from './context_error_message_directive';
diff --git a/src/plugins/discover/public/get_inner_angular.ts b/src/plugins/discover/public/get_inner_angular.ts
@@ -52,7 +52,6 @@ import {
   createTopNavDirective,
   createTopNavHelper,
 } from '../../kibana_legacy/public';
-import { createContextErrorMessageDirective } from './application/components/context_error_message';
 import { DiscoverStartPlugins } from './plugin';
 import { getScopedHistory } from './kibana_services';
 import { createDiscoverLegacyDirective } from './application/components/create_discover_legacy_directive';
@@ -137,8 +136,7 @@ export function initializeInnerAngularModule(
     .config(watchMultiDecorator)
     .run(registerListenEventListener)
     .directive('renderComplete', createRenderCompleteDirective)
-    .directive('discoverLegacy', createDiscoverLegacyDirective)
-    .directive('contextErrorMessage', createContextErrorMessageDirective);
+    .directive('discoverLegacy', createDiscoverLegacyDirective);
 }
 
 function createLocalPromiseModule() {

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',