From e7f8ad6e4e4c3a70551a8935fd92e347824d56e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= Date: Sat, 8 Sep 2018 14:49:52 +0200 Subject: [PATCH] [APM] Fix ML links (#22820) --- .../__snapshots__/WatcherButton.test.js.snap | 1 - .../DynamicBaseline/Flyout.js | 39 ++++++++++------ .../__snapshots__/Button.test.js.snap | 1 - .../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 ++++++++-- 7 files changed, 103 insertions(+), 42 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/__test__/__snapshots__/WatcherButton.test.js.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/__test__/__snapshots__/WatcherButton.test.js.snap index 8918566a7cead1..120f9164783d19 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/__test__/__snapshots__/WatcherButton.test.js.snap +++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/__test__/__snapshots__/WatcherButton.test.js.snap @@ -17,7 +17,6 @@ exports[`WatcherButton should render initial state 1`] = ` } closePopover={[Function]} - hasArrow={true} isOpen={false} ownFocus={false} panelPaddingSize="none" 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 eb97dd9ad51211..17029fd29445e6 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 = { @@ -68,10 +68,15 @@ export default class DynamicBaselineFlyout extends Component { text: (

There's already a job running for anomaly detection on{' '} - {serviceName} ({transactionType}).{' '} - + {serviceName} ({transactionType} + ).{' '} + View existing job - +

) } @@ -89,12 +94,16 @@ export default class DynamicBaselineFlyout extends Component { color: 'success', text: (

- The analysis is now running for {serviceName} ({transactionType}). - It might take a while before results are added to the response + The analysis is now running for {serviceName} ({transactionType} + ). It might take a while before results are added to the response times graph.{' '} - + View job - +

) } @@ -140,12 +149,16 @@ export default class DynamicBaselineFlyout extends Component { iconType="check" >

- There is currently a job running for {serviceName} ({ - transactionType - }).{' '} - + There is currently a job running for {serviceName} ( + {transactionType} + ).{' '} + View existing job - +

diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/__jest__/__snapshots__/Button.test.js.snap b/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/__jest__/__snapshots__/Button.test.js.snap index 6e57f557d1bd44..dd8f7b0e4f4b61 100644 --- a/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/__jest__/__snapshots__/Button.test.js.snap +++ b/x-pack/plugins/apm/public/components/app/TransactionOverview/DynamicBaseline/__jest__/__snapshots__/Button.test.js.snap @@ -17,7 +17,6 @@ exports[`MLButton should render initial state 1`] = ` } closePopover={[Function]} - hasArrow={true} isOpen={false} ownFocus={false} panelPaddingSize="none" 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 b250afe8379653..470d1988113bf4 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 2252f7f40ce6b6..6430ae0cc5804e 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 28a8a6bbd469f8..6980d2c3b1620c 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 d17360b70e7428..82158b3ef4d769 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) {