[ML] Migrate machine learning URLs to BrowserRouter format for APM, Security, and Infra

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/legacy_jobs_callout.tsx

@@ -5,12 +5,41 @@
  */
 
 import { EuiCallOut, EuiButton } from '@elastic/eui';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
 
 export function LegacyJobsCallout() {
-  const { core } = useApmPluginContext();
+  const {
+    core,
+    plugins: { ml },
+  } = useApmPluginContext();
+
+  const [mlADLink, setMlADLink] = useState(
+    core.http.basePath.prepend('/app/ml/jobs')
+  );
+
+  useEffect(() => {
+    let isCancelled = false;
+    const generateLink = async () => {
+      if (ml?.urlGenerator !== undefined) {
+        const href = await ml.urlGenerator.createUrl({
+          page: 'jobs',
+          pageState: {
+            jobId: 'high_mean_response_time',
+          },
+        });
+        if (!isCancelled) {
+          setMlADLink(href);
+        }
+      }
+    };
+    generateLink();
+    return () => {
+      isCancelled = true;
+    };
+  }, [ml?.urlGenerator]);
+
   return (
     <EuiCallOut
       title={i18n.translate(
@@ -28,11 +57,7 @@ export function LegacyJobsCallout() {
           }
         )}
       </p>
-      <EuiButton
-        href={core.http.basePath.prepend(
-          '/app/ml#/jobs?mlManagement=(jobId:high_mean_response_time)'
-        )}
-      >
+      <EuiButton href={mlADLink}>
         {i18n.translate(
           'xpack.apm.settings.anomaly_detection.legacy_jobs.button',
           { defaultMessage: 'Review jobs' }

x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLJobLink.test.tsx

@@ -22,7 +22,7 @@ describe('MLJobLink', () => {
     );
 
     expect(href).toMatchInlineSnapshot(
-      `"/basepath/app/ml#/timeseriesexplorer?_g=(ml:(jobIds:!(myservicename-mytransactiontype-high_mean_response_time)),refreshInterval:(pause:!t,value:0),time:(from:now/w,to:now-4h))"`
+      `"/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(myservicename-mytransactiontype-high_mean_response_time)),refreshInterval:(pause:!t,value:0),time:(from:now%2Fw,to:now-4h))&_a=(mlTimeSeriesExplorer:(),zoom:(from:now%2Fw,to:now-4h))"`
     );
   });
   it('should produce the correct URL with jobId, serviceName, and transactionType', async () => {
@@ -41,7 +41,27 @@ describe('MLJobLink', () => {
     );
 
     expect(href).toMatchInlineSnapshot(
-      `"/basepath/app/ml#/timeseriesexplorer?_g=(ml:(jobIds:!(myservicename-mytransactiontype-high_mean_response_time)),refreshInterval:(pause:!t,value:0),time:(from:now/w,to:now-4h))&_a=(mlTimeSeriesExplorer:(entities:(service.name:opbeans-test,transaction.type:request)))"`
+      `"/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(myservicename-mytransactiontype-high_mean_response_time)),refreshInterval:(pause:!t,value:0),time:(from:now%2Fw,to:now-4h))&_a=(mlTimeSeriesExplorer:(entities:(service.name:opbeans-test,transaction.type:request)),zoom:(from:now%2Fw,to:now-4h))"`
+    );
+  });
+
+  it('correctly encodes time range values', async () => {
+    const href = await getRenderedHref(
+      () => (
+        <MLJobLink
+          jobId="apm-production-485b-high_mean_transaction_duration"
+          serviceName="opbeans-java"
+          transactionType="request"
+        />
+      ),
+      {
+        search:
+          '?rangeFrom=2020-07-29T17:27:29.000Z&rangeTo=2020-07-29T18:45:00.000Z&refreshInterval=10000&refreshPaused=true',
+      } as Location
+    );
+
+    expect(href).toMatchInlineSnapshot(
+      `"/app/ml/timeseriesexplorer?_g=(ml:(jobIds:!(apm-production-485b-high_mean_transaction_duration)),refreshInterval:(pause:!t,value:10000),time:(from:'2020-07-29T17:27:29.000Z',to:'2020-07-29T18:45:00.000Z'))&_a=(mlTimeSeriesExplorer:(entities:(service.name:opbeans-java,transaction.type:request)),zoom:(from:'2020-07-29T17:27:29.000Z',to:'2020-07-29T18:45:00.000Z'))"`
     );
   });
 });

x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.test.tsx

@@ -21,6 +21,6 @@ test('MLLink produces the correct URL', async () => {
   );
 
   expect(href).toMatchInlineSnapshot(
-    `"/basepath/app/ml#/some/path?_g=(ml:(jobIds:!(something)),refreshInterval:(pause:!t,value:0),time:(from:now-5h,to:now-2h))&mlManagement=(groupIds:!(apm))"`
+    `"/app/ml/jobs?mlManagement=(groupIds:!(apm),jobId:!(something))&_g=(refreshInterval:(pause:!t,value:0),time:(from:now-5h,to:now-2h))"`
   );
 });

x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/MLLink.tsx

@@ -5,12 +5,10 @@
  */
 
 import { EuiLink } from '@elastic/eui';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import rison, { RisonValue } from 'rison-node';
-import url from 'url';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
-import { getTimepickerRisonData, TimepickerRisonData } from '../rison_helpers';
+import { getTimepickerRisonData } from '../rison_helpers';
 
 interface MlRisonData {
   ml?: {
@@ -29,25 +27,50 @@ export function MLLink({ children, path = '', query = {}, external }: Props) {
   const { core } = useApmPluginContext();
   const location = useLocation();
 
-  const risonQuery: MlRisonData & TimepickerRisonData = getTimepickerRisonData(
-    location.search
-  );
+  const {
+    plugins: { ml },
+  } = useApmPluginContext();
 
-  if (query.ml) {
-    risonQuery.ml = query.ml;
-  }
+  // default to link to ML Anomaly Detection jobs management page
+  const [mlADLink, setMlADLink] = useState(
+    core.http.basePath.prepend('/app/ml/jobs')
+  );
+  useEffect(() => {
+    let isCancelled = false;
+    const generateLink = async () => {
+      const { time, refreshInterval } = getTimepickerRisonData(location.search);
+      let jobIds: string[] = [];
+      if (query.ml?.jobIds) {
+        jobIds = query.ml.jobIds;
+      }
 
-  const href = url.format({
-    pathname: core.http.basePath.prepend('/app/ml'),
-    hash: `${path}?_g=${rison.encode(
-      risonQuery as RisonValue
-    )}&mlManagement=${rison.encode({ groupIds: ['apm'] })}`,
-  });
+      if (ml?.urlGenerator !== undefined) {
+        const href = await ml.urlGenerator.createUrl({
+          page: 'jobs',
+          pageState: {
+            jobId: jobIds,
+            groupIds: ['apm'],
+            globalState: {
+              time,
+              refreshInterval,
+            },
+          },
+        });
+        if (!isCancelled) {
+          setMlADLink(href);
+        }
+      }
+    };
+    generateLink();
+    return () => {
+      isCancelled = true;
+    };
+  }, [ml?.urlGenerator, location.search, query]);
 
   return (
     <EuiLink
       children={children}
-      href={href}
+      href={mlADLink}
       external={external}
       target={external ? '_blank' : undefined}
     />

x-pack/plugins/apm/public/components/shared/Links/MachineLearningLinks/useTimeSeriesExplorerHref.ts

@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import querystring from 'querystring';
 import { useLocation } from 'react-router-dom';
-import rison from 'rison-node';
-import url from 'url';
+import { useEffect, useState } from 'react';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
 import { getTimepickerRisonData } from '../rison_helpers';
+import { RefreshInterval } from '../../../../../../../../src/plugins/data/common/query';
 
 export function useTimeSeriesExplorerHref({
   jobId,
@@ -20,41 +19,48 @@ export function useTimeSeriesExplorerHref({
   serviceName?: string;
   transactionType?: string;
 }) {
-  const { core } = useApmPluginContext();
+  // default to link to ML Anomaly Detection jobs management page
+  const {
+    core,
+    plugins: { ml },
+  } = useApmPluginContext();
+  const [mlAnomalyDetectionHref, setMlAnomalyDetectionHref] = useState(
+    core.http.basePath.prepend('/app/ml/jobs')
+  );
   const location = useLocation();
-  const { time, refreshInterval } = getTimepickerRisonData(location.search);
 
-  const search = querystring.stringify(
-    {
-      _g: rison.encode({
-        ml: { jobIds: [jobId] },
-        time,
-        refreshInterval,
-      }),
-      ...(serviceName && transactionType
-        ? {
-            _a: rison.encode({
-              mlTimeSeriesExplorer: {
-                entities: {
-                  'service.name': serviceName,
-                  'transaction.type': transactionType,
-                },
-              },
-            }),
-          }
-        : null),
-    },
-    undefined,
-    undefined,
-    {
-      encodeURIComponent(str: string) {
-        return str;
-      },
-    }
-  );
+  useEffect(() => {
+    let isCancelled = false;
+    const generateLink = async () => {
+      const { time, refreshInterval } = getTimepickerRisonData(location.search);
+      if (ml?.urlGenerator !== undefined) {
+        const href = await ml.urlGenerator.createUrl({
+          page: 'timeseriesexplorer',
+          pageState: {
+            jobIds: [jobId],
+            timeRange: time,
+            refreshInterval: refreshInterval as RefreshInterval,
+            zoom: time,
+            ...(serviceName && transactionType
+              ? {
+                  entities: {
+                    'service.name': serviceName,
+                    'transaction.type': transactionType,
+                  },
+                }
+              : {}),
+          },
+        });
+        if (!isCancelled) {
+          setMlAnomalyDetectionHref(href);
+        }
+      }
+    };
+    generateLink();
+    return () => {
+      isCancelled = true;
+    };
+  }, [ml?.urlGenerator, location.search, jobId, serviceName, transactionType]);
 
-  return url.format({
-    pathname: core.http.basePath.prepend('/app/ml'),
-    hash: url.format({ pathname: '/timeseriesexplorer', search }),
-  });
+  return mlAnomalyDetectionHref;
 }