From 898181893d6ef2748f428de6f87431f05c5c6e6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?=
Date: Fri, 7 Sep 2018 16:33:29 +0200
Subject: [PATCH] [APM] Fix ML links
---
.../DynamicBaseline/Flyout.js | 26 ++++++++---
.../app/TransactionOverview/view.js | 16 +++----
.../__test__/__snapshots__/url.test.js.snap | 21 +++++++++
.../apm/public/utils/__test__/url.test.js | 44 +++++++++++++------
x-pack/plugins/apm/public/utils/url.js | 23 ++++++++--
5 files changed, 96 insertions(+), 34 deletions(-)
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js b/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js
index 1231e60e5bd80f7..51399b169f311cf 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/Flyout.js
@@ -21,7 +21,7 @@ import {
EuiSpacer,
EuiBetaBadge
} from '@elastic/eui';
-import { getMlJobUrl, KibanaLink } from '../../../../utils/url';
+import { KibanaLink, ViewMLJob } from '../../../../utils/url';
export default class DynamicBaselineFlyout extends Component {
state = {
@@ -65,9 +65,13 @@ export default class DynamicBaselineFlyout extends Component {
There's already a job running for anomaly detection on{' '}
{serviceName} ({transactionType}
).{' '}
-
+
View existing job
-
+
)
});
@@ -82,9 +86,13 @@ export default class DynamicBaselineFlyout extends Component {
The analysis is now running for {serviceName} ({transactionType}
). It might take a while before results are added to the response
times graph.{' '}
-
+
View job
-
+
)
});
@@ -125,9 +133,13 @@ export default class DynamicBaselineFlyout extends Component {
There is currently a job running for {serviceName} (
{transactionType}
).{' '}
-
+
View existing job
-
+
diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js b/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
index b250afe8379653b..470d1988113bf48 100644
--- a/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
+++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/view.js
@@ -13,7 +13,7 @@ import { get } from 'lodash';
import { HeaderContainer, HeaderMedium } from '../../shared/UIComponents';
import TabNavigation from '../../shared/TabNavigation';
import Charts from '../../shared/charts/TransactionCharts';
-import { getMlJobUrl, KibanaLink } from '../../../utils/url';
+import { ViewMLJob } from '../../../utils/url';
import List from './List';
import { units, px, fontSizes } from '../../../style/variables';
import { OverviewChartsRequest } from '../../../store/reactReduxRequest/overviewCharts';
@@ -75,15 +75,13 @@ class TransactionOverview extends Component {
Machine Learning:{' '}
-
- View Job
-
+ View job
+
) : null;
diff --git a/x-pack/plugins/apm/public/utils/__test__/__snapshots__/url.test.js.snap b/x-pack/plugins/apm/public/utils/__test__/__snapshots__/url.test.js.snap
index 2252f7f40ce6b67..6430ae0cc5804ee 100644
--- a/x-pack/plugins/apm/public/utils/__test__/__snapshots__/url.test.js.snap
+++ b/x-pack/plugins/apm/public/utils/__test__/__snapshots__/url.test.js.snap
@@ -18,3 +18,24 @@ exports[`RelativeLinkComponent should render correct markup 1`] = `
Go to Discover
`;
+
+exports[`ViewMLJob should render component 1`] = `
+
+ View Job
+
+`;
diff --git a/x-pack/plugins/apm/public/utils/__test__/url.test.js b/x-pack/plugins/apm/public/utils/__test__/url.test.js
index 28a8a6bbd469f83..6980d2c3b1620c6 100644
--- a/x-pack/plugins/apm/public/utils/__test__/url.test.js
+++ b/x-pack/plugins/apm/public/utils/__test__/url.test.js
@@ -6,9 +6,8 @@
import React from 'react';
import { Router } from 'react-router-dom';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
import createHistory from 'history/createMemoryHistory';
-
import {
toQuery,
fromQuery,
@@ -16,7 +15,7 @@ import {
RelativeLinkComponent,
encodeKibanaSearchParams,
decodeKibanaSearchParams,
- getMlJobUrl
+ ViewMLJob
} from '../url';
import { toJson } from '../testHelpers';
@@ -221,22 +220,39 @@ describe('KibanaLinkComponent', () => {
});
});
-describe('getMlJobUrl', () => {
- it('should have correct url', () => {
- const serviceName = 'myServiceName';
- const transactionType = 'myTransactionType';
+describe('ViewMLJob', () => {
+ it('should render component', () => {
const location = { search: '' };
- expect(getMlJobUrl(serviceName, transactionType, location)).toBe(
- '/app/ml#/timeseriesexplorer/?_g=(ml:(jobIds:!(myServiceName-myTransactionType-high_mean_response_time)))&_a=!n'
+ const wrapper = shallow(
+
);
+
+ expect(toJson(wrapper)).toMatchSnapshot();
});
- it('should not contain basePath', () => {
- const serviceName = 'myServiceName';
- const transactionType = 'myTransactionType';
+ it('should have correct path props', () => {
const location = { search: '' };
- expect(getMlJobUrl(serviceName, transactionType, location)).toBe(
- '/app/ml#/timeseriesexplorer/?_g=(ml:(jobIds:!(myServiceName-myTransactionType-high_mean_response_time)))&_a=!n'
+ const wrapper = shallow(
+
);
+
+ expect(wrapper.prop('pathname')).toBe('/app/ml');
+ expect(wrapper.prop('hash')).toBe('/timeseriesexplorer');
+ expect(wrapper.prop('query')).toEqual({
+ _a: null,
+ _g: {
+ ml: {
+ jobIds: ['myServiceName-myTransactionType-high_mean_response_time']
+ }
+ }
+ });
});
});
diff --git a/x-pack/plugins/apm/public/utils/url.js b/x-pack/plugins/apm/public/utils/url.js
index 5a9f21c3b2560cd..8b1ab93bffe60b4 100644
--- a/x-pack/plugins/apm/public/utils/url.js
+++ b/x-pack/plugins/apm/public/utils/url.js
@@ -16,9 +16,17 @@ import { EuiLink } from '@elastic/eui';
import createHistory from 'history/createHashHistory';
import chrome from 'ui/chrome';
-export function getMlJobUrl(serviceName, transactionType, location) {
+export function ViewMLJob({
+ serviceName,
+ transactionType,
+ location,
+ children = 'View Job'
+}) {
const { _g, _a } = decodeKibanaSearchParams(location.search);
- const nextSearch = encodeKibanaSearchParams({
+
+ const pathname = '/app/ml';
+ const hash = '/timeseriesexplorer';
+ const query = {
_g: {
..._g,
ml: {
@@ -26,9 +34,16 @@ export function getMlJobUrl(serviceName, transactionType, location) {
}
},
_a
- });
+ };
- return `/app/ml#/timeseriesexplorer/?${nextSearch}`;
+ return (
+
+ );
}
export function toQuery(search) {