[ML] fix calendars saving

Author: darnautov

x-pack/legacy/plugins/ml/common/types/calendars.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 interface Calendar {
+  calendar_id: string;
+  description: string;
+  events: any[];
+  job_ids: string[];
+}
+
+export interface UpdateCalendar extends Calendar {
+  calendarId: string;
+}

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

@@ -6,6 +6,7 @@
 
 import { UrlConfig } from '../../../../../../../common/types/custom_urls';
 import { CREATED_BY_LABEL } from '../util/constants';
+import { Calendar } from '../../../../../../../common/types/calendars';
 
 export type JobId = string;
 export type BucketSpan = string;
@@ -24,7 +25,7 @@ export interface Job {
   data_description: DataDescription;
   description: string;
   groups: string[];
-  calendars?: string[];
+  calendars?: Calendar[];
   model_plot_config?: ModelPlotConfig;
   model_snapshot_retention_days?: number;
   renormalization_window_days?: number;

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

@@ -18,6 +18,8 @@ import { JobRunner, ProgressSubscriber } from '../job_runner';
 import { JOB_TYPE, CREATED_BY_LABEL, SHARED_RESULTS_INDEX_NAME } from './util/constants';
 import { isSparseDataJob } from './util/general';
 import { parseInterval } from '../../../../../../common/util/parse_interval';
+import { ml } from '../../../../services/ml_api_service';
+import { Calendar } from '../../../../../../common/types/calendars';
 
 export class JobCreator {
   protected _type: JOB_TYPE = JOB_TYPE.SINGLE_METRIC;
@@ -189,11 +191,11 @@ export class JobCreator {
     this._job_config.groups = groups;
   }
 
-  public get calendars(): string[] {
+  public get calendars(): Calendar[] {
     return this._job_config.calendars || [];
   }
 
-  public set calendars(calendars: string[]) {
+  public set calendars(calendars: Calendar[]) {
     this._job_config.calendars = calendars;
   }
 
@@ -441,7 +443,19 @@ export class JobCreator {
 
   public async createJob(): Promise<object> {
     try {
-      const { success, resp } = await mlJobService.saveNewJob(this._job_config);
+      const { calendars, ...jobConfig } = this._job_config;
+      const { success, resp } = await mlJobService.saveNewJob(jobConfig);
+
+      if (calendars && calendars.length > 0) {
+        for (const calendar of calendars) {
+          await ml.updateCalendar({
+            ...calendar,
+            calendarId: calendar.calendar_id,
+            job_ids: [this.jobId],
+          });
+        }
+      }
+
       if (success === true) {
         return resp;
       } else {

x-pack/legacy/plugins/ml/public/application/jobs/new_job/pages/components/job_details_step/components/additional_section/components/calendars/calendars_selection.tsx

@@ -5,49 +5,52 @@
  */
 
 import React, { FC, useState, useContext, useEffect } from 'react';
-import { EuiComboBox, EuiComboBoxOptionProps } from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionProps, EuiComboBoxProps } from '@elastic/eui';
 import { JobCreatorContext } from '../../../../../job_creator_context';
 import { Description } from './description';
 import { ml } from '../../../../../../../../../services/ml_api_service';
+import { Calendar } from '../../../../../../../../../../../common/types/calendars';
 
 export const CalendarsSelection: FC = () => {
   const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext);
-  const [selectedCalendars, setSelectedCalendars] = useState(jobCreator.calendars);
-  const [selectedOptions, setSelectedOptions] = useState<EuiComboBoxOptionProps[]>([]);
-  const [options, setOptions] = useState<EuiComboBoxOptionProps[]>([]);
+  const [selectedCalendars, setSelectedCalendars] = useState<Calendar[]>(jobCreator.calendars);
+  const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>(
+    []
+  );
+  const [options, setOptions] = useState<Array<EuiComboBoxOptionProps<Calendar>>>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   async function loadCalendars() {
     setIsLoading(true);
     const calendars = await ml.calendars();
-    setOptions(calendars.map(c => ({ label: c.calendar_id })));
-    setSelectedOptions(selectedCalendars.map(c => ({ label: c })));
+    setOptions(calendars.map(c => ({ label: c.calendar_id, value: c })));
+    setSelectedOptions(selectedCalendars.map(c => ({ label: c.calendar_id, value: c })));
     setIsLoading(false);
   }
 
   useEffect(() => {
     loadCalendars();
   }, []);
 
-  function onChange(optionsIn: EuiComboBoxOptionProps[]) {
-    setSelectedOptions(optionsIn);
-    setSelectedCalendars(optionsIn.map(o => o.label));
-  }
-
   useEffect(() => {
     jobCreator.calendars = selectedCalendars;
     jobCreatorUpdate();
   }, [selectedCalendars.join()]);
 
+  const comboBoxProps: EuiComboBoxProps<Calendar> = {
+    async: true,
+    options,
+    selectedOptions,
+    isLoading,
+    onChange: optionsIn => {
+      setSelectedOptions(optionsIn);
+      setSelectedCalendars(optionsIn.map(o => o.value as Calendar));
+    },
+  };
+
   return (
     <Description>
-      <EuiComboBox
-        async
-        options={options}
-        selectedOptions={selectedOptions}
-        isLoading={isLoading}
-        onChange={onChange}
-      />
+      <EuiComboBox {...comboBoxProps} />
     </Description>
   );
 };

x-pack/legacy/plugins/ml/public/application/services/ml_api_service/index.d.ts

@@ -15,6 +15,7 @@ import { DataFrameAnalyticsStats } from '../../data_frame_analytics/pages/analyt
 import { JobMessage } from '../../../../common/types/audit_message';
 import { DataFrameAnalyticsConfig } from '../../data_frame_analytics/common/analytics';
 import { DeepPartial } from '../../../../common/types/common';
+import { Calendar, UpdateCalendar } from '../../../../common/types/calendars';
 
 // TODO This is not a complete representation of all methods of `ml.*`.
 // It just satisfies needs for other parts of the code area which use
@@ -98,14 +99,8 @@ declare interface Ml {
   setupDataRecognizerConfig(obj: object): Promise<any>;
   getTimeFieldRange(obj: object): Promise<GetTimeFieldRangeResponse>;
   calculateModelMemoryLimit(obj: object): Promise<{ modelMemoryLimit: string }>;
-  calendars(): Promise<
-    Array<{
-      calendar_id: string;
-      description: string;
-      events: any[];
-      job_ids: string[];
-    }>
-  >;
+  calendars(): Promise<Calendar[]>;
+  updateCalendar(obj: UpdateCalendar): Promise<any>;
 
   getVisualizerFieldStats(obj: object): Promise<any>;
   getVisualizerOverallStats(obj: object): Promise<any>;