[ML] Extend MlUrlGenerator to support other ML pages

src/plugins/data/common/query/timefilter/types.ts

@@ -20,14 +20,15 @@
 import { Moment } from 'moment';
 
 export interface RefreshInterval {
+  display?: string;
   pause: boolean;
   value: number;
 }
 
 export interface TimeRange {
   from: string;
   to: string;
-  mode?: 'absolute' | 'relative';
+  mode?: 'absolute' | 'relative' | 'quick';
 }
 
 export interface TimeRangeBounds {

x-pack/plugins/ml/public/application/contexts/kibana/index.ts

@@ -9,3 +9,4 @@ export { useNavigateToPath, NavigateToPath } from './use_navigate_to_path';
 export { useUiSettings } from './use_ui_settings_context';
 export { useTimefilter } from './use_timefilter';
 export { useNotifications } from './use_notifications_context';
+export { useMlUrlGenerator } from './use_create_url';

x-pack/plugins/ml/public/application/contexts/kibana/use_create_url.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { useMlKibana } from './kibana_context';
+import { ML_APP_URL_GENERATOR } from '../../../url_generator';
+
+export const useMlUrlGenerator = () => {
+  const {
+    services: {
+      share: {
+        urlGenerators: { getUrlGenerator },
+      },
+    },
+  } = useMlKibana();
+
+  return getUrlGenerator(ML_APP_URL_GENERATOR);
+};

x-pack/plugins/ml/public/application/contexts/kibana/use_navigate_to_path.ts

@@ -21,14 +21,19 @@ export const useNavigateToPath = () => {
 
   const location = useLocation();
 
-  return useMemo(
-    () => (path: string | undefined, preserveSearch = false) => {
-      navigateToUrl(
-        getUrlForApp(PLUGIN_ID, {
-          path: `${path}${preserveSearch === true ? location.search : ''}`,
-        })
-      );
-    },
-    [location]
-  );
+  return useMemo(() => {
+    return (path: string | undefined, preserveSearch = false) => {
+      if (path === undefined) return;
+      const modifiedPath = `${path}${preserveSearch === true ? location.search : ''}`;
+      /**
+       * Handle urls generated by MlUrlGenerator where '/app/ml' is automatically prepended
+       */
+      const url = modifiedPath.startsWith('/app/ml')
+        ? modifiedPath
+        : getUrlForApp(PLUGIN_ID, {
+            path: modifiedPath,
+          });
+      navigateToUrl(url);
+    };
+  }, [location]);
 };

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx

@@ -7,13 +7,20 @@
 import React, { FC, Fragment } from 'react';
 import { EuiCard, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useNavigateToPath } from '../../../../../contexts/kibana';
+import { useMlKibana, useMlUrlGenerator } from '../../../../../contexts/kibana';
+import { ML_TABS } from '../../../../../../url_generator';
 
 export const BackToListPanel: FC = () => {
-  const navigateToPath = useNavigateToPath();
+  const urlGenerator = useMlUrlGenerator();
+  const {
+    services: {
+      application: { navigateToUrl },
+    },
+  } = useMlKibana();
 
   const redirectToAnalyticsManagementPage = async () => {
-    await navigateToPath('/data_frame_analytics');
+    const url = await urlGenerator.createUrl({ page: ML_TABS.DATA_FRAME_ANALYTICS });
+    await navigateToUrl(url);
   };
 
   return (

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx

@@ -7,20 +7,26 @@
 import React, { FC, Fragment } from 'react';
 import { EuiCard, EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useNavigateToPath } from '../../../../../contexts/kibana';
-import { getResultsUrl } from '../../../analytics_management/components/analytics_list/common';
+import { useMlUrlGenerator } from '../../../../../contexts/kibana';
 import { ANALYSIS_CONFIG_TYPE } from '../../../../common/analytics';
+import { useNavigateToPath } from '../../../../../contexts/kibana';
+import { ML_TABS } from '../../../../../../url_generator';
 
 interface Props {
   jobId: string;
   analysisType: ANALYSIS_CONFIG_TYPE;
 }
 
 export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
+  const urlGenerator = useMlUrlGenerator();
   const navigateToPath = useNavigateToPath();
 
-  const redirectToAnalyticsManagementPage = async () => {
-    const path = getResultsUrl(jobId, analysisType);
+  const redirectToAnalyticsJobPage = async () => {
+    const path = await urlGenerator.createUrl({
+      page: ML_TABS.DATA_FRAME_ANALYTICS_EXPLORATION,
+      jobId,
+      analysisType,
+    });
     await navigateToPath(path);
   };
 
@@ -38,7 +44,7 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
             defaultMessage: 'View results for the analytics job.',
           }
         )}
-        onClick={redirectToAnalyticsManagementPage}
+        onClick={redirectToAnalyticsJobPage}
         data-test-subj="analyticsWizardViewResultsCard"
       />
     </Fragment>

x-pack/plugins/ml/public/application/explorer/explorer_dashboard_service.ts

@@ -65,6 +65,7 @@ export interface ExplorerAppState {
     filteredFields?: string[];
     queryString?: string;
   };
+  query?: any;
 }
 
 const explorerAppState$: Observable<ExplorerAppState> = explorerState$.pipe(

x-pack/plugins/ml/public/application/routing/router.tsx

@@ -75,7 +75,6 @@ const MlRoutes: FC<{
   pageDeps: PageDependencies;
 }> = ({ pageDeps }) => {
   const navigateToPath = useNavigateToPath();
-
   return (
     <>
       {Object.entries(routes).map(([name, routeFactory]) => {

x-pack/plugins/ml/public/url_generator.test.ts

@@ -4,23 +4,233 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { MlUrlGenerator } from './url_generator';
+import { MlUrlGenerator, ML_TABS } from './url_generator';
+import { ANALYSIS_CONFIG_TYPE } from './application/data_frame_analytics/common';
 
 describe('MlUrlGenerator', () => {
   const urlGenerator = new MlUrlGenerator({
     appBasePath: '/app/ml',
     useHash: false,
   });
 
-  it('should generate valid URL for the Anomaly Explorer page', async () => {
-    const url = await urlGenerator.createUrl({
-      page: 'explorer',
-      jobIds: ['test-job'],
-      mlExplorerSwimlane: { viewByFromPage: 2, viewByPerPage: 20 },
+  describe('AnomalyDetection', () => {
+    describe('Job Management Page', () => {
+      it('should generate valid URL for the Anomaly Detection job management page', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.ANOMALY_DETECTION,
+        });
+        expect(url).toBe('/app/ml/jobs');
+      });
+
+      it('should generate valid URL for the Anomaly Detection job management page for job', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.ANOMALY_DETECTION,
+          jobId: 'fq_single_1',
+        });
+        expect(url).toBe('/app/ml/jobs?mlManagement=(jobId:fq_single_1)');
+      });
+
+      it('should generate valid URL for the Anomaly Detection job management page for groupIds', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.ANOMALY_DETECTION,
+          groupIds: ['farequote', 'categorization'],
+        });
+        expect(url).toBe('/app/ml/jobs?mlManagement=(groupIds:!(farequote,categorization))');
+      });
+
+      it('should generate valid URL for the Data Visualizer Viewer page', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.DATA_VISUALIZER_NEW_JOB,
+          index: `3da93760-e0af-11ea-9ad3-3bcfc330e42a`,
+          globalState: {
+            time: {
+              from: 'now-30m',
+              to: 'now',
+              mode: 'quick',
+            },
+          },
+        });
+        expect(url).toBe(
+          '/app/ml/jobs/new_job/step/job_type?index=3da93760-e0af-11ea-9ad3-3bcfc330e42a&_g=(time:(from:now-30m,mode:quick,to:now))'
+        );
+      });
+    });
+
+    describe('Anomaly Explorer Page', () => {
+      it('should generate valid URL for the Anomaly Explorer page', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.ANOMALY_EXPLORER,
+          jobIds: ['fq_single_1'],
+          mlExplorerSwimlane: { viewByFromPage: 2, viewByPerPage: 20 },
+          refreshInterval: {
+            display: 'Off',
+            pause: false,
+            value: 0,
+          },
+          timeRange: {
+            from: '2019-02-07T00:00:00.000Z',
+            to: '2020-08-13T17:15:00.000Z',
+            mode: 'absolute',
+          },
+          query: {
+            analyze_wildcard: true,
+            query: '*',
+          },
+        });
+        expect(url).toBe(
+          "/app/ml/explorer?_g=(ml:(jobIds:!(fq_single_1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2019-02-07T00:00:00.000Z',mode:absolute,to:'2020-08-13T17:15:00.000Z'))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(viewByFromPage:2,viewByPerPage:20),query:(analyze_wildcard:!t,query:'*'))"
+        );
+      });
+      it('should generate valid URL for the Anomaly Explorer page for multiple jobIds', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.ANOMALY_EXPLORER,
+          jobIds: ['fq_single_1', 'logs_categorization_1'],
+          timeRange: {
+            from: '2019-02-07T00:00:00.000Z',
+            to: '2020-08-13T17:15:00.000Z',
+            mode: 'absolute',
+          },
+        });
+        expect(url).toBe(
+          "/app/ml/explorer?_g=(ml:(jobIds:!(fq_single_1,logs_categorization_1)),time:(from:'2019-02-07T00:00:00.000Z',mode:absolute,to:'2020-08-13T17:15:00.000Z'))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:())"
+        );
+      });
+    });
+
+    describe('Single Metric Viewer Page', () => {
+      it('should generate valid URL for the Single Metric Viewer page', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.TIME_SERIES_EXPLORER,
+          jobIds: ['logs_categorization_1'],
+          refreshInterval: {
+            display: 'Off',
+            pause: false,
+            value: 0,
+          },
+          timeRange: {
+            from: '2020-07-12T00:39:02.912Z',
+            to: '2020-07-22T15:52:18.613Z',
+            mode: 'absolute',
+          },
+          query: {
+            analyze_wildcard: true,
+            query: '*',
+          },
+        });
+        expect(url).toBe(
+          "/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(logs_categorization_1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2020-07-12T00:39:02.912Z',mode:absolute,to:'2020-07-22T15:52:18.613Z'))&_a=(mlTimeSeriesExplorer:(),query:(query_string:(analyze_wildcard:!t,query:'*')))"
+        );
+      });
+
+      it('should generate valid URL for the Single Metric Viewer page with extra settings', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.TIME_SERIES_EXPLORER,
+          jobIds: ['logs_categorization_1'],
+          detectorIndex: 0,
+          entities: { mlcategory: '2' },
+          refreshInterval: {
+            display: 'Off',
+            pause: false,
+            value: 0,
+          },
+          timeRange: {
+            from: '2020-07-12T00:39:02.912Z',
+            to: '2020-07-22T15:52:18.613Z',
+            mode: 'absolute',
+          },
+          zoom: {
+            from: '2020-07-20T23:58:29.367Z',
+            to: '2020-07-21T11:00:13.173Z',
+          },
+          query: {
+            analyze_wildcard: true,
+            query: '*',
+          },
+        });
+        expect(url).toBe(
+          "/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(logs_categorization_1)),refreshInterval:(display:Off,pause:!f,value:0),time:(from:'2020-07-12T00:39:02.912Z',mode:absolute,to:'2020-07-22T15:52:18.613Z'))&_a=(mlTimeSeriesExplorer:(detectorIndex:0,entities:(mlcategory:'2')),query:(query_string:(analyze_wildcard:!t,query:'*')),zoom:(from:'2020-07-20T23:58:29.367Z',to:'2020-07-21T11:00:13.173Z'))"
+        );
+      });
+    });
+  });
+
+  describe('DataFrameAnalytics', () => {
+    describe('JobManagement Page', () => {
+      it('should generate valid URL for the Data Frame Analytics job management page', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.DATA_FRAME_ANALYTICS,
+        });
+        expect(url).toBe('/app/ml/data_frame_analytics');
+      });
+      it('should generate valid URL for the Data Frame Analytics job management page with jobId', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.DATA_FRAME_ANALYTICS,
+          jobId: 'grid_regression_1',
+        });
+        expect(url).toBe('/app/ml/data_frame_analytics?mlManagement=(jobId:grid_regression_1)');
+      });
+
+      it('should generate valid URL for the Data Frame Analytics job management page with groupIds', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.DATA_FRAME_ANALYTICS,
+          groupIds: ['group_1', 'group_2'],
+        });
+        expect(url).toBe('/app/ml/data_frame_analytics?mlManagement=(groupIds:!(group_1,group_2))');
+      });
+    });
+
+    describe('ExplorationPage', () => {
+      it('should generate valid URL for the Data Frame Analytics exploration page for job', async () => {
+        const url = await urlGenerator.createUrl({
+          page: ML_TABS.DATA_FRAME_ANALYTICS_EXPLORATION,
+          jobId: 'grid_regression_1',
+          analysisType: ANALYSIS_CONFIG_TYPE.REGRESSION,
+        });
+        expect(url).toBe(
+          '/app/ml/data_frame_analytics/exploration?_g=(ml:(analysisType:regression,jobId:grid_regression_1))'
+        );
+      });
+    });
+  });
+
+  describe('DataVisualizer', () => {
+    it('should generate valid URL for the Data Visualizer page', async () => {
+      const url = await urlGenerator.createUrl({
+        page: ML_TABS.DATA_VISUALIZER,
+      });
+      expect(url).toBe('/app/ml/datavisualizer');
+    });
+
+    it('should generate valid URL for the Data Visualizer import file page', async () => {
+      const url = await urlGenerator.createUrl({
+        page: ML_TABS.DATA_VISUALIZER_FILE,
+      });
+      expect(url).toBe('/app/ml/filedatavisualizer');
+    });
+
+    it('should generate valid URL for the Data Visualizer import by index page', async () => {
+      const url = await urlGenerator.createUrl({
+        page: ML_TABS.DATA_VISUALIZER_INDEX_SELECT,
+      });
+      expect(url).toBe('/app/ml/datavisualizer_index_select');
+    });
+
+    it('should generate valid URL for the Data Visualizer Viewer page', async () => {
+      const url = await urlGenerator.createUrl({
+        page: ML_TABS.DATA_VISUALIZER_VIEWER,
+        index: '3da93760-e0af-11ea-9ad3-3bcfc330e42a',
+        globalState: {
+          time: {
+            from: 'now-30m',
+            to: 'now',
+            mode: 'quick',
+          },
+        },
+      });
+      expect(url).toBe(
+        '/app/ml/jobs/new_job/datavisualizer?index=3da93760-e0af-11ea-9ad3-3bcfc330e42a&_g=(time:(from:now-30m,mode:quick,to:now))'
+      );
     });
-    expect(url).toBe(
-      '/app/ml/explorer#?_g=(ml:(jobIds:!(test-job)))&_a=(mlExplorerFilter:(),mlExplorerSwimlane:(viewByFromPage:2,viewByPerPage:20))'
-    );
   });
 
   it('should throw an error in case the page is not provided', async () => {