[ML] Anomaly Explorer: Fix persisting time filter refresh to URL. (el…

…astic#55522) (elastic#55703)

Fixes persisting a custom date picker time range change to the URL in Anomaly Explorer. The code is now in line with Single Metric Viewer.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/ml/public/application/routing/routes/explorer.tsx

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import moment from 'moment';
 import React, { FC, useEffect, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 
@@ -70,7 +69,7 @@ interface ExplorerUrlStateManagerProps {
 
 const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTimeRange }) => {
   const [appState, setAppState] = useUrlState('_a');
-  const [globalState] = useUrlState('_g');
+  const [globalState, setGlobalState] = useUrlState('_g');
   const [lastRefresh, setLastRefresh] = useState(0);
 
   const { jobIds } = useJobSelection(jobsWithTimeRange, getDateFormatTz());
@@ -79,13 +78,37 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
   useEffect(() => {
     if (refresh !== undefined) {
       setLastRefresh(refresh?.lastRefresh);
-      const activeBounds = timefilter.getActiveBounds();
-      if (activeBounds !== undefined) {
-        explorerService.setBounds(activeBounds);
+
+      if (refresh.timeRange !== undefined) {
+        const { start, end } = refresh.timeRange;
+        setGlobalState('time', {
+          from: start,
+          to: end,
+        });
       }
     }
   }, [refresh?.lastRefresh]);
 
+  // We cannot simply infer bounds from the globalState's `time` attribute
+  // with `moment` since it can contain custom strings such as `now-15m`.
+  // So when globalState's `time` changes, we update the timefilter and use
+  // `timefilter.getBounds()` to update `bounds` in this component's state.
+  useEffect(() => {
+    if (globalState?.time !== undefined) {
+      timefilter.setTime({
+        from: globalState.time.from,
+        to: globalState.time.to,
+      });
+
+      const timefilterBounds = timefilter.getBounds();
+      // Only if both min/max bounds are valid moment times set the bounds.
+      // An invalid string restored from globalState might return `undefined`.
+      if (timefilterBounds?.min !== undefined && timefilterBounds?.max !== undefined) {
+        explorerService.setBounds(timefilterBounds);
+      }
+    }
+  }, [globalState?.time?.from, globalState?.time?.to]);
+
   useEffect(() => {
     timefilter.enableTimeRangeSelector();
     timefilter.enableAutoRefreshSelector();
@@ -101,19 +124,6 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
     }
   }, []);
 
-  useEffect(() => {
-    if (globalState?.time !== undefined) {
-      timefilter.setTime({
-        from: globalState.time.from,
-        to: globalState.time.to,
-      });
-      explorerService.setBounds({
-        min: moment(globalState.time.from),
-        max: moment(globalState.time.to),
-      });
-    }
-  }, [globalState?.time?.from, globalState?.time?.to]);
-
   useEffect(() => {
     if (jobIds.length > 0) {
       explorerService.updateJobSelection(jobIds);