From b6093548df3ae9969c709baf3b21c348ca416519 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Tue, 23 Jul 2019 15:45:57 +0200
Subject: [PATCH] [ML] Use NavigationMenu without angularjs wrapper. (#41343)
 (#41764)

Follow up to #40830 and #41054 in preparation for single metric viewer migration.
The previous PR introduced the navigation menu as a React component. This PR moves dependencies down from the angularjs wrapper directive directly to the React component so the component can also be used stand-alone without the angularjs wrapper.
For simple angularjs based HTML templates this stand-alone usage is also part of this PR. Unfortunately the PR turned out to be quite big due to: Most page react components had to be wrapped in another <Fragment> to allow the addition of <NavigationMenu> thus leading to large diffs for the components. All component code inside the <Fragment> was not touched though.
---
 .../ml/public/access_denied/index.html        |    2 +-
 .../navigation_menu/navigation_menu.tsx       |   59 +-
 ...navigation_menu_react_wrapper_directive.js |   43 +-
 .../navigation_menu/top_nav/top_nav.tsx       |   43 +-
 .../pages/access_denied/directive.tsx         |   16 +-
 .../pages/access_denied/page.test.tsx         |    4 +
 .../data_frame/pages/access_denied/page.tsx   |  131 +-
 .../data_frame/pages/access_denied/route.ts   |    2 +-
 .../pages/data_frame_new_pivot/directive.tsx  |   11 +-
 .../pages/data_frame_new_pivot/page.tsx       |   72 +-
 .../pages/data_frame_new_pivot/route.ts       |    2 +-
 .../__snapshots__/page.test.tsx.snap          |  113 +-
 .../pages/transform_management/directive.tsx  |   13 +-
 .../pages/transform_management/page.tsx       |   96 +-
 .../pages/transform_management/route.ts       |    2 +-
 .../public/datavisualizer/datavisualizer.html |    2 +-
 .../selector/datavisualizer_selector.js       |  249 ++-
 .../datavisualizer/selector/directive.js      |    1 -
 .../plugins/ml/public/explorer/explorer.html  |    2 +-
 .../file_datavisualizer.js                    |   11 +-
 .../file_datavisualizer_directive.js          |    1 -
 .../ml/public/jobs/jobs_list/directive.js     |   10 +-
 .../plugins/ml/public/jobs/jobs_list/jobs.js  |   10 +-
 .../public/jobs/new_job/advanced/new_job.html |    2 +-
 .../multi_metric/create_job/create_job.html   |    2 +-
 .../population/create_job/create_job.html     |    2 +-
 .../recognize/create_job/create_job.html      |    2 +-
 .../single_metric/create_job/create_job.html  |    2 +-
 .../index_or_search/index_or_search.html      |    2 +-
 .../wizard/steps/job_type/job_type.html       |    2 +-
 .../__snapshots__/settings.test.js.snap       |   76 -
 .../__snapshots__/new_calendar.test.js.snap   |   75 +-
 .../settings/calendars/edit/directive.js      |   11 +-
 .../settings/calendars/edit/new_calendar.js   |   81 +-
 .../calendars/edit/new_calendar.test.js       |   11 +-
 .../__snapshots__/calendars_list.test.js.snap |  133 +-
 .../settings/calendars/list/calendars_list.js |   54 +-
 .../calendars/list/calendars_list.test.js     |   19 +-
 .../settings/calendars/list/directive.js      |   34 +-
 .../edit_filter_list.test.js.snap             | 1614 +++++++++--------
 .../settings/filter_lists/edit/directive.js   |   13 +-
 .../filter_lists/edit/edit_filter_list.js     |  134 +-
 .../edit/edit_filter_list.test.js             |   26 +-
 .../__snapshots__/filter_lists.test.js.snap   |   75 +-
 .../settings/filter_lists/list/directive.js   |   13 +-
 .../filter_lists/list/filter_lists.js         |   49 +-
 .../filter_lists/list/filter_lists.test.js    |   29 +-
 .../plugins/ml/public/settings/settings.js    |  110 +-
 .../ml/public/settings/settings.test.js       |   65 +-
 .../ml/public/settings/settings_directive.js  |   13 +-
 .../timeseriesexplorer.html                   |    2 +-
 .../plugins/ml/public/util/context_utils.tsx  |   66 +
 52 files changed, 1874 insertions(+), 1738 deletions(-)
 delete mode 100644 x-pack/legacy/plugins/ml/public/settings/__snapshots__/settings.test.js.snap
 create mode 100644 x-pack/legacy/plugins/ml/public/util/context_utils.tsx

diff --git a/x-pack/legacy/plugins/ml/public/access_denied/index.html b/x-pack/legacy/plugins/ml/public/access_denied/index.html
index 33a31c655366d..e085e089b2728 100644
--- a/x-pack/legacy/plugins/ml/public/access_denied/index.html
+++ b/x-pack/legacy/plugins/ml/public/access_denied/index.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="access-denied"></ml-nav-menu>
+<ml-nav-menu name="access-denied" />
 <div class="col-md-12">
   <div class="euiSpacer euiSpacer--m"></div>
   <div class="euiCallOut euiCallOut--danger">
diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu.tsx
index 752b0ec4640aa..dfbc261441154 100644
--- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu.tsx
+++ b/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu.tsx
@@ -6,39 +6,40 @@
 
 import React, { Fragment, FC } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+// @ts-ignore
+import { isFullLicense } from '../../license/check_license';
+
 import { TopNav } from './top_nav';
 import { Tabs } from './tabs';
 
+const tabSupport = [
+  'jobs',
+  'settings',
+  'data_frames',
+  'datavisualizer',
+  'filedatavisualizer',
+  'timeseriesexplorer',
+  'access-denied',
+  'explorer',
+];
+
 interface Props {
-  dateFormat: string;
-  disableLinks: boolean;
-  forceRefresh: () => void;
-  showTabs: boolean;
   tabId: string;
-  timeHistory: any;
-  timefilter: any;
 }
 
-export const NavigationMenu: FC<Props> = ({
-  dateFormat,
-  disableLinks,
-  forceRefresh,
-  showTabs,
-  tabId,
-  timeHistory,
-  timefilter,
-}) => (
-  <Fragment>
-    <EuiFlexGroup justifyContent="flexEnd" gutterSize="xs">
-      <EuiFlexItem grow={false}>
-        <TopNav
-          dateFormat={dateFormat}
-          timeHistory={timeHistory}
-          timefilter={timefilter}
-          forceRefresh={forceRefresh}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-    {showTabs && <Tabs tabId={tabId} disableLinks={disableLinks} />}
-  </Fragment>
-);
+export const NavigationMenu: FC<Props> = ({ tabId }) => {
+  const disableLinks = isFullLicense() === false;
+  const showTabs = tabSupport.includes(tabId);
+
+  return (
+    <Fragment>
+      <EuiFlexGroup justifyContent="flexEnd" gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <TopNav />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {showTabs && <Tabs tabId={tabId} disableLinks={disableLinks} />}
+    </Fragment>
+  );
+};
diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js b/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js
index b9853967c64db..7c8764c45b964 100644
--- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js
+++ b/x-pack/legacy/plugins/ml/public/components/navigation_menu/navigation_menu_react_wrapper_directive.js
@@ -7,47 +7,28 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { NavigationMenu } from './navigation_menu';
-import { isFullLicense } from '../../license/check_license';
-import { timeHistory } from 'ui/timefilter/time_history';
+
 import { uiModules } from 'ui/modules';
-import { timefilter } from 'ui/timefilter';
 const module = uiModules.get('apps/ml');
-import { mlTimefilterRefresh$ } from '../../services/timefilter_refresh_service';
 
 import 'ui/directives/kbn_href';
+import chrome from 'ui/chrome';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 
+import { NavigationMenuContext } from '../../util/context_utils';
+
+import { NavigationMenu } from './navigation_menu';
 
-module.directive('mlNavMenu', function (config) {
+module.directive('mlNavMenu', function () {
   return {
     restrict: 'E',
     transclude: true,
     link: function (scope, element, attrs) {
-      const { name } = attrs;
-      let showTabs = false;
-
-      if (name === 'jobs' ||
-        name === 'settings' ||
-        name === 'data_frames' ||
-        name === 'datavisualizer' ||
-        name === 'filedatavisualizer' ||
-        name === 'timeseriesexplorer' ||
-        name === 'access-denied' ||
-        name === 'explorer') {
-        showTabs = true;
-      }
-
-      const props = {
-        dateFormat: config.get('dateFormat'),
-        disableLinks: (isFullLicense() === false),
-        showTabs,
-        tabId: name,
-        timeHistory,
-        timefilter,
-        forceRefresh: () => mlTimefilterRefresh$.next()
-      };
-
-      ReactDOM.render(React.createElement(NavigationMenu, props),
+      ReactDOM.render(
+        <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+          <NavigationMenu tabId={attrs.name} />
+        </NavigationMenuContext.Provider>,
         element[0]
       );
 
diff --git a/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx b/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx
index 7da5668f08129..54f24d0765f5c 100644
--- a/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx
+++ b/x-pack/legacy/plugins/ml/public/components/navigation_menu/top_nav/top_nav.tsx
@@ -4,36 +4,37 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, Fragment, useState, useEffect } from 'react';
+import React, { FC, Fragment, useContext, useState, useEffect } from 'react';
 import { EuiSuperDatePicker } from '@elastic/eui';
-import { TimeHistory, TimeRange } from 'src/legacy/ui/public/timefilter/time_history';
-import { Timefilter } from 'ui/timefilter';
+import { TimeHistory, TimeRange } from 'ui/timefilter/time_history';
 
-interface Props {
-  dateFormat: string;
-  forceRefresh: () => void;
-  timeHistory: TimeHistory;
-  timefilter: Timefilter;
-}
+import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
+import { NavigationMenuContext } from '../../../util/context_utils';
 
 interface Duration {
   start: string;
   end: string;
 }
 
-function getRecentlyUsedRanges(timeHistory: TimeHistory): Duration[] {
-  return timeHistory.get().map(({ from, to }: TimeRange) => {
-    return {
-      start: from,
-      end: to,
-    };
-  });
+function getRecentlyUsedRangesFactory(timeHistory: TimeHistory) {
+  return function(): Duration[] {
+    return timeHistory.get().map(({ from, to }: TimeRange) => {
+      return {
+        start: from,
+        end: to,
+      };
+    });
+  };
 }
 
-export const TopNav: FC<Props> = ({ dateFormat, forceRefresh, timeHistory, timefilter }) => {
+export const TopNav: FC = () => {
+  const navigationMenuContext = useContext(NavigationMenuContext);
+  const timefilter = navigationMenuContext.timefilter;
+  const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(navigationMenuContext.timeHistory);
+
   const [refreshInterval, setRefreshInterval] = useState(timefilter.getRefreshInterval());
   const [time, setTime] = useState(timefilter.getTime());
-  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState(getRecentlyUsedRanges(timeHistory));
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState(getRecentlyUsedRanges());
   const [isAutoRefreshSelectorEnabled, setIsAutoRefreshSelectorEnabled] = useState(
     timefilter.isAutoRefreshSelectorEnabled
   );
@@ -41,6 +42,8 @@ export const TopNav: FC<Props> = ({ dateFormat, forceRefresh, timeHistory, timef
     timefilter.isTimeRangeSelectorEnabled
   );
 
+  const dateFormat = navigationMenuContext.chrome.getUiSettingsClient().get('dateFormat');
+
   useEffect(() => {
     timefilter.on('refreshIntervalUpdate', timefilterUpdateListener);
     timefilter.on('timeUpdate', timefilterUpdateListener);
@@ -70,7 +73,7 @@ export const TopNav: FC<Props> = ({ dateFormat, forceRefresh, timeHistory, timef
     // Update timefilter for controllers listening for changes
     timefilter.setTime(newTime);
     setTime(newTime);
-    setRecentlyUsedRanges(getRecentlyUsedRanges(timeHistory));
+    setRecentlyUsedRanges(getRecentlyUsedRanges());
   }
 
   function updateInterval({
@@ -101,7 +104,7 @@ export const TopNav: FC<Props> = ({ dateFormat, forceRefresh, timeHistory, timef
             isAutoRefreshOnly={!isTimeRangeSelectorEnabled}
             refreshInterval={refreshInterval.value}
             onTimeChange={updateFilter}
-            onRefresh={forceRefresh}
+            onRefresh={() => mlTimefilterRefresh$.next()}
             onRefreshChange={updateInterval}
             recentlyUsedRanges={recentlyUsedRanges}
             dateFormat={dateFormat}
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/directive.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/directive.tsx
index fd8b3bc480ec5..ba43564d1573b 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/directive.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/directive.tsx
@@ -14,8 +14,13 @@ import uiChrome from 'ui/chrome';
 const module = uiModules.get('apps/ml', ['react']);
 
 import { I18nContext } from 'ui/i18n';
+import chrome from 'ui/chrome';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 import { InjectorService } from '../../../../common/types/angular';
 
+import { NavigationMenuContext } from '../../../util/context_utils';
+
 import { Page } from './page';
 
 module.directive('mlDataFrameAccessDenied', ($injector: InjectorService) => {
@@ -34,9 +39,14 @@ module.directive('mlDataFrameAccessDenied', ($injector: InjectorService) => {
         kbnUrl.redirect('/data_frames');
       };
 
-      const props = { goToKibana, retry };
-
-      ReactDOM.render(<I18nContext>{React.createElement(Page, props)}</I18nContext>, element[0]);
+      ReactDOM.render(
+        <I18nContext>
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <Page goToKibana={goToKibana} retry={retry} />
+          </NavigationMenuContext.Provider>
+        </I18nContext>,
+        element[0]
+      );
 
       element.on('$destroy', () => {
         ReactDOM.unmountComponentAtNode(element[0]);
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.test.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.test.tsx
index d38cf18b4a78d..378600ac44e1a 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.test.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.test.tsx
@@ -12,6 +12,10 @@ import { I18nProvider } from '@kbn/i18n/react';
 
 import { Page } from './page';
 
+jest.mock('../../../components/navigation_menu/navigation_menu', () => ({
+  NavigationMenu: () => <div id="mockNavigationMenu" />,
+}));
+
 afterEach(cleanup);
 
 describe('Data Frame: Access denied <Page />', () => {
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.tsx
index fa41b5490b7cd..0966bb184afeb 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/page.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { SFC } from 'react';
+import React, { FC, Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -24,70 +24,75 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
+
 interface PageProps {
   goToKibana: () => void;
   retry: () => void;
 }
-export const Page: SFC<PageProps> = ({ goToKibana, retry }) => (
-  <EuiPage>
-    <EuiPageBody>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
-          <EuiTitle>
-            <h1>
-              <FormattedMessage
-                id="xpack.ml.dataframe.accessDeniedTitle"
-                defaultMessage="Access denied"
-              />
-            </h1>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>
-        <EuiSpacer size="m" />
-        <EuiCallOut
-          title={i18n.translate('xpack.ml.dataframe.noPermissionToAccessMLLabel', {
-            defaultMessage: 'You need permission to access Data Frames',
-          })}
-          color="danger"
-          iconType="cross"
-        >
-          <EuiText size="s">
-            <p>
-              <FormattedMessage
-                id="xpack.ml.dataframe.noGrantedPrivilegesDescription"
-                defaultMessage="You must have the privileges granted in the {kibanaUserParam} and {dataFrameUserParam} roles.{br}Your system admin can set these roles on the Management User page."
-                values={{
-                  kibanaUserParam: <span className="text-monospace">kibana_user</span>,
-                  dataFrameUserParam: (
-                    <span className="text-monospace">data_frame_transforms_user</span>
-                  ),
-                  br: <br />,
-                }}
-              />
-            </p>
-          </EuiText>
-        </EuiCallOut>
-        <EuiSpacer size="m" />
-        <EuiFlexGroup gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={goToKibana} size="s">
-              <FormattedMessage
-                id="xpack.ml.dataframe.accessDenied.backToKibanaHomeButtonLabel"
-                defaultMessage="Back to Kibana home"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={retry} size="s">
-              <FormattedMessage
-                id="xpack.ml.dataframe.accessDenied.retryButtonLabel"
-                defaultMessage="Retry"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageContentBody>
-    </EuiPageBody>
-  </EuiPage>
+export const Page: FC<PageProps> = ({ goToKibana, retry }) => (
+  <Fragment>
+    <NavigationMenu tabId="access-denied" />
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h1>
+                <FormattedMessage
+                  id="xpack.ml.dataframe.accessDeniedTitle"
+                  defaultMessage="Access denied"
+                />
+              </h1>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody>
+          <EuiSpacer size="m" />
+          <EuiCallOut
+            title={i18n.translate('xpack.ml.dataframe.noPermissionToAccessMLLabel', {
+              defaultMessage: 'You need permission to access Data Frames',
+            })}
+            color="danger"
+            iconType="cross"
+          >
+            <EuiText size="s">
+              <p>
+                <FormattedMessage
+                  id="xpack.ml.dataframe.noGrantedPrivilegesDescription"
+                  defaultMessage="You must have the privileges granted in the {kibanaUserParam} and {dataFrameUserParam} roles.{br}Your system admin can set these roles on the Management User page."
+                  values={{
+                    kibanaUserParam: <span className="text-monospace">kibana_user</span>,
+                    dataFrameUserParam: (
+                      <span className="text-monospace">data_frame_transforms_user</span>
+                    ),
+                    br: <br />,
+                  }}
+                />
+              </p>
+            </EuiText>
+          </EuiCallOut>
+          <EuiSpacer size="m" />
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiButton fill onClick={goToKibana} size="s">
+                <FormattedMessage
+                  id="xpack.ml.dataframe.accessDenied.backToKibanaHomeButtonLabel"
+                  defaultMessage="Back to Kibana home"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton fill onClick={retry} size="s">
+                <FormattedMessage
+                  id="xpack.ml.dataframe.accessDenied.retryButtonLabel"
+                  defaultMessage="Retry"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageContentBody>
+      </EuiPageBody>
+    </EuiPage>
+  </Fragment>
 );
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/route.ts b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/route.ts
index 63689b4ec551e..50cf8d05aa434 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/route.ts
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/access_denied/route.ts
@@ -9,7 +9,7 @@ import uiRoutes from 'ui/routes';
 // @ts-ignore
 import { getDataFrameBreadcrumbs } from '../../breadcrumbs';
 
-const template = `<ml-nav-menu name="access-denied" /><ml-data-frame-access-denied />`;
+const template = `<ml-data-frame-access-denied />`;
 
 uiRoutes.when('/data_frames/access-denied', {
   template,
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/directive.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/directive.tsx
index 3b86138027d1c..928d5dfce3760 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/directive.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/directive.tsx
@@ -7,6 +7,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import chrome from 'ui/chrome';
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
@@ -15,6 +16,7 @@ import { IndexPattern } from 'ui/index_patterns';
 import { I18nContext } from 'ui/i18n';
 import { IPrivate } from 'ui/private';
 import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 import { InjectorService } from '../../../../common/types/angular';
 
 // @ts-ignore
@@ -26,6 +28,7 @@ type CreateSearchItems = () => {
   combinedQuery: any;
 };
 
+import { NavigationMenuContext } from '../../../util/context_utils';
 import { KibanaContext } from '../../common';
 import { Page } from './page';
 
@@ -56,9 +59,11 @@ module.directive('mlNewDataFrame', ($injector: InjectorService) => {
 
       ReactDOM.render(
         <I18nContext>
-          <KibanaContext.Provider value={kibanaContext}>
-            {React.createElement(Page)}
-          </KibanaContext.Provider>
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <KibanaContext.Provider value={kibanaContext}>
+              <Page />
+            </KibanaContext.Provider>
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/page.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/page.tsx
index 3d554a62638be..2aaa1fb8a6ac3 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/page.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/page.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { SFC } from 'react';
+import React, { FC, Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -20,39 +20,43 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
 import { Wizard } from './components/wizard';
 
-export const Page: SFC = () => (
-  <EuiPage>
-    <EuiPageBody>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
-          <EuiTitle>
-            <h1>
-              <FormattedMessage
-                id="xpack.ml.dataframe.transformsWizard.newDataFrameTitle"
-                defaultMessage="New data frame"
-              />
-              <span>&nbsp;</span>
-              <EuiBetaBadge
-                label={i18n.translate('xpack.ml.dataframe.transformsWizard.betaBadgeLabel', {
-                  defaultMessage: `Beta`,
-                })}
-                tooltipContent={i18n.translate(
-                  'xpack.ml.dataframe.transformsWizard.betaBadgeTooltipContent',
-                  {
-                    defaultMessage: `Data frames are a beta feature. We'd love to hear your feedback.`,
-                  }
-                )}
-              />
-            </h1>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>
-        <EuiSpacer size="l" />
-        <Wizard />
-      </EuiPageContentBody>
-    </EuiPageBody>
-  </EuiPage>
+export const Page: FC = () => (
+  <Fragment>
+    <NavigationMenu tabId="new_data_frame" />
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle>
+              <h1>
+                <FormattedMessage
+                  id="xpack.ml.dataframe.transformsWizard.newDataFrameTitle"
+                  defaultMessage="New data frame"
+                />
+                <span>&nbsp;</span>
+                <EuiBetaBadge
+                  label={i18n.translate('xpack.ml.dataframe.transformsWizard.betaBadgeLabel', {
+                    defaultMessage: `Beta`,
+                  })}
+                  tooltipContent={i18n.translate(
+                    'xpack.ml.dataframe.transformsWizard.betaBadgeTooltipContent',
+                    {
+                      defaultMessage: `Data frames are a beta feature. We'd love to hear your feedback.`,
+                    }
+                  )}
+                />
+              </h1>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+        <EuiPageContentBody>
+          <EuiSpacer size="l" />
+          <Wizard />
+        </EuiPageContentBody>
+      </EuiPageBody>
+    </EuiPage>
+  </Fragment>
 );
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts
index 20f102ea1d484..e58819fd45a0d 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/route.ts
@@ -21,7 +21,7 @@ import {
   getDataFrameIndexOrSearchBreadcrumbs,
 } from '../../breadcrumbs';
 
-const wizardTemplate = `<ml-nav-menu name="new_data_frame" /><ml-new-data-frame />`;
+const wizardTemplate = `<ml-new-data-frame />`;
 
 uiRoutes.when('/data_frames/new_transform/step/pivot?', {
   template: wizardTemplate,
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap
index c2beb3b912640..88f8d41839752 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/__snapshots__/page.test.tsx.snap
@@ -1,62 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Data Frame: Job List <Page /> Minimal initialization 1`] = `
-<EuiPage
-  data-test-subj="mlPageDataFrame"
-  restrictWidth={false}
->
-  <EuiPageBody
+<Fragment>
+  <NavigationMenu
+    tabId="data_frames"
+  />
+  <EuiPage
+    data-test-subj="mlPageDataFrame"
     restrictWidth={false}
   >
-    <EuiPageContentHeader
-      responsive={true}
+    <EuiPageBody
+      restrictWidth={false}
     >
-      <EuiPageContentHeaderSection>
-        <EuiTitle>
-          <h1>
-            <FormattedMessage
-              defaultMessage="Data frame transforms"
-              id="xpack.ml.dataframe.transformList.dataFrameTitle"
-              values={Object {}}
-            />
-            <span>
-               
-            </span>
-            <EuiBetaBadge
-              label="Beta"
-              tooltipContent="Data frames are a beta feature. We'd love to hear your feedback."
-            />
-          </h1>
-        </EuiTitle>
-      </EuiPageContentHeaderSection>
-      <EuiPageContentHeaderSection>
-        <EuiFlexGroup
-          alignItems="center"
-        >
-          <EuiFlexItem>
-            <RefreshTransformListButton
-              isLoading={false}
-              onClick={[Function]}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <CreateTransformButton />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageContentHeaderSection>
-    </EuiPageContentHeader>
-    <EuiPageContentBody>
-      <EuiSpacer
-        size="l"
-      />
-      <EuiPanel
-        grow={true}
-        hasShadow={false}
-        paddingSize="m"
+      <EuiPageContentHeader
+        responsive={true}
       >
-        <DataFrameTransformList />
-      </EuiPanel>
-    </EuiPageContentBody>
-  </EuiPageBody>
-</EuiPage>
+        <EuiPageContentHeaderSection>
+          <EuiTitle>
+            <h1>
+              <FormattedMessage
+                defaultMessage="Data frame transforms"
+                id="xpack.ml.dataframe.transformList.dataFrameTitle"
+                values={Object {}}
+              />
+              <span>
+                 
+              </span>
+              <EuiBetaBadge
+                label="Beta"
+                tooltipContent="Data frames are a beta feature. We'd love to hear your feedback."
+              />
+            </h1>
+          </EuiTitle>
+        </EuiPageContentHeaderSection>
+        <EuiPageContentHeaderSection>
+          <EuiFlexGroup
+            alignItems="center"
+          >
+            <EuiFlexItem>
+              <RefreshTransformListButton
+                isLoading={false}
+                onClick={[Function]}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <CreateTransformButton />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      <EuiPageContentBody>
+        <EuiSpacer
+          size="l"
+        />
+        <EuiPanel
+          grow={true}
+          hasShadow={false}
+          paddingSize="m"
+        >
+          <DataFrameTransformList />
+        </EuiPanel>
+      </EuiPageContentBody>
+    </EuiPageBody>
+  </EuiPage>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/directive.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/directive.tsx
index b0a89a9adcba6..b1a862a914ab2 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/directive.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/directive.tsx
@@ -10,8 +10,12 @@ import ReactDOM from 'react-dom';
 // @ts-ignore
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
+import chrome from 'ui/chrome';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 
 import { I18nContext } from 'ui/i18n';
+import { NavigationMenuContext } from '../../../util/context_utils';
 import { Page } from './page';
 
 module.directive('mlDataFramePage', () => {
@@ -19,7 +23,14 @@ module.directive('mlDataFramePage', () => {
     scope: {},
     restrict: 'E',
     link: (scope: ng.IScope, element: ng.IAugmentedJQuery) => {
-      ReactDOM.render(<I18nContext>{React.createElement(Page)}</I18nContext>, element[0]);
+      ReactDOM.render(
+        <I18nContext>
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <Page />
+          </NavigationMenuContext.Provider>
+        </I18nContext>,
+        element[0]
+      );
 
       element.on('$destroy', () => {
         ReactDOM.unmountComponentAtNode(element[0]);
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/page.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/page.tsx
index 326581be2e810..c0186c0a33c59 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/page.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/page.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { SFC, useState } from 'react';
+import React, { FC, Fragment, useState } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -23,59 +23,63 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
 import { useRefreshTransformList } from '../../common';
 import { CreateTransformButton } from './components/create_transform_button';
 import { DataFrameTransformList } from './components/transform_list';
 import { RefreshTransformListButton } from './components/refresh_transform_list_button';
 
-export const Page: SFC = () => {
+export const Page: FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const { refresh } = useRefreshTransformList({ isLoading: setIsLoading });
 
   return (
-    <EuiPage data-test-subj="mlPageDataFrame">
-      <EuiPageBody>
-        <EuiPageContentHeader>
-          <EuiPageContentHeaderSection>
-            <EuiTitle>
-              <h1>
-                <FormattedMessage
-                  id="xpack.ml.dataframe.transformList.dataFrameTitle"
-                  defaultMessage="Data frame transforms"
-                />
-                <span>&nbsp;</span>
-                <EuiBetaBadge
-                  label={i18n.translate('xpack.ml.dataframe.transformList.betaBadgeLabel', {
-                    defaultMessage: `Beta`,
-                  })}
-                  tooltipContent={i18n.translate(
-                    'xpack.ml.dataframe.transformList.betaBadgeTooltipContent',
-                    {
-                      defaultMessage: `Data frames are a beta feature. We'd love to hear your feedback.`,
-                    }
-                  )}
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageContentHeaderSection>
-          <EuiPageContentHeaderSection>
-            <EuiFlexGroup alignItems="center">
-              <EuiFlexItem>
-                <RefreshTransformListButton onClick={refresh} isLoading={isLoading} />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <CreateTransformButton />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPageContentHeaderSection>
-        </EuiPageContentHeader>
-        <EuiPageContentBody>
-          <EuiSpacer size="l" />
-          <EuiPanel>
-            <DataFrameTransformList />
-          </EuiPanel>
-        </EuiPageContentBody>
-      </EuiPageBody>
-    </EuiPage>
+    <Fragment>
+      <NavigationMenu tabId="data_frames" />
+      <EuiPage data-test-subj="mlPageDataFrame">
+        <EuiPageBody>
+          <EuiPageContentHeader>
+            <EuiPageContentHeaderSection>
+              <EuiTitle>
+                <h1>
+                  <FormattedMessage
+                    id="xpack.ml.dataframe.transformList.dataFrameTitle"
+                    defaultMessage="Data frame transforms"
+                  />
+                  <span>&nbsp;</span>
+                  <EuiBetaBadge
+                    label={i18n.translate('xpack.ml.dataframe.transformList.betaBadgeLabel', {
+                      defaultMessage: `Beta`,
+                    })}
+                    tooltipContent={i18n.translate(
+                      'xpack.ml.dataframe.transformList.betaBadgeTooltipContent',
+                      {
+                        defaultMessage: `Data frames are a beta feature. We'd love to hear your feedback.`,
+                      }
+                    )}
+                  />
+                </h1>
+              </EuiTitle>
+            </EuiPageContentHeaderSection>
+            <EuiPageContentHeaderSection>
+              <EuiFlexGroup alignItems="center">
+                <EuiFlexItem>
+                  <RefreshTransformListButton onClick={refresh} isLoading={isLoading} />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <CreateTransformButton />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPageContentHeaderSection>
+          </EuiPageContentHeader>
+          <EuiPageContentBody>
+            <EuiSpacer size="l" />
+            <EuiPanel>
+              <DataFrameTransformList />
+            </EuiPanel>
+          </EuiPageContentBody>
+        </EuiPageBody>
+      </EuiPage>
+    </Fragment>
   );
 };
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/route.ts b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/route.ts
index 26f3c897cb25e..6f3b4576b10ce 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/route.ts
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/transform_management/route.ts
@@ -15,7 +15,7 @@ import { loadIndexPatterns } from '../../../util/index_utils';
 // @ts-ignore
 import { getDataFrameBreadcrumbs } from '../../breadcrumbs';
 
-const template = `<ml-nav-menu name="data_frames" /><ml-data-frame-page />`;
+const template = `<ml-data-frame-page />`;
 
 uiRoutes.when('/data_frames/?', {
   template,
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer.html b/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer.html
index d39ae5b57c1b0..7f84fe2678ab4 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer.html
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/datavisualizer.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="datavisualizer"></ml-nav-menu>
+<ml-nav-menu name="datavisualizer" />
 <ml-chart-tooltip></ml-chart-tooltip>
 <ml-datavisualizer class="data-visualizer-container">
   <div ng-controller="MlDataVisualizerViewFields" >
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js b/x-pack/legacy/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js
index b4a7ca32e45f6..9e5df0de49426 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/selector/datavisualizer_selector.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import {
   EuiButton,
@@ -22,7 +22,12 @@ import {
 
 import { isFullLicense } from '../../license/check_license';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import chrome from 'ui/chrome';
 import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
+
+import { NavigationMenuContext } from '../../util/context_utils';
+import { NavigationMenu } from '../../components/navigation_menu/navigation_menu';
 
 function startTrialDescription() {
   return (
@@ -32,159 +37,151 @@ function startTrialDescription() {
         defaultMessage="To experience the full Machine Learning features that a {platinumSubscriptionLink} offers, start a 30-day trial."
         values={{
           platinumSubscriptionLink: (
-            <EuiLink
-              href="https://www.elastic.co/subscriptions"
-              target="_blank"
-            >
+            <EuiLink href="https://www.elastic.co/subscriptions" target="_blank">
               <FormattedMessage
                 id="xpack.ml.datavisualizer.startTrial.platinumSubscriptionTitle"
                 defaultMessage="Platinum subscription"
               />
             </EuiLink>
-          )
+          ),
         }}
       />
     </span>
   );
 }
 
-
 export const DatavisualizerSelector = injectI18n(function (props) {
-
   timefilter.disableTimeRangeSelector();
   timefilter.disableAutoRefreshSelector();
 
-  const startTrialVisible = (isFullLicense() === false);
+  const startTrialVisible = isFullLicense() === false;
 
   return (
-    <EuiPage restrictWidth={1000}>
-      <EuiPageBody>
-        <EuiFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
-              <h2>
+    <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+      <NavigationMenu tabId="datavisualizer" />
+      <EuiPage restrictWidth={1000}>
+        <EuiPageBody>
+          <EuiFlexGroup gutterSize="xl">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="l">
+                <h2>
+                  <FormattedMessage
+                    id="xpack.ml.datavisualizer.selector.dataVisualizerTitle"
+                    defaultMessage="Data Visualizer"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="xl" />
+          <EuiFlexGroup gutterSize="xl">
+            <EuiFlexItem grow={false}>
+              <EuiText color="subdued">
                 <FormattedMessage
-                  id="xpack.ml.datavisualizer.selector.dataVisualizerTitle"
-                  defaultMessage="Data Visualizer"
-                />
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="xl" />
-        <EuiFlexGroup gutterSize="xl">
-          <EuiFlexItem grow={false}>
-            <EuiText color="subdued">
-              <FormattedMessage
-                id="xpack.ml.datavisualizer.selector.dataVisualizerDescription"
-                defaultMessage="The Machine Learning Data Visualizer tool helps you understand your data,
+                  id="xpack.ml.datavisualizer.selector.dataVisualizerDescription"
+                  defaultMessage="The Machine Learning Data Visualizer tool helps you understand your data,
                   by analyzing the metrics and fields in a log file or an existing Elasticsearch index."
-              />
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="xl" />
-        <EuiFlexGroup justifyContent="spaceAround" gutterSize="xl">
-          <EuiFlexItem>
-            <EuiCard
-              icon={<EuiIcon size="xxl" type="addDataApp" />}
-              title={
-                <FormattedMessage
-                  id="xpack.ml.datavisualizer.selector.importDataTitle"
-                  defaultMessage="Import data"
-                />
-              }
-              description={
-                <FormattedMessage
-                  id="xpack.ml.datavisualizer.selector.importDataDescription"
-                  defaultMessage="Import data from a log file. You can upload files up to 100 MB."
                 />
-              }
-              betaBadgeLabel={props.intl.formatMessage({
-                id: 'xpack.ml.datavisualizer.selector.experimentalBadgeLabel',
-                defaultMessage: 'Experimental'
-              })}
-              betaBadgeTooltipContent={
-                <FormattedMessage
-                  id="xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel"
-                  defaultMessage="Experimental feature. We'd love to hear your feedback."
-                />
-              }
-              footer={
-                <EuiButton
-                  target="_self"
-                  href="#/filedatavisualizer"
-                >
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="xl" />
+          <EuiFlexGroup justifyContent="spaceAround" gutterSize="xl">
+            <EuiFlexItem>
+              <EuiCard
+                icon={<EuiIcon size="xxl" type="addDataApp" />}
+                title={
                   <FormattedMessage
-                    id="xpack.ml.datavisualizer.selector.uploadFileButtonLabel"
-                    defaultMessage="Upload file"
+                    id="xpack.ml.datavisualizer.selector.importDataTitle"
+                    defaultMessage="Import data"
                   />
-                </EuiButton>
-              }
-              data-test-subj="mlDataVisualizerCardImportData"
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiCard
-              icon={<EuiIcon size="xxl" type="dataVisualizer" />}
-              title={
-                <FormattedMessage
-                  id="xpack.ml.datavisualizer.selector.selectIndexPatternTitle"
-                  defaultMessage="Select an index pattern"
-                />
-              }
-              description={
-                <FormattedMessage
-                  id="xpack.ml.datavisualizer.selector.selectIndexPatternDescription"
-                  defaultMessage="Visualize the data in an existing Elasticsearch index."
-                />
-              }
-              footer={
-                <EuiButton
-                  target="_self"
-                  href="#datavisualizer_index_select"
-                >
+                }
+                description={
+                  <FormattedMessage
+                    id="xpack.ml.datavisualizer.selector.importDataDescription"
+                    defaultMessage="Import data from a log file. You can upload files up to 100 MB."
+                  />
+                }
+                betaBadgeLabel={props.intl.formatMessage({
+                  id: 'xpack.ml.datavisualizer.selector.experimentalBadgeLabel',
+                  defaultMessage: 'Experimental',
+                })}
+                betaBadgeTooltipContent={
+                  <FormattedMessage
+                    id="xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel"
+                    defaultMessage="Experimental feature. We'd love to hear your feedback."
+                  />
+                }
+                footer={
+                  <EuiButton target="_self" href="#/filedatavisualizer">
+                    <FormattedMessage
+                      id="xpack.ml.datavisualizer.selector.uploadFileButtonLabel"
+                      defaultMessage="Upload file"
+                    />
+                  </EuiButton>
+                }
+                data-test-subj="mlDataVisualizerCardImportData"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiCard
+                icon={<EuiIcon size="xxl" type="dataVisualizer" />}
+                title={
+                  <FormattedMessage
+                    id="xpack.ml.datavisualizer.selector.selectIndexPatternTitle"
+                    defaultMessage="Select an index pattern"
+                  />
+                }
+                description={
                   <FormattedMessage
-                    id="xpack.ml.datavisualizer.selector.selectIndexButtonLabel"
-                    defaultMessage="Select index"
+                    id="xpack.ml.datavisualizer.selector.selectIndexPatternDescription"
+                    defaultMessage="Visualize the data in an existing Elasticsearch index."
                   />
-                </EuiButton>
-              }
-              data-test-subj="mlDataVisualizerCardIndexData"
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        {startTrialVisible === true &&
-          <React.Fragment>
-            <EuiSpacer size="xxl" />
-            <EuiSpacer size="xxl" />
-            <EuiFlexGroup justifyContent="spaceAround" gutterSize="xl">
-              <EuiFlexItem grow={false} style={{ width: '600px' }}>
-                <EuiCard
-                  title={
+                }
+                footer={
+                  <EuiButton target="_self" href="#datavisualizer_index_select">
                     <FormattedMessage
-                      id="xpack.ml.datavisualizer.selector.startTrialTitle"
-                      defaultMessage="Start trial"
+                      id="xpack.ml.datavisualizer.selector.selectIndexButtonLabel"
+                      defaultMessage="Select index"
                     />
-                  }
-                  description={startTrialDescription()}
-                  footer={
-                    <EuiButton
-                      target="_blank"
-                      href="kibana#/management/elasticsearch/license_management/home"
-                    >
+                  </EuiButton>
+                }
+                data-test-subj="mlDataVisualizerCardIndexData"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {startTrialVisible === true && (
+            <Fragment>
+              <EuiSpacer size="xxl" />
+              <EuiSpacer size="xxl" />
+              <EuiFlexGroup justifyContent="spaceAround" gutterSize="xl">
+                <EuiFlexItem grow={false} style={{ width: '600px' }}>
+                  <EuiCard
+                    title={
                       <FormattedMessage
-                        id="xpack.ml.datavisualizer.selector.startTrialButtonLabel"
+                        id="xpack.ml.datavisualizer.selector.startTrialTitle"
                         defaultMessage="Start trial"
                       />
-                    </EuiButton>
-                  }
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </React.Fragment>
-        }
-      </EuiPageBody>
-    </EuiPage>
+                    }
+                    description={startTrialDescription()}
+                    footer={
+                      <EuiButton
+                        target="_blank"
+                        href="kibana#/management/elasticsearch/license_management/home"
+                      >
+                        <FormattedMessage
+                          id="xpack.ml.datavisualizer.selector.startTrialButtonLabel"
+                          defaultMessage="Start trial"
+                        />
+                      </EuiButton>
+                    }
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </Fragment>
+          )}
+        </EuiPageBody>
+      </EuiPage>
+    </NavigationMenuContext.Provider>
   );
 });
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/selector/directive.js b/x-pack/legacy/plugins/ml/public/datavisualizer/selector/directive.js
index 008f182b90415..84d2d662c1872 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/selector/directive.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/selector/directive.js
@@ -18,7 +18,6 @@ import uiRoutes from 'ui/routes';
 
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="datavisualizer" />
   <datavisualizer-selector data-test-subj="mlPageDataVisualizerSelector" />
 `;
 
diff --git a/x-pack/legacy/plugins/ml/public/explorer/explorer.html b/x-pack/legacy/plugins/ml/public/explorer/explorer.html
index 94e448d35956a..db5b12b7eeb9f 100644
--- a/x-pack/legacy/plugins/ml/public/explorer/explorer.html
+++ b/x-pack/legacy/plugins/ml/public/explorer/explorer.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="explorer"></ml-nav-menu>
+<ml-nav-menu name="explorer" />
 <ml-chart-tooltip></ml-chart-tooltip>
 <div class="ml-explorer" ng-controller="MlExplorerController" data-test-subj="mlPageAnomalyExplorer" >
 
diff --git a/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer.js b/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer.js
index 3a0eeba4890dd..c6ee2e2761d9c 100644
--- a/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer.js
+++ b/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer.js
@@ -7,13 +7,22 @@
 import { FileDataVisualizerView } from './components/file_datavisualizer_view';
 
 import React from 'react';
+
+import chrome from 'ui/chrome';
 import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
+
+import { NavigationMenuContext } from '../util/context_utils';
+import { NavigationMenu } from '../components/navigation_menu/navigation_menu';
 
 export function FileDataVisualizerPage({ indexPatterns, kibanaConfig }) {
   timefilter.disableTimeRangeSelector();
   timefilter.disableAutoRefreshSelector();
 
   return (
-    <FileDataVisualizerView indexPatterns={indexPatterns} kibanaConfig={kibanaConfig} />
+    <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+      <NavigationMenu tabId="datavisualizer" />
+      <FileDataVisualizerView indexPatterns={indexPatterns} kibanaConfig={kibanaConfig} />
+    </NavigationMenuContext.Provider>
   );
 }
diff --git a/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js b/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
index ee5731edcd7d8..c8431f4a376c1 100644
--- a/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
+++ b/x-pack/legacy/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js
@@ -24,7 +24,6 @@ import uiRoutes from 'ui/routes';
 
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="datavisualizer" />
   <file-datavisualizer-page />
 `;
 
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/directive.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/directive.js
index 0b39a98284cd0..e39d599d0f3c4 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/directive.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/directive.js
@@ -17,10 +17,14 @@ import { checkGetJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
 import { getJobManagementBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { loadNewJobDefaults } from 'plugins/ml/jobs/new_job/utils/new_job_defaults';
+import { NavigationMenuContext } from '../../util/context_utils';
 
+import chrome from 'ui/chrome';
 import uiRoutes from 'ui/routes';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 
-const template = `<ml-nav-menu name="jobs" /><jobs-page  data-test-subj="mlPageJobManagement" />`;
+const template = `<jobs-page data-test-subj="mlPageJobManagement" />`;
 
 uiRoutes
   .when('/jobs/?', {
@@ -45,7 +49,9 @@ module.directive('jobsPage', function () {
     link: (scope, element) => {
       ReactDOM.render(
         <I18nContext>
-          {React.createElement(JobsPage, { angularWrapperScope: scope })}
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <JobsPage angularWrapperScope={scope} />
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js
index 2f363d5db17cb..5bdf9c1944e43 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js
+++ b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js
@@ -4,11 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React, { Fragment } from 'react';
 
-import { JobsListView } from './components/jobs_list_view';
-import React from 'react';
+import { NavigationMenu } from '../../components/navigation_menu/navigation_menu';
 
+import { JobsListView } from './components/jobs_list_view';
 
 export const JobsPage = (props) => (
-  <JobsListView {...props} />
+  <Fragment>
+    <NavigationMenu tabId="jobs" />
+    <JobsListView {...props} />
+  </Fragment>
 );
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job.html
index efaf36d0ecfe4..49f7c63d6a34e 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/advanced/new_job.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job_advanced"></ml-nav-menu>
+<ml-nav-menu name="new_job_advanced" />
 <ml-new-job class="ml-new-job euiPage euiPage--widthIsNotRestricted">
   <ml-message-bar></ml-message-bar>
   <div ng-controller="MlNewJob" class="euiPageBody">
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html
index 523551bb97052..239a85b26a9d6 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job_multi_metric"></ml-nav-menu>
+<ml-nav-menu name="new_job_multi_metric" />
 <ml-new-job-multi-metric>
   <ml-message-bar></ml-message-bar>
   <div ng-controller="MlCreateMultiMetricJob" class="multi-metric-job-container">
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
index 4bcb7eb7226a9..cc8e23756ac11 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job_population"></ml-nav-menu>
+<ml-nav-menu name="new_job_population" />
 <ml-chart-tooltip></ml-chart-tooltip>
 <ml-new-job-population>
   <ml-message-bar></ml-message-bar>
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html
index c97d5dde13117..5839bf7c60d04 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job_multi_metric"></ml-nav-menu>
+<ml-nav-menu name="new_job_multi_metric" />
 <ml-new-job-recognizer>
   <ml-message-bar></ml-message-bar>
   <div ng-controller="MlCreateRecognizerJobs" class="recognizer-job-container">
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html
index d639ddd1cf44b..dd5b9af1a9ef3 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job_single_metric"></ml-nav-menu>
+<ml-nav-menu name="new_job_single_metric" />
 <ml-new-job-single-metric>
   <ml-message-bar></ml-message-bar>
   <div ng-controller="MlCreateSingleMetricJob" class="single-metric-job-container">
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html
index 02e8cbfdae7f7..90334010fcbfc 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job"></ml-nav-menu>
+<ml-nav-menu name="new_job" />
 <ml-new-job class="index-or-saved-search-selection">
   <ml-message-bar></ml-message-bar>
   <div class='kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem' >
diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
index da0bf3d38d4d5..57c7a3bd2bfbe 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="new_job"></ml-nav-menu>
+<ml-nav-menu name="new_job" />
 <ml-new-job class="job-type-gallery">
   <ml-message-bar></ml-message-bar>
   <div ng-controller="MlNewJobStepJobType">
diff --git a/x-pack/legacy/plugins/ml/public/settings/__snapshots__/settings.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/__snapshots__/settings.test.js.snap
deleted file mode 100644
index 9305677b04372..0000000000000
--- a/x-pack/legacy/plugins/ml/public/settings/__snapshots__/settings.test.js.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Settings Renders settings page 1`] = `
-<EuiPage
-  className="mlSettingsPage"
-  data-test-subj="mlPageSettings"
-  restrictWidth={false}
->
-  <EuiPageBody
-    className="mlSettingsPage__body"
-    restrictWidth={false}
-  >
-    <EuiPageContent
-      className="mlSettingsPage__content"
-      horizontalPosition="center"
-      panelPaddingSize="l"
-    >
-      <EuiPageContentHeader
-        responsive={true}
-      >
-        <EuiTitle>
-          <h2>
-            <FormattedMessage
-              defaultMessage="Job Management"
-              id="xpack.ml.settings.jobManagementTitle"
-              values={Object {}}
-            />
-          </h2>
-        </EuiTitle>
-      </EuiPageContentHeader>
-      <EuiFlexGroup
-        gutterSize="xl"
-      >
-        <EuiFlexItem
-          grow={false}
-        >
-          <EuiButtonEmpty
-            color="primary"
-            data-test-subj="ml_calendar_mng_button"
-            href="undefined/app/ml#/settings/calendars_list"
-            iconSide="left"
-            isDisabled={false}
-            size="l"
-            type="button"
-          >
-            <FormattedMessage
-              defaultMessage="Calendar management"
-              id="xpack.ml.settings.calendarManagementButtonLabel"
-              values={Object {}}
-            />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
-        >
-          <EuiButtonEmpty
-            color="primary"
-            data-test-subj="ml_filter_lists_button"
-            href="undefined/app/ml#/settings/filter_lists"
-            iconSide="left"
-            isDisabled={false}
-            size="l"
-            type="button"
-          >
-            <FormattedMessage
-              defaultMessage="Filter Lists"
-              id="xpack.ml.settings.filterListsButtonLabel"
-              values={Object {}}
-            />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPageContent>
-  </EuiPageBody>
-</EuiPage>
-`;
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
index 52c91e0159103..9a48bb551dcde 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/__snapshots__/new_calendar.test.js.snap
@@ -1,40 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NewCalendar Renders new calendar form 1`] = `
-<EuiPage
-  className="mlCalendarEditForm"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="mlCalendarEditForm__content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="mlCalendarEditForm"
+    restrictWidth={false}
   >
-    <InjectIntl(CalendarForm)
-      calendarId=""
-      canCreateCalendar={true}
-      canDeleteCalendar={true}
-      description=""
-      eventsList={Array []}
-      groupIds={Array []}
-      isEdit={false}
-      isNewCalendarIdValid={true}
-      jobIds={Array []}
-      onCalendarIdChange={[Function]}
-      onCreate={[Function]}
-      onCreateGroupOption={[Function]}
-      onDescriptionChange={[Function]}
-      onEdit={[Function]}
-      onEventDelete={[Function]}
-      onGroupSelection={[Function]}
-      onJobSelection={[Function]}
-      saving={false}
-      selectedGroupOptions={Array []}
-      selectedJobOptions={Array []}
-      showImportModal={[Function]}
-      showNewEventModal={[Function]}
-    />
-  </EuiPageContent>
-</EuiPage>
+    <EuiPageContent
+      className="mlCalendarEditForm__content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
+    >
+      <InjectIntl(CalendarForm)
+        calendarId=""
+        canCreateCalendar={true}
+        canDeleteCalendar={true}
+        description=""
+        eventsList={Array []}
+        groupIds={Array []}
+        isEdit={false}
+        isNewCalendarIdValid={true}
+        jobIds={Array []}
+        onCalendarIdChange={[Function]}
+        onCreate={[Function]}
+        onCreateGroupOption={[Function]}
+        onDescriptionChange={[Function]}
+        onEdit={[Function]}
+        onEventDelete={[Function]}
+        onGroupSelection={[Function]}
+        onJobSelection={[Function]}
+        saving={false}
+        selectedGroupOptions={Array []}
+        selectedJobOptions={Array []}
+        showImportModal={[Function]}
+        showNewEventModal={[Function]}
+      />
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/directive.js b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/directive.js
index ca9d86a6572a7..2d5427f091def 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/directive.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/directive.js
@@ -17,13 +17,16 @@ import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check
 import { checkMlNodesAvailable } from '../../../ml_nodes_check/check_ml_nodes';
 import { getCreateCalendarBreadcrumbs, getEditCalendarBreadcrumbs } from '../../breadcrumbs';
 
+import chrome from 'ui/chrome';
 import uiRoutes from 'ui/routes';
-
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 import { I18nContext } from 'ui/i18n';
 
+import { NavigationMenuContext } from '../../../util/context_utils';
+
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="settings" />
   <ml-new-calendar />
 `;
 
@@ -63,7 +66,9 @@ module.directive('mlNewCalendar', function ($route) {
 
       ReactDOM.render(
         <I18nContext>
-          {React.createElement(NewCalendar, props)}
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <NewCalendar {...props} />
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.js b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.js
index 91d70e4890cb4..307fbf564be20 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.js
@@ -6,11 +6,11 @@
 
 
 
-import React, {
-  Component
-} from 'react';
+import React, { Component, Fragment } from 'react';
 import { PropTypes } from 'prop-types';
 
+import { injectI18n } from '@kbn/i18n/react';
+
 import {
   EuiPage,
   EuiPageContent,
@@ -18,14 +18,16 @@ import {
 } from '@elastic/eui';
 
 import chrome from 'ui/chrome';
+import { toastNotifications } from 'ui/notify';
+
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
+
 import { getCalendarSettingsData, validateCalendarId } from './utils';
 import { CalendarForm } from './calendar_form/';
 import { NewEventModal } from './new_event_modal/';
 import { ImportModal } from './import_modal';
 import { ml } from '../../../services/ml_api_service';
-import { toastNotifications } from 'ui/notify';
 
-import { injectI18n } from '@kbn/i18n/react';
 
 export const NewCalendar = injectI18n(class NewCalendar extends Component {
   static propTypes = {
@@ -333,39 +335,42 @@ export const NewCalendar = injectI18n(class NewCalendar extends Component {
     }
 
     return (
-      <EuiPage className="mlCalendarEditForm">
-        <EuiPageContent
-          className="mlCalendarEditForm__content"
-          verticalPosition="center"
-          horizontalPosition="center"
-        >
-          <CalendarForm
-            calendarId={selectedCalendar ? selectedCalendar.calendar_id : formCalendarId}
-            canCreateCalendar={this.props.canCreateCalendar}
-            canDeleteCalendar={this.props.canDeleteCalendar}
-            description={selectedCalendar ? selectedCalendar.description : description}
-            eventsList={events}
-            groupIds={groupIdOptions}
-            isEdit={selectedCalendar !== undefined}
-            isNewCalendarIdValid={(selectedCalendar || isNewCalendarIdValid === null) ? true : isNewCalendarIdValid}
-            jobIds={jobIdOptions}
-            onCalendarIdChange={this.onCalendarIdChange}
-            onCreate={this.onCreate}
-            onDescriptionChange={this.onDescriptionChange}
-            onEdit={this.onEdit}
-            onEventDelete={this.onEventDelete}
-            onGroupSelection={this.onGroupSelection}
-            showImportModal={this.showImportModal}
-            onJobSelection={this.onJobSelection}
-            saving={saving}
-            selectedGroupOptions={selectedGroupOptions}
-            selectedJobOptions={selectedJobOptions}
-            onCreateGroupOption={this.onCreateGroupOption}
-            showNewEventModal={this.showNewEventModal}
-          />
-        </EuiPageContent>
-        {modal}
-      </EuiPage>
+      <Fragment>
+        <NavigationMenu tabId="settings" />
+        <EuiPage className="mlCalendarEditForm">
+          <EuiPageContent
+            className="mlCalendarEditForm__content"
+            verticalPosition="center"
+            horizontalPosition="center"
+          >
+            <CalendarForm
+              calendarId={selectedCalendar ? selectedCalendar.calendar_id : formCalendarId}
+              canCreateCalendar={this.props.canCreateCalendar}
+              canDeleteCalendar={this.props.canDeleteCalendar}
+              description={selectedCalendar ? selectedCalendar.description : description}
+              eventsList={events}
+              groupIds={groupIdOptions}
+              isEdit={selectedCalendar !== undefined}
+              isNewCalendarIdValid={(selectedCalendar || isNewCalendarIdValid === null) ? true : isNewCalendarIdValid}
+              jobIds={jobIdOptions}
+              onCalendarIdChange={this.onCalendarIdChange}
+              onCreate={this.onCreate}
+              onDescriptionChange={this.onDescriptionChange}
+              onEdit={this.onEdit}
+              onEventDelete={this.onEventDelete}
+              onGroupSelection={this.onGroupSelection}
+              showImportModal={this.showImportModal}
+              onJobSelection={this.onJobSelection}
+              saving={saving}
+              selectedGroupOptions={selectedGroupOptions}
+              selectedJobOptions={selectedJobOptions}
+              onCreateGroupOption={this.onCreateGroupOption}
+              showNewEventModal={this.showNewEventModal}
+            />
+          </EuiPageContent>
+          {modal}
+        </EuiPage>
+      </Fragment>
     );
   }
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.test.js b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.test.js
index 3bf7a8ade705b..52ca426b9bd80 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.test.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_calendar.test.js
@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
+jest.mock('../../../components/navigation_menu/navigation_menu', () => ({
+  NavigationMenu: () => <div id="mockNavigationMenu" />
+}));
 jest.mock('../../../privilege/check_privilege', () => ({
   checkPermission: () => true
 }));
 jest.mock('../../../license/check_license', () => ({
-  hasLicenseExpired: () => false
+  hasLicenseExpired: () => false,
+  isFullLicense: () => false
 }));
 jest.mock('../../../privilege/get_privileges', () => ({
   getPrivileges: () => {}
@@ -18,9 +20,6 @@ jest.mock('../../../privilege/get_privileges', () => ({
 jest.mock('../../../ml_nodes_check/check_ml_nodes', () => ({
   mlNodesAvailable: () => true
 }));
-jest.mock('ui/chrome', () => ({
-  getBasePath: jest.fn()
-}));
 jest.mock('../../../services/ml_api_service', () => ({
   ml: {
     calendars: () => {
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/list/__snapshots__/calendars_list.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/calendars/list/__snapshots__/calendars_list.test.js.snap
index d582c96b410cf..40f67b5043c86 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/list/__snapshots__/calendars_list.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/list/__snapshots__/calendars_list.test.js.snap
@@ -1,69 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CalendarsList Renders calendar list with calendars 1`] = `
-<EuiPage
-  className="mlCalendarList"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="mlCalendarList__content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="mlCalendarList"
+    restrictWidth={false}
   >
-    <CalendarsListHeader
-      refreshCalendars={[Function]}
-      totalCount={2}
-    />
-    <InjectIntl(CalendarsListTable)
-      calendarsList={
-        Array [
-          Object {
-            "calendar_id": "farequote-calendar",
-            "description": "test ",
-            "events": Array [
-              Object {
-                "calendar_id": "farequote-calendar",
-                "description": "Downtime feb 9 2017 10:10 to 10:30",
-                "end_time": 1486657800000,
-                "event_id": "Ee-YgGcBxHgQWEhCO_xj",
-                "start_time": 1486656600000,
-              },
-            ],
-            "events_length": 1,
-            "job_ids": Array [
-              "farequote",
-            ],
-            "job_ids_string": "farequote",
-          },
-          Object {
-            "calendar_id": "this-is-a-new-calendar",
-            "description": "new calendar",
-            "events": Array [
-              Object {
-                "calendar_id": "this-is-a-new-calendar",
-                "description": "New event!",
-                "end_time": 1544162400000,
-                "event_id": "ehWKhGcBqHkXuWNrIrSV",
-                "start_time": 1544076000000,
-              },
-            ],
-            "events_length": 1,
-            "job_ids": Array [
-              "test",
-            ],
-            "job_ids_string": "test",
-          },
-        ]
-      }
-      canCreateCalendar={true}
-      canDeleteCalendar={true}
-      itemsSelected={false}
-      loading={false}
-      mlNodesAvailable={true}
-      onDeleteClick={[Function]}
-      setSelectedCalendarList={[Function]}
-    />
-  </EuiPageContent>
-</EuiPage>
+    <EuiPageContent
+      className="mlCalendarList__content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
+    >
+      <CalendarsListHeader
+        refreshCalendars={[Function]}
+        totalCount={2}
+      />
+      <InjectIntl(CalendarsListTable)
+        calendarsList={
+          Array [
+            Object {
+              "calendar_id": "farequote-calendar",
+              "description": "test ",
+              "events": Array [
+                Object {
+                  "calendar_id": "farequote-calendar",
+                  "description": "Downtime feb 9 2017 10:10 to 10:30",
+                  "end_time": 1486657800000,
+                  "event_id": "Ee-YgGcBxHgQWEhCO_xj",
+                  "start_time": 1486656600000,
+                },
+              ],
+              "events_length": 1,
+              "job_ids": Array [
+                "farequote",
+              ],
+              "job_ids_string": "farequote",
+            },
+            Object {
+              "calendar_id": "this-is-a-new-calendar",
+              "description": "new calendar",
+              "events": Array [
+                Object {
+                  "calendar_id": "this-is-a-new-calendar",
+                  "description": "New event!",
+                  "end_time": 1544162400000,
+                  "event_id": "ehWKhGcBqHkXuWNrIrSV",
+                  "start_time": 1544076000000,
+                },
+              ],
+              "events_length": 1,
+              "job_ids": Array [
+                "test",
+              ],
+              "job_ids_string": "test",
+            },
+          ]
+        }
+        canCreateCalendar={true}
+        canDeleteCalendar={true}
+        itemsSelected={false}
+        loading={false}
+        mlNodesAvailable={true}
+        onDeleteClick={[Function]}
+        setSelectedCalendarList={[Function]}
+      />
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.js b/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.js
index c24147b8123b8..0b5657b62ebf3 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.js
@@ -6,9 +6,7 @@
 
 
 
-import React, {
-  Component
-} from 'react';
+import React, { Component, Fragment } from 'react';
 import { PropTypes } from 'prop-types';
 
 import {
@@ -19,6 +17,7 @@ import {
   EUI_MODAL_CONFIRM_BUTTON,
 } from '@elastic/eui';
 
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
 import { CalendarsListHeader } from './header';
 import { CalendarsListTable } from './table/';
 import { ml } from '../../../services/ml_api_service';
@@ -147,29 +146,32 @@ export const CalendarsList = injectI18n(class CalendarsList extends Component {
     }
 
     return (
-      <EuiPage className="mlCalendarList">
-        <EuiPageContent
-          className="mlCalendarList__content"
-          verticalPosition="center"
-          horizontalPosition="center"
-        >
-          <CalendarsListHeader
-            totalCount={calendars.length}
-            refreshCalendars={this.loadCalendars}
-          />
-          <CalendarsListTable
-            loading={loading}
-            calendarsList={this.addRequiredFieldsToList(calendars)}
-            onDeleteClick={this.showDestroyModal}
-            canCreateCalendar={canCreateCalendar}
-            canDeleteCalendar={canDeleteCalendar}
-            mlNodesAvailable={nodesAvailable}
-            setSelectedCalendarList={this.setSelectedCalendarList}
-            itemsSelected={selectedForDeletion.length > 0}
-          />
-        </EuiPageContent>
-        {destroyModal}
-      </EuiPage>
+      <Fragment>
+        <NavigationMenu tabId="settings" />
+        <EuiPage className="mlCalendarList">
+          <EuiPageContent
+            className="mlCalendarList__content"
+            verticalPosition="center"
+            horizontalPosition="center"
+          >
+            <CalendarsListHeader
+              totalCount={calendars.length}
+              refreshCalendars={this.loadCalendars}
+            />
+            <CalendarsListTable
+              loading={loading}
+              calendarsList={this.addRequiredFieldsToList(calendars)}
+              onDeleteClick={this.showDestroyModal}
+              canCreateCalendar={canCreateCalendar}
+              canDeleteCalendar={canDeleteCalendar}
+              mlNodesAvailable={nodesAvailable}
+              setSelectedCalendarList={this.setSelectedCalendarList}
+              itemsSelected={selectedForDeletion.length > 0}
+            />
+          </EuiPageContent>
+          {destroyModal}
+        </EuiPage>
+      </Fragment>
     );
   }
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.test.js b/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.test.js
index af6f0272b78d7..84211597f313c 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.test.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/list/calendars_list.test.js
@@ -4,13 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+import { ml } from '../../../services/ml_api_service';
 
+import { CalendarsList } from './calendars_list';
 
+jest.mock('../../../components/navigation_menu/navigation_menu', () => ({
+  NavigationMenu: () => <div id="mockNavigationMenu" />
+}));
 jest.mock('../../../privilege/check_privilege', () => ({
   checkPermission: () => true
 }));
 jest.mock('../../../license/check_license', () => ({
-  hasLicenseExpired: () => false
+  hasLicenseExpired: () => false,
+  isFullLicense: () => false
 }));
 jest.mock('../../../privilege/get_privileges', () => ({
   getPrivileges: () => {}
@@ -18,9 +26,6 @@ jest.mock('../../../privilege/get_privileges', () => ({
 jest.mock('../../../ml_nodes_check/check_ml_nodes', () => ({
   mlNodesAvailable: () => true
 }));
-jest.mock('ui/chrome', () => ({
-  getBasePath: jest.fn()
-}));
 jest.mock('../../../services/ml_api_service', () => ({
   ml: {
     calendars: () => {
@@ -30,12 +35,6 @@ jest.mock('../../../services/ml_api_service', () => ({
   }
 }));
 
-import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
-import React from 'react';
-import { ml } from '../../../services/ml_api_service';
-
-import { CalendarsList } from './calendars_list';
-
 const testingState = {
   loading: false,
   calendars: [
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/list/directive.js b/x-pack/legacy/plugins/ml/public/settings/calendars/list/directive.js
index 3d72eb7912ac6..4f16433b987d5 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/list/directive.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/list/directive.js
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
 import 'ngreact';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -17,27 +16,28 @@ import { checkGetJobsPrivilege, checkPermission } from '../../../privilege/check
 import { getMlNodeCount } from '../../../ml_nodes_check/check_ml_nodes';
 import { getCalendarManagementBreadcrumbs } from '../../breadcrumbs';
 
+import chrome from 'ui/chrome';
 import uiRoutes from 'ui/routes';
-
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 import { I18nContext } from 'ui/i18n';
 
+import { NavigationMenuContext } from '../../../util/context_utils';
+
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="settings" />
   <ml-calendars-list />
 `;
 
-uiRoutes
-  .when('/settings/calendars_list', {
-    template,
-    k7Breadcrumbs: getCalendarManagementBreadcrumbs,
-    resolve: {
-      CheckLicense: checkFullLicense,
-      privileges: checkGetJobsPrivilege,
-      mlNodeCount: getMlNodeCount,
-    }
-  });
-
+uiRoutes.when('/settings/calendars_list', {
+  template,
+  k7Breadcrumbs: getCalendarManagementBreadcrumbs,
+  resolve: {
+    CheckLicense: checkFullLicense,
+    privileges: checkGetJobsPrivilege,
+    mlNodeCount: getMlNodeCount,
+  },
+});
 
 import { CalendarsList } from './calendars_list';
 
@@ -54,10 +54,12 @@ module.directive('mlCalendarsList', function () {
 
       ReactDOM.render(
         <I18nContext>
-          {React.createElement(CalendarsList, props)}
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <CalendarsList {...props} />
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
-    }
+    },
   };
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/edit_filter_list.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/edit_filter_list.test.js.snap
index 43464755a4b79..e19c61350f8c7 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/edit_filter_list.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/edit_filter_list.test.js.snap
@@ -1,852 +1,892 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EditFilterList adds new items to filter list 1`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description="List of known safe domains"
-      isNewFilterIdInvalid={false}
-      newFilterId=""
-      totalItemCount={6}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-      usedBy={
-        Object {
-          "detectors": Array [
-            "high info content",
-          ],
-          "jobs": Array [
-            "dns_exfiltration",
-          ],
-        }
-      }
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={
-        Array [
-          "amazon.com",
-          "elastic.co",
-          "google.co.uk",
-          "google.com",
-          "spotify.com",
-          "youtube.com",
-        ]
-      }
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={6}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description="List of known safe domains"
+        isNewFilterIdInvalid={false}
+        newFilterId=""
+        totalItemCount={6}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+        usedBy={
+          Object {
+            "detectors": Array [
+              "high info content",
+            ],
+            "jobs": Array [
+              "dns_exfiltration",
+            ],
+          }
+        }
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={
+          Array [
+            "amazon.com",
+            "elastic.co",
+            "google.co.uk",
+            "google.com",
+            "spotify.com",
+            "youtube.com",
+          ]
+        }
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={6}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList renders after selecting an item and deleting it 1`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description="List of known safe domains"
-      isNewFilterIdInvalid={false}
-      newFilterId=""
-      totalItemCount={4}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-      usedBy={
-        Object {
-          "detectors": Array [
-            "high info content",
-          ],
-          "jobs": Array [
-            "dns_exfiltration",
-          ],
-        }
-      }
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={1}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={
-        Array [
-          "google.com",
-          "google.co.uk",
-          "elastic.co",
-          "youtube.com",
-        ]
-      }
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={
-        Array [
-          "google.co.uk",
-        ]
-      }
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={4}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description="List of known safe domains"
+        isNewFilterIdInvalid={false}
+        newFilterId=""
+        totalItemCount={4}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+        usedBy={
+          Object {
+            "detectors": Array [
+              "high info content",
+            ],
+            "jobs": Array [
+              "dns_exfiltration",
+            ],
+          }
+        }
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={1}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={
+          Array [
+            "google.com",
+            "google.co.uk",
+            "elastic.co",
+            "youtube.com",
+          ]
+        }
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={
+          Array [
+            "google.co.uk",
+          ]
+        }
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={4}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList renders after selecting an item and deleting it 2`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description="List of known safe domains"
-      isNewFilterIdInvalid={false}
-      newFilterId=""
-      totalItemCount={3}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-      usedBy={
-        Object {
-          "detectors": Array [
-            "high info content",
-          ],
-          "jobs": Array [
-            "dns_exfiltration",
-          ],
-        }
-      }
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={
-        Array [
-          "google.com",
-          "elastic.co",
-          "youtube.com",
-        ]
-      }
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={3}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description="List of known safe domains"
+        isNewFilterIdInvalid={false}
+        newFilterId=""
+        totalItemCount={3}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+        usedBy={
+          Object {
+            "detectors": Array [
+              "high info content",
+            ],
+            "jobs": Array [
+              "dns_exfiltration",
+            ],
+          }
+        }
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={
+          Array [
+            "google.com",
+            "elastic.co",
+            "youtube.com",
+          ]
+        }
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={3}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList renders the edit page for a new filter list and updates ID 1`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description=""
-      isNewFilterIdInvalid={true}
-      newFilterId=""
-      totalItemCount={0}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={Array []}
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={0}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description=""
+        isNewFilterIdInvalid={true}
+        newFilterId=""
+        totalItemCount={0}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={Array []}
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={0}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={true}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={true}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList renders the edit page for a new filter list and updates ID 2`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description=""
-      isNewFilterIdInvalid={false}
-      newFilterId="new_filter_list"
-      totalItemCount={0}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={Array []}
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={0}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description=""
+        isNewFilterIdInvalid={false}
+        newFilterId="new_filter_list"
+        totalItemCount={0}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={Array []}
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={0}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList renders the edit page for an existing filter list and updates description 1`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description="List of known safe domains"
-      isNewFilterIdInvalid={false}
-      newFilterId=""
-      totalItemCount={4}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-      usedBy={
-        Object {
-          "detectors": Array [
-            "high info content",
-          ],
-          "jobs": Array [
-            "dns_exfiltration",
-          ],
-        }
-      }
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={
-        Array [
-          "google.com",
-          "google.co.uk",
-          "elastic.co",
-          "youtube.com",
-        ]
-      }
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={4}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description="List of known safe domains"
+        isNewFilterIdInvalid={false}
+        newFilterId=""
+        totalItemCount={4}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+        usedBy={
+          Object {
+            "detectors": Array [
+              "high info content",
+            ],
+            "jobs": Array [
+              "dns_exfiltration",
+            ],
+          }
+        }
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={
+          Array [
+            "google.com",
+            "google.co.uk",
+            "elastic.co",
+            "youtube.com",
+          ]
+        }
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={4}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList renders the edit page for an existing filter list and updates description 2`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description="Known safe web domains"
-      isNewFilterIdInvalid={false}
-      newFilterId=""
-      totalItemCount={4}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-      usedBy={
-        Object {
-          "detectors": Array [
-            "high info content",
-          ],
-          "jobs": Array [
-            "dns_exfiltration",
-          ],
-        }
-      }
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={
-        Array [
-          "google.com",
-          "google.co.uk",
-          "elastic.co",
-          "youtube.com",
-        ]
-      }
-      itemsPerPage={50}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={4}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description="Known safe web domains"
+        isNewFilterIdInvalid={false}
+        newFilterId=""
+        totalItemCount={4}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+        usedBy={
+          Object {
+            "detectors": Array [
+              "high info content",
+            ],
+            "jobs": Array [
+              "dns_exfiltration",
+            ],
+          }
+        }
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={
+          Array [
+            "google.com",
+            "google.co.uk",
+            "elastic.co",
+            "youtube.com",
+          ]
+        }
+        itemsPerPage={50}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={4}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
 
 exports[`EditFilterList updates the items per page 1`] = `
-<EuiPage
-  className="ml-edit-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-edit-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-edit-filter-lists"
+    restrictWidth={false}
   >
-    <EditFilterListHeader
-      canCreateFilter={true}
-      description="List of known safe domains"
-      isNewFilterIdInvalid={false}
-      newFilterId=""
-      totalItemCount={4}
-      updateDescription={[Function]}
-      updateNewFilterId={[Function]}
-      usedBy={
-        Object {
-          "detectors": Array [
-            "high info content",
-          ],
-          "jobs": Array [
-            "dns_exfiltration",
-          ],
-        }
-      }
-    />
-    <EditFilterListToolbar
-      addItems={[Function]}
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      deleteSelectedItems={[Function]}
-      onSearchChange={[Function]}
-      selectedItemCount={0}
-    />
-    <EuiSpacer
-      size="xl"
-    />
-    <ItemsGrid
-      activePage={0}
-      items={
-        Array [
-          "google.com",
-          "google.co.uk",
-          "elastic.co",
-          "youtube.com",
-        ]
-      }
-      itemsPerPage={500}
-      itemsPerPageOptions={
-        Array [
-          50,
-          100,
-          500,
-          1000,
-        ]
-      }
-      numberColumns={4}
-      selectedItems={Array []}
-      setActivePage={[Function]}
-      setItemSelected={[Function]}
-      setItemsPerPage={[Function]}
-      totalItemCount={4}
-    />
-    <EuiFlexGroup
-      justifyContent="flexEnd"
+    <EuiPageContent
+      className="ml-edit-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
     >
-      <EuiFlexItem
-        grow={false}
+      <EditFilterListHeader
+        canCreateFilter={true}
+        description="List of known safe domains"
+        isNewFilterIdInvalid={false}
+        newFilterId=""
+        totalItemCount={4}
+        updateDescription={[Function]}
+        updateNewFilterId={[Function]}
+        usedBy={
+          Object {
+            "detectors": Array [
+              "high info content",
+            ],
+            "jobs": Array [
+              "dns_exfiltration",
+            ],
+          }
+        }
+      />
+      <EditFilterListToolbar
+        addItems={[Function]}
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        deleteSelectedItems={[Function]}
+        onSearchChange={[Function]}
+        selectedItemCount={0}
+      />
+      <EuiSpacer
+        size="xl"
+      />
+      <ItemsGrid
+        activePage={0}
+        items={
+          Array [
+            "google.com",
+            "google.co.uk",
+            "elastic.co",
+            "youtube.com",
+          ]
+        }
+        itemsPerPage={500}
+        itemsPerPageOptions={
+          Array [
+            50,
+            100,
+            500,
+            1000,
+          ]
+        }
+        numberColumns={4}
+        selectedItems={Array []}
+        setActivePage={[Function]}
+        setItemSelected={[Function]}
+        setItemsPerPage={[Function]}
+        totalItemCount={4}
+      />
+      <EuiFlexGroup
+        justifyContent="flexEnd"
       >
-        <EuiButtonEmpty
-          color="primary"
-          iconSide="left"
-          onClick={[Function]}
-          type="button"
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Cancel"
-            id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-            values={Object {}}
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-      >
-        <EuiButton
-          color="primary"
-          disabled={false}
-          fill={true}
-          iconSide="left"
-          onClick={[Function]}
-          size="m"
-          type="button"
+          <EuiButtonEmpty
+            color="primary"
+            iconSide="left"
+            onClick={[Function]}
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Cancel"
+              id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+              values={Object {}}
+            />
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
         >
-          <FormattedMessage
-            defaultMessage="Save"
-            id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-            values={Object {}}
-          />
-        </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiPageContent>
-</EuiPage>
+          <EuiButton
+            color="primary"
+            disabled={false}
+            fill={true}
+            iconSide="left"
+            onClick={[Function]}
+            size="m"
+            type="button"
+          >
+            <FormattedMessage
+              defaultMessage="Save"
+              id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+              values={Object {}}
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/directive.js b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/directive.js
index e51d700eb90e6..af3ba07d1b655 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/directive.js
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/directive.js
@@ -9,8 +9,6 @@ import 'ngreact';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { I18nContext } from 'ui/i18n';
-
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
@@ -20,11 +18,16 @@ import { checkGetJobsPrivilege, checkPermission } from 'plugins/ml/privilege/che
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
 import { EditFilterList } from './edit_filter_list';
 
+import chrome from 'ui/chrome';
 import uiRoutes from 'ui/routes';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
+import { I18nContext } from 'ui/i18n';
+
+import { NavigationMenuContext } from '../../../util/context_utils';
 
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="settings" />
   <ml-edit-filter-list />
 `;
 
@@ -62,7 +65,9 @@ module.directive('mlEditFilterList', function ($route) {
 
       ReactDOM.render(
         <I18nContext>
-          {React.createElement(EditFilterList, props)}
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <EditFilterList {...props} />
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.js b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.js
index 81b12dc78b987..2a27dd0fc9774 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.js
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.js
@@ -11,9 +11,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, {
-  Component
-} from 'react';
+import React, { Component, Fragment } from 'react';
 
 import {
   EuiButton,
@@ -33,6 +31,7 @@ import { toastNotifications } from 'ui/notify';
 import { EditFilterListHeader } from './header';
 import { EditFilterListToolbar } from './toolbar';
 import { ItemsGrid } from '../../../components/items_grid';
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
 import {
   isValidFilterListId,
   saveFilterList
@@ -309,71 +308,74 @@ export const EditFilterList = injectI18n(class extends Component {
     const totalItemCount = (items !== undefined) ? items.length : 0;
 
     return (
-      <EuiPage className="ml-edit-filter-lists">
-        <EuiPageContent
-          className="ml-edit-filter-lists-content"
-          verticalPosition="center"
-          horizontalPosition="center"
-        >
-          <EditFilterListHeader
-            canCreateFilter={canCreateFilter}
-            filterId={this.props.filterId}
-            newFilterId={newFilterId}
-            isNewFilterIdInvalid={isNewFilterIdInvalid}
-            updateNewFilterId={this.updateNewFilterId}
-            description={description}
-            updateDescription={this.updateDescription}
-            totalItemCount={totalItemCount}
-            usedBy={loadedFilter.used_by}
-          />
-          <EditFilterListToolbar
-            canCreateFilter={canCreateFilter}
-            canDeleteFilter={canDeleteFilter}
-            onSearchChange={this.onSearchChange}
-            addItems={this.addItems}
-            deleteSelectedItems={this.deleteSelectedItems}
-            selectedItemCount={selectedItems.length}
-          />
-          <EuiSpacer size="xl" />
-          <ItemsGrid
-            totalItemCount={totalItemCount}
-            items={matchingItems}
-            selectedItems={selectedItems}
-            itemsPerPage={itemsPerPage}
-            setItemsPerPage={this.setItemsPerPage}
-            setItemSelected={this.setItemSelected}
-            activePage={activePage}
-            setActivePage={this.setActivePage}
-          />
-          <EuiFlexGroup justifyContent="flexEnd">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                onClick={returnToFiltersList}
-              >
-                <FormattedMessage
-                  id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
-                  defaultMessage="Cancel"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                onClick={this.save}
-                disabled={(saveInProgress === true) ||
+      <Fragment>
+        <NavigationMenu tabId="settings" />
+        <EuiPage className="ml-edit-filter-lists">
+          <EuiPageContent
+            className="ml-edit-filter-lists-content"
+            verticalPosition="center"
+            horizontalPosition="center"
+          >
+            <EditFilterListHeader
+              canCreateFilter={canCreateFilter}
+              filterId={this.props.filterId}
+              newFilterId={newFilterId}
+              isNewFilterIdInvalid={isNewFilterIdInvalid}
+              updateNewFilterId={this.updateNewFilterId}
+              description={description}
+              updateDescription={this.updateDescription}
+              totalItemCount={totalItemCount}
+              usedBy={loadedFilter.used_by}
+            />
+            <EditFilterListToolbar
+              canCreateFilter={canCreateFilter}
+              canDeleteFilter={canDeleteFilter}
+              onSearchChange={this.onSearchChange}
+              addItems={this.addItems}
+              deleteSelectedItems={this.deleteSelectedItems}
+              selectedItemCount={selectedItems.length}
+            />
+            <EuiSpacer size="xl" />
+            <ItemsGrid
+              totalItemCount={totalItemCount}
+              items={matchingItems}
+              selectedItems={selectedItems}
+              itemsPerPage={itemsPerPage}
+              setItemsPerPage={this.setItemsPerPage}
+              setItemSelected={this.setItemSelected}
+              activePage={activePage}
+              setActivePage={this.setActivePage}
+            />
+            <EuiFlexGroup justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  onClick={returnToFiltersList}
+                >
+                  <FormattedMessage
+                    id="xpack.ml.settings.filterLists.editFilterList.cancelButtonLabel"
+                    defaultMessage="Cancel"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  onClick={this.save}
+                  disabled={(saveInProgress === true) ||
                   (isNewFilterIdInvalid === true) ||
                   (canCreateFilter === false)
-                }
-                fill
-              >
-                <FormattedMessage
-                  id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
-                  defaultMessage="Save"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageContent>
-      </EuiPage>
+                  }
+                  fill
+                >
+                  <FormattedMessage
+                    id="xpack.ml.settings.filterLists.editFilterList.saveButtonLabel"
+                    defaultMessage="Save"
+                  />
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageContent>
+        </EuiPage>
+      </Fragment>
     );
   }
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.test.js b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.test.js
index 75d6d34f0a586..035913d5dc465 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.test.js
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/edit_filter_list.test.js
@@ -4,6 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+jest.mock('../../../components/navigation_menu/navigation_menu', () => ({
+  NavigationMenu: () => <div id="mockNavigationMenu" />
+}));
+
 // Define the required mocks used for loading, saving and validating the filter list.
 jest.mock('./utils', () => ({
   isValidFilterListId: () => true,
@@ -19,7 +23,7 @@ const mockTestFilter = {
   items: ['google.com', 'google.co.uk', 'elastic.co', 'youtube.com'],
   used_by: {
     detectors: ['high info content'],
-    jobs: ['dns_exfiltration']
+    jobs: ['dns_exfiltration'],
   },
 };
 jest.mock('../../../services/ml_api_service', () => ({
@@ -27,12 +31,11 @@ jest.mock('../../../services/ml_api_service', () => ({
     filters: {
       filters: () => {
         return Promise.resolve(mockTestFilter);
-      }
-    }
-  }
+      },
+    },
+  },
 }));
 
-
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 
@@ -40,14 +43,11 @@ import { EditFilterList } from './edit_filter_list';
 
 const props = {
   canCreateFilter: true,
-  canDeleteFilter: true
+  canDeleteFilter: true,
 };
 
 function prepareEditTest() {
-
-  const wrapper = shallowWithIntl(
-    <EditFilterList.WrappedComponent {...props}/>
-  );
+  const wrapper = shallowWithIntl(<EditFilterList.WrappedComponent {...props} />);
 
   // Cannot find a way to generate the snapshot after the Promise in the mock ml.filters
   // has resolved.
@@ -61,11 +61,8 @@ function prepareEditTest() {
 }
 
 describe('EditFilterList', () => {
-
   test('renders the edit page for a new filter list and updates ID', () => {
-    const wrapper = shallowWithIntl(
-      <EditFilterList.WrappedComponent {...props}/>
-    );
+    const wrapper = shallowWithIntl(<EditFilterList.WrappedComponent {...props} />);
     expect(wrapper).toMatchSnapshot();
 
     const instance = wrapper.instance();
@@ -114,5 +111,4 @@ describe('EditFilterList', () => {
     wrapper.update();
     expect(wrapper).toMatchSnapshot();
   });
-
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/__snapshots__/filter_lists.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/__snapshots__/filter_lists.test.js.snap
index b95a7966ad80d..129e9a0f83caa 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/__snapshots__/filter_lists.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/__snapshots__/filter_lists.test.js.snap
@@ -1,41 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filter Lists renders a list of filters 1`] = `
-<EuiPage
-  className="ml-list-filter-lists"
-  restrictWidth={false}
->
-  <EuiPageContent
-    className="ml-list-filter-lists-content"
-    horizontalPosition="center"
-    panelPaddingSize="l"
-    verticalPosition="center"
+<Fragment>
+  <NavigationMenu
+    tabId="settings"
+  />
+  <EuiPage
+    className="ml-list-filter-lists"
+    restrictWidth={false}
   >
-    <FilterListsHeader
-      refreshFilterLists={[Function]}
-      totalCount={1}
-    />
-    <FilterListsTable
-      canCreateFilter={true}
-      canDeleteFilter={true}
-      filterLists={
-        Array [
-          Object {
-            "description": "List of known safe domains",
-            "filter_id": "safe_domains",
-            "item_count": 500,
-            "used_by": Object {
-              "jobs": Array [
-                "dns_exfiltration",
-              ],
+    <EuiPageContent
+      className="ml-list-filter-lists-content"
+      horizontalPosition="center"
+      panelPaddingSize="l"
+      verticalPosition="center"
+    >
+      <FilterListsHeader
+        refreshFilterLists={[Function]}
+        totalCount={1}
+      />
+      <FilterListsTable
+        canCreateFilter={true}
+        canDeleteFilter={true}
+        filterLists={
+          Array [
+            Object {
+              "description": "List of known safe domains",
+              "filter_id": "safe_domains",
+              "item_count": 500,
+              "used_by": Object {
+                "jobs": Array [
+                  "dns_exfiltration",
+                ],
+              },
             },
-          },
-        ]
-      }
-      refreshFilterLists={[Function]}
-      selectedFilterLists={Array []}
-      setSelectedFilterLists={[Function]}
-    />
-  </EuiPageContent>
-</EuiPage>
+          ]
+        }
+        refreshFilterLists={[Function]}
+        selectedFilterLists={Array []}
+        setSelectedFilterLists={[Function]}
+      />
+    </EuiPageContent>
+  </EuiPage>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/directive.js b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/directive.js
index f27f6e0609e26..95cdebf3518f7 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/directive.js
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/directive.js
@@ -9,8 +9,6 @@ import 'ngreact';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { I18nContext } from 'ui/i18n';
-
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
@@ -20,11 +18,16 @@ import { checkGetJobsPrivilege, checkPermission } from 'plugins/ml/privilege/che
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
 import { FilterLists } from './filter_lists';
 
+import chrome from 'ui/chrome';
 import uiRoutes from 'ui/routes';
+import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
+import { I18nContext } from 'ui/i18n';
+
+import { NavigationMenuContext } from '../../../util/context_utils';
 
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="settings" />
   <ml-filter-lists />
 `;
 
@@ -52,7 +55,9 @@ module.directive('mlFilterLists', function () {
 
       ReactDOM.render(
         <I18nContext>
-          {React.createElement(FilterLists, props)}
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }}>
+            <FilterLists {...props} />
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.js b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.js
index f940e51d6f0ae..8ea2bb8929913 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.js
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.js
@@ -9,9 +9,7 @@
  * React table for displaying a table of filter lists.
  */
 
-import React, {
-  Component
-} from 'react';
+import React, { Component, Fragment } from 'react';
 import { PropTypes } from 'prop-types';
 
 import {
@@ -23,6 +21,8 @@ import { injectI18n } from '@kbn/i18n/react';
 
 import { toastNotifications } from 'ui/notify';
 
+import { NavigationMenu } from '../../../components/navigation_menu/navigation_menu';
+
 import { FilterListsHeader } from './header';
 import { FilterListsTable } from './table';
 import { ml } from '../../../services/ml_api_service';
@@ -88,26 +88,29 @@ export const FilterLists = injectI18n(class extends Component {
     const { canCreateFilter, canDeleteFilter } = this.props;
 
     return (
-      <EuiPage className="ml-list-filter-lists">
-        <EuiPageContent
-          className="ml-list-filter-lists-content"
-          verticalPosition="center"
-          horizontalPosition="center"
-        >
-          <FilterListsHeader
-            totalCount={filterLists.length}
-            refreshFilterLists={this.refreshFilterLists}
-          />
-          <FilterListsTable
-            canCreateFilter={canCreateFilter}
-            canDeleteFilter={canDeleteFilter}
-            filterLists={filterLists}
-            selectedFilterLists={selectedFilterLists}
-            setSelectedFilterLists={this.setSelectedFilterLists}
-            refreshFilterLists={this.refreshFilterLists}
-          />
-        </EuiPageContent>
-      </EuiPage>
+      <Fragment>
+        <NavigationMenu tabId="settings" />
+        <EuiPage className="ml-list-filter-lists">
+          <EuiPageContent
+            className="ml-list-filter-lists-content"
+            verticalPosition="center"
+            horizontalPosition="center"
+          >
+            <FilterListsHeader
+              totalCount={filterLists.length}
+              refreshFilterLists={this.refreshFilterLists}
+            />
+            <FilterListsTable
+              canCreateFilter={canCreateFilter}
+              canDeleteFilter={canDeleteFilter}
+              filterLists={filterLists}
+              selectedFilterLists={selectedFilterLists}
+              setSelectedFilterLists={this.setSelectedFilterLists}
+              refreshFilterLists={this.refreshFilterLists}
+            />
+          </EuiPageContent>
+        </EuiPage>
+      </Fragment>
     );
   }
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.test.js b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.test.js
index 2aa95f8604829..3c6a564ec92b4 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.test.js
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/list/filter_lists.test.js
@@ -4,9 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import React from 'react';
+
+import { FilterLists } from './filter_lists';
 
+jest.mock('../../../components/navigation_menu/navigation_menu', () => ({
+  NavigationMenu: () => <div id="mockNavigationMenu" />
+}));
 jest.mock('../../../privilege/check_privilege', () => ({
-  checkPermission: () => true
+  checkPermission: () => true,
 }));
 
 // Mock the call for loading the list of filters.
@@ -23,28 +30,19 @@ jest.mock('../../../services/ml_api_service', () => ({
     filters: {
       filtersStats: () => {
         return Promise.resolve([mockTestFilter]);
-      }
-    }
-  }
+      },
+    },
+  },
 }));
 
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
-import React from 'react';
-
-import { FilterLists } from './filter_lists';
-
 const props = {
   canCreateFilter: true,
-  canDeleteFilter: true
+  canDeleteFilter: true,
 };
 
 describe('Filter Lists', () => {
-
   test('renders a list of filters', () => {
-
-    const wrapper = shallowWithIntl(
-      <FilterLists.WrappedComponent {...props}/>
-    );
+    const wrapper = shallowWithIntl(<FilterLists.WrappedComponent {...props} />);
 
     // Cannot find a way to generate the snapshot after the Promise in the mock ml.filters
     // has resolved.
@@ -54,5 +52,4 @@ describe('Filter Lists', () => {
     wrapper.update();
     expect(wrapper).toMatchSnapshot();
   });
-
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/settings.js b/x-pack/legacy/plugins/ml/public/settings/settings.js
index ab4f807cae728..3e1b7d724f188 100644
--- a/x-pack/legacy/plugins/ml/public/settings/settings.js
+++ b/x-pack/legacy/plugins/ml/public/settings/settings.js
@@ -6,7 +6,7 @@
 
 
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { PropTypes } from 'prop-types';
 
 import {
@@ -20,67 +20,73 @@ import {
   EuiTitle
 } from '@elastic/eui';
 
-import chrome from 'ui/chrome';
-
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { useNavigationMenuContext } from '../util/context_utils';
+import { NavigationMenu } from '../components/navigation_menu/navigation_menu';
+
 export function Settings({
   canGetFilters,
   canGetCalendars
 }) {
+  const basePath = useNavigationMenuContext().chrome.getBasePath();
+
   return (
-    <EuiPage className="mlSettingsPage" data-test-subj="mlPageSettings">
-      <EuiPageBody className="mlSettingsPage__body">
-        <EuiPageContent
-          className="mlSettingsPage__content"
-          horizontalPosition="center"
-        >
-          <EuiPageContentHeader>
-            <EuiTitle>
-              <h2>
-                <FormattedMessage
-                  id="xpack.ml.settings.jobManagementTitle"
-                  defaultMessage="Job Management"
-                />
-              </h2>
-            </EuiTitle>
-          </EuiPageContentHeader>
+    <Fragment>
+      <NavigationMenu tabId="settings" />
+      <EuiPage className="mlSettingsPage" data-test-subj="mlPageSettings">
+        <EuiPageBody className="mlSettingsPage__body">
+          <EuiPageContent
+            className="mlSettingsPage__content"
+            horizontalPosition="center"
+          >
+            <EuiPageContentHeader>
+              <EuiTitle>
+                <h2>
+                  <FormattedMessage
+                    id="xpack.ml.settings.jobManagementTitle"
+                    defaultMessage="Job Management"
+                  />
+                </h2>
+              </EuiTitle>
+            </EuiPageContentHeader>
 
-          <EuiFlexGroup gutterSize="xl">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                data-test-subj="ml_calendar_mng_button"
-                size="l"
-                color="primary"
-                href={`${chrome.getBasePath()}/app/ml#/settings/calendars_list`}
-                isDisabled={canGetCalendars === false}
-              >
-                <FormattedMessage
-                  id="xpack.ml.settings.calendarManagementButtonLabel"
-                  defaultMessage="Calendar management"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
+            <EuiFlexGroup gutterSize="xl">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  data-test-subj="ml_calendar_mng_button"
+                  size="l"
+                  color="primary"
+                  href={`${basePath}/app/ml#/settings/calendars_list`}
+                  isDisabled={canGetCalendars === false}
+                >
+                  <FormattedMessage
+                    id="xpack.ml.settings.calendarManagementButtonLabel"
+                    defaultMessage="Calendar management"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
 
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                data-test-subj="ml_filter_lists_button"
-                size="l"
-                color="primary"
-                href={`${chrome.getBasePath()}/app/ml#/settings/filter_lists`}
-                isDisabled={canGetFilters === false}
-              >
-                <FormattedMessage
-                  id="xpack.ml.settings.filterListsButtonLabel"
-                  defaultMessage="Filter Lists"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  data-test-subj="ml_filter_lists_button"
+                  size="l"
+                  color="primary"
+                  href={`${basePath}/app/ml#/settings/filter_lists`}
+                  isDisabled={canGetFilters === false}
+                >
+                  <FormattedMessage
+                    id="xpack.ml.settings.filterListsButtonLabel"
+                    defaultMessage="Filter Lists"
+                  />
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
 
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </Fragment>
   );
 }
 
diff --git a/x-pack/legacy/plugins/ml/public/settings/settings.test.js b/x-pack/legacy/plugins/ml/public/settings/settings.test.js
index 0d5cc000854e1..3e7129bbc0718 100644
--- a/x-pack/legacy/plugins/ml/public/settings/settings.test.js
+++ b/x-pack/legacy/plugins/ml/public/settings/settings.test.js
@@ -4,46 +4,65 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
-jest.mock('ui/chrome', () => ({
-  getBasePath: jest.fn()
-}));
-
-import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import PropTypes from 'prop-types';
 import React from 'react';
 
+import * as ContextUtils from '../util/context_utils';
 import { Settings } from './settings';
 
+const navigationMenuMock = ContextUtils.navigationMenuMock;
+const mountOptions = {
+  context: { NavigationMenuContext: navigationMenuMock },
+  childContextTypes: { NavigationMenuContext: PropTypes.object }
+};
+
+jest.mock('../components/navigation_menu/navigation_menu', () => ({
+  NavigationMenu: () => <div id="mockNavigationMenu" />
+}));
+jest.spyOn(ContextUtils, 'useNavigationMenuContext').mockImplementation(() => navigationMenuMock);
+
 
 describe('Settings', () => {
+  test('Renders settings page with all buttons enabled.', () => {
+    const wrapper = mountWithIntl(<Settings canGetFilters={true} canGetCalendars={true} />, mountOptions);
 
-  test('Renders settings page', () => {
-    const wrapper = shallowWithIntl(
-      <Settings canGetFilters={true} canGetCalendars={true}/>
-    );
+    const filterButton = wrapper
+      .find('[data-test-subj="ml_filter_lists_button"]')
+      .find('EuiButtonEmpty');
+    expect(filterButton.prop('isDisabled')).toBe(false);
 
-    expect(wrapper).toMatchSnapshot();
+    const calendarButton = wrapper
+      .find('[data-test-subj="ml_calendar_mng_button"]')
+      .find('EuiButtonEmpty');
+    expect(calendarButton.prop('isDisabled')).toBe(false);
   });
 
   test('Filter Lists button disabled if canGetFilters is false', () => {
-    const wrapper = mountWithIntl(
-      <Settings canGetFilters={false} canGetCalendars={true}/>
-    );
+    const wrapper = mountWithIntl(<Settings canGetFilters={false} canGetCalendars={true} />, mountOptions);
 
-    const button = wrapper.find('[data-test-subj="ml_filter_lists_button"]');
-    const filterButton = button.find('EuiButtonEmpty');
+    const filterButton = wrapper
+      .find('[data-test-subj="ml_filter_lists_button"]')
+      .find('EuiButtonEmpty');
     expect(filterButton.prop('isDisabled')).toBe(true);
+
+    const calendarButton = wrapper
+      .find('[data-test-subj="ml_calendar_mng_button"]')
+      .find('EuiButtonEmpty');
+    expect(calendarButton.prop('isDisabled')).toBe(false);
   });
 
   test('Calendar management button disabled if canGetCalendars is false', () => {
-    const wrapper = mountWithIntl(
-      <Settings canGetFilters={true} canGetCalendars={false} />
-    );
+    const wrapper = mountWithIntl(<Settings canGetFilters={true} canGetCalendars={false} />, mountOptions);
 
-    const button = wrapper.find('[data-test-subj="ml_calendar_mng_button"]');
-    const calendarButton = button.find('EuiButtonEmpty');
+    const filterButton = wrapper
+      .find('[data-test-subj="ml_filter_lists_button"]')
+      .find('EuiButtonEmpty');
+    expect(filterButton.prop('isDisabled')).toBe(false);
+
+    const calendarButton = wrapper
+      .find('[data-test-subj="ml_calendar_mng_button"]')
+      .find('EuiButtonEmpty');
     expect(calendarButton.prop('isDisabled')).toBe(true);
   });
-
 });
diff --git a/x-pack/legacy/plugins/ml/public/settings/settings_directive.js b/x-pack/legacy/plugins/ml/public/settings/settings_directive.js
index 68ac533089558..ab03c548f53cd 100644
--- a/x-pack/legacy/plugins/ml/public/settings/settings_directive.js
+++ b/x-pack/legacy/plugins/ml/public/settings/settings_directive.js
@@ -15,15 +15,17 @@ const module = uiModules.get('apps/ml', ['react']);
 import { checkFullLicense } from '../license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from '../privilege/check_privilege';
 import { getMlNodeCount } from '../ml_nodes_check/check_ml_nodes';
+import { NavigationMenuContext } from '../util/context_utils';
 import { getSettingsBreadcrumbs } from './breadcrumbs';
 
 import { I18nContext } from 'ui/i18n';
+import chrome from 'ui/chrome';
 import uiRoutes from 'ui/routes';
 import { timefilter } from 'ui/timefilter';
+import { timeHistory } from 'ui/timefilter/time_history';
 
 const template = `
   <div class="euiSpacer euiSpacer--s" />
-  <ml-nav-menu name="settings" />
   <ml-settings />
 `;
 
@@ -56,12 +58,9 @@ module.directive('mlSettings', function () {
 
       ReactDOM.render(
         <I18nContext>
-          {React.createElement(
-            Settings, {
-              canGetFilters,
-              canGetCalendars
-            })
-          }
+          <NavigationMenuContext.Provider value={{ chrome, timefilter, timeHistory }} >
+            <Settings canGetCalendars={canGetCalendars} canGetFilters={canGetFilters} />
+          </NavigationMenuContext.Provider>
         </I18nContext>,
         element[0]
       );
diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html
index 880e8466e10bd..300832d05c741 100644
--- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html
+++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.html
@@ -1,4 +1,4 @@
-<ml-nav-menu name="timeseriesexplorer"></ml-nav-menu>
+<ml-nav-menu name="timeseriesexplorer" />
 <ml-chart-tooltip></ml-chart-tooltip>
 <div class="ml-time-series-explorer" ng-controller="MlTimeSeriesExplorerController" data-test-subj="mlPageSingleMetricViewer"  >
 
diff --git a/x-pack/legacy/plugins/ml/public/util/context_utils.tsx b/x-pack/legacy/plugins/ml/public/util/context_utils.tsx
new file mode 100644
index 0000000000000..88d340bd6aa6b
--- /dev/null
+++ b/x-pack/legacy/plugins/ml/public/util/context_utils.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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, { useContext } from 'react';
+
+import { Chrome } from 'ui/chrome';
+import { Timefilter } from 'ui/timefilter';
+import { TimeHistory } from 'ui/timefilter/time_history';
+
+export const ChromeContext = React.createContext<Chrome>({} as Chrome);
+export const TimefilterContext = React.createContext<Timefilter>({} as Timefilter);
+export const TimeHistoryContext = React.createContext<TimeHistory>({} as TimeHistory);
+
+interface NavigationMenuContextValue {
+  chrome: Chrome;
+  timefilter: Timefilter;
+  timeHistory: TimeHistory;
+}
+export const NavigationMenuContext = React.createContext<NavigationMenuContextValue>({
+  chrome: {} as Chrome,
+  timefilter: {} as Timefilter,
+  timeHistory: {} as TimeHistory,
+});
+
+export const useNavigationMenuContext = () => {
+  return useContext(NavigationMenuContext);
+};
+
+// testing mocks
+export const chromeMock = {
+  getBasePath: () => 'basePath',
+  getUiSettingsClient: () => {
+    return {
+      get: (key: string) => {
+        switch (key) {
+          case 'dateFormat':
+          case 'timepicker:timeDefaults':
+            return {};
+          case 'timepicker:refreshIntervalDefaults':
+            return { pause: false, value: 0 };
+          default:
+            throw new Error(`Unexpected config key: ${key}`);
+        }
+      },
+    };
+  },
+} as Chrome;
+
+export const timefilterMock = ({
+  getRefreshInterval: () => '30s',
+  getTime: () => ({ from: 0, to: 0 }),
+  on: (event: string, reload: () => void) => {},
+} as unknown) as Timefilter;
+
+export const timeHistoryMock = ({
+  get: () => [{ from: 0, to: 0 }],
+} as unknown) as TimeHistory;
+
+export const navigationMenuMock = {
+  chrome: chromeMock,
+  timefilter: timefilterMock,
+  timeHistory: timeHistoryMock,
+};