[ML][7.10] Fix zoom missing in Anomaly detection URLs (elastic#86400)

patrykkopycinski · Dec 23, 2020 · cca59ba · cca59ba
1 parent 4cafa58
commit cca59ba
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 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
@@ -123,27 +123,26 @@ export interface TimeSeriesExplorerGlobalState {
   refreshInterval?: RefreshInterval;
 }
 
-export interface TimeSeriesExplorerAppState {
+export interface TimeSeriesExplorerParams {
+  forecastId?: string;
+  detectorIndex?: number;
+  entities?: Record<string, string>;
   zoom?: {
     from?: string;
     to?: string;
   };
-  mlTimeSeriesExplorer?: {
-    forecastId?: string;
-    detectorIndex?: number;
-    entities?: Record<string, string>;
-  };
+}
+export interface TimeSeriesExplorerAppState {
+  mlTimeSeriesExplorer?: TimeSeriesExplorerParams;
   query?: any;
 }
 
 export interface TimeSeriesExplorerPageState
-  extends Pick<TimeSeriesExplorerAppState, 'zoom' | 'query'>,
+  extends TimeSeriesExplorerParams,
+    Pick<TimeSeriesExplorerAppState, 'query'>,
     Pick<TimeSeriesExplorerGlobalState, 'refreshInterval'> {
   jobIds?: JobId[];
   timeRange?: TimeRange;
-  detectorIndex?: number;
-  entities?: Record<string, string>;
-  forecastId?: string;
   globalState?: MlCommonGlobalState;
 }
 

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   EuiButtonEmpty,
@@ -56,10 +56,15 @@ function getChartId(series) {
 function ExplorerChartContainer({ series, severity, tooManyBuckets, wrapLabel, mlUrlGenerator }) {
   const redirectToSingleMetricViewer = useCallback(async () => {
     const singleMetricViewerLink = await getExploreSeriesLink(mlUrlGenerator, series);
-    addItemToRecentlyAccessed('timeseriesexplorer', series.jobId, singleMetricViewerLink);
+    // need to get the relative link for addItemToRecentlyAccessed
+    // whereas for user to navigate to link it needs the full path
+    const relativeLinkParts = singleMetricViewerLink.split('app/ml');
+    if (Array.isArray(relativeLinkParts) && relativeLinkParts.length === 2) {
+      addItemToRecentlyAccessed('timeseriesexplorer', series.jobId, relativeLinkParts[1]);
+    }
 
     window.open(singleMetricViewerLink, '_blank');
-  }, [mlUrlGenerator]);
+  }, [mlUrlGenerator, series]);
 
   const { detectorLabel, entityFields } = series;
 
@@ -168,14 +173,12 @@ export const ExplorerChartsContainerUI = ({
 }) => {
   const {
     services: {
-      application: { navigateToApp },
-
       share: {
         urlGenerators: { getUrlGenerator },
       },
     },
   } = kibana;
-  const mlUrlGenerator = getUrlGenerator(ML_APP_URL_GENERATOR);
+  const mlUrlGenerator = useMemo(() => getUrlGenerator(ML_APP_URL_GENERATOR), [getUrlGenerator]);
 
   // <EuiFlexGrid> doesn't allow a setting of `columns={1}` when chartsPerRow would be 1.
   // If that's the case we trick it doing that with the following settings:
@@ -198,7 +201,6 @@ export const ExplorerChartsContainerUI = ({
               severity={severity}
               tooManyBuckets={tooManyBuckets}
               wrapLabel={wrapLabel}
-              navigateToApp={navigateToApp}
               mlUrlGenerator={mlUrlGenerator}
             />
           </EuiFlexItem>

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
@@ -178,9 +178,12 @@ export function createSingleMetricViewerUrl(
   if (entities !== undefined) {
     mlTimeSeriesExplorer.entities = entities;
   }
+  if (zoom !== undefined) {
+    mlTimeSeriesExplorer.zoom = zoom;
+  }
+
   appState.mlTimeSeriesExplorer = mlTimeSeriesExplorer;
 
-  if (zoom) appState.zoom = zoom;
   if (query)
     appState.query = {
       query_string: query,

diff --git a/x-pack/plugins/ml/public/ml_url_generator/ml_url_generator.test.ts b/x-pack/plugins/ml/public/ml_url_generator/ml_url_generator.test.ts
@@ -159,7 +159,7 @@ describe('MlUrlGenerator', () => {
           },
         });
         expect(url).toBe(
-          "/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(logs_categorization_1)),refreshInterval:(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'))"
+          "/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(logs_categorization_1)),refreshInterval:(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'),zoom:(from:'2020-07-20T23:58:29.367Z',to:'2020-07-21T11:00:13.173Z')),query:(query_string:(analyze_wildcard:!t,query:'*')))"
         );
       });
     });