[APM] Fix broken link to ML when time range is not set

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx

@@ -21,7 +21,7 @@ import {
 import { useTheme } from '../../../../hooks/use_theme';
 import { fontSize, px } from '../../../../style/variables';
 import { asInteger, asDuration } from '../../../../../common/utils/formatters';
-import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
+import { MLSingleMetricLink } from '../../../shared/Links/MachineLearningLinks/MLSingleMetricLink';
 import { popoverWidth } from '../cytoscape_options';
 import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
 import {
@@ -108,14 +108,14 @@ export function AnomalyDetection({ serviceName, serviceAnomalyStats }: Props) {
       )}
       {mlJobId && (
         <ContentLine>
-          <MLJobLink
+          <MLSingleMetricLink
             external
             jobId={mlJobId}
             serviceName={serviceName}
             transactionType={transactionType}
           >
             {ANOMALY_DETECTION_LINK}
-          </MLJobLink>
+          </MLSingleMetricLink>
         </ContentLine>
       )}
     </>

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

@@ -19,8 +19,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
-import { MLJobLink } from '../../../shared/Links/MachineLearningLinks/MLJobLink';
-import { MLLink } from '../../../shared/Links/MachineLearningLinks/MLLink';
+import { MLSingleMetricLink } from '../../../shared/Links/MachineLearningLinks/MLSingleMetricLink';
+import { MLManageJobsLink } from '../../../shared/Links/MachineLearningLinks/MLManageJobsLink';
 import { getEnvironmentLabel } from '../../../../../common/environment_filter_values';
 import { LegacyJobsCallout } from './legacy_jobs_callout';
 import { AnomalyDetectionApiResponse } from './index';
@@ -44,14 +44,14 @@ const columns: Array<ITableColumn<Jobs[0]>> = [
       { defaultMessage: 'Action' }
     ),
     render: (jobId: string) => (
-      <MLJobLink jobId={jobId}>
+      <MLSingleMetricLink jobId={jobId}>
         {i18n.translate(
           'xpack.apm.settings.anomalyDetection.jobList.mlJobLinkText',
           {
             defaultMessage: 'View job in ML',
           }
         )}
-      </MLJobLink>
+      </MLSingleMetricLink>
     ),
   },
 ];
@@ -97,14 +97,14 @@ export function JobsList({ data, status, onAddEnvironments }: Props) {
           defaultMessage="To add anomaly detection to a new environment, create a machine learning job. Existing machine learning jobs can be managed in {mlJobsLink}."
           values={{
             mlJobsLink: (
-              <MLLink path="/jobs">
+              <MLManageJobsLink>
                 {i18n.translate(
                   'xpack.apm.settings.anomalyDetection.jobList.mlDescriptionText.mlJobsLinkText',
                   {
                     defaultMessage: 'Machine Learning',
                   }
                 )}
-              </MLLink>
+              </MLManageJobsLink>
             ),
           }}
         />

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

@@ -0,0 +1,21 @@
+/*
+ * 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 { Location } from 'history';
+import React from 'react';
+import { getRenderedHref } from '../../../../utils/testHelpers';
+import { MLManageJobsLink } from './MLManageJobsLink';
+
+test('MLManageJobsLink', async () => {
+  const href = await getRenderedHref(() => <MLManageJobsLink />, {
+    search:
+      '?rangeFrom=now-5h&rangeTo=now-2h&refreshPaused=true&refreshInterval=0',
+  } as Location);
+
+  expect(href).toMatchInlineSnapshot(
+    `"/app/ml/jobs?_a=(jobs:(queryText:'groups:(apm)'))&_g=(refreshInterval:(pause:!t,value:0),time:(from:now-5h,to:now-2h))"`
+  );
+});

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

@@ -6,51 +6,44 @@
 
 import { EuiLink } from '@elastic/eui';
 import React from 'react';
+import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useMlHref, ML_PAGES } from '../../../../../../ml/public';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
-
-interface MlRisonData {
-  ml?: {
-    jobIds: string[];
-  };
-}
+import { TimePickerRefreshInterval } from '../../DatePicker/typings';
 
 interface Props {
-  query?: MlRisonData;
-  path?: string;
   children?: React.ReactNode;
   external?: boolean;
 }
 
-export function MLLink({ children, path = '', query = {}, external }: Props) {
+export function MLManageJobsLink({ children, external }: Props) {
   const {
     core,
     plugins: { ml },
   } = useApmPluginContext();
 
-  let jobIds: string[] = [];
-  if (query.ml?.jobIds) {
-    jobIds = query.ml.jobIds;
-  }
   const { urlParams } = useUrlParams();
-  const { rangeFrom, rangeTo, refreshInterval, refreshPaused } = urlParams;
 
-  // default to link to ML Anomaly Detection jobs management page
+  const timePickerRefreshIntervalDefaults = core.uiSettings.get<TimePickerRefreshInterval>(
+    UI_SETTINGS.TIMEPICKER_REFRESH_INTERVAL_DEFAULTS
+  );
+
+  const {
+    // hardcoding a custom default of 1 hour since the default kibana timerange of 15 minutes is shorter than the ML interval
+    rangeFrom = 'now-1h',
+    rangeTo = 'now',
+    refreshInterval = timePickerRefreshIntervalDefaults.value,
+    refreshPaused = timePickerRefreshIntervalDefaults.pause,
+  } = urlParams;
+
   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,
+        time: { from: rangeFrom, to: rangeTo },
+        refreshInterval: { pause: refreshPaused, value: refreshInterval },
       },
     },
   });

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

@@ -7,13 +7,13 @@
 import { Location } from 'history';
 import React from 'react';
 import { getRenderedHref } from '../../../../utils/testHelpers';
-import { MLJobLink } from './MLJobLink';
+import { MLSingleMetricLink } from './MLSingleMetricLink';
 
-describe('MLJobLink', () => {
+describe('MLSingleMetricLink', () => {
   it('should produce the correct URL with jobId', async () => {
     const href = await getRenderedHref(
       () => (
-        <MLJobLink jobId="myservicename-mytransactiontype-high_mean_response_time" />
+        <MLSingleMetricLink jobId="myservicename-mytransactiontype-high_mean_response_time" />
       ),
       {
         search:
@@ -28,7 +28,7 @@ describe('MLJobLink', () => {
   it('should produce the correct URL with jobId, serviceName, and transactionType', async () => {
     const href = await getRenderedHref(
       () => (
-        <MLJobLink
+        <MLSingleMetricLink
           jobId="myservicename-mytransactiontype-high_mean_response_time"
           serviceName="opbeans-test"
           transactionType="request"
@@ -48,7 +48,7 @@ describe('MLJobLink', () => {
   it('correctly encodes time range values', async () => {
     const href = await getRenderedHref(
       () => (
-        <MLJobLink
+        <MLSingleMetricLink
           jobId="apm-production-485b-high_mean_transaction_duration"
           serviceName="opbeans-java"
           transactionType="request"

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

@@ -0,0 +1,90 @@
+/*
+ * 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 React, { ReactNode } from 'react';
+import { EuiLink } from '@elastic/eui';
+import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { useMlHref, ML_PAGES } from '../../../../../../ml/public';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { TimePickerRefreshInterval } from '../../DatePicker/typings';
+
+interface Props {
+  children?: ReactNode;
+  jobId: string;
+  external?: boolean;
+  serviceName?: string;
+  transactionType?: string;
+}
+
+export function MLSingleMetricLink({
+  jobId,
+  serviceName,
+  transactionType,
+  external,
+  children,
+}: Props) {
+  const href = useSingleMetricHref({ jobId, serviceName, transactionType });
+
+  return (
+    <EuiLink
+      children={children}
+      href={href}
+      external={external}
+      target={external ? '_blank' : undefined}
+    />
+  );
+}
+
+export function useSingleMetricHref({
+  jobId,
+  serviceName,
+  transactionType,
+}: {
+  jobId: string;
+  serviceName?: string;
+  transactionType?: string;
+}) {
+  const {
+    core,
+    plugins: { ml },
+  } = useApmPluginContext();
+  const { urlParams } = useUrlParams();
+
+  const timePickerRefreshIntervalDefaults = core.uiSettings.get<TimePickerRefreshInterval>(
+    UI_SETTINGS.TIMEPICKER_REFRESH_INTERVAL_DEFAULTS
+  );
+
+  const {
+    // hardcoding a custom default of 1 hour since the default kibana timerange of 15 minutes is shorter than the ML interval
+    rangeFrom = 'now-1h',
+    rangeTo = 'now',
+    refreshInterval = timePickerRefreshIntervalDefaults.value,
+    refreshPaused = timePickerRefreshIntervalDefaults.pause,
+  } = urlParams;
+
+  const entities =
+    serviceName && transactionType
+      ? {
+          entities: {
+            'service.name': serviceName,
+            'transaction.type': transactionType,
+          },
+        }
+      : {};
+
+  const href = useMlHref(ml, core.http.basePath.get(), {
+    page: ML_PAGES.SINGLE_METRIC_VIEWER,
+    pageState: {
+      jobIds: [jobId],
+      timeRange: { from: rangeFrom, to: rangeTo },
+      refreshInterval: { pause: refreshPaused, value: refreshInterval },
+      ...entities,
+    },
+  });
+
+  return href;
+}