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}
           ).{' '}
-          <a href={getMlJobUrl(serviceName, transactionType, location)}>
+          <ViewMLJob
+            serviceName={serviceName}
+            transactionType={transactionType}
+            location={location}
+          >
             View existing job
-          </a>
+          </ViewMLJob>
         </p>
       )
     });
@@ -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.{' '}
-          <a href={getMlJobUrl(serviceName, transactionType, location)}>
+          <ViewMLJob
+            serviceName={serviceName}
+            transactionType={transactionType}
+            location={location}
+          >
             View job
-          </a>
+          </ViewMLJob>
         </p>
       )
     });
@@ -125,9 +133,13 @@ export default class DynamicBaselineFlyout extends Component {
                   There is currently a job running for {serviceName} (
                   {transactionType}
                   ).{' '}
-                  <a href={getMlJobUrl(serviceName, transactionType, location)}>
+                  <ViewMLJob
+                    serviceName={serviceName}
+                    transactionType={transactionType}
+                    location={location}
+                  >
                     View existing job
-                  </a>
+                  </ViewMLJob>
                 </p>
               </EuiCallOut>
               <EuiSpacer size="m" />
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 {
           <EuiIconTip content="The stream around the average response time shows the expected bounds. An annotation is shown for anomaly scores &gt;= 75." />
           <MLText>
             Machine Learning:{' '}
-            <KibanaLink
-              pathname={getMlJobUrl(
-                serviceName,
-                transactionType,
-                this.props.location
-              )}
+            <ViewMLJob
+              serviceName={serviceName}
+              transactionType={transactionType}
+              location={this.props.location}
             >
-              View Job
-            </KibanaLink>
+              View job
+            </ViewMLJob>
           </MLText>
         </MLTipContainer>
       ) : 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
 </a>
 `;
+
+exports[`ViewMLJob should render component 1`] = `
+<Connect(KibanaLinkComponent)
+  hash="/timeseriesexplorer"
+  pathname="/app/ml"
+  query={
+    Object {
+      "_a": null,
+      "_g": Object {
+        "ml": Object {
+          "jobIds": Array [
+            "myServiceName-myTransactionType-high_mean_response_time",
+          ],
+        },
+      },
+    }
+  }
+>
+  View Job
+</Connect(KibanaLinkComponent)>
+`;
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(
+      <ViewMLJob
+        serviceName="myServiceName"
+        transactionType="myTransactionType"
+        location={location}
+      />
     );
+
+    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(
+      <ViewMLJob
+        serviceName="myServiceName"
+        transactionType="myTransactionType"
+        location={location}
+      />
     );
+
+    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 (
+    <KibanaLink
+      pathname={pathname}
+      hash={hash}
+      query={query}
+      children={children}
+    />
+  );
 }
 
 export function toQuery(search) {