[ML] Extend MlUrlGenerator to support other ML pages

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

@@ -0,0 +1,38 @@
+/*
+ * 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 ML_APP_URL_GENERATOR = 'ML_APP_URL_GENERATOR';
+
+export const ML_PAGES = {
+ ANOMALY_DETECTION_JOBS_MANAGE: 'jobs',
+ ANOMALY_EXPLORER: 'explorer',
+ SINGLE_METRIC_VIEWER: 'timeseriesexplorer',
+ DATA_FRAME_ANALYTICS_JOBS_MANAGE: 'data_frame_analytics',
+ DATA_FRAME_ANALYTICS_EXPLORATION: 'data_frame_analytics/exploration',
+ /**
+ * Page: Data Visualizer
+ */
+ DATA_VISUALIZER: 'datavisualizer',
+ /**
+ * Page: Data Visualizer
+ * Open data visualizer by selecting a Kibana index pattern or saved search
+ */
+ DATA_VISUALIZER_INDEX_SELECT: 'datavisualizer_index_select',
+ /**
+ * Page: Data Visualizer
+ * Open data visualizer by importing data from a log file
+ */
+ DATA_VISUALIZER_FILE: 'filedatavisualizer',
+ /**
+ * Page: Data Visualizer
+ * Open index data visualizer viewer page
+ */
+ DATA_VISUALIZER_INDEX_VIEWER: 'jobs/new_job/datavisualizer',
+ ANOMALY_DETECTION_CREATE_JOB_SELECT_TYPE: `jobs/new_job/step/job_type`,
+ SETTINGS: 'settings',
+ CALENDARS_MANAGE: 'settings/calendars_list',
+ FILTER_LISTS_MANAGE: 'settings/filter_lists',
+} as const;

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

@@ -0,0 +1,187 @@
+/*
+ * 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 { RefreshInterval, TimeRange } from '../../../../../src/plugins/data/common/query';
+import { JobId } from '../../../reporting/common/types';
+import { ML_PAGES } from '../constants/ml_url_generator';
+
+type OptionalPageState = object | undefined;
+
+export type MLPageState<PageType, PageState> = PageState extends OptionalPageState
+ ? { page: PageType; pageState?: PageState }
+ : PageState extends object
+ ? { 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;
+}
+export interface MlCommonAppState {
+ [key: string]: any;
+}
+
+export interface MlIndexBasedSearchState {
+ index?: string;
+ savedSearchId?: string;
+}
+
+export interface MlGenericUrlPageState extends MlIndexBasedSearchState {
+ globalState?: MlCommonGlobalState;
+ appState?: MlCommonAppState;
+ [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 interface AnomalyDetectionQueryState {
+ jobId?: JobId;
+ groupIds?: string[];
+}
+
+export type AnomalyDetectionUrlState = MLPageState<
+ typeof ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+ AnomalyDetectionQueryState | undefined
+>;
+export interface ExplorerAppState {
+ mlExplorerSwimlane: {
+ selectedType?: string;
+ selectedLanes?: string[];
+ selectedTimes?: number[];
+ showTopFieldValues?: boolean;
+ viewByFieldName?: string;
+ viewByPerPage?: number;
+ viewByFromPage?: number;
+ };
+ mlExplorerFilter: {
+ influencersFilterQuery?: unknown;
+ filterActive?: boolean;
+ filteredFields?: string[];
+ queryString?: string;
+ };
+ query?: any;
+}
+export interface ExplorerGlobalState {
+ ml: { jobIds: JobId[] };
+ time?: TimeRange;
+ refreshInterval?: RefreshInterval;
+}
+
+export interface ExplorerUrlPageState {
+ /**
+ * Job IDs
+ */
+ jobIds: JobId[];
+ /**
+ * Optionally set the time range in the time picker.
+ */
+ timeRange?: TimeRange;
+ /**
+ * Optionally set the refresh interval.
+ */
+ refreshInterval?: RefreshInterval;
+ /**
+ * Optionally set the query.
+ */
+ query?: any;
+ /**
+ * Optional state for the swim lane
+ */
+ mlExplorerSwimlane?: ExplorerAppState['mlExplorerSwimlane'];
+ mlExplorerFilter?: ExplorerAppState['mlExplorerFilter'];
+}
+
+export type ExplorerUrlState = MLPageState<typeof ML_PAGES.ANOMALY_EXPLORER, ExplorerUrlPageState>;
+
+export interface TimeSeriesExplorerGlobalState {
+ ml: {
+ jobIds: JobId[];
+ };
+ time?: TimeRange;
+ refreshInterval?: RefreshInterval;
+}
+
+export interface TimeSeriesExplorerAppState {
+ zoom?: {
+ from?: string;
+ to?: string;
+ };
+ mlTimeSeriesExplorer?: {
+ detectorIndex?: number;
+ entities?: Record<string, string>;
+ };
+ query?: any;
+}
+
+export interface TimeSeriesExplorerPageState
+ extends Pick<TimeSeriesExplorerAppState, 'zoom' | 'query'>,
+ Pick<TimeSeriesExplorerGlobalState, 'refreshInterval'> {
+ jobIds: JobId[];
+ timeRange?: TimeRange;
+ detectorIndex?: number;
+ entities?: Record<string, string>;
+}
+
+export type TimeSeriesExplorerUrlState = MLPageState<
+ typeof ML_PAGES.SINGLE_METRIC_VIEWER,
+ TimeSeriesExplorerPageState
+>;
+
+export interface DataFrameAnalyticsQueryState {
+ jobId?: JobId | JobId[];
+ groupIds?: string[];
+}
+
+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;
+ };
+}
+
+export type DataFrameAnalyticsExplorationUrlState = MLPageState<
+ typeof ML_PAGES.DATA_FRAME_ANALYTICS_EXPLORATION,
+ {
+ jobId: JobId;
+ analysisType: DataFrameAnalyticsType;
+ }
+>;
+
+/**
+ * Union type of ML URL state based on page
+ */
+export type MlUrlGeneratorState =
+ | AnomalyDetectionUrlState
+ | ExplorerUrlState
+ | TimeSeriesExplorerUrlState
+ | DataFrameAnalyticsUrlState
+ | DataFrameAnalyticsExplorationUrlState
+ | DataVisualizerUrlState
+ | MlGenericUrlState;

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 '../../../../common/constants/ml_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.includes('/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_PAGES } from '../../../../../../../common/constants/ml_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_PAGES.DATA_FRAME_ANALYTICS_JOBS_MANAGE });
+ 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,27 @@
 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 { ML_PAGES } from '../../../../../../../common/constants/ml_url_generator';
+import { useNavigateToPath } from '../../../../../contexts/kibana';
 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 redirectToAnalyticsExplorationPage = async () => {
+ const path = await urlGenerator.createUrl({
+ page: ML_PAGES.DATA_FRAME_ANALYTICS_EXPLORATION,
+ pageState: {
+ jobId,
+ analysisType,
+ },
+ });
  await navigateToPath(path);
  };
 
@@ -38,7 +45,7 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
  defaultMessage: 'View results for the analytics job.',
  }
  )}
- onClick={redirectToAnalyticsManagementPage}
+ onClick={redirectToAnalyticsExplorationPage}
  data-test-subj="analyticsWizardViewResultsCard"
  />
  </Fragment>

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

@@ -21,6 +21,7 @@ import { ExplorerChartsData } from './explorer_charts/explorer_charts_container_
 import { EXPLORER_ACTION } from './explorer_constants';
 import { AppStateSelectedCells, TimeRangeBounds } from './explorer_utils';
 import { explorerReducer, getExplorerDefaultState, ExplorerState } from './reducers';
+import { ExplorerAppState } from '../../../common/types/ml_url_generator';
 
 export const ALLOW_CELL_RANGE_SELECTION = true;
 
@@ -49,24 +50,6 @@ const explorerState$: Observable<ExplorerState> = explorerFilteredAction$.pipe(
  shareReplay(1)
 );
 
-export interface ExplorerAppState {
- mlExplorerSwimlane: {
- selectedType?: string;
- selectedLanes?: string[];
- selectedTimes?: number[];
- showTopFieldValues?: boolean;
- viewByFieldName?: string;
- viewByPerPage?: number;
- viewByFromPage?: number;
- };
- mlExplorerFilter: {
- influencersFilterQuery?: unknown;
- filterActive?: boolean;
- filteredFields?: string[];
- queryString?: string;
- };
-}
-
 const explorerAppState$: Observable<ExplorerAppState> = explorerState$.pipe(
  map(
  (state: ExplorerState): ExplorerAppState => {

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/application/routing/routes/explorer.tsx

@@ -22,7 +22,8 @@ import { useSelectedCells } from '../../explorer/hooks/use_selected_cells';
 import { mlJobService } from '../../services/job_service';
 import { ml } from '../../services/ml_api_service';
 import { useExplorerData } from '../../explorer/actions';
-import { ExplorerAppState, explorerService } from '../../explorer/explorer_dashboard_service';
+import { ExplorerAppState } from '../../../../common/types/ml_url_generator';
+import { explorerService } from '../../explorer/explorer_dashboard_service';
 import { getDateFormatTz } from '../../explorer/explorer_utils';
 import { useJobSelection } from '../../components/job_selector/use_job_selection';
 import { useShowCharts } from '../../components/controls/checkbox_showcharts';