[7.x] [ML] Anomaly Detection alert initialisation from the ML app (#91283)

x-pack/plugins/ml/common/types/alerts.ts

@@ -89,4 +89,5 @@ export type MlAnomalyDetectionAlertParams = {
   };
   severity: number;
   resultType: AnomalyResultType;
+  includeInterim: boolean;
 } & AlertTypeParams;

x-pack/plugins/ml/common/types/capabilities.ts

@@ -57,6 +57,8 @@ export const adminMlCapabilities = {
   canCreateDataFrameAnalytics: false,
   canDeleteDataFrameAnalytics: false,
   canStartStopDataFrameAnalytics: false,
+  // Alerts
+  canCreateMlAlerts: false,
 };
 
 export type UserMlCapabilities = typeof userMlCapabilities;

x-pack/plugins/ml/public/alerting/interim_results_control.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+import { EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface InterimResultsControlProps {
+  value: boolean;
+  onChange: (update: boolean) => void;
+}
+
+export const InterimResultsControl: FC<InterimResultsControlProps> = React.memo(
+  ({ value, onChange }) => {
+    return (
+      <EuiFormRow>
+        <EuiSwitch
+          label={
+            <FormattedMessage
+              id="xpack.ml.interimResultsControl.label"
+              defaultMessage="Include interim results"
+            />
+          }
+          checked={value}
+          onChange={onChange.bind(null, !value)}
+        />
+      </EuiFormRow>
+    );
+  }
+);

x-pack/plugins/ml/public/alerting/job_selector.tsx

@@ -19,7 +19,7 @@ interface JobSelection {
 
 export interface JobSelectorControlProps {
   jobSelection?: JobSelection;
-  onSelectionChange: (jobSelection: JobSelection) => void;
+  onChange: (jobSelection: JobSelection) => void;
   adJobsApiService: MlApiServices['jobs'];
   /**
    * Validation is handled by alerting framework
@@ -29,7 +29,7 @@ export interface JobSelectorControlProps {
 
 export const JobSelectorControl: FC<JobSelectorControlProps> = ({
   jobSelection,
-  onSelectionChange,
+  onChange,
   adJobsApiService,
   errors,
 }) => {
@@ -70,7 +70,7 @@ export const JobSelectorControl: FC<JobSelectorControlProps> = ({
     }
   }, [adJobsApiService]);
 
-  const onChange: EuiComboBoxProps<string>['onChange'] = useCallback(
+  const onSelectionChange: EuiComboBoxProps<string>['onChange'] = useCallback(
     (selectedOptions) => {
       const selectedJobIds: JobId[] = [];
       const selectedGroupIds: string[] = [];
@@ -81,7 +81,7 @@ export const JobSelectorControl: FC<JobSelectorControlProps> = ({
           selectedGroupIds.push(label);
         }
       });
-      onSelectionChange({
+      onChange({
         ...(selectedJobIds.length > 0 ? { jobIds: selectedJobIds } : {}),
         ...(selectedGroupIds.length > 0 ? { groupIds: selectedGroupIds } : {}),
       });
@@ -114,7 +114,7 @@ export const JobSelectorControl: FC<JobSelectorControlProps> = ({
       <EuiComboBox<string>
         selectedOptions={selectedOptions}
         options={options}
-        onChange={onChange}
+        onChange={onSelectionChange}
         fullWidth
         data-test-subj={'mlAnomalyAlertJobSelection'}
         isInvalid={!!errors?.length}

x-pack/plugins/ml/public/alerting/ml_alerting_flyout.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { JobId } from '../../common/types/anomaly_detection_jobs';
+import { useMlKibana } from '../application/contexts/kibana';
+import { ML_ALERT_TYPES } from '../../common/constants/alerts';
+import { PLUGIN_ID } from '../../common/constants/app';
+
+interface MlAnomalyAlertFlyoutProps {
+  jobIds: JobId[];
+  onSave?: () => void;
+  onCloseFlyout: () => void;
+}
+
+/**
+ * Invoke alerting flyout from the ML plugin context.
+ * @param jobIds
+ * @param onCloseFlyout
+ * @constructor
+ */
+export const MlAnomalyAlertFlyout: FC<MlAnomalyAlertFlyoutProps> = ({
+  jobIds,
+  onCloseFlyout,
+  onSave,
+}) => {
+  const {
+    services: { triggersActionsUi },
+  } = useMlKibana();
+
+  const AddAlertFlyout = useMemo(
+    () =>
+      triggersActionsUi &&
+      triggersActionsUi.getAddAlertFlyout({
+        consumer: PLUGIN_ID,
+        onClose: () => {
+          onCloseFlyout();
+        },
+        // Callback for successful save
+        reloadAlerts: async () => {
+          if (onSave) {
+            onSave();
+          }
+        },
+        canChangeTrigger: false,
+        alertTypeId: ML_ALERT_TYPES.ANOMALY_DETECTION,
+        metadata: {},
+        initialValues: {
+          params: {
+            jobSelection: {
+              jobIds,
+            },
+          },
+        },
+      }),
+    [triggersActionsUi]
+  );
+
+  return <>{AddAlertFlyout}</>;
+};
+
+interface JobListMlAnomalyAlertFlyoutProps {
+  setShowFunction: (callback: Function) => void;
+  unsetShowFunction: () => void;
+}
+
+/**
+ * Component to wire the Alerting flyout with the Job list view.
+ * @param setShowFunction
+ * @param unsetShowFunction
+ * @constructor
+ */
+export const JobListMlAnomalyAlertFlyout: FC<JobListMlAnomalyAlertFlyoutProps> = ({
+  setShowFunction,
+  unsetShowFunction,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [jobIds, setJobIds] = useState<JobId[] | undefined>();
+
+  const showFlyoutCallback = useCallback((jobIdsUpdate: JobId[]) => {
+    setJobIds(jobIdsUpdate);
+    setIsVisible(true);
+  }, []);
+
+  useEffect(() => {
+    setShowFunction(showFlyoutCallback);
+    return () => {
+      unsetShowFunction();
+    };
+  }, []);
+
+  return isVisible && jobIds ? (
+    <MlAnomalyAlertFlyout
+      jobIds={jobIds}
+      onCloseFlyout={() => setIsVisible(false)}
+      onSave={() => {
+        setIsVisible(false);
+      }}
+    />
+  ) : null;
+};

x-pack/plugins/ml/public/alerting/ml_anomaly_alert_trigger.tsx

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useEffect, useMemo } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import { EuiSpacer, EuiForm } from '@elastic/eui';
+import useMount from 'react-use/lib/useMount';
 import { JobSelectorControl } from './job_selector';
 import { useMlKibana } from '../application/contexts/kibana';
 import { jobsApiProvider } from '../application/services/ml_api_service/jobs';
@@ -18,19 +19,22 @@ import { PreviewAlertCondition } from './preview_alert_condition';
 import { ANOMALY_THRESHOLD } from '../../common';
 import { MlAnomalyDetectionAlertParams } from '../../common/types/alerts';
 import { ANOMALY_RESULT_TYPE } from '../../common/constants/anomalies';
+import { InterimResultsControl } from './interim_results_control';
 
 interface MlAnomalyAlertTriggerProps {
   alertParams: MlAnomalyDetectionAlertParams;
   setAlertParams: <T extends keyof MlAnomalyDetectionAlertParams>(
     key: T,
     value: MlAnomalyDetectionAlertParams[T]
   ) => void;
+  setAlertProperty: (prop: string, update: Partial<MlAnomalyDetectionAlertParams>) => void;
   errors: Record<keyof MlAnomalyDetectionAlertParams, string[]>;
 }
 
 const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
   alertParams,
   setAlertParams,
+  setAlertProperty,
   errors,
 }) => {
   const {
@@ -49,21 +53,26 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
     []
   );
 
-  useEffect(function setDefaults() {
-    if (alertParams.severity === undefined) {
-      onAlertParamChange('severity')(ANOMALY_THRESHOLD.CRITICAL);
+  useMount(function setDefaults() {
+    const { jobSelection, ...rest } = alertParams;
+    if (Object.keys(rest).length === 0) {
+      setAlertProperty('params', {
+        // Set defaults
+        severity: ANOMALY_THRESHOLD.CRITICAL,
+        resultType: ANOMALY_RESULT_TYPE.BUCKET,
+        includeInterim: true,
+        // Preserve job selection
+        jobSelection,
+      });
     }
-    if (alertParams.resultType === undefined) {
-      onAlertParamChange('resultType')(ANOMALY_RESULT_TYPE.BUCKET);
-    }
-  }, []);
+  });
 
   return (
     <EuiForm data-test-subj={'mlAnomalyAlertForm'}>
       <JobSelectorControl
         jobSelection={alertParams.jobSelection}
         adJobsApiService={adJobsApiService}
-        onSelectionChange={useCallback(onAlertParamChange('jobSelection'), [])}
+        onChange={useCallback(onAlertParamChange('jobSelection'), [])}
         errors={errors.jobSelection}
       />
       <ResultTypeSelector
@@ -75,6 +84,12 @@ const MlAnomalyAlertTrigger: FC<MlAnomalyAlertTriggerProps> = ({
         onChange={useCallback(onAlertParamChange('severity'), [])}
       />
       <EuiSpacer size="m" />
+      <InterimResultsControl
+        value={alertParams.includeInterim}
+        onChange={useCallback(onAlertParamChange('includeInterim'), [])}
+      />
+      <EuiSpacer size="m" />
+
       <PreviewAlertCondition alertingApiService={alertingApiService} alertParams={alertParams} />
 
       <EuiSpacer size="m" />

x-pack/plugins/ml/public/alerting/register_ml_alerts.ts

@@ -7,14 +7,12 @@
 
 import { i18n } from '@kbn/i18n';
 import { lazy } from 'react';
-import { MlStartDependencies } from '../plugin';
 import { ML_ALERT_TYPES } from '../../common/constants/alerts';
 import { MlAnomalyDetectionAlertParams } from '../../common/types/alerts';
+import { TriggersAndActionsUIPublicPluginSetup } from '../../../triggers_actions_ui/public';
 
-export function registerMlAlerts(
-  alertTypeRegistry: MlStartDependencies['triggersActionsUi']['alertTypeRegistry']
-) {
-  alertTypeRegistry.register({
+export function registerMlAlerts(triggersActionsUi: TriggersAndActionsUIPublicPluginSetup) {
+  triggersActionsUi.alertTypeRegistry.register({
     id: ML_ALERT_TYPES.ANOMALY_DETECTION,
     description: i18n.translate('xpack.ml.alertTypes.anomalyDetection.description', {
       defaultMessage: 'Alert when anomaly detection jobs results match the condition.',

x-pack/plugins/ml/public/application/app.tsx

@@ -81,6 +81,7 @@ const App: FC<AppProps> = ({ coreStart, deps, appMountParams }) => {
     storage: localStorage,
     embeddable: deps.embeddable,
     maps: deps.maps,
+    triggersActionsUi: deps.triggersActionsUi,
     ...coreStart,
   };
 

x-pack/plugins/ml/public/application/contexts/kibana/kibana_context.ts

@@ -19,6 +19,7 @@ import { IStorageWrapper } from '../../../../../../../src/plugins/kibana_utils/p
 import type { EmbeddableStart } from '../../../../../../../src/plugins/embeddable/public';
 import type { MapsStartApi } from '../../../../../maps/public';
 import type { LensPublicStart } from '../../../../../lens/public';
+import { TriggersAndActionsUIPublicPluginStart } from '../../../../../triggers_actions_ui/public';
 
 interface StartPlugins {
   data: DataPublicPluginStart;
@@ -28,6 +29,7 @@ interface StartPlugins {
   embeddable: EmbeddableStart;
   maps?: MapsStartApi;
   lens?: LensPublicStart;
+  triggersActionsUi?: TriggersAndActionsUIPublicPluginStart;
 }
 export type StartServices = CoreStart &
   StartPlugins & {