[Lens] Visualization validation and better error messages

x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx

@@ -372,4 +372,42 @@ describe('Datatable Visualization', () => {
       });
     });
   });
+
+  describe('#getErrorMessages', () => {
+    it('returns an error explanation if the datasource is missing a metric dimension', () => {
+      const datasource = createMockDatasource('test');
+      const layer = { layerId: 'a', columns: ['b', 'c'] };
+      const frame = mockFrame();
+      frame.datasourceLayers = { a: datasource.publicAPIMock };
+      datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]);
+      datasource.publicAPIMock.getOperationForColumnId.mockReturnValue({
+        dataType: 'string',
+        isBucketed: true, // move it from the metric to the break down by side
+        label: 'label',
+      });
+
+      const error = datatableVisualization.getErrorMessages({ layers: [layer] }, frame);
+
+      expect(error).toHaveLength(1);
+      expect(error![0].shortMessage).toMatch('Missing metric');
+      expect(error![0].longMessage).toMatch('Add a field in the Metrics panel');
+    });
+
+    it('returns undefined if the metric dimension is defined', () => {
+      const datasource = createMockDatasource('test');
+      const layer = { layerId: 'a', columns: ['b', 'c'] };
+      const frame = mockFrame();
+      frame.datasourceLayers = { a: datasource.publicAPIMock };
+      datasource.publicAPIMock.getTableSpec.mockReturnValue([{ columnId: 'c' }, { columnId: 'b' }]);
+      datasource.publicAPIMock.getOperationForColumnId.mockReturnValue({
+        dataType: 'string',
+        isBucketed: false, // keep it a metric
+        label: 'label',
+      });
+
+      const error = datatableVisualization.getErrorMessages({ layers: [layer] }, frame);
+
+      expect(error).not.toBeDefined();
+    });
+  });
 });

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -6,7 +6,13 @@
 
 import { Ast } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';
-import { SuggestionRequest, Visualization, VisualizationSuggestion, Operation } from '../types';
+import {
+  SuggestionRequest,
+  Visualization,
+  VisualizationSuggestion,
+  Operation,
+  DatasourcePublicAPI,
+} from '../types';
 import { LensIconChartDatatable } from '../assets/chart_datatable';
 
 export interface LayerState {
@@ -128,16 +134,13 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
   },
 
   getConfiguration({ state, frame, layerId }) {
-    const layer = state.layers.find((l) => l.layerId === layerId);
-    if (!layer) {
+    const { sortedColumns, datasource } =
+      getDataSourceAndSortedColumns(state, frame.datasourceLayers, layerId) || {};
+
+    if (!sortedColumns) {
       return { groups: [] };
     }
 
-    const datasource = frame.datasourceLayers[layer.layerId];
-    const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
-    // When we add a column it could be empty, and therefore have no order
-    const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
-
     return {
       groups: [
         {
@@ -146,7 +149,9 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
             defaultMessage: 'Break down by',
           }),
           layerId: state.layers[0].layerId,
-          accessors: sortedColumns.filter((c) => datasource.getOperationForColumnId(c)?.isBucketed),
+          accessors: sortedColumns.filter(
+            (c) => datasource!.getOperationForColumnId(c)?.isBucketed
+          ),
           supportsMoreColumns: true,
           filterOperations: (op) => op.isBucketed,
           dataTestSubj: 'lnsDatatable_column',
@@ -158,7 +163,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
           }),
           layerId: state.layers[0].layerId,
           accessors: sortedColumns.filter(
-            (c) => !datasource.getOperationForColumnId(c)?.isBucketed
+            (c) => !datasource!.getOperationForColumnId(c)?.isBucketed
           ),
           supportsMoreColumns: true,
           filterOperations: (op) => !op.isBucketed,
@@ -195,13 +200,11 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
   },
 
   toExpression(state, datasourceLayers, { title, description } = {}): Ast {
-    const layer = state.layers[0];
-    const datasource = datasourceLayers[layer.layerId];
-    const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
-    // When we add a column it could be empty, and therefore have no order
-    const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
-    const operations = sortedColumns
-      .map((columnId) => ({ columnId, operation: datasource.getOperationForColumnId(columnId) }))
+    const { sortedColumns, datasource } =
+      getDataSourceAndSortedColumns(state, datasourceLayers, state.layers[0].layerId) || {};
+
+    const operations = sortedColumns!
+      .map((columnId) => ({ columnId, operation: datasource!.getOperationForColumnId(columnId) }))
       .filter((o): o is { columnId: string; operation: Operation } => !!o.operation);
 
     return {
@@ -232,4 +235,48 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
       ],
     };
   },
+
+  getErrorMessages(state, frame) {
+    const errors: Array<{
+      shortMessage: string;
+      longMessage: string;
+    }> = [];
+    if (state) {
+      const { sortedColumns, datasource } =
+        getDataSourceAndSortedColumns(state, frame.datasourceLayers, state.layers[0].layerId) || {};
+
+      // Data validation below
+      if (
+        sortedColumns &&
+        sortedColumns.filter((c) => !datasource!.getOperationForColumnId(c)?.isBucketed).length ===
+          0
+      ) {
+        errors.push({
+          shortMessage: i18n.translate('xpack.lens.datatable.dataFailureShort', {
+            defaultMessage: `Missing metric`,
+          }),
+          longMessage: i18n.translate('xpack.lens.datatable.dataFailureLong', {
+            defaultMessage: `Add a field in the Metrics panel`,
+          }),
+        });
+      }
+    }
+    return errors.length ? errors : undefined;
+  },
 };
+
+function getDataSourceAndSortedColumns(
+  state: DatatableVisualizationState,
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
+  layerId: string
+) {
+  const layer = state.layers.find((l: LayerState) => l.layerId === layerId);
+  if (!layer) {
+    return undefined;
+  }
+  const datasource = datasourceLayers[layer.layerId];
+  const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
+  // When we add a column it could be empty, and therefore have no order
+  const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
+  return { datasource, sortedColumns };
+}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx

@@ -9,7 +9,16 @@ import classNames from 'classnames';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Ast } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiButtonEmpty, EuiLink } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+  EuiButtonEmpty,
+  EuiLink,
+  EuiTitle,
+} from '@elastic/eui';
 import { CoreStart, CoreSetup } from 'kibana/public';
 import { ExecutionContextSearch } from 'src/plugins/expressions';
 import {
@@ -66,7 +75,8 @@ export interface WorkspacePanelProps {
 }
 
 interface WorkspaceState {
-  expressionBuildError: string | undefined;
+  configurationValidationError?: Array<{ shortMessage: string; longMessage: string }>;
+  expressionBuildError?: Array<{ shortMessage: string; longMessage: string }>;
   expandError: boolean;
 }
 
@@ -117,15 +127,40 @@ export function WorkspacePanel({
   );
 
   const [localState, setLocalState] = useState<WorkspaceState>({
-    expressionBuildError: undefined as string | undefined,
+    configurationValidationError: undefined,
+    expressionBuildError: undefined,
     expandError: false,
   });
 
   const activeVisualization = activeVisualizationId
     ? visualizationMap[activeVisualizationId]
     : null;
+
   const expression = useMemo(
     () => {
+      if (activeDatasourceId) {
+        const activeDatasource = activeDatasourceId ? datasourceMap[activeDatasourceId] : null;
+        const dataMessages = activeDatasource?.getErrorMessages(
+          datasourceStates[activeDatasourceId]?.state
+        );
+        if (dataMessages) {
+          setLocalState((s) => ({
+            ...s,
+            configurationValidationError: dataMessages,
+          }));
+          // TS will infer "void" if this is omitted
+          return;
+        }
+      }
+      const vizMessages = activeVisualization?.getErrorMessages(visualizationState, framePublicAPI);
+      if (vizMessages || localState.configurationValidationError) {
+        setLocalState((s) => ({
+          ...s,
+          configurationValidationError: vizMessages,
+        }));
+        // TS will infer "void" if this is omitted
+        return;
+      }
       try {
         return buildExpression({
           visualization: activeVisualization,
@@ -135,8 +170,19 @@ export function WorkspacePanel({
           datasourceLayers: framePublicAPI.datasourceLayers,
         });
       } catch (e) {
+        const buildMessages = activeVisualization?.getErrorMessages(
+          visualizationState,
+          framePublicAPI
+        );
+        const defaultMessage = {
+          shortMessage: 'One error occurred in the expression',
+          longMessage: e.toString(),
+        };
         // Most likely an error in the expression provided by a datasource or visualization
-        setLocalState((s) => ({ ...s, expressionBuildError: e.toString() }));
+        setLocalState((s) => ({
+          ...s,
+          expressionBuildError: buildMessages ?? [defaultMessage],
+        }));
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -319,6 +365,36 @@ export const InnerVisualizationWrapper = ({
     ]
   );
 
+  if (localState.configurationValidationError) {
+    return (
+      <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
+        <EuiFlexItem>
+          <EuiIcon type="alert" size="xl" color="danger" />
+        </EuiFlexItem>
+        <EuiFlexItem data-test-subj="configuration-failure">
+          <EuiTitle size="s">
+            <EuiTextColor color="danger">
+              <FormattedMessage
+                id="xpack.lens.editorFrame.configurationFailure"
+                defaultMessage="Invalid configuration"
+              />
+            </EuiTextColor>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem>{localState.configurationValidationError[0].shortMessage}</EuiFlexItem>
+        <EuiFlexItem className="eui-textBreakAll">
+          {localState.configurationValidationError[0].longMessage}
+          {localState.configurationValidationError.length > 1
+            ? i18n.translate('xpack.lens.xyVisualization.dataFailureYLong', {
+                defaultMessage: ` + {errors} {errors, plural, one {error} other {errors}}`,
+                values: { errors: localState.configurationValidationError.length - 1 },
+              })
+            : null}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
   if (localState.expressionBuildError) {
     return (
       <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
@@ -331,7 +407,7 @@ export const InnerVisualizationWrapper = ({
             defaultMessage="An error occurred in the expression"
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>{localState.expressionBuildError}</EuiFlexItem>
+        <EuiFlexItem grow={false}>{localState.expressionBuildError[0].longMessage}</EuiFlexItem>
       </EuiFlexGroup>
     );
   }
@@ -346,6 +422,7 @@ export const InnerVisualizationWrapper = ({
         onEvent={onEvent}
         renderError={(errorMessage?: string | null, error?: ExpressionRenderError | null) => {
           const visibleErrorMessage = getOriginalRequestErrorMessage(error) || errorMessage;
+
           return (
             <EuiFlexGroup style={{ maxWidth: '100%' }} direction="column" alignItems="center">
               <EuiFlexItem>

x-pack/plugins/lens/public/editor_frame_service/mocks.tsx

@@ -51,6 +51,7 @@ export function createMockVisualization(): jest.Mocked<Visualization> {
 
     setDimension: jest.fn(),
     removeDimension: jest.fn(),
+    getErrorMessages: jest.fn((_state, _frame) => undefined),
   };
 }
 
@@ -90,6 +91,7 @@ export function createMockDatasource(id: string): DatasourceMock {
     // this is an additional property which doesn't exist on real datasources
     // but can be used to validate whether specific API mock functions are called
     publicAPIMock,
+    getErrorMessages: jest.fn((_state) => undefined),
   };
 }
 

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx

@@ -39,7 +39,7 @@ import {
   getDatasourceSuggestionsForVisualizeField,
 } from './indexpattern_suggestions';
 
-import { isDraggedField, normalizeOperationDataType } from './utils';
+import { getInvalidReferences, isDraggedField, normalizeOperationDataType } from './utils';
 import { LayerPanel } from './layerpanel';
 import { IndexPatternColumn } from './operations';
 import {
@@ -341,6 +341,32 @@ export function getIndexPatternDatasource({
     },
     getDatasourceSuggestionsFromCurrentState,
     getDatasourceSuggestionsForVisualizeField,
+
+    getErrorMessages(state) {
+      if (state) {
+        const invalidLayers = getInvalidReferences(state);
+        if (invalidLayers.length > 0) {
+          const realIndex = Object.values(state.layers)
+            .map((layer, i) => {
+              if (invalidLayers.includes(layer)) {
+                return i + 1;
+              }
+            })
+            .filter(Boolean) as number[];
+          return [
+            {
+              shortMessage: i18n.translate('xpack.lens.indexPattern.dataReferenceFailureShort', {
+                defaultMessage: 'Invalid references',
+              }),
+              longMessage: i18n.translate('xpack.lens.indexPattern.dataReferenceFailureLong', {
+                defaultMessage: `{layers, plural, one {Layer} other {Layers}} {layersList} {layers, plural, one {has} other {have}} invalid reference`,
+                values: { layers: realIndex.length, layersList: realIndex.join(', ') },
+              }),
+            },
+          ];
+        }
+      }
+    },
   };
 
   return indexPatternDatasource;

x-pack/plugins/lens/public/indexpattern_datasource/utils.ts

@@ -44,7 +44,11 @@ export function isDraggedField(fieldCandidate: unknown): fieldCandidate is Dragg
 }
 
 export function hasInvalidReference(state: IndexPatternPrivateState) {
-  return Object.values(state.layers).some((layer) => {
+  return getInvalidReferences(state).length > 0;
+}
+
+export function getInvalidReferences(state: IndexPatternPrivateState) {
+  return Object.values(state.layers || {}).filter((layer) => {
     return layer.columnOrder.some((columnId) => {
       const column = layer.columns[columnId];
       return (