[ML] Adding job cloning to new wizards (#42370)

* [ML] Adding job cloing to new wizards

* refactor

* renaming CombinedJobConfig

* moving cloning to jobCreator classes

* using job service cloner to remove stats

* making overrideConfigs protected

* changing duration to timeRange

x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/preconfigured_job_redirect.js

@@ -93,7 +93,7 @@ function getWizardUrlFromCloningJob(job) {
     }
     const indexPatternId = getIndexPatternIdFromName(job.datafeed_config.indices[0]);
 
-    return `jobs/new_job/simple/${page}?index=${indexPatternId}&_g=()`;
+    return `jobs/new_job/new_new_job/${page}?index=${indexPatternId}&_g=()`;
   } else {
     return null;
   }

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/configs/combined_job.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { cloneDeep } from 'lodash';
+import { Datafeed } from './datafeed';
+import { Job } from './job';
+
+// in older implementations of the job config, the datafeed was placed inside the job
+// for convenience.
+export interface CombinedJob extends Job {
+  datafeed_config: Datafeed;
+}
+
+export function expandCombinedJobConfig(combinedJob: CombinedJob) {
+  const combinedJobClone = cloneDeep(combinedJob);
+  const job = combinedJobClone;
+  const datafeed = combinedJobClone.datafeed_config;
+  delete job.datafeed_config;
+
+  return { job, datafeed };
+}

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/configs/index.ts

@@ -6,3 +6,4 @@
 
 export * from './job';
 export * from './datafeed';
+export * from './combined_job';

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/job_creator.ts

@@ -356,4 +356,19 @@ export class JobCreator {
   public get formattedDatafeedJson() {
     return JSON.stringify(this._datafeed_config, null, 2);
   }
+
+  protected _overrideConfigs(job: Job, datafeed: Datafeed) {
+    this._job_config = job;
+    this._datafeed_config = datafeed;
+
+    this._detectors = this._job_config.analysis_config.detectors;
+    this._influencers = this._job_config.analysis_config.influencers;
+    if (this._job_config.groups === undefined) {
+      this._job_config.groups = [];
+    }
+
+    if (this._job_config.analysis_config.influencers !== undefined) {
+      this._job_config.analysis_config.influencers.forEach(i => this.addInfluencer(i));
+    }
+  }
 }

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/multi_metric_job_creator.ts

@@ -8,10 +8,11 @@ import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/type
 import { IndexPattern } from 'ui/index_patterns';
 import { JobCreator } from './job_creator';
 import { Field, Aggregation, SplitField, AggFieldPair } from '../../../../../common/types/fields';
-import { Detector } from './configs';
+import { Job, Datafeed, Detector } from './configs';
 import { createBasicDetector } from './util/default_configs';
 import { JOB_TYPE, CREATED_BY_LABEL, DEFAULT_MODEL_MEMORY_LIMIT } from './util/constants';
 import { ml } from '../../../../services/ml_api_service';
+import { getRichDetectors } from './util/general';
 
 export class MultiMetricJobCreator extends JobCreator {
   // a multi metric job has one optional overall partition field
@@ -136,4 +137,24 @@ export class MultiMetricJobCreator extends JobCreator {
       agg: this._aggs[i],
     }));
   }
+
+  public cloneFromExistingJob(job: Job, datafeed: Datafeed) {
+    this._overrideConfigs(job, datafeed);
+    this.jobId = '';
+    const detectors = getRichDetectors(job.analysis_config.detectors);
+
+    this.removeAllDetectors();
+
+    detectors.forEach((d, i) => {
+      const dtr = detectors[i];
+      if (dtr.agg !== null && dtr.field !== null) {
+        this.addDetector(dtr.agg, dtr.field);
+      }
+    });
+    if (detectors.length) {
+      if (detectors[0].partitionField !== null) {
+        this.setSplitField(detectors[0].partitionField);
+      }
+    }
+  }
 }

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/population_job_creator.ts

@@ -8,9 +8,10 @@ import { SavedSearch } from 'src/legacy/core_plugins/kibana/public/discover/type
 import { IndexPattern } from 'ui/index_patterns';
 import { JobCreator } from './job_creator';
 import { Field, Aggregation, SplitField, AggFieldPair } from '../../../../../common/types/fields';
-import { Detector } from './configs';
+import { Job, Datafeed, Detector } from './configs';
 import { createBasicDetector } from './util/default_configs';
 import { JOB_TYPE, CREATED_BY_LABEL } from './util/constants';
+import { getRichDetectors } from './util/general';
 
 export class PopulationJobCreator extends JobCreator {
   // a population job has one overall over (split) field, which is the same for all detectors
@@ -125,4 +126,27 @@ export class PopulationJobCreator extends JobCreator {
       },
     }));
   }
+
+  public cloneFromExistingJob(job: Job, datafeed: Datafeed) {
+    this._overrideConfigs(job, datafeed);
+    this.jobId = '';
+    const detectors = getRichDetectors(job.analysis_config.detectors);
+
+    this.removeAllDetectors();
+
+    if (detectors.length) {
+      if (detectors[0].overField !== null) {
+        this.setSplitField(detectors[0].overField);
+      }
+    }
+    detectors.forEach((d, i) => {
+      const dtr = detectors[i];
+      if (dtr.agg !== null && dtr.field !== null) {
+        this.addDetector(dtr.agg, dtr.field);
+        if (dtr.byField !== null) {
+          this.setByField(dtr.byField, i);
+        }
+      }
+    });
+  }
 }

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/single_metric_job_creator.ts

@@ -9,10 +9,11 @@ import { IndexPattern } from 'ui/index_patterns';
 import { parseInterval } from 'ui/utils/parse_interval';
 import { JobCreator } from './job_creator';
 import { Field, Aggregation, AggFieldPair } from '../../../../../common/types/fields';
-import { Detector, BucketSpan } from './configs';
+import { Job, Datafeed, Detector, BucketSpan } from './configs';
 import { createBasicDetector } from './util/default_configs';
 import { KIBANA_AGGREGATION } from '../../../../../common/constants/aggregation_types';
 import { JOB_TYPE, CREATED_BY_LABEL } from './util/constants';
+import { getRichDetectors } from './util/general';
 
 export class SingleMetricJobCreator extends JobCreator {
   protected _type: JOB_TYPE = JOB_TYPE.SINGLE_METRIC;
@@ -176,4 +177,17 @@ export class SingleMetricJobCreator extends JobCreator {
       };
     }
   }
+
+  public cloneFromExistingJob(job: Job, datafeed: Datafeed) {
+    this._overrideConfigs(job, datafeed);
+    this.jobId = '';
+    const detectors = getRichDetectors(job.analysis_config.detectors);
+
+    this.removeAllDetectors();
+
+    const dtr = detectors[0];
+    if (detectors.length && dtr.agg !== null && dtr.field !== null) {
+      this.setDetector(dtr.agg, dtr.field);
+    }
+  }
 }

x-pack/legacy/plugins/ml/public/jobs/new_job_new/common/job_creator/util/general.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { Detector } from '../configs';
+import { newJobCapsService } from '../../../../../services/new_job_capabilities_service';
+
+// populate the detectors with Field and Agg objects loaded from the job capabilities service
+export function getRichDetectors(detectors: Detector[]) {
+  return detectors.map(d => {
+    return {
+      agg: newJobCapsService.getAggById(d.function),
+      field: d.field_name !== undefined ? newJobCapsService.getFieldById(d.field_name) : null,
+      byField:
+        d.by_field_name !== undefined ? newJobCapsService.getFieldById(d.by_field_name) : null,
+      overField:
+        d.over_field_name !== undefined ? newJobCapsService.getFieldById(d.over_field_name) : null,
+      partitionField:
+        d.partition_field_name !== undefined
+          ? newJobCapsService.getFieldById(d.partition_field_name)
+          : null,
+    };
+  });
+}

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range.tsx

@@ -18,7 +18,13 @@ import { EventRateChart } from '../charts/event_rate_chart';
 import { LineChartPoint } from '../../../common/chart_loader';
 import { TimeRangePicker } from './time_range_picker';
 import { GetTimeFieldRangeResponse } from '../../../../../services/ml_api_service';
+import { mlJobService } from '../../../../../services/job_service';
+import { ml } from '../../../../../services/ml_api_service';
 
+export interface TimeRange {
+  start: number;
+  end: number;
+}
 export const TimeRangeStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) => {
   const kibanaContext = useContext(KibanaContext);
   if (!isKibanaContext(kibanaContext)) {
@@ -33,8 +39,10 @@ export const TimeRangeStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep })
     chartInterval,
   } = useContext(JobCreatorContext);
 
-  const [start, setStart] = useState(jobCreator.start);
-  const [end, setEnd] = useState(jobCreator.end);
+  const [timeRange, setTimeRange] = useState<TimeRange>({
+    start: jobCreator.start,
+    end: jobCreator.end,
+  });
   const [eventRateChartData, setEventRateChartData] = useState<LineChartPoint[]>([]);
 
   async function loadChart() {
@@ -47,6 +55,7 @@ export const TimeRangeStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep })
   }
 
   useEffect(() => {
+    const { start, end } = timeRange;
     jobCreator.setTimeRange(start, end);
     chartInterval.setBounds({
       min: moment(start),
@@ -60,25 +69,51 @@ export const TimeRangeStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep })
 
     jobCreatorUpdate();
     loadChart();
-  }, [start, end]);
+  }, [JSON.stringify(timeRange)]);
 
   useEffect(() => {
-    setStart(jobCreator.start);
-    setEnd(jobCreator.end);
+    setTimeRange({
+      start: jobCreator.start,
+      end: jobCreator.end,
+    });
   }, [jobCreatorUpdated]);
 
   function fullTimeRangeCallback(range: GetTimeFieldRangeResponse) {
-    setStart(range.start.epoch);
-    setEnd(range.end.epoch);
+    setTimeRange({
+      start: range.start.epoch,
+      end: range.end.epoch,
+    });
   }
 
+  useEffect(() => {
+    if (mlJobService.currentJob !== undefined) {
+      (async (index: string, timeFieldName: string | undefined, query: object) => {
+        const resp = await ml.getTimeFieldRange({
+          index,
+          timeFieldName,
+          query,
+        });
+        setTimeRange({
+          start: resp.start.epoch,
+          end: resp.end.epoch,
+        });
+        // wipe the cloning job
+        mlJobService.currentJob = undefined;
+      })(
+        kibanaContext.currentIndexPattern.title,
+        kibanaContext.currentIndexPattern.timeFieldName,
+        kibanaContext.combinedQuery
+      );
+    }
+  }, []);
+
   return (
     <Fragment>
       {isCurrentStep && (
         <Fragment>
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
-              <TimeRangePicker setStart={setStart} setEnd={setEnd} start={start} end={end} />
+              <TimeRangePicker setTimeRange={setTimeRange} timeRange={timeRange} />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <FullTimeRangeSelector

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/time_range_step/time_range_picker.tsx

@@ -9,27 +9,26 @@ import React, { Fragment, FC, useContext, useState, useEffect } from 'react';
 import { EuiDatePickerRange, EuiDatePicker } from '@elastic/eui';
 
 import { KibanaContext, isKibanaContext } from '../../../../../data_frame/common/kibana_context';
+import { TimeRange } from './time_range';
 
 const WIDTH = '512px';
 
 interface Props {
-  setStart: (s: number) => void;
-  setEnd: (e: number) => void;
-  start: number;
-  end: number;
+  setTimeRange: (d: TimeRange) => void;
+  timeRange: TimeRange;
 }
 
 type Moment = moment.Moment;
 
-export const TimeRangePicker: FC<Props> = ({ setStart, setEnd, start, end }) => {
+export const TimeRangePicker: FC<Props> = ({ setTimeRange, timeRange }) => {
   const kibanaContext = useContext(KibanaContext);
   if (!isKibanaContext(kibanaContext)) {
     return null;
   }
   const dateFormat = kibanaContext.kibanaConfig.get('dateFormat');
 
-  const [startMoment, setStartMoment] = useState<Moment | undefined>(moment(start));
-  const [endMoment, setEndMoment] = useState<Moment | undefined>(moment(end));
+  const [startMoment, setStartMoment] = useState<Moment | undefined>(moment(timeRange.start));
+  const [endMoment, setEndMoment] = useState<Moment | undefined>(moment(timeRange.end));
 
   function handleChangeStart(date: Moment | null) {
     setStartMoment(date || undefined);
@@ -42,18 +41,20 @@ export const TimeRangePicker: FC<Props> = ({ setStart, setEnd, start, end }) =>
   // update the parent start and end if the timepicker changes
   useEffect(() => {
     if (startMoment !== undefined && endMoment !== undefined) {
-      setStart(startMoment.valueOf());
-      setEnd(endMoment.valueOf());
+      setTimeRange({
+        start: startMoment.valueOf(),
+        end: endMoment.valueOf(),
+      });
     }
   }, [startMoment, endMoment]);
 
   // update our local start and end moment objects if
   // the parent start and end updates.
   // this happens if the use full data button is pressed.
   useEffect(() => {
-    setStartMoment(moment(start));
-    setEndMoment(moment(end));
-  }, [start, end]);
+    setStartMoment(moment(timeRange.start));
+    setEndMoment(moment(timeRange.end));
+  }, [JSON.stringify(timeRange)]);
 
   return (
     <Fragment>
@@ -69,6 +70,7 @@ export const TimeRangePicker: FC<Props> = ({ setStart, setEnd, start, end }) =>
               aria-label="Start date"
               showTimeSelect
               dateFormat={dateFormat}
+              maxDate={endMoment}
             />
           }
           endDateControl={
@@ -80,6 +82,7 @@ export const TimeRangePicker: FC<Props> = ({ setStart, setEnd, start, end }) =>
               aria-label="End date"
               showTimeSelect
               dateFormat={dateFormat}
+              minDate={startMoment}
             />
           }
         />