[SIEM] Add toaster logic for Machine Learning (#41401) (#41421)

## Summary Fixes two blockers: 1) Anomaly table would spin forever if you zero jobs configured on a fresh install. 2) If you get Network or ML errors this will report the error to the user in the form of the global toaster. Two examples of Error Toaster before the "See the full error(s)" is clicked: ![toast](https://user-images.githubusercontent.com/1151048/61415060-f2089200-a8ac-11e9-8293-3dfcdbbe069e.png) <img width="348" alt="Screen Shot 2019-07-17 at 4 04 30 PM" src="https://user-images.githubusercontent.com/1151048/61414971-ac4bc980-a8ac-11e9-9d15-28ab1229922f.png"> Example Error Toasters from start job expanded and collapsed: <img width="800" alt="Screen Shot 2019-07-17 at 12 15 04 PM" src="https://user-images.githubusercontent.com/1151048/61414610-9e497900-a8ab-11e9-97cd-ec68e77a555c.png"> <img width="808" alt="Screen Shot 2019-07-17 at 12 14 58 PM" src="https://user-images.githubusercontent.com/1151048/61414628-aacdd180-a8ab-11e9-8ad8-edc67deb8874.png"> Example Network Error Toaster: <img width="437" alt="Screen Shot 2019-07-17 at 12 21 10 PM" src="https://user-images.githubusercontent.com/1151048/61414635-b3260c80-a8ab-11e9-8e50-a35a05fc6d2b.png"> Example API Error if you send in something bad such as a bad payload: <img width="442" alt="Screen Shot 2019-07-17 at 12 34 04 PM" src="https://user-images.githubusercontent.com/1151048/61414658-c0db9200-a8ab-11e9-88ed-e6634f17103a.png"> Example Anomalies Table Error if you have a network issue: <img width="464" alt="Screen Shot 2019-07-17 at 12 39 57 PM" src="https://user-images.githubusercontent.com/1151048/61414691-cf29ae00-a8ab-11e9-882c-3cc770776f2f.png"> ### Checklist Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR. - [x] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md) - [ ] [Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios - [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist) ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process) - [x] This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)
elastic · Jul 18, 2019 · 48a2bd2 · 48a2bd2
1 parent 919c22a
commit 48a2bd2
Show file tree

Hide file tree

Showing 18 changed files with 851 additions and 301 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/anomaly/translations.ts b/x-pack/legacy/plugins/siem/public/components/ml/anomaly/translations.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const SIEM_TABLE_FETCH_FAILURE = i18n.translate(
+  'xpack.siem.components.ml.anomaly.errors.anomaliesTableFetchFailureTitle',
+  {
+    defaultMessage: 'Anomalies table fetch failure',
+  }
+);
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.ts b/x-pack/legacy/plugins/siem/public/components/ml/anomaly/use_anomalies_table_data.ts
@@ -15,6 +15,10 @@ import {
 import { hasMlUserPermissions } from '../permissions/has_ml_user_permissions';
 import { MlCapabilitiesContext } from '../permissions/ml_capabilities_provider';
 import { useSiemJobs } from '../../ml_popover/hooks/use_siem_jobs';
+import { useStateToaster } from '../../toasters';
+import { errorToToaster } from '../api/error_to_toaster';
+
+import * as i18n from './translations';
 
 interface Args {
   influencers?: InfluencerInput[];
@@ -75,6 +79,7 @@ export const useAnomaliesTableData = ({
   const config = useContext(KibanaConfigContext);
   const capabilities = useContext(MlCapabilitiesContext);
   const userPermissions = hasMlUserPermissions(capabilities);
+  const [, dispatchToaster] = useStateToaster();
 
   const fetchFunc = async (
     influencersInput: InfluencerInput[],
@@ -83,27 +88,34 @@ export const useAnomaliesTableData = ({
     latestMs: number
   ) => {
     if (userPermissions && !skip && siemJobs.length > 0) {
-      const data = await anomaliesTableData(
-        {
-          jobIds: siemJobs,
-          criteriaFields: criteriaFieldsInput,
-          aggregationInterval: 'auto',
-          threshold: getThreshold(config, threshold),
-          earliestMs,
-          latestMs,
-          influencers: influencersInput,
-          dateFormatTz: getTimeZone(config),
-          maxRecords: 500,
-          maxExamples: 10,
-        },
-        {
-          'kbn-version': config.kbnVersion,
-        }
-      );
-      setTableData(data);
-      setLoading(false);
+      try {
+        const data = await anomaliesTableData(
+          {
+            jobIds: siemJobs,
+            criteriaFields: criteriaFieldsInput,
+            aggregationInterval: 'auto',
+            threshold: getThreshold(config, threshold),
+            earliestMs,
+            latestMs,
+            influencers: influencersInput,
+            dateFormatTz: getTimeZone(config),
+            maxRecords: 500,
+            maxExamples: 10,
+          },
+          {
+            'kbn-version': config.kbnVersion,
+          }
+        );
+        setTableData(data);
+        setLoading(false);
+      } catch (error) {
+        errorToToaster({ title: i18n.SIEM_TABLE_FETCH_FAILURE, error, dispatchToaster });
+        setLoading(false);
+      }
     } else if (!userPermissions) {
       setLoading(false);
+    } else if (siemJobs.length === 0) {
+      setLoading(false);
     } else {
       setTableData(null);
       setLoading(true);

diff --git a/x-pack/legacy/plugins/siem/public/components/ml/api/anomalies_table_data.ts b/x-pack/legacy/plugins/siem/public/components/ml/api/anomalies_table_data.ts
@@ -21,31 +21,21 @@ export interface Body {
   maxExamples: number;
 }
 
-const empty: Anomalies = {
-  anomalies: [],
-  interval: 'second',
-};
-
 export const anomaliesTableData = async (
   body: Body,
   headers: Record<string, string | undefined>
 ): Promise<Anomalies> => {
-  try {
-    const response = await fetch(`${chrome.getBasePath()}/api/ml/results/anomalies_table_data`, {
-      method: 'POST',
-      credentials: 'same-origin',
-      body: JSON.stringify(body),
-      headers: {
-        'kbn-system-api': 'true',
-        'content-Type': 'application/json',
-        'kbn-xsrf': chrome.getXsrfToken(),
-        ...headers,
-      },
-    });
-    await throwIfNotOk(response);
-    return await response.json();
-  } catch (error) {
-    // TODO: Toaster error when this happens instead of returning empty data
-    return empty;
-  }
+  const response = await fetch(`${chrome.getBasePath()}/api/ml/results/anomalies_table_data`, {
+    method: 'POST',
+    credentials: 'same-origin',
+    body: JSON.stringify(body),
+    headers: {
+      'kbn-system-api': 'true',
+      'content-Type': 'application/json',
+      'kbn-xsrf': chrome.getXsrfToken(),
+      ...headers,
+    },
+  });
+  await throwIfNotOk(response);
+  return await response.json();
 };
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/api/error_to_toaster.test.ts b/x-pack/legacy/plugins/siem/public/components/ml/api/error_to_toaster.test.ts
@@ -0,0 +1,126 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isAnError, isToasterError, errorToToaster } from './error_to_toaster';
+import { ToasterErrors } from './throw_if_not_ok';
+
+describe('error_to_toaster', () => {
+  let dispatchToaster = jest.fn();
+
+  beforeEach(() => {
+    dispatchToaster = jest.fn();
+  });
+
+  describe('#errorToToaster', () => {
+    test('adds a ToastError given multiple toaster errors', () => {
+      const error = new ToasterErrors(['some error 1', 'some error 2']);
+      errorToToaster({ id: 'some-made-up-id', title: 'some title', error, dispatchToaster });
+      expect(dispatchToaster.mock.calls[0]).toEqual([
+        {
+          toast: {
+            color: 'danger',
+            errors: ['some error 1', 'some error 2'],
+            iconType: 'alert',
+            id: 'some-made-up-id',
+            title: 'some title',
+          },
+          type: 'addToaster',
+        },
+      ]);
+    });
+
+    test('adds a ToastError given a single toaster errors', () => {
+      const error = new ToasterErrors(['some error 1']);
+      errorToToaster({ id: 'some-made-up-id', title: 'some title', error, dispatchToaster });
+      expect(dispatchToaster.mock.calls[0]).toEqual([
+        {
+          toast: {
+            color: 'danger',
+            errors: ['some error 1'],
+            iconType: 'alert',
+            id: 'some-made-up-id',
+            title: 'some title',
+          },
+          type: 'addToaster',
+        },
+      ]);
+    });
+
+    test('adds a regular Error given a single error', () => {
+      const error = new Error('some error 1');
+      errorToToaster({ id: 'some-made-up-id', title: 'some title', error, dispatchToaster });
+      expect(dispatchToaster.mock.calls[0]).toEqual([
+        {
+          toast: {
+            color: 'danger',
+            errors: ['some error 1'],
+            iconType: 'alert',
+            id: 'some-made-up-id',
+            title: 'some title',
+          },
+          type: 'addToaster',
+        },
+      ]);
+    });
+
+    test('adds a generic Network Error given a non Error object such as a string', () => {
+      const error = 'terrible string';
+      errorToToaster({ id: 'some-made-up-id', title: 'some title', error, dispatchToaster });
+      expect(dispatchToaster.mock.calls[0]).toEqual([
+        {
+          toast: {
+            color: 'danger',
+            errors: ['Network Error'],
+            iconType: 'alert',
+            id: 'some-made-up-id',
+            title: 'some title',
+          },
+          type: 'addToaster',
+        },
+      ]);
+    });
+  });
+
+  describe('#isAnError', () => {
+    test('returns true if given an error object', () => {
+      const error = new Error('some error');
+      expect(isAnError(error)).toEqual(true);
+    });
+
+    test('returns false if given a regular object', () => {
+      expect(isAnError({})).toEqual(false);
+    });
+
+    test('returns false if given a string', () => {
+      expect(isAnError('som string')).toEqual(false);
+    });
+
+    test('returns true if given a toaster error', () => {
+      const error = new ToasterErrors(['some error']);
+      expect(isAnError(error)).toEqual(true);
+    });
+  });
+
+  describe('#isToasterError', () => {
+    test('returns true if given a ToasterErrors object', () => {
+      const error = new ToasterErrors(['some error']);
+      expect(isToasterError(error)).toEqual(true);
+    });
+
+    test('returns false if given a regular object', () => {
+      expect(isToasterError({})).toEqual(false);
+    });
+
+    test('returns false if given a string', () => {
+      expect(isToasterError('som string')).toEqual(false);
+    });
+
+    test('returns false if given a regular error', () => {
+      const error = new Error('some error');
+      expect(isToasterError(error)).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/api/error_to_toaster.ts b/x-pack/legacy/plugins/siem/public/components/ml/api/error_to_toaster.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isError } from 'lodash/fp';
+import uuid from 'uuid';
+import { ActionToaster, AppToast } from '../../toasters';
+import { ToasterErrorsType, ToasterErrors } from './throw_if_not_ok';
+
+export type ErrorToToasterArgs = Partial<AppToast> & {
+  error: unknown;
+  dispatchToaster: React.Dispatch<ActionToaster>;
+};
+
+export const errorToToaster = ({
+  id = uuid.v4(),
+  title,
+  error,
+  color = 'danger',
+  iconType = 'alert',
+  dispatchToaster,
+}: ErrorToToasterArgs) => {
+  if (isToasterError(error)) {
+    const toast: AppToast = {
+      id,
+      title,
+      color,
+      iconType,
+      errors: error.messages,
+    };
+    dispatchToaster({
+      type: 'addToaster',
+      toast,
+    });
+  } else if (isAnError(error)) {
+    const toast: AppToast = {
+      id,
+      title,
+      color,
+      iconType,
+      errors: [error.message],
+    };
+    dispatchToaster({
+      type: 'addToaster',
+      toast,
+    });
+  } else {
+    const toast: AppToast = {
+      id,
+      title,
+      color,
+      iconType,
+      errors: ['Network Error'],
+    };
+    dispatchToaster({
+      type: 'addToaster',
+      toast,
+    });
+  }
+};
+
+export const isAnError = (error: unknown): error is Error => isError(error);
+
+export const isToasterError = (error: unknown): error is ToasterErrorsType =>
+  error instanceof ToasterErrors;
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/api/get_ml_capabilities.ts b/x-pack/legacy/plugins/siem/public/components/ml/api/get_ml_capabilities.ts
@@ -7,7 +7,6 @@
 import chrome from 'ui/chrome';
 import { InfluencerInput, MlCapabilities } from '../types';
 import { throwIfNotOk } from './throw_if_not_ok';
-import { emptyMlCapabilities } from '../empty_ml_capabilities';
 
 export interface Body {
   jobIds: string[];
@@ -25,21 +24,16 @@ export interface Body {
 export const getMlCapabilities = async (
   headers: Record<string, string | undefined>
 ): Promise<MlCapabilities> => {
-  try {
-    const response = await fetch(`${chrome.getBasePath()}/api/ml/ml_capabilities`, {
-      method: 'GET',
-      credentials: 'same-origin',
-      headers: {
-        'kbn-system-api': 'true',
-        'content-Type': 'application/json',
-        'kbn-xsrf': chrome.getXsrfToken(),
-        ...headers,
-      },
-    });
-    await throwIfNotOk(response);
-    return await response.json();
-  } catch (error) {
-    // TODO: Toaster error when this happens instead of returning empty data
-    return emptyMlCapabilities;
-  }
+  const response = await fetch(`${chrome.getBasePath()}/api/ml/ml_capabilities`, {
+    method: 'GET',
+    credentials: 'same-origin',
+    headers: {
+      'kbn-system-api': 'true',
+      'content-Type': 'application/json',
+      'kbn-xsrf': chrome.getXsrfToken(),
+      ...headers,
+    },
+  });
+  await throwIfNotOk(response);
+  return await response.json();
 };