[ML] Add switch to enable model plot annotations independently (#70678)

x-pack/plugins/ml/common/types/anomaly_detection_jobs/job.ts

@@ -80,7 +80,7 @@ export interface DataDescription {
 }
 
 export interface ModelPlotConfig {
-  enabled: boolean;
+  enabled?: boolean;
   annotations_enabled?: boolean;
   terms?: string;
 }

x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts

@@ -226,16 +226,23 @@ export class JobCreator {
     this._calendars = calendars;
   }
 
-  public set modelPlot(enable: boolean) {
-    if (enable) {
-      this._job_config.model_plot_config = {
-        enabled: true,
-      };
-    } else {
-      delete this._job_config.model_plot_config;
+  private _initModelPlotConfig() {
+    // initialize configs to false if they are missing
+    if (this._job_config.model_plot_config === undefined) {
+      this._job_config.model_plot_config = {};
+    }
+    if (this._job_config.model_plot_config.enabled === undefined) {
+      this._job_config.model_plot_config.enabled = false;
+    }
+    if (this._job_config.model_plot_config.annotations_enabled === undefined) {
+      this._job_config.model_plot_config.annotations_enabled = false;
     }
   }
 
+  public set modelPlot(enable: boolean) {
+    this._initModelPlotConfig();
+    this._job_config.model_plot_config!.enabled = enable;
+  }
   public get modelPlot() {
     return (
       this._job_config.model_plot_config !== undefined &&
@@ -243,6 +250,15 @@ export class JobCreator {
     );
   }
 
+  public set modelChangeAnnotations(enable: boolean) {
+    this._initModelPlotConfig();
+    this._job_config.model_plot_config!.annotations_enabled = enable;
+  }
+
+  public get modelChangeAnnotations() {
+    return this._job_config.model_plot_config?.annotations_enabled === true;
+  }
+
   public set useDedicatedIndex(enable: boolean) {
     this._useDedicatedIndex = enable;
     if (enable) {

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/advanced_section.tsx

@@ -14,6 +14,7 @@ import {
   EuiHorizontalRule,
 } from '@elastic/eui';
 import { ModelPlotSwitch } from './components/model_plot';
+import { AnnotationsSwitch } from './components/annotations';
 import { DedicatedIndexSwitch } from './components/dedicated_index';
 import { ModelMemoryLimitInput } from '../../../common/model_memory_limit';
 import { JobCreatorContext } from '../../../job_creator_context';
@@ -41,6 +42,7 @@ export const AdvancedSection: FC<Props> = ({ advancedExpanded, setAdvancedExpand
         <EuiFlexGroup gutterSize="xl">
           <EuiFlexItem>
             <ModelPlotSwitch />
+            <AnnotationsSwitch />
           </EuiFlexItem>
           <EuiFlexItem>
             <DedicatedIndexSwitch />
@@ -68,6 +70,7 @@ export const AdvancedSection: FC<Props> = ({ advancedExpanded, setAdvancedExpand
         >
           <EuiFlexItem>
             <ModelPlotSwitch />
+            <AnnotationsSwitch />
             <ModelMemoryLimitInput />
           </EuiFlexItem>
           <EuiFlexItem>

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/annotations/annotations_switch.tsx

@@ -0,0 +1,65 @@
+/*
+ * 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 React, { FC, useState, useContext, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiCallOut, EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { JobCreatorContext } from '../../../../../job_creator_context';
+import { Description } from './description';
+
+export const AnnotationsSwitch: FC = () => {
+  const { jobCreator, jobCreatorUpdate, jobCreatorUpdated } = useContext(JobCreatorContext);
+  const [annotationsEnabled, setAnnotationsEnabled] = useState(jobCreator.modelChangeAnnotations);
+  const [showCallOut, setShowCallout] = useState(
+    jobCreator.modelPlot && !jobCreator.modelChangeAnnotations
+  );
+
+  useEffect(() => {
+    jobCreator.modelChangeAnnotations = annotationsEnabled;
+    jobCreatorUpdate();
+  }, [annotationsEnabled]);
+
+  useEffect(() => {
+    setShowCallout(jobCreator.modelPlot && !annotationsEnabled);
+  }, [jobCreatorUpdated, annotationsEnabled]);
+
+  function toggleAnnotations() {
+    setAnnotationsEnabled(!annotationsEnabled);
+  }
+
+  return (
+    <>
+      <Description>
+        <EuiSwitch
+          name="switch"
+          checked={annotationsEnabled}
+          onChange={toggleAnnotations}
+          data-test-subj="mlJobWizardSwitchAnnotations"
+          label={i18n.translate(
+            'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlotAnnotations.title',
+            {
+              defaultMessage: 'Enable model change annotations',
+            }
+          )}
+        />
+      </Description>
+      {showCallOut && (
+        <EuiCallOut
+          title={
+            <FormattedMessage
+              id="xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.annotationsSwitchCallout.title"
+              defaultMessage="If you enable model plot with this configuration, we recommend you also enable annotations."
+            />
+          }
+          color="primary"
+          iconType="help"
+        />
+      )}
+      <EuiSpacer />
+    </>
+  );
+};

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/annotations/description.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { memo, FC } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
+
+export const Description: FC = memo(({ children }) => {
+  const title = i18n.translate(
+    'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlotAnnotations.title',
+    {
+      defaultMessage: 'Enable model change annotations',
+    }
+  );
+  return (
+    <EuiDescribedFormGroup
+      title={<h3>{title}</h3>}
+      description={
+        <FormattedMessage
+          id="xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlotAnnotations.description"
+          defaultMessage="Select to generate annotations when the model changes significantly. For example, when step changes, periodicity or trends are detected."
+        />
+      }
+    >
+      <EuiFormRow label={title}>
+        <>{children}</>
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  );
+});

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/advanced_section/components/annotations/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { AnnotationsSwitch } from './annotations_switch';

x-pack/plugins/ml/public/application/jobs/new_job/pages/new_job/page.tsx

@@ -125,6 +125,7 @@ export const Page: FC<PageProps> = ({ existingJobsAndGroups, jobType }) => {
 
     if (jobCreator.type === JOB_TYPE.SINGLE_METRIC) {
       jobCreator.modelPlot = true;
+      jobCreator.modelChangeAnnotations = true;
     }
 
     if (mlContext.currentSavedSearch !== null) {

x-pack/plugins/ml/server/routes/anomaly_detectors.ts

@@ -175,9 +175,11 @@ export function jobRoutes({ router, mlLicense }: RouteInitialization) {
     mlLicense.fullLicenseAPIGuard(async (context, request, response) => {
       try {
         const { jobId } = request.params;
+        const body = request.body;
+
         const results = await context.ml!.mlClient.callAsCurrentUser('ml.addJob', {
           jobId,
-          body: request.body,
+          body,
         });
         return response.ok({
           body: results,