[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels

x-pack/platform/packages/private/ml/url_state/index.ts

@@ -10,7 +10,7 @@ export {
   parseUrlState,
   usePageUrlState,
   useUrlState,
-  PageUrlStateService,
+  UrlStateService,
   Provider,
   UrlStateProvider,
   type Accessor,

x-pack/platform/packages/private/ml/url_state/src/url_state.test.tsx

@@ -9,7 +9,13 @@ import React, { useEffect, type FC } from 'react';
 import { render, act } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { parseUrlState, useUrlState, UrlStateProvider } from './url_state';
+import {
+  parseUrlState,
+  useUrlState,
+  UrlStateProvider,
+  usePageUrlState,
+  useGlobalUrlState,
+} from './url_state';
 
 const mockHistoryInitialState =
   "?_a=(mlExplorerFilter:(),mlExplorerSwimlane:(viewByFieldName:action),query:(query_string:(analyze_wildcard:!t,query:'*')))&_g=(ml:(jobIds:!(dec-2)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2019-01-01T00:03:40.000Z',mode:absolute,to:'2019-08-30T11:55:07.000Z'))&savedSearchId=571aaf70-4c88-11e8-b3d7-01146121b73d";
@@ -143,3 +149,89 @@ describe('useUrlState', () => {
     expect(getByTestId('appState').innerHTML).toBe('the updated query');
   });
 });
+
+describe('usePageUrlState', () => {
+  it('manages page-specific state with default values', () => {
+    const TestComponent: FC = () => {
+      const [pageState, setPageState] = usePageUrlState<{
+        pageKey: 'testPage';
+        pageUrlState: {
+          defaultValue: string;
+        };
+      }>('testPage', {
+        defaultValue: 'initial',
+      });
+
+      return (
+        <>
+          <button onClick={() => setPageState({ defaultValue: 'updated' })}>Update</button>
+          <div data-test-subj="pageState">{pageState?.defaultValue}</div>
+        </>
+      );
+    };
+
+    const { getByText, getByTestId } = render(
+      <MemoryRouter>
+        <UrlStateProvider>
+          <TestComponent />
+        </UrlStateProvider>
+      </MemoryRouter>
+    );
+
+    expect(getByTestId('pageState').innerHTML).toBe('initial');
+
+    act(() => {
+      getByText('Update').click();
+    });
+
+    expect(getByTestId('pageState').innerHTML).toBe('updated');
+  });
+});
+
+describe('useGlobalUrlState', () => {
+  it('manages global state with ML and time properties', () => {
+    const defaultState = {
+      ml: { jobIds: ['initial-job'] },
+      time: { from: 'now-15m', to: 'now' },
+    };
+
+    const TestComponent: FC = () => {
+      const [globalState, setGlobalState] = useGlobalUrlState(defaultState);
+
+      return (
+        <>
+          <button
+            onClick={() =>
+              setGlobalState({
+                ml: { jobIds: ['updated-job'] },
+                time: { from: 'now-1h', to: 'now' },
+              })
+            }
+          >
+            Update
+          </button>
+          <div data-test-subj="globalState">{JSON.stringify(globalState)}</div>
+        </>
+      );
+    };
+
+    const { getByText, getByTestId } = render(
+      <MemoryRouter>
+        <UrlStateProvider>
+          <TestComponent />
+        </UrlStateProvider>
+      </MemoryRouter>
+    );
+
+    expect(JSON.parse(getByTestId('globalState').innerHTML)).toEqual(defaultState);
+
+    act(() => {
+      getByText('Update').click();
+    });
+
+    expect(JSON.parse(getByTestId('globalState').innerHTML)).toEqual({
+      ml: { jobIds: ['updated-job'] },
+      time: { from: 'now-1h', to: 'now' },
+    });
+  });
+});

x-pack/platform/packages/private/ml/url_state/src/url_state.tsx

@@ -26,6 +26,7 @@ import type { Observable } from 'rxjs';
 import { BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
+import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect';
 
 export interface Dictionary<TValue> {
   [id: string]: TValue;
@@ -211,43 +212,42 @@ export const useUrlState = (
 /**
  * Service for managing URL state of particular page.
  */
-export class PageUrlStateService<T> {
-  private _pageUrlState$ = new BehaviorSubject<T | null>(null);
-  private _pageUrlStateCallback: ((update: Partial<T>, replaceState?: boolean) => void) | null =
-    null;
+export class UrlStateService<T> {
+  private _urlState$ = new BehaviorSubject<T | null>(null);
+  private _urlStateCallback: ((update: Partial<T>, replaceState?: boolean) => void) | null = null;
 
   /**
    * Provides updates for the page URL state.
    */
-  public getPageUrlState$(): Observable<T> {
-    return this._pageUrlState$.pipe(distinctUntilChanged(isEqual));
+  public getUrlState$(): Observable<T> {
+    return this._urlState$.pipe(distinctUntilChanged(isEqual));
   }
 
-  public getPageUrlState(): T | null {
-    return this._pageUrlState$.getValue();
+  public getUrlState(): T | null {
+    return this._urlState$.getValue();
   }
 
   public updateUrlState(update: Partial<T>, replaceState?: boolean): void {
-    if (!this._pageUrlStateCallback) {
+    if (!this._urlStateCallback) {
       throw new Error('Callback has not been initialized.');
     }
-    this._pageUrlStateCallback(update, replaceState);
+    this._urlStateCallback(update, replaceState);
   }
 
   /**
    * Populates internal subject with currently active state.
    * @param currentState
    */
   public setCurrentState(currentState: T): void {
-    this._pageUrlState$.next(currentState);
+    this._urlState$.next(currentState);
   }
 
   /**
    * Sets the callback for the state update.
    * @param callback
    */
   public setUpdateCallback(callback: (update: Partial<T>, replaceState?: boolean) => void): void {
-    this._pageUrlStateCallback = callback;
+    this._urlStateCallback = callback;
   }
 }
 
@@ -256,32 +256,53 @@ export interface PageUrlState {
   pageUrlState: object;
 }
 
-/**
- * Hook for managing the URL state of the page.
- */
-export const usePageUrlState = <T extends PageUrlState>(
-  pageKey: T['pageKey'],
-  defaultState?: T['pageUrlState']
-): [
-  T['pageUrlState'],
-  (update: Partial<T['pageUrlState']>, replaceState?: boolean) => void,
-  PageUrlStateService<T['pageUrlState']>
-] => {
-  const [appState, setAppState] = useUrlState('_a');
-  const pageState = appState?.[pageKey];
+interface AppStateOptions<T> {
+  pageKey: string;
+  defaultState?: T;
+}
 
-  const setCallback = useRef<typeof setAppState>();
+interface GlobalStateOptions<T> {
+  defaultState?: T;
+}
+
+type UrlStateOptions<K extends Accessor, T> = K extends '_a'
+  ? AppStateOptions<T>
+  : GlobalStateOptions<T>;
+
+function isAppStateOptions<T>(
+  _stateKey: Accessor,
+  options: Partial<AppStateOptions<T>>
+): options is AppStateOptions<T> {
+  return 'pageKey' in options;
+}
+
+export const useUrlStateService = <K extends Accessor, T>(
+  stateKey: K,
+  options: UrlStateOptions<K, T>
+): [T, (update: Partial<T>, replaceState?: boolean) => void, UrlStateService<T>] => {
+  const optionsRef = useRef(options);
+
+  useDeepCompareEffect(() => {
+    optionsRef.current = options;
+  }, [options]);
+
+  const [state, setState] = useUrlState(stateKey);
+  const urlState = isAppStateOptions<T>(stateKey, optionsRef.current)
+    ? state?.[optionsRef.current.pageKey]
+    : state;
+
+  const setCallback = useRef<typeof setState>();
 
   useEffect(() => {
-    setCallback.current = setAppState;
-  }, [setAppState]);
+    setCallback.current = setState;
+  }, [setState]);
 
-  const prevPageState = useRef<T['pageUrlState'] | undefined>();
+  const prevPageState = useRef<T | undefined>();
 
-  const resultPageState: T['pageUrlState'] = useMemo(() => {
+  const resultState: T = useMemo(() => {
     const result = {
-      ...(defaultState ?? {}),
-      ...(pageState ?? {}),
+      ...(optionsRef.current.defaultState ?? {}),
+      ...(urlState ?? {}),
     };
 
     if (isEqual(result, prevPageState.current)) {
@@ -300,38 +321,82 @@ export const usePageUrlState = <T extends PageUrlState>(
     prevPageState.current = result;
 
     return result;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pageState]);
+  }, [urlState]);
 
   const onStateUpdate = useCallback(
-    (update: Partial<T['pageUrlState']>, replaceState?: boolean) => {
+    (update: Partial<T>, replaceState?: boolean) => {
       if (!setCallback?.current) {
         throw new Error('Callback for URL state update has not been initialized.');
       }
-
-      setCallback.current(
-        pageKey,
-        {
-          ...resultPageState,
-          ...update,
-        },
-        replaceState
-      );
+      if (isAppStateOptions<T>(stateKey, optionsRef.current)) {
+        setCallback.current(
+          optionsRef.current.pageKey,
+          {
+            ...resultState,
+            ...update,
+          },
+          replaceState
+        );
+      } else {
+        setCallback.current({ ...resultState, ...update }, replaceState);
+      }
     },
-    [pageKey, resultPageState]
+    [stateKey, resultState]
   );
 
-  const pageUrlStateService = useMemo(() => new PageUrlStateService<T['pageUrlState']>(), []);
+  const urlStateService = useMemo(() => new UrlStateService<T>(), []);
 
   useEffect(
-    function updatePageUrlService() {
-      pageUrlStateService.setCurrentState(resultPageState);
-      pageUrlStateService.setUpdateCallback(onStateUpdate);
+    function updateUrlStateService() {
+      urlStateService.setCurrentState(resultState);
+      urlStateService.setUpdateCallback(onStateUpdate);
     },
-    [pageUrlStateService, onStateUpdate, resultPageState]
+    [urlStateService, onStateUpdate, resultState]
   );
 
-  return useMemo(() => {
-    return [resultPageState, onStateUpdate, pageUrlStateService];
-  }, [resultPageState, onStateUpdate, pageUrlStateService]);
+  return useMemo(
+    () => [resultState, onStateUpdate, urlStateService],
+    [resultState, onStateUpdate, urlStateService]
+  );
+};
+
+/**
+ * Hook for managing the URL state of the page.
+ */
+export const usePageUrlState = <T extends PageUrlState>(
+  pageKey: T['pageKey'],
+  defaultState?: T['pageUrlState']
+): [
+  T['pageUrlState'],
+  (update: Partial<T['pageUrlState']>, replaceState?: boolean) => void,
+  UrlStateService<T['pageUrlState']>
+] => {
+  return useUrlStateService<'_a', T['pageUrlState']>('_a', { pageKey, defaultState });
+};
+
+/**
+ * Global state type, to add more state types, add them here
+ */
+
+export interface GlobalState {
+  ml: {
+    jobIds: string[];
+  };
+  time?: {
+    from: string;
+    to: string;
+  };
+}
+
+/**
+ * Hook for managing the global URL state.
+ */
+export const useGlobalUrlState = (
+  defaultState?: GlobalState
+): [
+  GlobalState,
+  (update: Partial<GlobalState>, replaceState?: boolean) => void,
+  UrlStateService<GlobalState>
+] => {
+  return useUrlStateService<'_g', GlobalState>('_g', { defaultState });
 };

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -29621,10 +29621,8 @@
     "xpack.ml.explorer.distributionChart.valueWithoutAnomalyScoreLabel": "valeur",
     "xpack.ml.explorer.invalidKuerySyntaxErrorMessageFromTable": "Syntaxe non valide dans la barre de requête. L'entrée doit être du code KQL (Kibana Query Language) valide",
     "xpack.ml.explorer.invalidKuerySyntaxErrorMessageQueryBar": "Requête non valide",
-    "xpack.ml.explorer.invalidTimeRangeInUrlCallout": "Le filtre de temps a été modifié pour inclure la plage entière en raison d'un filtre de temps par défaut non valide. Vérifiez les paramètres avancés pour {field}.",
     "xpack.ml.explorer.jobIdLabel": "ID tâche",
     "xpack.ml.explorer.jobScoreAcrossAllInfluencersLabel": "(score de tâche pour tous les influenceurs)",
-    "xpack.ml.explorer.kueryBar.filterPlaceholder": "Filtrer par champ d'influenceur… ({queryExample})",
     "xpack.ml.explorer.mapTitle": "Nombre d'anomalies par emplacement {infoTooltip}",
     "xpack.ml.explorer.noAnomaliesFoundLabel": "Aucune anomalie n'a été trouvée",
     "xpack.ml.explorer.noConfiguredInfluencersTooltip": "La liste Principaux influenceurs est masquée, car aucun influenceur n'a été configuré pour les tâches sélectionnées.",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -29482,10 +29482,8 @@
     "xpack.ml.explorer.distributionChart.valueWithoutAnomalyScoreLabel": "値",
     "xpack.ml.explorer.invalidKuerySyntaxErrorMessageFromTable": "クエリーバーに無効な構文。インプットは有効な Kibana クエリー言語（KQL）でなければなりません",
     "xpack.ml.explorer.invalidKuerySyntaxErrorMessageQueryBar": "無効なクエリー",
-    "xpack.ml.explorer.invalidTimeRangeInUrlCallout": "無効なデフォルト時間フィルターのため、時間フィルターが全範囲に変更されました。{field}の詳細設定を確認してください。",
     "xpack.ml.explorer.jobIdLabel": "ジョブID",
     "xpack.ml.explorer.jobScoreAcrossAllInfluencersLabel": "（すべての影響因子のジョブスコア）",
-    "xpack.ml.explorer.kueryBar.filterPlaceholder": "影響因子フィールドでフィルタリング…（{queryExample}）",
     "xpack.ml.explorer.mapTitle": "場所別異常件数{infoTooltip}",
     "xpack.ml.explorer.noAnomaliesFoundLabel": "異常値が見つかりませんでした",
     "xpack.ml.explorer.noConfiguredInfluencersTooltip": "選択されたジョブに影響因子が構成されていないため、トップインフルエンスリストは非表示になっています。",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -29006,10 +29006,8 @@
     "xpack.ml.explorer.distributionChart.valueWithoutAnomalyScoreLabel": "值",
     "xpack.ml.explorer.invalidKuerySyntaxErrorMessageFromTable": "查询栏中的语法无效。输入必须是有效的 Kibana 查询语言 (KQL)",
     "xpack.ml.explorer.invalidKuerySyntaxErrorMessageQueryBar": "无效查询",
-    "xpack.ml.explorer.invalidTimeRangeInUrlCallout": "由于默认时间筛选无效，时间筛选已更改为完整范围。检查 {field} 的高级设置。",
     "xpack.ml.explorer.jobIdLabel": "作业 ID",
     "xpack.ml.explorer.jobScoreAcrossAllInfluencersLabel": "（所有影响因素的作业分数）",
-    "xpack.ml.explorer.kueryBar.filterPlaceholder": "按影响因素字段筛选……（{queryExample}）",
     "xpack.ml.explorer.mapTitle": "异常计数（按位置）{infoTooltip}",
     "xpack.ml.explorer.noAnomaliesFoundLabel": "找不到异常",
     "xpack.ml.explorer.noConfiguredInfluencersTooltip": "'排名最前影响因素'列表被隐藏，因为没有为所选作业配置影响因素。",