[8.x] [ML] Anomaly Detection: Show Switch to apply time range when opening job selector from left nav (#213382) (#213965)

# Backport This will backport the following commits from `main` to `8.x`: - [[ML] Anomaly Detection: Show `Switch to apply time range` when opening job selector from left nav (#213382)](https://github.com/elastic/kibana/pull/213382)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
2025-04-24 17:59:23 -04:00 · 2025-03-12 04:59:59 +11:00 · 2025-03-12 04:59:59 +11:00 · d957d59893
commit d957d59893
parent fe946f6793
3 changed files with 48 additions and 72 deletions
--- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector.tsx
@ -5,33 +5,26 @@
 * 2.0.
 */

-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';

-import {
-  EuiButtonEmpty,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiFlyout,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import { EuiButtonEmpty, EuiFlexItem, EuiFlexGroup, EuiHorizontalRule } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import './_index.scss';

-import { useStorage } from '@kbn/ml-local-storage';
 import { ML_PAGES } from '../../../locator';
 import type { Dictionary } from '../../../../common/types/common';
 import { IdBadges } from './id_badges';
-import type { JobSelectorFlyoutProps } from './job_selector_flyout';
-import { BADGE_LIMIT, JobSelectorFlyoutContent } from './job_selector_flyout';
+
+import { BADGE_LIMIT } from './job_selector_flyout';
 import type {
  MlJobWithTimeRange,
  MlSummaryJob,
 } from '../../../../common/types/anomaly_detection_jobs';
-import { ML_APPLY_TIME_RANGE_CONFIG } from '../../../../common/types/storage';
 import { FeedBackButton } from '../feedback_button';
 import { JobInfoFlyoutsProvider } from '../../jobs/components/job_details_flyout';
 import { JobInfoFlyoutsManager } from '../../jobs/components/job_details_flyout/job_details_context_manager';
+import { useJobSelectionFlyout } from '../../contexts/ml/use_job_selection_flyout';

 export interface GroupObj {
  groupId: string;
@ -108,17 +101,13 @@ export function JobSelector({
  selectedJobs = [],
  onSelectionChange,
 }: JobSelectorProps) {
-  const [applyTimeRangeConfig, setApplyTimeRangeConfig] = useStorage(
-    ML_APPLY_TIME_RANGE_CONFIG,
-    true
-  );
-
  const [selectedIds, setSelectedIds] = useState(
    mergeSelection(selectedJobIds, selectedGroups, singleSelection)
  );

  const [showAllBarBadges, setShowAllBarBadges] = useState(false);
-  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+
+  const openJobSelectionFlyout = useJobSelectionFlyout();

  // Ensure JobSelectionBar gets updated when selection via globalState changes.
  useEffect(() => {
@ -126,27 +115,24 @@ export function JobSelector({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify([selectedJobIds, selectedGroups])]);

-  function closeFlyout() {
-    setIsFlyoutVisible(false);
-  }
+  const handleJobSelectionClick = useCallback(async () => {
+    try {
+      const result = await openJobSelectionFlyout({
+        singleSelection,
+        withTimeRangeSelector: true,
+        timeseriesOnly,
+        selectedIds,
+      });

-  function showFlyout() {
-    setIsFlyoutVisible(true);
-  }
-
-  function handleJobSelectionClick() {
-    showFlyout();
-  }
-
-  const applySelection: JobSelectorFlyoutProps['onSelectionConfirmed'] = useCallback(
-    ({ newSelection, jobIds, time }) => {
-      setSelectedIds(newSelection);
-
-      onSelectionChange?.({ jobIds, time });
-      closeFlyout();
-    },
-    [onSelectionChange]
-  );
+      if (result) {
+        const { newSelection, jobIds, time } = result;
+        setSelectedIds(newSelection);
+        onSelectionChange?.({ jobIds, time });
+      }
+    } catch {
+      // Flyout closed without selection
+    }
+  }, [onSelectionChange, openJobSelectionFlyout, selectedIds, singleSelection, timeseriesOnly]);

  const page = useMemo(() => {
    return singleSelection ? ML_PAGES.SINGLE_METRIC_VIEWER : ML_PAGES.ANOMALY_EXPLORER;
@ -154,7 +140,8 @@ export function JobSelector({

  const removeJobId = (jobOrGroupId: string[]) => {
    const newSelection = selectedIds.filter((id) => !jobOrGroupId.includes(id));
-    applySelection({ newSelection, jobIds: newSelection, time: undefined });
+    setSelectedIds(newSelection);
+    onSelectionChange?.({ jobIds: newSelection, time: undefined });
  };
  function renderJobSelectionBar() {
    return (
@ -213,34 +200,10 @@ export function JobSelector({
    );
  }

-  function renderFlyout() {
-    if (isFlyoutVisible) {
-      return (
-        <EuiFlyout
-          onClose={closeFlyout}
-          data-test-subj="mlFlyoutJobSelector"
-          aria-labelledby="jobSelectorFlyout"
-        >
-          <JobSelectorFlyoutContent
-            dateFormatTz={dateFormatTz}
-            timeseriesOnly={timeseriesOnly}
-            singleSelection={singleSelection}
-            selectedIds={selectedIds}
-            onSelectionConfirmed={applySelection}
-            onFlyoutClose={closeFlyout}
-            applyTimeRangeConfig={applyTimeRangeConfig}
-            onTimeRangeConfigChange={setApplyTimeRangeConfig}
-          />
-        </EuiFlyout>
-      );
-    }
-  }
-
  return (
    <div>
      <JobInfoFlyoutsProvider>
        {renderJobSelectionBar()}
-        {renderFlyout()}
        <JobInfoFlyoutsManager />
      </JobInfoFlyoutsProvider>
    </div>
--- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector_flyout.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/job_selector_flyout.tsx
@ -73,7 +73,7 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
  onJobsFetched,
  onSelectionConfirmed,
  onFlyoutClose,
-  applyTimeRangeConfig,
+  applyTimeRangeConfig: initialApplyTimeRangeConfig,
  onTimeRangeConfigChange,
  withTimeRangeSelector = true,
 }) => {
@ -85,6 +85,9 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
  } = useMlKibana();

  const [newSelection, setNewSelection] = useState(selectedIds);
+  const [applyTimeRangeConfig, setApplyTimeRangeConfig] = useState(
+    initialApplyTimeRangeConfig ?? false
+  );

  const [isLoading, setIsLoading] = useState(true);
  const [showAllBadges, setShowAllBadges] = useState(false);
@ -113,6 +116,10 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
    const finalSelection = [...selectedGroupIds, ...standaloneJobs];
    const time = applyTimeRangeConfig ? getTimeRangeFromSelection(jobs, finalSelection) : undefined;

+    if (onTimeRangeConfigChange && initialApplyTimeRangeConfig !== applyTimeRangeConfig) {
+      onTimeRangeConfigChange(applyTimeRangeConfig);
+    }
+
    onSelectionConfirmed({
      newSelection: finalSelection,
      jobIds: finalSelection,
@ -126,9 +133,7 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
  }

  function toggleTimerangeSwitch() {
-    if (onTimeRangeConfigChange) {
-      onTimeRangeConfigChange(!applyTimeRangeConfig);
-    }
+    setApplyTimeRangeConfig((prev) => !prev);
  }

  function clearSelection() {
@ -242,9 +247,7 @@ export const JobSelectorFlyoutContent: FC<JobSelectorFlyoutProps> = ({
                            </EuiButtonEmpty>
                          )}
                        </EuiFlexItem>
-                        {withTimeRangeSelector &&
-                        applyTimeRangeConfig !== undefined &&
-                        jobs.length !== 0 ? (
+                        {withTimeRangeSelector && jobs.length !== 0 ? (
                          <EuiFlexItem grow={false}>
                            <EuiSwitch
                              label={i18n.translate(
--- a/x-pack/platform/plugins/shared/ml/public/application/contexts/ml/use_job_selection_flyout.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/contexts/ml/use_job_selection_flyout.tsx
@ -9,6 +9,8 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import moment from 'moment';
 import type { KibanaReactOverlays } from '@kbn/kibana-react-plugin/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { useStorage } from '@kbn/ml-local-storage';
+import { ML_APPLY_TIME_RANGE_CONFIG } from '../../../../common/types/storage';
 import { useMlKibana } from '../kibana';
 import {
  JobSelectorFlyoutContent,
@ -23,6 +25,10 @@ export type GetJobSelection = ReturnType<typeof useJobSelectionFlyout>;
 */
 export function useJobSelectionFlyout() {
  const { overlays, services } = useMlKibana();
+  const [applyTimeRangeConfig, setApplyTimeRangeConfig] = useStorage(
+    ML_APPLY_TIME_RANGE_CONFIG,
+    true
+  );

  const flyoutRef = useRef<ReturnType<KibanaReactOverlays['openFlyout']>>();

@ -40,10 +46,12 @@ export function useJobSelectionFlyout() {
        singleSelection?: boolean;
        withTimeRangeSelector?: boolean;
        timeseriesOnly?: boolean;
+        selectedIds?: string[];
      } = {
        singleSelection: false,
        withTimeRangeSelector: true,
        timeseriesOnly: false,
+        selectedIds: [],
      }
    ): Promise<JobSelectionResult> => {
      const { uiSettings } = services;
@ -56,8 +64,10 @@ export function useJobSelectionFlyout() {
          flyoutRef.current = overlays.openFlyout(
            <KibanaContextProvider services={services}>
              <JobSelectorFlyoutContent
-                selectedIds={[]}
+                selectedIds={config.selectedIds}
                withTimeRangeSelector={config.withTimeRangeSelector}
+                applyTimeRangeConfig={applyTimeRangeConfig}
+                onTimeRangeConfigChange={setApplyTimeRangeConfig}
                dateFormatTz={dateFormatTz}
                singleSelection={!!config.singleSelection}
                timeseriesOnly={!!config.timeseriesOnly}
@ -77,6 +87,6 @@ export function useJobSelectionFlyout() {
        }
      });
    },
-    [overlays, services]
+    [services, overlays, applyTimeRangeConfig, setApplyTimeRangeConfig]
  );
 }