[ML] Add jest test for TimeSeriesExplorerUrlStateManager.

x-pack/legacy/plugins/ml/public/application/components/navigation_menu/top_nav/top_nav.tsx

@@ -23,12 +23,14 @@ interface Duration {
 
 function getRecentlyUsedRangesFactory(timeHistory: TimeHistory) {
   return function(): Duration[] {
-    return timeHistory.get().map(({ from, to }: TimeRange) => {
-      return {
-        start: from,
-        end: to,
-      };
-    });
+    return (
+      timeHistory.get()?.map(({ from, to }: TimeRange) => {
+        return {
+          start: from,
+          end: to,
+        };
+      }) ?? []
+    );
   };
 }
 
@@ -54,9 +56,18 @@ export const TopNav: FC = () => {
 
   useEffect(() => {
     const subscriptions = new Subscription();
-    subscriptions.add(timefilter.getRefreshIntervalUpdate$().subscribe(timefilterUpdateListener));
-    subscriptions.add(timefilter.getTimeUpdate$().subscribe(timefilterUpdateListener));
-    subscriptions.add(timefilter.getEnabledUpdated$().subscribe(timefilterUpdateListener));
+    const refreshIntervalUpdate$ = timefilter.getRefreshIntervalUpdate$();
+    if (refreshIntervalUpdate$ !== undefined) {
+      subscriptions.add(refreshIntervalUpdate$.subscribe(timefilterUpdateListener));
+    }
+    const timeUpdate$ = timefilter.getTimeUpdate$();
+    if (timeUpdate$ !== undefined) {
+      subscriptions.add(timeUpdate$.subscribe(timefilterUpdateListener));
+    }
+    const enabledUpdated$ = timefilter.getEnabledUpdated$();
+    if (enabledUpdated$ !== undefined) {
+      subscriptions.add(enabledUpdated$.subscribe(timefilterUpdateListener));
+    }
 
     return function cleanup() {
       subscriptions.unsubscribe();

x-pack/legacy/plugins/ml/public/application/routing/routes/index.ts

@@ -10,6 +10,6 @@ export * from './new_job';
 export * from './datavisualizer';
 export * from './settings';
 export * from './data_frame_analytics';
-export * from './timeseriesexplorer';
+export { timeSeriesExplorerRoute } from './timeseriesexplorer';
 export * from './explorer';
 export * from './access_denied';

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
+import { I18nProvider } from '@kbn/i18n/react';
+
+import { TimeSeriesExplorerUrlStateManager } from './timeseriesexplorer';
+
+jest.mock('ui/new_platform');
+
+describe('TimeSeriesExplorerUrlStateManager', () => {
+  test('Initial render shows "No single metric jobs found"', () => {
+    const props = {
+      config: { get: () => 'Browser' },
+      jobsWithTimeRange: [],
+    };
+
+    const { container } = render(
+      <I18nProvider>
+        <MemoryRouter>
+          <TimeSeriesExplorerUrlStateManager {...props} />
+        </MemoryRouter>
+      </I18nProvider>
+    );
+
+    expect(container.textContent).toContain('No single metric jobs found');
+  });
+});

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

@@ -74,7 +74,7 @@ interface TimeSeriesExplorerUrlStateManager {
   jobsWithTimeRange: MlJobWithTimeRange[];
 }
 
-const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateManager> = ({
+export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateManager> = ({
   config,
   jobsWithTimeRange,
 }) => {
@@ -113,7 +113,13 @@ const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateManager> =
         from: globalState.time.from,
         to: globalState.time.to,
       });
-      setBounds(timefilter.getBounds());
+
+      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) {
+        setBounds(timefilter.getBounds());
+      }
     }
   }, [globalState?.time?.from, globalState?.time?.to]);
 
@@ -138,7 +144,7 @@ const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateManager> =
   }, [JSON.stringify(selectedJobIds)]);
 
   // Next we get globalState and appState information to pass it on as props later.
-  // If a job change is going on, we fall back to defaults (as if appState was already cleard),
+  // If a job change is going on, we fall back to defaults (as if appState was already cleared),
   // otherwise the page could break.
   const selectedDetectorIndex = isJobChange
     ? 0