[ML] Daylight saving time calendar events (elastic#193605)

Adds new pages for creating and managing DST calendars. Closes elastic#189469 New section added to Settings home page. ![image](https://github.com/user-attachments/assets/9165906f-e571-46be-a5ac-bf7dc9cd2801) New page for listing DST calendars. The original calendar page does not show DST calendars. ![image](https://github.com/user-attachments/assets/32a64a31-b4e5-4516-85fd-19e63aa9d5c4) New page for creating DST calendars. The ability to apply to all jobs and add a description has been removed. It is not possible manually add events. Events are automatically generated for a selected time zone. <img width="1170" alt="image" src="https://github.com/user-attachments/assets/557b8d39-6c17-448a-aa30-a282d8a424a7"> If the selected time zone does not observe daylight savings, an info callout is displayed <img width="1178" alt="image" src="https://github.com/user-attachments/assets/627043bf-0368-4ab3-8ca7-1931f9622387"> A new DST calendar section is added to all AD job wizards. ![image](https://github.com/user-attachments/assets/6359192b-faac-4ffb-ad3e-b8193f40f02f) (cherry picked from commit 2881b04)
kibanamachine · Oct 7, 2024 · bea41b8 · bea41b8
1 parent 337d938
commit bea41b8
Show file tree

Hide file tree

Showing 41 changed files with 1,144 additions and 390 deletions.
diff --git a/x-pack/plugins/ml/common/constants/locator.ts b/x-pack/plugins/ml/common/constants/locator.ts
@@ -62,8 +62,11 @@ export const ML_PAGES = {
   ANOMALY_DETECTION_MODULES_VIEW_OR_CREATE: 'modules/check_view_or_create',
   SETTINGS: 'settings',
   CALENDARS_MANAGE: 'settings/calendars_list',
+  CALENDARS_DST_MANAGE: 'settings/calendars_dst_list',
   CALENDARS_NEW: 'settings/calendars_list/new_calendar',
+  CALENDARS_DST_NEW: 'settings/calendars_dst_list/new_calendar',
   CALENDARS_EDIT: 'settings/calendars_list/edit_calendar',
+  CALENDARS_DST_EDIT: 'settings/calendars_dst_list/edit_calendar',
   FILTER_LISTS_MANAGE: 'settings/filter_lists',
   FILTER_LISTS_NEW: 'settings/filter_lists/new_filter_list',
   FILTER_LISTS_EDIT: 'settings/filter_lists/edit_filter_list',

diff --git a/x-pack/plugins/ml/common/types/calendars.ts b/x-pack/plugins/ml/common/types/calendars.ts
@@ -5,16 +5,24 @@
  * 2.0.
  */
 
-export type CalendarId = string;
+import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 
-export interface Calendar {
-  calendar_id: CalendarId;
+export type MlCalendarId = string;
+
+export interface MlCalendar {
+  calendar_id: MlCalendarId;
   description: string;
   events: any[];
   job_ids: string[];
   total_job_count?: number;
 }
 
-export interface UpdateCalendar extends Calendar {
-  calendarId: CalendarId;
+export interface UpdateCalendar extends MlCalendar {
+  calendarId: MlCalendarId;
 }
+
+export type MlCalendarEvent = estypes.MlCalendarEvent & {
+  force_time_shift?: number;
+  skip_result?: boolean;
+  skip_model_update?: boolean;
+};
diff --git a/x-pack/plugins/ml/common/types/locator.ts b/x-pack/plugins/ml/common/types/locator.ts
@@ -56,7 +56,9 @@ export type MlGenericUrlState = MLPageState<
   | typeof ML_PAGES.DATA_FRAME_ANALYTICS_CREATE_JOB
   | typeof ML_PAGES.OVERVIEW
   | typeof ML_PAGES.CALENDARS_MANAGE
+  | typeof ML_PAGES.CALENDARS_DST_MANAGE
   | typeof ML_PAGES.CALENDARS_NEW
+  | typeof ML_PAGES.CALENDARS_DST_NEW
   | typeof ML_PAGES.FILTER_LISTS_MANAGE
   | typeof ML_PAGES.FILTER_LISTS_NEW
   | typeof ML_PAGES.SETTINGS
@@ -247,6 +249,14 @@ export type CalendarEditUrlState = MLPageState<
   }
 >;
 
+export type CalendarDstEditUrlState = MLPageState<
+  typeof ML_PAGES.CALENDARS_DST_EDIT,
+  {
+    calendarId: string;
+    globalState?: MlCommonGlobalState;
+  }
+>;
+
 export type FilterEditUrlState = MLPageState<
   typeof ML_PAGES.FILTER_LISTS_EDIT,
   {
@@ -277,6 +287,7 @@ export type MlLocatorState =
   | DataFrameAnalyticsUrlState
   | DataFrameAnalyticsExplorationUrlState
   | CalendarEditUrlState
+  | CalendarDstEditUrlState
   | FilterEditUrlState
   | MlGenericUrlState
   | NotificationsUrlState

diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts b/x-pack/plugins/ml/public/application/jobs/new_job/common/job_creator/job_creator.ts
@@ -45,7 +45,7 @@ import type { CREATED_BY_LABEL } from '../../../../../../common/constants/new_jo
 import { JOB_TYPE, SHARED_RESULTS_INDEX_NAME } from '../../../../../../common/constants/new_job';
 import { collectAggs } from './util/general';
 import { filterRuntimeMappings } from './util/filter_runtime_mappings';
-import type { Calendar } from '../../../../../../common/types/calendars';
+import type { MlCalendar } from '../../../../../../common/types/calendars';
 import { mlCalendarService } from '../../../../services/calendar_service';
 import { getDatafeedAggregations } from '../../../../../../common/util/datafeed_utils';
 import { getFirstKeyInObject } from '../../../../../../common/util/object_utils';
@@ -58,7 +58,7 @@ export class JobCreator {
   protected _indexPatternTitle: IndexPatternTitle = '';
   protected _indexPatternDisplayName: string = '';
   protected _job_config: Job;
-  protected _calendars: Calendar[];
+  protected _calendars: MlCalendar[];
   protected _datafeed_config: Datafeed;
   protected _detectors: Detector[];
   protected _influencers: string[];
@@ -271,11 +271,11 @@ export class JobCreator {
     this._job_config.groups = groups;
   }
 
-  public get calendars(): Calendar[] {
+  public get calendars(): MlCalendar[] {
     return this._calendars;
   }
 
-  public set calendars(calendars: Calendar[]) {
+  public set calendars(calendars: MlCalendar[]) {
     this._calendars = calendars;
   }
 

diff --git a/...ob/pages/components/job_details_step/components/additional_section/additional_section.tsx b/...ob/pages/components/job_details_step/components/additional_section/additional_section.tsx
@@ -43,12 +43,16 @@ export const AdditionalSection: FC<Props> = ({ additionalExpanded, setAdditional
               <CustomUrlsSelection />
             </EuiFlexItem>
           </EuiFlexGroup>
+
           <EuiSpacer />
+
           <EuiFlexGroup gutterSize="xl" style={{ marginLeft: '0px', marginRight: '0px' }}>
             <EuiFlexItem>
               <CalendarsSelection />
             </EuiFlexItem>
-            <EuiFlexItem />
+            <EuiFlexItem>
+              <CalendarsSelection isDst={true} />
+            </EuiFlexItem>
           </EuiFlexGroup>
         </section>
       </EuiAccordion>

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
@@ -20,15 +20,24 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import {
+  filterCalendarsForDst,
+  separateCalendarsByType,
+} from '../../../../../../../../../settings/calendars/dst_utils';
 import { JobCreatorContext } from '../../../../../job_creator_context';
 import { Description } from './description';
 import { PLUGIN_ID } from '../../../../../../../../../../../common/constants/app';
-import type { Calendar } from '../../../../../../../../../../../common/types/calendars';
+import type { MlCalendar } from '../../../../../../../../../../../common/types/calendars';
 import { useMlApi, useMlKibana } from '../../../../../../../../../contexts/kibana';
 import { GLOBAL_CALENDAR } from '../../../../../../../../../../../common/constants/calendars';
 import { ML_PAGES } from '../../../../../../../../../../../common/constants/locator';
+import { DescriptionDst } from './description_dst';
+
+interface Props {
+  isDst?: boolean;
+}
 
-export const CalendarsSelection: FC = () => {
+export const CalendarsSelection: FC<Props> = ({ isDst = false }) => {
   const {
     services: {
       application: { getUrlForApp },
@@ -37,19 +46,22 @@ export const CalendarsSelection: FC = () => {
   const mlApi = useMlApi();
 
   const { jobCreator, jobCreatorUpdate } = useContext(JobCreatorContext);
-  const [selectedCalendars, setSelectedCalendars] = useState<Calendar[]>(jobCreator.calendars);
-  const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<Calendar>>>(
-    []
+  const [selectedCalendars, setSelectedCalendars] = useState<MlCalendar[]>(
+    filterCalendarsForDst(jobCreator.calendars, isDst)
   );
-  const [options, setOptions] = useState<Array<EuiComboBoxOptionOption<Calendar>>>([]);
+  const [selectedOptions, setSelectedOptions] = useState<
+    Array<EuiComboBoxOptionOption<MlCalendar>>
+  >([]);
+  const [options, setOptions] = useState<Array<EuiComboBoxOptionOption<MlCalendar>>>([]);
   const [isLoading, setIsLoading] = useState(false);
 
   async function loadCalendars() {
     setIsLoading(true);
-    const calendars = (await mlApi.calendars()).filter(
+    const { calendars, calendarsDst } = separateCalendarsByType(await mlApi.calendars());
+    const filteredCalendars = (isDst ? calendarsDst : calendars).filter(
       (c) => c.job_ids.includes(GLOBAL_CALENDAR) === false
     );
-    setOptions(calendars.map((c) => ({ label: c.calendar_id, value: c })));
+    setOptions(filteredCalendars.map((c) => ({ label: c.calendar_id, value: c })));
     setSelectedOptions(selectedCalendars.map((c) => ({ label: c.calendar_id, value: c })));
     setIsLoading(false);
   }
@@ -60,12 +72,14 @@ export const CalendarsSelection: FC = () => {
   }, []);
 
   useEffect(() => {
-    jobCreator.calendars = selectedCalendars;
+    const { calendars, calendarsDst } = separateCalendarsByType(jobCreator.calendars);
+    const otherCalendars = isDst ? calendars : calendarsDst;
+    jobCreator.calendars = [...selectedCalendars, ...otherCalendars];
     jobCreatorUpdate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedCalendars.join()]);
 
-  const comboBoxProps: EuiComboBoxProps<Calendar> = {
+  const comboBoxProps: EuiComboBoxProps<MlCalendar> = {
     async: true,
     options,
     selectedOptions,
@@ -77,11 +91,13 @@ export const CalendarsSelection: FC = () => {
   };
 
   const manageCalendarsHref = getUrlForApp(PLUGIN_ID, {
-    path: ML_PAGES.CALENDARS_MANAGE,
+    path: isDst ? ML_PAGES.CALENDARS_DST_MANAGE : ML_PAGES.CALENDARS_MANAGE,
   });
 
+  const Desc = isDst ? DescriptionDst : Description;
+
   return (
-    <Description>
+    <Desc>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
         <EuiFlexItem>
           <EuiComboBox {...comboBoxProps} data-test-subj="mlJobWizardComboBoxCalendars" />
@@ -119,6 +135,6 @@ export const CalendarsSelection: FC = () => {
           />
         </EuiLink>
       </EuiText>
-    </Description>
+    </Desc>
   );
 };
diff --git a/...s/job_details_step/components/additional_section/components/calendars/description_dst.tsx b/...s/job_details_step/components/additional_section/components/calendars/description_dst.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 type { FC, PropsWithChildren } from 'react';
+import React, { memo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiDescribedFormGroup, EuiFormRow, EuiLink } from '@elastic/eui';
+import { useMlKibana } from '../../../../../../../../../contexts/kibana';
+
+export const DescriptionDst: FC<PropsWithChildren<unknown>> = memo(({ children }) => {
+  const {
+    services: { docLinks },
+  } = useMlKibana();
+  const docsUrl = docLinks.links.ml.calendars;
+  const title = i18n.translate(
+    'xpack.ml.newJob.wizard.jobDetailsStep.additionalSection.calendarsDstSelection.title',
+    {
+      defaultMessage: 'DST Calendars',
+    }
+  );
+  return (
+    <EuiDescribedFormGroup
+      title={<h3>{title}</h3>}
+      description={
+        <FormattedMessage
+          id="xpack.ml.newJob.wizard.jobDetailsStep.additionalSection.calendarsDstSelection.description"
+          defaultMessage="A list of scheduled events you want to ignore, taking into account daylight saving time shifts. {learnMoreLink}"
+          values={{
+            learnMoreLink: (
+              <EuiLink href={docsUrl} target="_blank">
+                <FormattedMessage
+                  id="xpack.ml.newJob.wizard.jobDetailsStep.additionalSection.calendarsDstSelection.learnMoreLinkText"
+                  defaultMessage="Learn more"
+                />
+              </EuiLink>
+            ),
+          }}
+        />
+      }
+    >
+      <EuiFormRow>
+        <>{children}</>
+      </EuiFormRow>
+    </EuiDescribedFormGroup>
+  );
+});
diff --git a/x-pack/plugins/ml/public/application/routing/breadcrumbs.ts b/x-pack/plugins/ml/public/application/routing/breadcrumbs.ts
@@ -128,6 +128,14 @@ export const CALENDAR_MANAGEMENT_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   deepLinkId: 'ml:calendarSettings',
 });
 
+export const CALENDAR_DST_MANAGEMENT_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
+  text: i18n.translate('xpack.ml.settings.breadcrumbs.calendarManagementLabel', {
+    defaultMessage: 'Calendar DST management',
+  }),
+  href: '/settings/calendars_dst_list',
+  deepLinkId: 'ml:calendarSettings',
+});
+
 export const FILTER_LISTS_BREADCRUMB: ChromeBreadcrumb = Object.freeze({
   text: i18n.translate('xpack.ml.settings.breadcrumbs.filterListsLabel', {
     defaultMessage: 'Filter lists',
@@ -160,6 +168,7 @@ const breadcrumbs = {
   CHANGE_POINT_DETECTION,
   CREATE_JOB_BREADCRUMB,
   CALENDAR_MANAGEMENT_BREADCRUMB,
+  CALENDAR_DST_MANAGEMENT_BREADCRUMB,
   FILTER_LISTS_BREADCRUMB,
   SUPPLIED_CONFIGURATIONS,
 };

diff --git a/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/settings/calendar_list.tsx
@@ -31,7 +31,7 @@ export const calendarListRouteFactory = (
   title: i18n.translate('xpack.ml.settings.calendarList.docTitle', {
     defaultMessage: 'Calendars',
   }),
-  render: (props, deps) => <PageWrapper {...props} deps={deps} />,
+  render: (props, deps) => <PageWrapper {...props} deps={deps} isDst={false} />,
   breadcrumbs: [
     getBreadcrumbWithUrlForApp('ML_BREADCRUMB', navigateToPath, basePath),
     getBreadcrumbWithUrlForApp('ANOMALY_DETECTION_BREADCRUMB', navigateToPath, basePath),
@@ -40,7 +40,24 @@ export const calendarListRouteFactory = (
   ],
 });
 
-const PageWrapper: FC<PageProps> = () => {
+export const calendarDstListRouteFactory = (
+  navigateToPath: NavigateToPath,
+  basePath: string
+): MlRoute => ({
+  path: createPath(ML_PAGES.CALENDARS_DST_MANAGE),
+  title: i18n.translate('xpack.ml.settings.calendarList.docTitle', {
+    defaultMessage: 'Calendars',
+  }),
+  render: (props, deps) => <PageWrapper {...props} deps={deps} isDst={true} />,
+  breadcrumbs: [
+    getBreadcrumbWithUrlForApp('ML_BREADCRUMB', navigateToPath, basePath),
+    getBreadcrumbWithUrlForApp('ANOMALY_DETECTION_BREADCRUMB', navigateToPath, basePath),
+    getBreadcrumbWithUrlForApp('SETTINGS_BREADCRUMB', navigateToPath, basePath),
+    getBreadcrumbWithUrlForApp('CALENDAR_DST_MANAGEMENT_BREADCRUMB'),
+  ],
+});
+
+const PageWrapper: FC<PageProps & { isDst: boolean }> = ({ isDst }) => {
   const { context } = useRouteResolver('full', ['canGetCalendars'], { getMlNodeCount });
 
   useTimefilter({ timeRangeSelector: false, autoRefreshSelector: false });
@@ -52,7 +69,7 @@ const PageWrapper: FC<PageProps> = () => {
 
   return (
     <PageLoader context={context}>
-      <CalendarsList {...{ canCreateCalendar, canDeleteCalendar }} />
+      <CalendarsList {...{ canCreateCalendar, canDeleteCalendar, isDst }} />
     </PageLoader>
   );
 };