[ML] Persist Apply time range switch setting in Anomaly Detection job selector flyout

x-pack/plugins/ml/common/types/storage.ts

@@ -9,6 +9,8 @@ import { EntityFieldType } from './anomalies';
 
 export const ML_ENTITY_FIELDS_CONFIG = 'ml.singleMetricViewer.partitionFields';
 
+export const ML_APPLY_TIME_RANGE_CONFIG = 'ml.jobSelectorFlyout.applyTimeRange';
+
 export type PartitionFieldConfig =
   | {
       /**
@@ -34,6 +36,9 @@ export type PartitionFieldsConfig =
   | Partial<Record<EntityFieldType, PartitionFieldConfig>>
   | undefined;
 
+export type ApplyTimeRangeConfig = boolean | undefined;
+
 export type MlStorage = Partial<{
   [ML_ENTITY_FIELDS_CONFIG]: PartitionFieldsConfig;
+  [ML_APPLY_TIME_RANGE_CONFIG]: ApplyTimeRangeConfig;
 }> | null;

x-pack/plugins/ml/public/application/components/job_selector/job_selector.tsx

@@ -20,6 +20,8 @@ import {
   JobSelectorFlyoutProps,
 } from './job_selector_flyout';
 import { MlJobWithTimeRange } from '../../../../common/types/anomaly_detection_jobs';
+import { useStorage } from '../../contexts/ml/use_storage';
+import { ApplyTimeRangeConfig, ML_APPLY_TIME_RANGE_CONFIG } from '../../../../common/types/storage';
 
 interface GroupObj {
   groupId: string;
@@ -79,6 +81,10 @@ export interface JobSelectionMaps {
 
 export function JobSelector({ dateFormatTz, singleSelection, timeseriesOnly }: JobSelectorProps) {
   const [globalState, setGlobalState] = useUrlState('_g');
+  const [applyTimeRangeConfig, setApplyTimeRangeConfig] = useStorage<ApplyTimeRangeConfig>(
+    ML_APPLY_TIME_RANGE_CONFIG,
+    true
+  );
 
   const selectedJobIds = globalState?.ml?.jobIds ?? [];
   const selectedGroups = globalState?.ml?.groups ?? [];
@@ -180,6 +186,8 @@ export function JobSelector({ dateFormatTz, singleSelection, timeseriesOnly }: J
             onJobsFetched={setMaps}
             onFlyoutClose={closeFlyout}
             maps={maps}
+            applyTimeRangeConfig={applyTimeRangeConfig}
+            onTimeRangeConfigChange={setApplyTimeRangeConfig}
           />
         </EuiFlyout>
       );

x-pack/plugins/ml/public/application/components/job_selector/job_selector_flyout.tsx

@@ -51,6 +51,8 @@ export interface JobSelectorFlyoutProps {
   timeseriesOnly: boolean;
   maps: JobSelectionMaps;
   withTimeRangeSelector?: boolean;
+  applyTimeRangeConfig?: boolean;
+  onTimeRangeConfigChange?: (v: boolean) => void;
 }
 
 export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
@@ -62,6 +64,8 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
   onSelectionConfirmed,
   onFlyoutClose,
   maps,
+  applyTimeRangeConfig,
+  onTimeRangeConfigChange,
   withTimeRangeSelector = true,
 }) => {
   const {
@@ -75,7 +79,6 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
 
   const [isLoading, setIsLoading] = useState(true);
   const [showAllBadges, setShowAllBadges] = useState(false);
-  const [applyTimeRange, setApplyTimeRange] = useState(true);
   const [jobs, setJobs] = useState<MlJobWithTimeRange[]>([]);
   const [groups, setGroups] = useState<any[]>([]);
   const [ganttBarWidth, setGanttBarWidth] = useState(DEFAULT_GANTT_BAR_WIDTH);
@@ -101,7 +104,7 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
     // create a Set to remove duplicate values
     const allNewSelectionUnique = Array.from(new Set(allNewSelection));
 
-    const time = applyTimeRange
+    const time = applyTimeRangeConfig
       ? getTimeRangeFromSelection(jobs, allNewSelectionUnique)
       : undefined;
 
@@ -111,14 +114,16 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
       groups: groupSelection,
       time,
     });
-  }, [onSelectionConfirmed, newSelection, jobGroupsMaps, applyTimeRange]);
+  }, [onSelectionConfirmed, newSelection, jobGroupsMaps, applyTimeRangeConfig]);
 
   function removeId(id: string) {
     setNewSelection(newSelection.filter((item) => item !== id));
   }
 
   function toggleTimerangeSwitch() {
-    setApplyTimeRange(!applyTimeRange);
+    if (onTimeRangeConfigChange) {
+      onTimeRangeConfigChange(!applyTimeRangeConfig);
+    }
   }
 
   function clearSelection() {
@@ -233,7 +238,7 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
                             </EuiButtonEmpty>
                           )}
                         </EuiFlexItem>
-                        {withTimeRangeSelector && (
+                        {withTimeRangeSelector && applyTimeRangeConfig !== undefined && (
                           <EuiFlexItem grow={false}>
                             <EuiSwitch
                               label={i18n.translate(
@@ -242,7 +247,7 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
                                   defaultMessage: 'Apply time range',
                                 }
                               )}
-                              checked={applyTimeRange}
+                              checked={applyTimeRangeConfig}
                               onChange={toggleTimerangeSwitch}
                               data-test-subj="mlFlyoutJobSelectorSwitchApplyTimeRange"
                             />

x-pack/plugins/ml/public/embeddables/common/components/job_selector_flyout.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 React, { FC, useState } from 'react';
+import {
+  JobSelectorFlyoutContent,
+  JobSelectorFlyoutProps,
+} from '../../../application/components/job_selector/job_selector_flyout';
+
+export const JobSelectorFlyout: FC<JobSelectorFlyoutProps> = ({
+  selectedIds,
+  withTimeRangeSelector,
+  dateFormatTz,
+  singleSelection,
+  timeseriesOnly,
+  onFlyoutClose,
+  onSelectionConfirmed,
+  maps,
+}) => {
+  const [applyTimeRangeState, setApplyTimeRangeState] = useState<boolean>(true);
+
+  return (
+    <JobSelectorFlyoutContent
+      selectedIds={selectedIds}
+      withTimeRangeSelector={withTimeRangeSelector}
+      dateFormatTz={dateFormatTz}
+      singleSelection={singleSelection}
+      timeseriesOnly={timeseriesOnly}
+      onFlyoutClose={onFlyoutClose}
+      onSelectionConfirmed={onSelectionConfirmed}
+      onTimeRangeConfigChange={setApplyTimeRangeState}
+      applyTimeRangeConfig={applyTimeRangeState}
+      maps={maps}
+    />
+  );
+};

x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx

@@ -4,7 +4,6 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 import { CoreStart } from 'kibana/public';
 import moment from 'moment';
 import { takeUntil } from 'rxjs/operators';
@@ -16,9 +15,9 @@ import {
   toMountPoint,
 } from '../../../../../../src/plugins/kibana_react/public';
 import { getMlGlobalServices } from '../../application/app';
-import { JobSelectorFlyoutContent } from '../../application/components/job_selector/job_selector_flyout';
 import { DashboardConstants } from '../../../../../../src/plugins/dashboard/public';
 import { JobId } from '../../../common/types/anomaly_detection_jobs';
+import { JobSelectorFlyout } from './components/job_selector_flyout';
 
 /**
  * Handles Anomaly detection jobs selection by a user.
@@ -47,23 +46,32 @@ export async function resolveJobSelection(
     const tzConfig = uiSettings.get('dateFormat:tz');
     const dateFormatTz = tzConfig !== 'Browser' ? tzConfig : moment.tz.guess();
 
+    const onFlyoutClose = () => {
+      flyoutSession.close();
+      reject();
+    };
+
+    const onSelectionConfirmed = async ({
+      jobIds,
+      groups,
+    }: {
+      jobIds: string[];
+      groups: Array<{ groupId: string; jobIds: string[] }>;
+    }) => {
+      await flyoutSession.close();
+      resolve({ jobIds, groups });
+    };
     const flyoutSession = coreStart.overlays.openFlyout(
       toMountPoint(
         <KibanaContextProvider services={{ ...coreStart, mlServices: getMlGlobalServices(http) }}>
-          <JobSelectorFlyoutContent
+          <JobSelectorFlyout
             selectedIds={selectedJobIds}
             withTimeRangeSelector={false}
             dateFormatTz={dateFormatTz}
             singleSelection={false}
             timeseriesOnly={true}
-            onFlyoutClose={() => {
-              flyoutSession.close();
-              reject();
-            }}
-            onSelectionConfirmed={async ({ jobIds, groups }) => {
-              await flyoutSession.close();
-              resolve({ jobIds, groups });
-            }}
+            onFlyoutClose={onFlyoutClose}
+            onSelectionConfirmed={onSelectionConfirmed}
             maps={maps}
           />
         </KibanaContextProvider>