[ML] Update clearSelectedJobIdFromUrl, update forecast tables linking…

…, update addItemToRecentlyAccessed
elastic · Sep 16, 2020 · 92dad64 · 92dad64
1 parent cc8f5dd
commit 92dad64
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 42 deletions.
diff --git a/x-pack/plugins/ml/common/types/ml_url_generator.ts b/x-pack/plugins/ml/common/types/ml_url_generator.ts
@@ -128,6 +128,7 @@ export interface TimeSeriesExplorerAppState {
     to?: string;
   };
   mlTimeSeriesExplorer?: {
+    forecastId?: string;
     detectorIndex?: number;
     entities?: Record<string, string>;
   };
@@ -141,6 +142,8 @@ export interface TimeSeriesExplorerPageState
   timeRange?: TimeRange;
   detectorIndex?: number;
   entities?: Record<string, string>;
+  forecastId?: string;
+
   globalState?: MlCommonGlobalState;
 }
 

diff --git a/...lugins/ml/public/application/jobs/jobs_list/components/job_details/extract_job_details.js b/...lugins/ml/public/application/jobs/jobs_list/components/job_details/extract_job_details.js
@@ -5,10 +5,10 @@
  */
 
 import React from 'react';
-import { EuiLink } from '@elastic/eui';
 import { detectorToString } from '../../../../util/string_utils';
 import { formatValues, filterObjects } from './format_values';
 import { i18n } from '@kbn/i18n';
+import { Link } from 'react-router-dom';
 
 export function extractJobDetails(job) {
   if (Object.keys(job).length === 0) {
@@ -61,7 +61,7 @@ export function extractJobDetails(job) {
   if (job.calendars) {
     calendars.items = job.calendars.map((c) => [
       '',
-      <EuiLink href={`#/settings/calendars_list/edit_calendar/${c}?_g=()`}>{c}</EuiLink>,
+      <Link to={`/settings/calendars_list/edit_calendar/${c}?_g=()`}>{c}</Link>,
     ]);
     // remove the calendars list from the general section
     // so not to show it twice.

diff --git a/...blic/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js b/...blic/application/jobs/jobs_list/components/job_details/forecasts_table/forecasts_table.js
@@ -5,8 +5,6 @@
  */
 
 import PropTypes from 'prop-types';
-import rison from 'rison-node';
-
 import React, { Component } from 'react';
 
 import {
@@ -30,13 +28,18 @@ import {
   getLatestDataOrBucketTimestamp,
   isTimeSeriesViewJob,
 } from '../../../../../../../common/util/job_utils';
+import { withKibana } from '../../../../../../../../../../src/plugins/kibana_react/public';
+import {
+  ML_APP_URL_GENERATOR,
+  ML_PAGES,
+} from '../../../../../../../common/constants/ml_url_generator';
 
 const MAX_FORECASTS = 500;
 
 /**
  * Table component for rendering the lists of forecasts run on an ML job.
  */
-export class ForecastsTable extends Component {
+export class ForecastsTableUI extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -78,7 +81,17 @@ export class ForecastsTable extends Component {
     }
   }
 
-  openSingleMetricView(forecast) {
+  async openSingleMetricView(forecast) {
+    const {
+      services: {
+        application: { navigateToApp },
+
+        share: {
+          urlGenerators: { getUrlGenerator },
+        },
+      },
+    } = this.props.kibana;
+
     // Creates the link to the Single Metric Viewer.
     // Set the total time range from the start of the job data to the end of the forecast,
     const dataCounts = this.props.job.data_counts;
@@ -93,31 +106,7 @@ export class ForecastsTable extends Component {
         ? new Date(forecast.forecast_end_timestamp).toISOString()
         : new Date(resultLatest).toISOString();
 
-    const _g = rison.encode({
-      ml: {
-        jobIds: [this.props.job.job_id],
-      },
-      refreshInterval: {
-        display: 'Off',
-        pause: false,
-        value: 0,
-      },
-      time: {
-        from,
-        to,
-        mode: 'absolute',
-      },
-    });
-
-    const appState = {
-      query: {
-        query_string: {
-          analyze_wildcard: true,
-          query: '*',
-        },
-      },
-    };
-
+    let mlTimeSeriesExplorer = {};
     if (forecast !== undefined) {
       // Set the zoom to show duration before the forecast equal to the length of the forecast.
       const forecastDurationMs =
@@ -126,8 +115,7 @@ export class ForecastsTable extends Component {
         forecast.forecast_start_timestamp - forecastDurationMs,
         jobEarliest
       );
-
-      appState.mlTimeSeriesExplorer = {
+      mlTimeSeriesExplorer = {
         forecastId: forecast.forecast_id,
         zoom: {
           from: new Date(zoomFrom).toISOString(),
@@ -136,11 +124,39 @@ export class ForecastsTable extends Component {
       };
     }
 
-    const _a = rison.encode(appState);
-
-    const url = `?_g=${_g}&_a=${_a}`;
-    addItemToRecentlyAccessed('timeseriesexplorer', this.props.job.job_id, url);
-    window.open(`#/timeseriesexplorer${url}`, '_self');
+    const mlUrlGenerator = getUrlGenerator(ML_APP_URL_GENERATOR);
+    const singleMetricForecastLink = await mlUrlGenerator.createUrl({
+      page: ML_PAGES.SINGLE_METRIC_VIEWER,
+      pageState: {
+        timeRange: {
+          from,
+          to,
+          mode: 'absolute',
+        },
+        refreshInterval: {
+          display: 'Off',
+          pause: false,
+          value: 0,
+        },
+        jobIds: [this.props.job.job_id],
+        query: {
+          query_string: {
+            analyze_wildcard: true,
+            query: '*',
+          },
+        },
+        ...mlTimeSeriesExplorer,
+      },
+      excludeBasePath: true,
+    });
+    addItemToRecentlyAccessed(
+      'timeseriesexplorer',
+      this.props.job.job_id,
+      singleMetricForecastLink
+    );
+    await navigateToApp('ml', {
+      path: singleMetricForecastLink,
+    });
   }
 
   render() {
@@ -322,6 +338,8 @@ export class ForecastsTable extends Component {
     );
   }
 }
-ForecastsTable.propTypes = {
+ForecastsTableUI.propTypes = {
   job: PropTypes.object.isRequired,
 };
+
+export const ForecastsTable = withKibana(ForecastsTableUI);
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/utils.js b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/utils.js
@@ -394,7 +394,7 @@ export function clearSelectedJobIdFromUrl(url) {
     url = decodeURIComponent(url);
     if (url.includes('mlManagement') && (url.includes('jobId') || url.includes('groupIds'))) {
       const urlParams = getUrlVars(url);
-      const clearedParams = `ml#/jobs?_g=${urlParams._g}`;
+      const clearedParams = `jobs?_g=${urlParams._g}`;
       window.history.replaceState({}, document.title, clearedParams);
     }
   }

diff --git a/x-pack/plugins/ml/public/application/util/recently_accessed.ts b/x-pack/plugins/ml/public/application/util/recently_accessed.ts
@@ -37,7 +37,7 @@ export function addItemToRecentlyAccessed(page: string, itemId: string, url: str
       return;
   }
 
-  url = `/app/ml/${page}/${url}`;
+  url = url.startsWith('/') ? `/app/ml${url}` : `/app/ml/${page}/${url}`;
   const recentlyAccessed = getRecentlyAccessed();
   recentlyAccessed.add(url, `ML - ${itemId} - ${pageLabel}`, id);
 }
diff --git a/x-pack/plugins/ml/public/ml_url_generator/anomaly_detection_urls_generator.ts b/x-pack/plugins/ml/public/ml_url_generator/anomaly_detection_urls_generator.ts
@@ -143,7 +143,16 @@ export function createSingleMetricViewerUrl(
   if (!params) {
     return url;
   }
-  const { timeRange, jobIds, refreshInterval, zoom, query, detectorIndex, entities } = params;
+  const {
+    timeRange,
+    jobIds,
+    refreshInterval,
+    zoom,
+    query,
+    detectorIndex,
+    forecastId,
+    entities,
+  } = params;
 
   const queryState: TimeSeriesExplorerGlobalState = {
     ml: {
@@ -156,6 +165,10 @@ export function createSingleMetricViewerUrl(
   const appState: Partial<TimeSeriesExplorerAppState> = {};
   const mlTimeSeriesExplorer: Partial<TimeSeriesExplorerAppState['mlTimeSeriesExplorer']> = {};
 
+  if (forecastId !== undefined) {
+    mlTimeSeriesExplorer.forecastId = forecastId;
+  }
+
   if (detectorIndex !== undefined) {
     mlTimeSeriesExplorer.detectorIndex = detectorIndex;
   }