[ML] Migrate internal urls to non-hash paths

x-pack/plugins/ml/common/constants/data_frame_analytics.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export const ANALYSIS_CONFIG_TYPE = {
+  OUTLIER_DETECTION: 'outlier_detection',
+  REGRESSION: 'regression',
+  CLASSIFICATION: 'classification',
+} as const;

x-pack/plugins/ml/common/constants/ml_url_generator.ts

@@ -32,7 +32,14 @@ export const ML_PAGES = {
    */
   DATA_VISUALIZER_INDEX_VIEWER: 'jobs/new_job/datavisualizer',
   ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE: `jobs/new_job/step/job_type`,
+  ANOMALY_DETECTION_CREATE_JOB_SELECT_INDEX: `jobs/new_job/step/index_or_search`,
   SETTINGS: 'settings',
   CALENDARS_MANAGE: 'settings/calendars_list',
+  CALENDARS_NEW: 'settings/calendars_list/new_calendar',
+  CALENDARS_EDIT: 'settings/calendars_list/edit_calendar',
   FILTER_LISTS_MANAGE: 'settings/filter_lists',
+  FILTER_LISTS_NEW: 'settings/filter_lists/new_filter_list',
+  FILTER_LISTS_EDIT: 'settings/filter_lists/edit_filter_list',
+  ACCESS_DENIED: 'access-denied',
+  OVERVIEW: 'overview',
 } as const;

x-pack/plugins/ml/common/types/data_frame_analytics.ts

@@ -5,6 +5,7 @@
  */
 
 import { CustomHttpResponseOptions, ResponseError } from 'kibana/server';
+import { ANALYSIS_CONFIG_TYPE } from '../constants/data_frame_analytics';
 
 export interface DeleteDataFrameAnalyticsWithIndexStatus {
   success: boolean;
@@ -79,3 +80,5 @@ export interface DataFrameAnalyticsConfig {
   version: string;
   allow_lazy_start?: boolean;
 }
+
+export type DataFrameAnalyticsType = typeof ANALYSIS_CONFIG_TYPE[keyof typeof ANALYSIS_CONFIG_TYPE];

x-pack/plugins/ml/common/types/ml_url_generator.ts

@@ -5,8 +5,9 @@
  */
 
 import { RefreshInterval, TimeRange } from '../../../../../src/plugins/data/common/query';
-import { JobId } from '../../../reporting/common/types';
+import { JobId } from './anomaly_detection_jobs/job';
 import { ML_PAGES } from '../constants/ml_url_generator';
+import { DataFrameAnalyticsType } from './data_frame_analytics';
 
 type OptionalPageState = object | undefined;
 
@@ -16,16 +17,9 @@ export type MLPageState<PageType, PageState> = PageState extends OptionalPageSta
   ? { page: PageType; pageState: PageState }
   : { page: PageType };
 
-export const ANALYSIS_CONFIG_TYPE = {
-  OUTLIER_DETECTION: 'outlier_detection',
-  REGRESSION: 'regression',
-  CLASSIFICATION: 'classification',
-} as const;
-
-type DataFrameAnalyticsType = typeof ANALYSIS_CONFIG_TYPE[keyof typeof ANALYSIS_CONFIG_TYPE];
-
 export interface MlCommonGlobalState {
   time?: TimeRange;
+  refreshInterval?: RefreshInterval;
 }
 export interface MlCommonAppState {
   [key: string]: any;
@@ -42,16 +36,29 @@ export interface MlGenericUrlPageState extends MlIndexBasedSearchState {
   [key: string]: any;
 }
 
-export interface MlGenericUrlState {
-  page:
-    | typeof ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER
-    | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE;
-  pageState: MlGenericUrlPageState;
-}
+export type MlGenericUrlState = MLPageState<
+  | typeof ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER
+  | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE
+  | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB_SELECT_INDEX
+  | typeof ML_PAGES.OVERVIEW
+  | typeof ML_PAGES.CALENDARS_MANAGE
+  | typeof ML_PAGES.CALENDARS_EDIT
+  | typeof ML_PAGES.CALENDARS_NEW
+  | typeof ML_PAGES.FILTER_LISTS_MANAGE
+  | typeof ML_PAGES.FILTER_LISTS_EDIT
+  | typeof ML_PAGES.FILTER_LISTS_NEW
+  | typeof ML_PAGES.SETTINGS
+  | typeof ML_PAGES.ACCESS_DENIED
+  | typeof ML_PAGES.DATA_VISUALIZER
+  | typeof ML_PAGES.DATA_VISUALIZER_FILE
+  | typeof ML_PAGES.DATA_VISUALIZER_INDEX_SELECT,
+  MlGenericUrlPageState | undefined
+>;
 
 export interface AnomalyDetectionQueryState {
   jobId?: JobId;
   groupIds?: string[];
+  globalState?: MlCommonGlobalState;
 }
 
 export type AnomalyDetectionUrlState = MLPageState<
@@ -145,24 +152,19 @@ export type TimeSeriesExplorerUrlState = MLPageState<
 export interface DataFrameAnalyticsQueryState {
   jobId?: JobId | JobId[];
   groupIds?: string[];
+  globalState?: MlCommonGlobalState;
 }
 
 export type DataFrameAnalyticsUrlState = MLPageState<
   typeof ML_PAGES.DATA_FRAME_ANALYTICS_JOBS_MANAGE,
   DataFrameAnalyticsQueryState | undefined
 >;
 
-export interface DataVisualizerUrlState {
-  page:
-    | typeof ML_PAGES.DATA_VISUALIZER
-    | typeof ML_PAGES.DATA_VISUALIZER_FILE
-    | typeof ML_PAGES.DATA_VISUALIZER_INDEX_SELECT;
-}
-
 export interface DataFrameAnalyticsExplorationQueryState {
   ml: {
     jobId: JobId;
     analysisType: DataFrameAnalyticsType;
+    globalState?: MlCommonGlobalState;
   };
 }
 
@@ -171,6 +173,7 @@ export type DataFrameAnalyticsExplorationUrlState = MLPageState<
   {
     jobId: JobId;
     analysisType: DataFrameAnalyticsType;
+    globalState?: MlCommonGlobalState;
   }
 >;
 
@@ -183,5 +186,4 @@ export type MlUrlGeneratorState =
   | TimeSeriesExplorerUrlState
   | DataFrameAnalyticsUrlState
   | DataFrameAnalyticsExplorationUrlState
-  | DataVisualizerUrlState
   | MlGenericUrlState;

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

@@ -4,15 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, useState } from 'react';
-import { encode } from 'rison-node';
+import React, { FC, useState, useEffect } from 'react';
 
 import { EuiTabs, EuiTab, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
-import { useUrlState } from '../../util/url_state';
-
 import { TabId } from './navigation_menu';
+import { useMlUrlGenerator, useNavigateToPath } from '../../contexts/kibana';
+import { MlUrlGeneratorState } from '../../../../common/types/ml_url_generator';
+import { useUrlState } from '../../util/url_state';
 
 export interface Tab {
   id: TabId;
@@ -66,17 +65,49 @@ function getTabs(disableLinks: boolean): Tab[] {
 }
 interface TabData {
   testSubject: string;
-  pathId?: string;
+  pathId?: MlUrlGeneratorState['page'];
+  name: string;
 }
 
 const TAB_DATA: Record<TabId, TabData> = {
-  overview: { testSubject: 'mlMainTab overview' },
+  overview: {
+    testSubject: 'mlMainTab overview',
+    name: i18n.translate('xpack.ml.overviewTabLabel', {
+      defaultMessage: 'Overview',
+    }),
+  },
   // Note that anomaly detection jobs list is mapped to ml#/jobs.
-  anomaly_detection: { testSubject: 'mlMainTab anomalyDetection', pathId: 'jobs' },
-  data_frame_analytics: { testSubject: 'mlMainTab dataFrameAnalytics' },
-  datavisualizer: { testSubject: 'mlMainTab dataVisualizer' },
-  settings: { testSubject: 'mlMainTab settings' },
-  'access-denied': { testSubject: 'mlMainTab overview' },
+  anomaly_detection: {
+    testSubject: 'mlMainTab anomalyDetection',
+    name: i18n.translate('xpack.ml.anomalyDetectionTabLabel', {
+      defaultMessage: 'Anomaly Detection',
+    }),
+    pathId: 'jobs',
+  },
+  data_frame_analytics: {
+    testSubject: 'mlMainTab dataFrameAnalytics',
+    name: i18n.translate('xpack.ml.dataFrameAnalyticsTabLabel', {
+      defaultMessage: 'Data Frame Analytics',
+    }),
+  },
+  datavisualizer: {
+    testSubject: 'mlMainTab dataVisualizer',
+    name: i18n.translate('xpack.ml.dataVisualizerTabLabel', {
+      defaultMessage: 'Data Visualizer',
+    }),
+  },
+  settings: {
+    testSubject: 'mlMainTab settings',
+    name: i18n.translate('xpack.ml.settingsTabLabel', {
+      defaultMessage: 'Settings',
+    }),
+  },
+  'access-denied': {
+    testSubject: 'mlMainTab overview',
+    name: i18n.translate('xpack.ml.accessDeniedTabLabel', {
+      defaultMessage: 'Access Denied',
+    }),
+  },
 };
 
 export const MainTabs: FC<Props> = ({ tabId, disableLinks }) => {
@@ -87,16 +118,32 @@ export const MainTabs: FC<Props> = ({ tabId, disableLinks }) => {
   }
 
   const tabs = getTabs(disableLinks);
+  const mlUrlGenerator = useMlUrlGenerator();
+  const navigateToPath = useNavigateToPath();
+
+  const redirectToTab = async (defaultPathId: MlUrlGeneratorState['page']) => {
+    // TODO: fix ts
+    // @ts-ignore
+    const path = await mlUrlGenerator.createUrl({
+      page: defaultPathId,
+      pageState: { globalState },
+    });
+
+    await navigateToPath(path, false);
+  };
+
+  useEffect(() => {
+    document.title = `ML - ${TAB_DATA[selectedTabId].name} - Kibana`;
+  }, [selectedTabId]);
 
   return (
     <EuiTabs display="condensed">
       {tabs.map((tab: Tab) => {
         const { id, disabled } = tab;
         const testSubject = TAB_DATA[id].testSubject;
-        const defaultPathId = TAB_DATA[id].pathId || id;
+        const defaultPathId = (TAB_DATA[id].pathId || id) as MlUrlGeneratorState['page'];
         // globalState (e.g. selected jobs and time range) should be retained when changing pages.
         // appState will not be considered.
-        const fullGlobalStateString = globalState !== undefined ? `?_g=${encode(globalState)}` : '';
 
         return disabled ? (
           <EuiTab key={`${id}-key`} className={'mlNavigationMenu__mainTab'} disabled={true}>
@@ -106,7 +153,7 @@ export const MainTabs: FC<Props> = ({ tabId, disableLinks }) => {
           <div className="euiTab" key={`div-${id}-key`}>
             <EuiLink
               data-test-subj={testSubject + (id === selectedTabId ? ' selected' : '')}
-              href={`#/${defaultPathId}${fullGlobalStateString}`}
+              onClick={() => redirectToTab(defaultPathId)}
               key={`${id}-key`}
               color="text"
             >

x-pack/plugins/ml/public/application/components/rule_editor/scope_section.js

@@ -17,8 +17,19 @@ import { ScopeExpression } from './scope_expression';
 import { checkPermission } from '../../capabilities/check_capabilities';
 import { getScopeFieldDefaults } from './utils';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { ML_PAGES } from '../../../../common/constants/ml_url_generator';
+import { useMlUrlGenerator, useNavigateToPath } from '../../contexts/kibana';
 
 function NoFilterListsCallOut() {
+  const mlUrlGenerator = useMlUrlGenerator();
+  const navigateToPath = useNavigateToPath();
+  const redirectToFilterManagementPage = async () => {
+    const path = await mlUrlGenerator.createUrl({
+      page: ML_PAGES.FILTER_LISTS_MANAGE,
+    });
+    await navigateToPath(path, true);
+  };
+
   return (
     <EuiCallOut
       title={
@@ -36,7 +47,7 @@ function NoFilterListsCallOut() {
             to create the list of values you want to include or exclude in the rule."
           values={{
             filterListsLink: (
-              <EuiLink href="#/settings/filter_lists">
+              <EuiLink onClick={redirectToFilterManagementPage}>
                 <FormattedMessage
                   id="xpack.ml.ruleEditor.scopeSection.createFilterListsDescription.filterListsLinkText"
                   defaultMessage="Filter Lists"

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

@@ -9,4 +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';
+export { useMlUrlGenerator, useMlLink } from './use_create_url';

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

@@ -4,8 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useCallback, useEffect, useState } from 'react';
 import { useMlKibana } from './kibana_context';
 import { ML_APP_URL_GENERATOR } from '../../../../common/constants/ml_url_generator';
+import { MlUrlGeneratorState } from '../../../../common/types/ml_url_generator';
 
 export const useMlUrlGenerator = () => {
   const {
@@ -18,3 +20,37 @@ export const useMlUrlGenerator = () => {
 
   return getUrlGenerator(ML_APP_URL_GENERATOR);
 };
+
+export const useMlLink = (params: MlUrlGeneratorState): string | undefined => {
+  const [href, setHref] = useState<string | undefined>(undefined);
+  const mlUrlGenerator = useMlUrlGenerator();
+
+  const generateUrl = useCallback(async () => {
+    const url = await mlUrlGenerator.createUrl(params);
+    setHref(url);
+  }, []);
+  useEffect(() => {
+    generateUrl();
+  }, [params]);
+
+  return href;
+};
+
+export const useCreateAndNavigateToMlLink = (
+  page: MlUrlGeneratorState['page']
+): (() => Promise<void>) => {
+  const mlUrlGenerator = useMlUrlGenerator();
+  const {
+    services: {
+      application: { navigateToUrl },
+    },
+  } = useMlKibana();
+
+  const redirectToMlPage = async (_page: MlUrlGeneratorState['page']) => {
+    const url = await mlUrlGenerator.createUrl({ page: _page });
+    await navigateToUrl(url);
+  };
+
+  // returns the onClick callback
+  return useCallback(() => redirectToMlPage(page), [mlUrlGenerator]);
+};

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/action_view/use_view_action.tsx

@@ -7,24 +7,32 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { getAnalysisType } from '../../../../common/analytics';
-import { useNavigateToPath } from '../../../../../contexts/kibana';
+import { useMlUrlGenerator, useNavigateToPath } from '../../../../../contexts/kibana';
 
-import {
-  getResultsUrl,
-  DataFrameAnalyticsListAction,
-  DataFrameAnalyticsListRow,
-} from '../analytics_list/common';
+import { DataFrameAnalyticsListAction, DataFrameAnalyticsListRow } from '../analytics_list/common';
 
 import { getViewLinkStatus } from './get_view_link_status';
 import { viewActionButtonText, ViewButton } from './view_button';
+import { DataFrameAnalyticsType } from '../../../../../../../common/types/data_frame_analytics';
+import { ML_PAGES } from '../../../../../../../common/constants/ml_url_generator';
 
 export type ViewAction = ReturnType<typeof useViewAction>;
 export const useViewAction = () => {
+  const mlUrlGenerator = useMlUrlGenerator();
   const navigateToPath = useNavigateToPath();
 
+  const redirectToTab = async (jobId: string, analysisType: DataFrameAnalyticsType) => {
+    const path = await mlUrlGenerator.createUrl({
+      page: ML_PAGES.DATA_FRAME_ANALYTICS_EXPLORATION,
+      pageState: { jobId, analysisType },
+    });
+
+    await navigateToPath(path, false);
+  };
+
   const clickHandler = useCallback((item: DataFrameAnalyticsListRow) => {
-    const analysisType = getAnalysisType(item.config.analysis);
-    navigateToPath(getResultsUrl(item.id, analysisType));
+    const analysisType = getAnalysisType(item.config.analysis) as DataFrameAnalyticsType;
+    redirectToTab(item.id, analysisType);
   }, []);
 
   const action: DataFrameAnalyticsListAction = useMemo(