[ML] Support legacy watcher URL (elastic#86661)

* [ML] update watcher URL, support legacy state

* [ML] fix comment

x-pack/plugins/ml/public/application/explorer/hooks/use_explorer_url_state.ts

@@ -9,5 +9,16 @@ import { ExplorerAppState } from '../../../../common/types/ml_url_generator';
 import { ML_PAGES } from '../../../../common/constants/ml_url_generator';
 
 export function useExplorerUrlState() {
-  return usePageUrlState<ExplorerAppState>(ML_PAGES.ANOMALY_EXPLORER);
+  /**
+   * Originally `mlExplorerSwimlane` resided directly in the app URL state (`_a` URL state key).
+   * With current URL structure it has been moved under the `explorer` key of the app state (_a).
+   */
+  const [legacyExplorerState] = usePageUrlState<ExplorerAppState['mlExplorerSwimlane']>(
+    'mlExplorerSwimlane'
+  );
+
+  return usePageUrlState<ExplorerAppState>(ML_PAGES.ANOMALY_EXPLORER, {
+    mlExplorerSwimlane: legacyExplorerState,
+    mlExplorerFilter: {},
+  });
 }

x-pack/plugins/ml/public/application/jobs/jobs_list/components/create_watch_flyout/email.html

@@ -22,7 +22,7 @@
     <br />
     <br />
 
-    <a href="<%= serverAddress %>#/explorer/?_g=(ml:(jobIds:!('{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0._source.job_id}}')),time:(from:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.start.0}}',mode:absolute,to:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.end.0}}'))&_a=(filters:!(),mlAnomaliesTable:(intervalValue:auto,thresholdValue:0),mlExplorerSwimlane:(selectedLane:Overall,selectedTime:{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.timestamp_epoch.0}},selectedType:overall),query:(query_string:(analyze_wildcard:!t,query:'*')))">
+    <a href="<%= serverAddress %>#/explorer/?_g=(ml:(jobIds:!('{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0._source.job_id}}')),time:(from:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.start.0}}',mode:absolute,to:'{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.end.0}}'))&_a=(explorer:(mlExplorerSwimlane:(selectedLane:Overall,selectedTime:{{ctx.payload.aggregations.bucket_results.top_bucket_hits.hits.hits.0.fields.timestamp_epoch.0}},selectedType:overall)),query:(query_string:(analyze_wildcard:!t,query:'*')))">
       <%= openInAnomalyExplorerLinkText %>
     </a>
     <br />

x-pack/plugins/ml/public/application/util/url_state.tsx

@@ -162,7 +162,14 @@ export const useUrlState = (accessor: Accessor) => {
   return [urlState, setUrlState];
 };
 
-type AppStateKey = 'mlSelectSeverity' | 'mlSelectInterval' | 'mlAnomaliesTable' | MlPages;
+type LegacyUrlKeys = 'mlExplorerSwimlane';
+
+type AppStateKey =
+  | 'mlSelectSeverity'
+  | 'mlSelectInterval'
+  | 'mlAnomaliesTable'
+  | MlPages
+  | LegacyUrlKeys;
 
 /**
  * Hook for managing the URL state of the page.