Add VisLayer error toasts when rendering vis (#3649)

* Add VisLayer error toasts when rendering vis
* Finalize formatting of err stack details
* Add one test case
* Make message of VisLayerError required
* Move test_helpers; clean up test; add comment
* Add id to error toast
* Add context to helper fns
* Change back to toStrictEqual() for tests

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

---------

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

src/core/public/notifications/toasts/toasts_api.tsx

@@ -87,6 +87,10 @@ export interface ErrorToastOptions extends ToastOptions {
    * message will still be shown in the detailed error modal.
    */
   toastMessage?: string;
+  /**
+   * Unique ID for the toast. Can be used to prevent duplicate toasts on re-renders.
+   */
+  id?: string;
 }
 
 const normalizeToast = (toastOrTitle: ToastInput): ToastInputFields => {

src/plugins/vis_augmenter/public/index.ts

@@ -21,6 +21,7 @@ export {
   PointInTimeEvent,
   PointInTimeEventsVisLayer,
   isPointInTimeEventsVisLayer,
+  isVisLayerWithError,
 } from './types';
 
 export * from './expressions';

src/plugins/vis_augmenter/public/saved_augment_vis/utils/test_helpers.ts

@@ -4,7 +4,7 @@
  */
 
 import { cloneDeep } from 'lodash';
-import { VisLayerExpressionFn, ISavedAugmentVis } from '../../types';
+import { VisLayerExpressionFn, ISavedAugmentVis } from '../../';
 import { VIS_REFERENCE_NAME } from '../saved_augment_vis_references';
 
 const pluginResourceId = 'test-plugin-resource-id';

src/plugins/vis_augmenter/public/types.test.ts

@@ -3,20 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { VisLayerTypes, VisLayer, isPointInTimeEventsVisLayer, isValidVisLayer } from './types';
-
-const generateVisLayer = (type: any): VisLayer => {
-  return {
-    type,
-    originPlugin: 'test-plugin',
-    pluginResource: {
-      type: 'test-resource-type',
-      id: 'test-resource-id',
-      name: 'test-resource-name',
-      urlPath: 'test-resource-url-path',
-    },
-  };
-};
+import {
+  VisLayerTypes,
+  isPointInTimeEventsVisLayer,
+  isValidVisLayer,
+  isVisLayerWithError,
+} from './types';
+import { generateVisLayer } from './utils';
 
 describe('isPointInTimeEventsVisLayer()', function () {
   it('should return false if type does not match', function () {
@@ -41,3 +34,15 @@ describe('isValidVisLayer()', function () {
     expect(isValidVisLayer(visLayer)).toBe(true);
   });
 });
+
+describe('isVisLayerWithError()', function () {
+  it('should return false if no error', function () {
+    const visLayer = generateVisLayer('unknown-vis-layer-type', false);
+    expect(isVisLayerWithError(visLayer)).toBe(false);
+  });
+
+  it('should return true if error', function () {
+    const visLayer = generateVisLayer(VisLayerTypes.PointInTimeEvents, true);
+    expect(isVisLayerWithError(visLayer)).toBe(true);
+  });
+});

src/plugins/vis_augmenter/public/types.ts

@@ -14,7 +14,7 @@ export enum VisLayerErrorTypes {
 
 export interface VisLayerError {
   type: keyof typeof VisLayerErrorTypes;
-  message?: string;
+  message: string;
 }
 
 export type PluginResourceType = string;
@@ -53,6 +53,15 @@ export const isPointInTimeEventsVisLayer = (obj: any) => {
   return obj?.type === VisLayerTypes.PointInTimeEvents;
 };
 
+/**
+ * Used to determine if a given saved obj has a valid type and can
+ * be converted into a VisLayer
+ */
 export const isValidVisLayer = (obj: any) => {
   return obj?.type in VisLayerTypes;
 };
+
+/**
+ * Used for checking if an existing VisLayer has a populated error field or not
+ */
+export const isVisLayerWithError = (visLayer: VisLayer): boolean => visLayer.error !== undefined;

src/plugins/vis_augmenter/public/utils/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './utils';
+export * from './test_helpers';

src/plugins/vis_augmenter/public/utils/test_helpers.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { get } from 'lodash';
+import { VisLayer, VisLayerErrorTypes } from '../types';
+
+export const generateVisLayer = (
+  type: any,
+  error: boolean = false,
+  errorMessage: string = 'some-error-message',
+  resource?: {
+    type?: string;
+    id?: string;
+    name?: string;
+    urlPath?: string;
+  }
+): VisLayer => {
+  return {
+    type,
+    originPlugin: 'test-plugin',
+    pluginResource: {
+      type: get(resource, 'type', 'test-resource-type'),
+      id: get(resource, 'id', 'test-resource-id'),
+      name: get(resource, 'name', 'test-resource-name'),
+      urlPath: get(resource, 'urlPath', 'test-resource-url-path'),
+    },
+    error: error
+      ? {
+          type: VisLayerErrorTypes.FETCH_FAILURE,
+          message: errorMessage,
+        }
+      : undefined,
+  };
+};

src/plugins/vis_augmenter/public/utils/utils.test.ts

@@ -7,15 +7,19 @@ import { Vis } from '../../../visualizations/public';
 import {
   buildPipelineFromAugmentVisSavedObjs,
   getAugmentVisSavedObjs,
+  getAnyErrors,
   isEligibleForVisLayers,
 } from './utils';
-import { VisLayerTypes, ISavedAugmentVis, VisLayerExpressionFn } from '../types';
 import {
   createSavedAugmentVisLoader,
   SavedObjectOpenSearchDashboardsServicesWithAugmentVis,
   getMockAugmentVisSavedObjectClient,
   generateAugmentVisSavedObject,
-} from '../saved_augment_vis';
+  ISavedAugmentVis,
+  VisLayerExpressionFn,
+  VisLayerTypes,
+} from '../';
+import { generateVisLayer } from './';
 
 describe('utils', () => {
   // TODO: redo / update this test suite when eligibility is finalized.
@@ -129,4 +133,67 @@ describe('utils', () => {
       expect(str).toEqual(`fn-1 arg1="value-1"\n| fn-2 arg2="value-2"`);
     });
   });
+
+  describe('getAnyErrors', () => {
+    const noErrorLayer1 = generateVisLayer(VisLayerTypes.PointInTimeEvents, false);
+    const noErrorLayer2 = generateVisLayer(VisLayerTypes.PointInTimeEvents, false);
+    const errorLayer1 = generateVisLayer(VisLayerTypes.PointInTimeEvents, true, 'uh-oh!', {
+      type: 'resource-type-1',
+      id: '1234',
+      name: 'resource-1',
+    });
+    const errorLayer2 = generateVisLayer(
+      VisLayerTypes.PointInTimeEvents,
+      true,
+      'oh no something terrible has happened :(',
+      {
+        type: 'resource-type-2',
+        id: '5678',
+        name: 'resource-2',
+      }
+    );
+    const errorLayer3 = generateVisLayer(VisLayerTypes.PointInTimeEvents, true, 'oops!', {
+      type: 'resource-type-1',
+      id: 'abcd',
+      name: 'resource-3',
+    });
+
+    it('empty array - returns undefined', async () => {
+      const err = getAnyErrors([], 'title-vis-title');
+      expect(err).toEqual(undefined);
+    });
+    it('single VisLayer no errors - returns undefined', async () => {
+      const err = getAnyErrors([noErrorLayer1], 'test-vis-title');
+      expect(err).toEqual(undefined);
+    });
+    it('multiple VisLayers no errors - returns undefined', async () => {
+      const err = getAnyErrors([noErrorLayer1, noErrorLayer2], 'test-vis-title');
+      expect(err).toEqual(undefined);
+    });
+    it('single VisLayer with error - returns formatted error', async () => {
+      const err = getAnyErrors([errorLayer1], 'test-vis-title');
+      expect(err).not.toEqual(undefined);
+      expect(err?.stack).toStrictEqual(`-----resource-type-1-----\nID: 1234\nMessage: "uh-oh!"`);
+    });
+    it('multiple VisLayers with errors - returns formatted error', async () => {
+      const err = getAnyErrors([errorLayer1, errorLayer2], 'test-vis-title');
+      expect(err).not.toEqual(undefined);
+      expect(err?.stack).toStrictEqual(
+        `-----resource-type-1-----\nID: 1234\nMessage: "uh-oh!"\n\n\n` +
+          `-----resource-type-2-----\nID: 5678\nMessage: "oh no something terrible has happened :("`
+      );
+    });
+    it('multiple VisLayers with errors of same type - returns formatted error', async () => {
+      const err = getAnyErrors([errorLayer1, errorLayer3], 'test-vis-title');
+      expect(err).not.toEqual(undefined);
+      expect(err?.stack).toStrictEqual(
+        `-----resource-type-1-----\nID: 1234\nMessage: "uh-oh!"\n\n` + `ID: abcd\nMessage: "oops!"`
+      );
+    });
+    it('VisLayers with and without error - returns formatted error', async () => {
+      const err = getAnyErrors([noErrorLayer1, errorLayer1], 'test-vis-title');
+      expect(err).not.toEqual(undefined);
+      expect(err?.stack).toStrictEqual(`-----resource-type-1-----\nID: 1234\nMessage: "uh-oh!"`);
+    });
+  });
 });

src/plugins/vis_augmenter/public/utils/utils.ts

@@ -3,15 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { Vis } from '../../../../plugins/visualizations/public';
 import {
   formatExpression,
   buildExpressionFunction,
   buildExpression,
   ExpressionAstFunctionBuilder,
 } from '../../../../plugins/expressions/public';
-import { ISavedAugmentVis, SavedAugmentVisLoader, VisLayerFunctionDefinition } from '../';
+import {
+  ISavedAugmentVis,
+  SavedAugmentVisLoader,
+  VisLayerFunctionDefinition,
+  VisLayer,
+  isVisLayerWithError,
+} from '../';
 
 // TODO: provide a deeper eligibility check.
 // Tracked in https://github.com/opensearch-project/OpenSearch-Dashboards/issues/3268
@@ -58,3 +64,38 @@ export const buildPipelineFromAugmentVisSavedObjs = (objs: ISavedAugmentVis[]):
     throw new Error('Expression function from augment-vis saved objects could not be generated');
   }
 };
+
+/**
+ * Returns an error with an aggregated message about all of the
+ * errors found in the set of VisLayers. If no errors, returns undefined.
+ */
+export const getAnyErrors = (visLayers: VisLayer[], visTitle: string): Error | undefined => {
+  const visLayersWithErrors = visLayers.filter((visLayer) => isVisLayerWithError(visLayer));
+  if (!isEmpty(visLayersWithErrors)) {
+    // Aggregate by unique plugin resource type
+    const resourceTypes = [
+      ...new Set(visLayersWithErrors.map((visLayer) => visLayer.pluginResource.type)),
+    ];
+
+    let msgDetails = '';
+    resourceTypes.forEach((type, index) => {
+      const matchingVisLayers = visLayersWithErrors.filter(
+        (visLayer) => visLayer.pluginResource.type === type
+      );
+      if (index !== 0) msgDetails += '\n\n\n';
+      msgDetails += `-----${type}-----`;
+      matchingVisLayers.forEach((visLayer, idx) => {
+        if (idx !== 0) msgDetails += '\n';
+        msgDetails += `\nID: ${visLayer.pluginResource.id}`;
+        msgDetails += `\nMessage: "${visLayer.error?.message}"`;
+      });
+    });
+
+    const err = new Error(`Certain plugin resources failed to load on the ${visTitle} chart`);
+    // We set as the stack here so it can be parsed and shown cleanly in the details modal coming from the error toast notification.
+    err.stack = msgDetails;
+    return err;
+  } else {
+    return undefined;
+  }
+};

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -57,7 +57,7 @@ import {
 } from '../../../expressions/public';
 import { buildPipeline } from '../legacy/build_pipeline';
 import { Vis, SerializedVis } from '../vis';
-import { getExpressions, getUiActions } from '../services';
+import { getExpressions, getNotifications, getUiActions } from '../services';
 import { VIS_EVENT_TO_TRIGGER } from './events';
 import { VisualizeEmbeddableFactoryDeps } from './visualize_embeddable_factory';
 import { TriggerId } from '../../../ui_actions/public';
@@ -71,6 +71,7 @@ import {
   isEligibleForVisLayers,
   getAugmentVisSavedObjs,
   buildPipelineFromAugmentVisSavedObjs,
+  getAnyErrors,
 } from '../../../vis_augmenter/public';
 import { VisSavedObject } from '../types';
 
@@ -511,13 +512,27 @@ export class VisualizeEmbeddable
         layers: [] as VisLayers,
       };
       // We cannot use this.handler in this case, since it does not support the run() cmd
-      // we need here. So, we consume the expressions service to run this instead.
+      // we need here. So, we consume the expressions service to run this directly instead.
       const exprVisLayers = (await getExpressions().run(
         visLayersPipeline,
         visLayersPipelineInput,
         expressionParams as Record<string, unknown>
       )) as ExprVisLayers;
-      return exprVisLayers.layers;
+      const visLayers = exprVisLayers.layers;
+      const err = getAnyErrors(visLayers, this.vis.title);
+      // This is only true when one or more VisLayers has an error
+      if (err !== undefined) {
+        const { toasts } = getNotifications();
+        toasts.addError(err, {
+          title: i18n.translate('visualizations.renderVisTitle', {
+            defaultMessage: `Error loading data on the ${this.vis.title} chart`,
+          }),
+          toastMessage: ' ',
+          id: this.id,
+        });
+      }
+
+      return visLayers;
     }
     return [] as VisLayers;
   };

src/plugins/visualizations/public/plugin.ts

@@ -37,6 +37,7 @@ import {
   Plugin,
   ApplicationStart,
   SavedObjectsClientContract,
+  NotificationsStart,
 } from '../../../core/public';
 import { TypesService, TypesSetup, TypesStart } from './vis_types';
 import {
@@ -61,6 +62,7 @@ import {
   setOverlays,
   setSavedSearchLoader,
   setEmbeddable,
+  setNotifications,
 } from './services';
 import {
   VISUALIZE_EMBEDDABLE_TYPE,
@@ -130,6 +132,7 @@ export interface VisualizationsStartDeps {
   dashboard: DashboardStart;
   getAttributeService: DashboardStart['getAttributeService'];
   savedObjectsClient: SavedObjectsClientContract;
+  notifications: NotificationsStart;
 }
 
 /**
@@ -220,6 +223,7 @@ export class VisualizationsPlugin
     });
     setSavedAugmentVisLoader(savedAugmentVisLoader);
     setSavedSearchLoader(savedSearchLoader);
+    setNotifications(core.notifications);
     return {
       ...types,
       showNewVisModal,

src/plugins/visualizations/public/services.ts

@@ -37,6 +37,7 @@ import {
   IUiSettingsClient,
   OverlayStart,
   SavedObjectsStart,
+  NotificationsStart,
 } from '../../../core/public';
 import { TypesStart } from './vis_types';
 import { createGetterSetter } from '../../opensearch_dashboards_utils/common';
@@ -111,3 +112,7 @@ export const [getSavedSearchLoader, setSavedSearchLoader] = createGetterSetter<S
 export const [getSavedAugmentVisLoader, setSavedAugmentVisLoader] = createGetterSetter<
   SavedAugmentVisLoader
 >('SavedAugmentVisLoader');
+
+export const [getNotifications, setNotifications] = createGetterSetter<NotificationsStart>(
+  'Notifications'
+);