[SIEM] Add toaster logic for Machine Learning

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.containers.errors.anomaliesTableFetchFailureTitle',
+  {
+    defaultMessage: 'Anomalies table fetch failure',
+  }
+);

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);

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();
 };

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;

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();
 };

x-pack/legacy/plugins/siem/public/components/ml/api/throw_if_not_ok.ts

@@ -4,19 +4,48 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { has } from 'lodash/fp';
+
 export interface MessageBody {
   error?: string;
   message?: string;
   statusCode?: number;
 }
 
+export interface MlErrorMsg {
+  error: {
+    msg: string;
+    response: string;
+    statusCode: number;
+  };
+  started: boolean;
+}
+
+export type ToasterErrorsType = Error & {
+  messages: string[];
+};
+
+export class ToasterErrors extends Error implements ToasterErrorsType {
+  public messages: string[];
+
+  constructor(messages: string[]) {
+    super(messages[0]);
+    this.name = 'ToasterErrors';
+    this.messages = messages;
+  }
+}
+
 export const throwIfNotOk = async (response: Response): Promise<void> => {
   if (!response.ok) {
     const body = await parseJsonFromBody(response);
     if (body != null && body.message) {
-      throw new Error(body.message);
+      if (body.statusCode != null) {
+        throw new ToasterErrors([body.message, `Status Code: ${body.statusCode}`]);
+      } else {
+        throw new ToasterErrors([body.message]);
+      }
     } else {
-      throw new Error(`Network Error: ${response.statusText}`);
+      throw new ToasterErrors([`Network Error: ${response.statusText}`]);
     }
   }
 };
@@ -29,3 +58,40 @@ export const parseJsonFromBody = async (response: Response): Promise<MessageBody
     return null;
   }
 };
+
+export const tryParseResponse = (response: string): string => {
+  try {
+    return JSON.stringify(JSON.parse(response), null, 2);
+  } catch (error) {
+    return response;
+  }
+};
+
+export const throwIfErrorAttached = (
+  json: Record<string, Record<string, unknown>>,
+  dataFeedIds: string[]
+) => {
+  const errors = dataFeedIds.reduce<string[]>((accum, dataFeedId) => {
+    const dataFeed = json[dataFeedId];
+    if (isMlErrorMsg(dataFeed)) {
+      accum = [
+        ...accum,
+        dataFeed.error.msg,
+        tryParseResponse(dataFeed.error.response),
+        `Status Code: ${dataFeed.error.statusCode}`,
+      ];
+      return accum;
+    } else {
+      return accum;
+    }
+  }, []);
+  if (errors.length > 0) {
+    throw new ToasterErrors(errors);
+  }
+};
+
+// use the "in operator" and regular type guards to do a narrow once this issue is fixed below:
+// https://github.com/microsoft/TypeScript/issues/21732
+// Otherwise for now, has will work ok even though it casts 'unknown' to 'any'
+export const isMlErrorMsg = (value: unknown): value is MlErrorMsg =>
+  has('error.msg', value) && has('error.response', value) && has('error.statusCode', value);

x-pack/legacy/plugins/siem/public/components/ml/permissions/ml_capabilities_provider.tsx

@@ -9,16 +9,29 @@ import { MlCapabilities } from '../types';
 import { getMlCapabilities } from '../api/get_ml_capabilities';
 import { KibanaConfigContext } from '../../../lib/adapters/framework/kibana_framework_adapter';
 import { emptyMlCapabilities } from '../empty_ml_capabilities';
+import { errorToToaster } from '../api/error_to_toaster';
+import { useStateToaster } from '../../toasters';
+
+import * as i18n from './translations';
 
 export const MlCapabilitiesContext = React.createContext<MlCapabilities>(emptyMlCapabilities);
 
 export const MlCapabilitiesProvider = React.memo<{ children: JSX.Element }>(({ children }) => {
   const [capabilities, setCapabilities] = useState(emptyMlCapabilities);
   const config = useContext(KibanaConfigContext);
+  const [, dispatchToaster] = useStateToaster();
 
   const fetchFunc = async () => {
-    const mlCapabilities = await getMlCapabilities({ 'kbn-version': config.kbnVersion });
-    setCapabilities(mlCapabilities);
+    try {
+      const mlCapabilities = await getMlCapabilities({ 'kbn-version': config.kbnVersion });
+      setCapabilities(mlCapabilities);
+    } catch (error) {
+      errorToToaster({
+        title: i18n.MACHINE_LEARNING_PERMISSIONS_FAILURE,
+        error,
+        dispatchToaster,
+      });
+    }
   };
 
   useEffect(() => {

x-pack/legacy/plugins/siem/public/components/ml/permissions/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 MACHINE_LEARNING_PERMISSIONS_FAILURE = i18n.translate(
+  'xpack.siem.containers.errors.machineLearningPermissionsFailureTitle',
+  {
+    defaultMessage: 'Machine learning permissions failure',
+  }
+);