[7.x][ML] Migrate machine learning URLs to BrowserRouter format for A…

…PM, Security, and Infra (elastic#78209) (elastic#79487)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -8,9 +8,20 @@ import { EuiCallOut, EuiButton } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
+import { useMlHref } from '../../../../../../ml/public';
 
 export function LegacyJobsCallout() {
- const { core } = useApmPluginContext();
+ const {
+ core,
+ plugins: { ml },
+ } = useApmPluginContext();
+ const mlADLink = useMlHref(ml, core.http.basePath.get(), {
+ page: 'jobs',
+ pageState: {
+ jobId: 'high_mean_response_time',
+ },
+ });
+
  return (
  <EuiCallOut
  title={i18n.translate(
@@ -28,11 +39,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

@@ -11,16 +11,14 @@ import { MLLink } from './MLLink';
 
 test('MLLink produces the correct URL', async () => {
  const href = await getRenderedHref(
- () => (
- <MLLink path="/some/path" query={{ ml: { jobIds: ['something'] } }} />
- ),
+ () => <MLLink query={{ ml: { jobIds: ['something'] } }} />,
  {
  search:
  '?rangeFrom=now-5h&rangeTo=now-2h&refreshPaused=true&refreshInterval=0',
  } as Location
  );
 
  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

@@ -6,11 +6,9 @@
 
 import { EuiLink } from '@elastic/eui';
 import React 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 { useMlHref, ML_PAGES } from '../../../../../../ml/public';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 
 interface MlRisonData {
  ml?: {
@@ -26,28 +24,41 @@ interface Props {
 }
 
 export function MLLink({ children, path = '', query = {}, external }: Props) {
- const { core } = useApmPluginContext();
- const location = useLocation();
+ const {
+ core,
+ plugins: { ml },
+ } = useApmPluginContext();
 
- const risonQuery: MlRisonData & TimepickerRisonData = getTimepickerRisonData(
- location.search
- );
-
- if (query.ml) {
- risonQuery.ml = query.ml;
+ let jobIds: string[] = [];
+ if (query.ml?.jobIds) {
+ jobIds = query.ml.jobIds;
  }
+ const { urlParams } = useUrlParams();
+ const { rangeFrom, rangeTo, refreshInterval, refreshPaused } = urlParams;
 
- const href = url.format({
- pathname: core.http.basePath.prepend('/app/ml'),
- hash: `${path}?_g=${rison.encode(
- risonQuery as RisonValue
- )}&mlManagement=${rison.encode({ groupIds: ['apm'] })}`,
+ // default to link to ML Anomaly Detection jobs management page
+ const mlADLink = useMlHref(ml, core.http.basePath.get(), {
+ page: ML_PAGES.ANOMALY_DETECTION_JOBS_MANAGE,
+ pageState: {
+ jobId: jobIds,
+ groupIds: ['apm'],
+ globalState: {
+ time:
+ rangeFrom !== undefined && rangeTo !== undefined
+ ? { from: rangeFrom, to: rangeTo }
+ : undefined,
+ refreshInterval:
+ refreshPaused !== undefined && refreshInterval !== undefined
+ ? { pause: refreshPaused, value: refreshInterval }
+ : undefined,
+ },
+ },
  });
 
  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,9 @@
  * 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 { useApmPluginContext } from '../../../../hooks/useApmPluginContext';
-import { getTimepickerRisonData } from '../rison_helpers';
+import { useMlHref } from '../../../../../../ml/public';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 
 export function useTimeSeriesExplorerHref({
  jobId,
@@ -20,41 +17,38 @@ export function useTimeSeriesExplorerHref({
  serviceName?: string;
  transactionType?: string;
 }) {
- const { core } = useApmPluginContext();
- const location = useLocation();
- const { time, refreshInterval } = getTimepickerRisonData(location.search);
+ // default to link to ML Anomaly Detection jobs management page
+ const {
+ core,
+ plugins: { ml },
+ } = useApmPluginContext();
+ const { urlParams } = useUrlParams();
+ const { rangeFrom, rangeTo, refreshInterval, refreshPaused } = urlParams;
 
- const search = querystring.stringify(
- {
- _g: rison.encode({
- ml: { jobIds: [jobId] },
- time,
- refreshInterval,
- }),
+ const timeRange =
+ rangeFrom !== undefined && rangeTo !== undefined
+ ? { from: rangeFrom, to: rangeTo }
+ : undefined;
+ const mlAnomalyDetectionHref = useMlHref(ml, core.http.basePath.get(), {
+ page: 'timeseriesexplorer',
+ pageState: {
+ jobIds: [jobId],
+ timeRange,
+ refreshInterval:
+ refreshPaused !== undefined && refreshInterval !== undefined
+ ? { pause: refreshPaused, value: refreshInterval }
+ : undefined,
+ zoom: timeRange,
  ...(serviceName && transactionType
  ? {
- _a: rison.encode({
- mlTimeSeriesExplorer: {
- entities: {
- 'service.name': serviceName,
- 'transaction.type': transactionType,
- },
- },
- }),
+ entities: {
+ 'service.name': serviceName,
+ 'transaction.type': transactionType,
+ },
  }
- : null),
+ : {}),
  },
- undefined,
- undefined,
- {
- encodeURIComponent(str: string) {
- return str;
- },
- }
- );
-
- return url.format({
- pathname: core.http.basePath.prepend('/app/ml'),
- hash: url.format({ pathname: '/timeseriesexplorer', search }),
  });
+
+ return mlAnomalyDetectionHref;
 }

x-pack/plugins/apm/public/context/ApmPluginContext/MockApmPluginContext.tsx

@@ -9,6 +9,7 @@ import { ApmPluginContext, ApmPluginContextValue } from '.';
 import { ConfigSchema } from '../..';
 import { UI_SETTINGS } from '../../../../../../src/plugins/data/common';
 import { createCallApmApi } from '../../services/rest/createCallApmApi';
+import { MlUrlGenerator } from '../../../../ml/public';
 
 const uiSettings: Record<string, unknown> = {
  [UI_SETTINGS.TIMEPICKER_QUICK_RANGES]: [
@@ -54,6 +55,7 @@ const mockCore = {
  http: {
  basePath: {
  prepend: (path: string) => `/basepath${path}`,
+ get: () => `/basepath`,
  },
  },
  i18n: {
@@ -78,10 +80,18 @@ const mockConfig: ConfigSchema = {
  },
 };
 
+const mockPlugin = {
+ ml: {
+ urlGenerator: new MlUrlGenerator({
+ appBasePath: '/app/ml',
+ useHash: false,
+ }),
+ },
+};
 export const mockApmPluginContextValue = {
  config: mockConfig,
  core: mockCore,
- plugins: {},
+ plugins: mockPlugin,
 };
 
 export function MockApmPluginContextWrapper({

x-pack/plugins/apm/public/plugin.ts

@@ -36,12 +36,14 @@ import { featureCatalogueEntry } from './featureCatalogueEntry';
 import { toggleAppLinkInNav } from './toggleAppLinkInNav';
 import { EmbeddableStart } from '../../../../src/plugins/embeddable/public';
 import { registerApmAlerts } from './components/alerting/register_apm_alerts';
+import { MlPluginSetup, MlPluginStart } from '../../ml/public';
 
 export type ApmPluginSetup = void;
 export type ApmPluginStart = void;
 
 export interface ApmPluginSetupDeps {
  alerts?: AlertingPluginPublicSetup;
+ ml?: MlPluginSetup;
  data: DataPublicPluginSetup;
  features: FeaturesPluginSetup;
  home?: HomePublicPluginSetup;
@@ -52,6 +54,7 @@ export interface ApmPluginSetupDeps {
 
 export interface ApmPluginStartDeps {
  alerts?: AlertingPluginPublicStart;
+ ml?: MlPluginStart;
  data: DataPublicPluginStart;
  home: void;
  licensing: void;