Skip to content

Commit

Permalink
[APM] Fix broken link to ML when time range is not set (#85976) (#86227)
Browse files Browse the repository at this point in the history
Co-authored-by: Kibana Machine <[email protected]>
  • Loading branch information
sorenlouv and kibanamachine authored Dec 22, 2020
1 parent 6087f1e commit 2d361f0
Show file tree
Hide file tree
Showing 10 changed files with 145 additions and 158 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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>
)}
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
),
},
];
Expand Down Expand Up @@ -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>
),
}}
/>
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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))"`
);
});
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
},
},
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 2d361f0

Please sign in to comment.