[ML] Global calendars (#57890)

* [ML] Global calendars * updating snapshots * changes based on review * larger spacer * updating jest snapshot
elastic · Feb 25, 2020 · d50031e · d50031e
1 parent 93556a9
commit d50031e
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 103 deletions.
diff --git a/x-pack/legacy/plugins/ml/common/constants/calendars.ts b/x-pack/legacy/plugins/ml/common/constants/calendars.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 const GLOBAL_CALENDAR = '_all';
diff --git a/...b_details_step/components/additional_section/components/calendars/calendars_selection.tsx b/...b_details_step/components/additional_section/components/calendars/calendars_selection.tsx
@@ -23,6 +23,7 @@ import { JobCreatorContext } from '../../../../../job_creator_context';
 import { Description } from './description';
 import { ml } from '../../../../../../../../../services/ml_api_service';
 import { Calendar } from '../../../../../../../../../../../common/types/calendars';
+import { GLOBAL_CALENDAR } from '../../../../../../../../../../../common/constants/calendars';
 
 export const CalendarsSelection: FC = () => {
   const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext);
@@ -35,7 +36,9 @@ export const CalendarsSelection: FC = () => {
 
   async function loadCalendars() {
     setIsLoading(true);
-    const calendars = await ml.calendars();
+    const calendars = (await ml.calendars()).filter(
+      c => c.job_ids.includes(GLOBAL_CALENDAR) === false
+    );
     setOptions(calendars.map(c => ({ label: c.calendar_id, value: c })));
     setSelectedOptions(selectedCalendars.map(c => ({ label: c.calendar_id, value: c })));
     setIsLoading(false);

diff --git a/...ins/ml/public/application/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap b/...ins/ml/public/application/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
diff --git a/...pplication/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/...pplication/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
diff --git a/...gacy/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js b/...gacy/plugins/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.js
@@ -18,6 +18,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiSwitch,
 } from '@elastic/eui';
 
 import { EventsTable } from '../events_table';
@@ -68,6 +69,8 @@ export const CalendarForm = ({
   selectedGroupOptions,
   selectedJobOptions,
   showNewEventModal,
+  isGlobalCalendar,
+  onGlobalCalendarChange,
 }) => {
   const msg = i18n.translate('xpack.ml.calendarsEdit.calendarForm.allowedCharactersDescription', {
     defaultMessage:
@@ -81,7 +84,9 @@ export const CalendarForm = ({
 
   return (
     <EuiForm>
-      {!isEdit && (
+      {isEdit === true ? (
+        <EditHeader calendarId={calendarId} description={description} />
+      ) : (
         <Fragment>
           <EuiTitle>
             <h1>
@@ -128,39 +133,59 @@ export const CalendarForm = ({
           </EuiFormRow>
         </Fragment>
       )}
-      {isEdit && <EditHeader calendarId={calendarId} description={description} />}
-      <EuiFormRow
-        label={
-          <FormattedMessage
-            id="xpack.ml.calendarsEdit.calendarForm.jobsLabel"
-            defaultMessage="Jobs"
-          />
-        }
-      >
-        <EuiComboBox
-          options={jobIds}
-          selectedOptions={selectedJobOptions}
-          onChange={onJobSelection}
-          isDisabled={saving === true || canCreateCalendar === false}
-        />
-      </EuiFormRow>
 
-      <EuiFormRow
+      <EuiSpacer size="xl" />
+
+      <EuiSwitch
+        name="switch"
         label={
           <FormattedMessage
-            id="xpack.ml.calendarsEdit.calendarForm.groupsLabel"
-            defaultMessage="Groups"
+            id="xpack.ml.calendarsEdit.calendarForm.allJobsLabel"
+            defaultMessage="Apply calendar to all jobs"
           />
         }
-      >
-        <EuiComboBox
-          onCreateOption={onCreateGroupOption}
-          options={groupIds}
-          selectedOptions={selectedGroupOptions}
-          onChange={onGroupSelection}
-          isDisabled={saving === true || canCreateCalendar === false}
-        />
-      </EuiFormRow>
+        checked={isGlobalCalendar}
+        onChange={onGlobalCalendarChange}
+      />
+
+      {isGlobalCalendar === false && (
+        <>
+          <EuiSpacer size="m" />
+
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.ml.calendarsEdit.calendarForm.jobsLabel"
+                defaultMessage="Jobs"
+              />
+            }
+          >
+            <EuiComboBox
+              options={jobIds}
+              selectedOptions={selectedJobOptions}
+              onChange={onJobSelection}
+              isDisabled={saving === true || canCreateCalendar === false}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow
+            label={
+              <FormattedMessage
+                id="xpack.ml.calendarsEdit.calendarForm.groupsLabel"
+                defaultMessage="Groups"
+              />
+            }
+          >
+            <EuiComboBox
+              onCreateOption={onCreateGroupOption}
+              options={groupIds}
+              selectedOptions={selectedGroupOptions}
+              onChange={onGroupSelection}
+              isDisabled={saving === true || canCreateCalendar === false}
+            />
+          </EuiFormRow>
+        </>
+      )}
 
       <EuiSpacer size="xl" />
 
@@ -240,4 +265,6 @@ CalendarForm.propTypes = {
   selectedGroupOptions: PropTypes.array.isRequired,
   selectedJobOptions: PropTypes.array.isRequired,
   showNewEventModal: PropTypes.func.isRequired,
+  isGlobalCalendar: PropTypes.bool.isRequired,
+  onGlobalCalendarChange: PropTypes.func.isRequired,
 };
diff --git a/x-pack/legacy/plugins/ml/public/application/settings/calendars/edit/new_calendar.js b/x-pack/legacy/plugins/ml/public/application/settings/calendars/edit/new_calendar.js
@@ -19,6 +19,7 @@ import { NewEventModal } from './new_event_modal';
 import { ImportModal } from './import_modal';
 import { ml } from '../../../services/ml_api_service';
 import { withKibana } from '../../../../../../../../../src/plugins/kibana_react/public';
+import { GLOBAL_CALENDAR } from '../../../../../common/constants/calendars';
 
 class NewCalendarUI extends Component {
   static propTypes = {
@@ -46,6 +47,7 @@ class NewCalendarUI extends Component {
       events: [],
       saving: false,
       selectedCalendar: undefined,
+      isGlobalCalendar: false,
     };
   }
 
@@ -65,6 +67,7 @@ class NewCalendarUI extends Component {
       let eventsList = [];
       let selectedCalendar;
       let formCalendarId = '';
+      let isGlobalCalendar = false;
 
       // Editing existing calendar.
       if (this.props.calendarId !== undefined) {
@@ -74,13 +77,17 @@ class NewCalendarUI extends Component {
           formCalendarId = selectedCalendar.calendar_id;
           eventsList = selectedCalendar.events;
 
-          selectedCalendar.job_ids.forEach(id => {
-            if (jobIds.find(jobId => jobId === id)) {
-              selectedJobOptions.push({ label: id });
-            } else if (groupIds.find(groupId => groupId === id)) {
-              selectedGroupOptions.push({ label: id });
-            }
-          });
+          if (selectedCalendar.job_ids.includes(GLOBAL_CALENDAR)) {
+            isGlobalCalendar = true;
+          } else {
+            selectedCalendar.job_ids.forEach(id => {
+              if (jobIds.find(jobId => jobId === id)) {
+                selectedJobOptions.push({ label: id });
+              } else if (groupIds.find(groupId => groupId === id)) {
+                selectedGroupOptions.push({ label: id });
+              }
+            });
+          }
         }
       }
 
@@ -96,6 +103,7 @@ class NewCalendarUI extends Component {
         selectedJobOptions,
         selectedGroupOptions,
         selectedCalendar,
+        isGlobalCalendar,
       });
     } catch (error) {
       console.log(error);
@@ -181,10 +189,15 @@ class NewCalendarUI extends Component {
       events,
       selectedGroupOptions,
       selectedJobOptions,
+      isGlobalCalendar,
     } = this.state;
 
-    const jobIds = selectedJobOptions.map(option => option.label);
-    const groupIds = selectedGroupOptions.map(option => option.label);
+    const allIds = isGlobalCalendar
+      ? [GLOBAL_CALENDAR]
+      : [
+          ...selectedJobOptions.map(option => option.label),
+          ...selectedGroupOptions.map(option => option.label),
+        ];
 
     // Reduce events to fields expected by api
     const eventsToSave = events.map(event => ({
@@ -198,7 +211,7 @@ class NewCalendarUI extends Component {
       calendarId: formCalendarId,
       description,
       events: eventsToSave,
-      job_ids: [...jobIds, ...groupIds],
+      job_ids: allIds,
     };
 
     return calendar;
@@ -214,6 +227,12 @@ class NewCalendarUI extends Component {
     }));
   };
 
+  onGlobalCalendarChange = ({ currentTarget }) => {
+    this.setState({
+      isGlobalCalendar: currentTarget.checked,
+    });
+  };
+
   onJobSelection = selectedJobOptions => {
     this.setState({
       selectedJobOptions,
@@ -295,6 +314,7 @@ class NewCalendarUI extends Component {
       selectedCalendar,
       selectedJobOptions,
       selectedGroupOptions,
+      isGlobalCalendar,
     } = this.state;
 
     let modal = '';
@@ -351,6 +371,8 @@ class NewCalendarUI extends Component {
                 selectedJobOptions={selectedJobOptions}
                 onCreateGroupOption={this.onCreateGroupOption}
                 showNewEventModal={this.showNewEventModal}
+                isGlobalCalendar={isGlobalCalendar}
+                onGlobalCalendarChange={this.onGlobalCalendarChange}
               />
             </EuiPageContent>
             {modal}

diff --git a/x-pack/legacy/plugins/ml/public/application/settings/calendars/edit/utils.js b/x-pack/legacy/plugins/ml/public/application/settings/calendars/edit/utils.js
@@ -73,14 +73,17 @@ function getCalendars() {
 export function getCalendarSettingsData() {
   return new Promise(async (resolve, reject) => {
     try {
-      const data = await Promise.all([getJobIds(), getGroupIds(), getCalendars()]);
+      const [jobIds, groupIds, calendars] = await Promise.all([
+        getJobIds(),
+        getGroupIds(),
+        getCalendars(),
+      ]);
 
-      const formattedData = {
-        jobIds: data[0],
-        groupIds: data[1],
-        calendars: data[2],
-      };
-      resolve(formattedData);
+      resolve({
+        jobIds,
+        groupIds,
+        calendars,
+      });
     } catch (error) {
       console.log(error);
       reject(error);

diff --git a/...gins/ml/public/application/settings/calendars/list/table/__snapshots__/table.test.js.snap b/...gins/ml/public/application/settings/calendars/list/table/__snapshots__/table.test.js.snap