[ML] Implement k7 breadcrumbs for ML routes (#26774)

* [ML] Implement k7 breadcrumbs for ML routes

* [ML] Remove duplicate nouns from jobs and settings breadcrumbs

x-pack/plugins/ml/public/breadcrumbs.js

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+
+export const ML_BREADCRUMB = Object.freeze({
+  text: 'Machine Learning',
+  href: '#/'
+});

x-pack/plugins/ml/public/components/nav_menu/nav_menu.js

@@ -5,8 +5,6 @@
  */
 
 
-
-import _ from 'lodash';
 import $ from 'jquery';
 import template from './nav_menu.html';
 import uiRouter from 'ui/routes';
@@ -23,8 +21,6 @@ module.directive('mlNavMenu', function (config) {
     template,
     link: function (scope, el, attrs) {
 
-
-
       // Tabs
       scope.name = attrs.name;
 
@@ -43,46 +39,54 @@ module.directive('mlNavMenu', function (config) {
 
       scope.disableLinks = (isFullLicense() === false);
 
-      // Breadcrumbs
-      const crumbNames = {
-        jobs: { label: 'Job Management', url: '#/jobs' },
-        new_job: { label: 'Create New Job', url: '#/jobs/new_job' },
-        single_metric: { label: 'Single Metric Job', url: '' },
-        multi_metric: { label: 'Multi Metric job', url: '' },
-        population: { label: 'Population job', url: '' },
-        advanced: { label: 'Advanced Job Configuration', url: '' },
-        datavisualizer: { label: 'Data Visualizer', url: '' },
-        filedatavisualizer: { label: 'File Data Visualizer (Experimental)', url: '' },
-        explorer: { label: 'Anomaly Explorer', url: '#/explorer' },
-        timeseriesexplorer: { label: 'Single Metric Viewer', url: '#/timeseriesexplorer' },
-        settings: { label: 'Settings', url: '#/settings' },
-        calendars_list: { label: 'Calendar Management', url: '#/settings/calendars_list' },
-        new_calendar: { label: 'New Calendar', url: '#/settings/calendars_list/new_calendar' },
-        edit_calendar: { label: 'Edit Calendar', url: '#/settings/calendars_list/edit_calendar' },
-        filter_lists: { label: 'Filter Lists', url: '#/settings/filter_lists' },
-        new_filter_list: { label: 'New Filter List', url: '#/settings/filter_lists/new' },
-        edit_filter_list: { label: 'Edit Filter List', url: '#/settings/filter_lists/edit' },
-      };
+      // TODO - once the k7design flag is disabled, this should all be removed.
+      const isK7Design = chrome.getUiSettingsClient().get('k7design', false);
+      if (isK7Design === false) {
+        // Breadcrumbs
+        const crumbNames = {
+          jobs: { label: 'Job Management', url: '#/jobs' },
+          new_job: { label: 'Create New Job', url: '#/jobs/new_job' },
+          single_metric: { label: 'Single Metric Job', url: '' },
+          multi_metric: { label: 'Multi Metric job', url: '' },
+          population: { label: 'Population job', url: '' },
+          advanced: { label: 'Advanced Job Configuration', url: '' },
+          datavisualizer: { label: 'Data Visualizer', url: '' },
+          filedatavisualizer: { label: 'File Data Visualizer (Experimental)', url: '' },
+          explorer: { label: 'Anomaly Explorer', url: '#/explorer' },
+          timeseriesexplorer: { label: 'Single Metric Viewer', url: '#/timeseriesexplorer' },
+          settings: { label: 'Settings', url: '#/settings' },
+          calendars_list: { label: 'Calendar Management', url: '#/settings/calendars_list' },
+          new_calendar: { label: 'New Calendar', url: '#/settings/calendars_list/new_calendar' },
+          edit_calendar: { label: 'Edit Calendar', url: '#/settings/calendars_list/edit_calendar' },
+          filter_lists: { label: 'Filter Lists', url: '#/settings/filter_lists' },
+          new_filter_list: { label: 'New Filter List', url: '#/settings/filter_lists/new' },
+          edit_filter_list: { label: 'Edit Filter List', url: '#/settings/filter_lists/edit' },
+        };
 
-      const breadcrumbs = [{ label: 'Machine Learning', url: '#/' }];
+        const breadcrumbs = [{ label: 'Machine Learning', url: '#/' }];
 
-      // get crumbs from url
-      const crumbs = uiRouter.getBreadcrumbs();
-      _.each(crumbs, (crumb) => {
-        breadcrumbs.push(crumbNames[crumb.id]);
-      });
-      scope.breadcrumbs = breadcrumbs.filter(Boolean);
-
-      config.watch('k7design', (val) => scope.showPluginBreadcrumbs = !val);
-      chrome.breadcrumbs.set(scope.breadcrumbs.map(b => ({ text: b.label, href: b.url })));
-
-      // when the page loads, focus on the first breadcrumb
-      el.ready(() => {
-        const $crumbs = $('.kuiLocalBreadcrumbs a');
-        if ($crumbs.length) {
-          $crumbs[0].focus();
+        // get crumbs from url
+        const crumbs = uiRouter.getBreadcrumbs();
+        if (crumbs.length > 1) {
+          crumbs.forEach((crumb) => {
+            breadcrumbs.push(crumbNames[crumb.id]);
+          });
         }
-      });
+
+        scope.breadcrumbs = breadcrumbs.filter(Boolean);
+
+        config.watch('k7design', (val) => scope.showPluginBreadcrumbs = !val);
+        chrome.breadcrumbs.set(scope.breadcrumbs.map(b => ({ text: b.label, href: b.url })));
+
+        // when the page loads, focus on the first breadcrumb
+        el.ready(() => {
+          const $crumbs = $('.kuiLocalBreadcrumbs a');
+          if ($crumbs.length) {
+            $crumbs[0].focus();
+          }
+        });
+      }
+
     }
   };
 });

x-pack/plugins/ml/public/datavisualizer/breadcrumbs.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { ML_BREADCRUMB } from '../breadcrumbs';
+
+
+export function getDataVisualizerBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [
+    ML_BREADCRUMB
+  ];
+}
+

x-pack/plugins/ml/public/datavisualizer/datavisualizer_controller.js

@@ -22,6 +22,7 @@ import { decorateQuery, luceneStringToDsl } from '@kbn/es-query';
 import { notify, toastNotifications } from 'ui/notify';
 
 import { ML_JOB_FIELD_TYPES, KBN_FIELD_TYPES } from 'plugins/ml/../common/constants/field_types';
+import { getDataVisualizerBreadcrumbs } from './breadcrumbs';
 import { kbnTypeToMLJobType } from 'plugins/ml/util/field_types_utils';
 import { IntervalHelperProvider } from 'plugins/ml/util/ml_time_buckets';
 import { checkBasicLicense, isFullLicense } from 'plugins/ml/license/check_license';
@@ -36,6 +37,7 @@ import template from './datavisualizer.html';
 uiRoutes
   .when('/jobs/new_job/datavisualizer', {
     template,
+    k7Breadcrumbs: getDataVisualizerBreadcrumbs,
     resolve: {
       CheckLicense: checkBasicLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/datavisualizer/selector/directive.js

@@ -9,6 +9,7 @@ import 'ngreact';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
+import { getDataVisualizerBreadcrumbs } from '../breadcrumbs';
 import { checkBasicLicense } from 'plugins/ml/license/check_license';
 import { checkFindFileStructurePrivilege } from 'plugins/ml/privilege/check_privilege';
 import { initPromise } from 'plugins/ml/util/promise';
@@ -20,6 +21,7 @@ const template = `<ml-nav-menu name="datavisualizer" /><datavisualizer-selector
 uiRoutes
   .when('/datavisualizer', {
     template,
+    k7Breadcrumbs: getDataVisualizerBreadcrumbs,
     resolve: {
       CheckLicense: checkBasicLicense,
       privileges: checkFindFileStructurePrivilege,

x-pack/plugins/ml/public/explorer/breadcrumbs.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { ML_BREADCRUMB } from '../breadcrumbs';
+
+
+export function getAnomalyExplorerBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [
+    ML_BREADCRUMB
+  ];
+}
+

x-pack/plugins/ml/public/explorer/explorer_controller.js

@@ -28,6 +28,7 @@ import { initPromise } from 'plugins/ml/util/promise';
 import template from './explorer.html';
 
 import uiRoutes from 'ui/routes';
+import { getAnomalyExplorerBreadcrumbs } from './breadcrumbs';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { loadIndexPatterns, getIndexPatterns } from 'plugins/ml/util/index_utils';
@@ -50,6 +51,7 @@ import {
 uiRoutes
   .when('/explorer/?', {
     template,
+    k7Breadcrumbs: getAnomalyExplorerBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/file_datavisualizer/breadcrumbs.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { ML_BREADCRUMB } from '../breadcrumbs';
+
+
+export function getFileDataVisualizerBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [
+    ML_BREADCRUMB
+  ];
+}
+

x-pack/plugins/ml/public/file_datavisualizer/file_datavisualizer_directive.js

@@ -10,6 +10,7 @@ import 'ngreact';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
+import { getFileDataVisualizerBreadcrumbs } from './breadcrumbs';
 import { checkBasicLicense } from 'plugins/ml/license/check_license';
 import { checkFindFileStructurePrivilege } from 'plugins/ml/privilege/check_privilege';
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
@@ -24,6 +25,7 @@ const template = '<ml-nav-menu name="datavisualizer" /><file-datavisualizer-page
 uiRoutes
   .when('/filedatavisualizer/?', {
     template,
+    k7Breadcrumbs: getFileDataVisualizerBreadcrumbs,
     resolve: {
       CheckLicense: checkBasicLicense,
       privileges: checkFindFileStructurePrivilege,

x-pack/plugins/ml/public/jobs/breadcrumbs.js

@@ -0,0 +1,87 @@
+/*
+ * 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 { ML_BREADCRUMB } from '../breadcrumbs';
+
+
+export function getJobManagementBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [
+    ML_BREADCRUMB
+  ];
+}
+
+export function getCreateJobBreadcrumbs() {
+  return [
+    ML_BREADCRUMB,
+    {
+      text: 'Create job',
+      href: '#/jobs/new_job'
+    }
+  ];
+}
+
+export function getCreateSingleMetricJobBreadcrumbs() {
+  return [
+    ...getCreateJobBreadcrumbs(),
+    {
+      text: 'Single metric',
+      href: ''
+    }
+  ];
+}
+
+export function getCreateMultiMetricJobBreadcrumbs() {
+  return [
+    ...getCreateJobBreadcrumbs(),
+    {
+      text: 'Multi metric',
+      href: ''
+    }
+  ];
+}
+
+export function getCreatePopulationJobBreadcrumbs() {
+  return [
+    ...getCreateJobBreadcrumbs(),
+    {
+      text: 'Population',
+      href: ''
+    }
+  ];
+}
+
+export function getAdvancedJobConfigurationBreadcrumbs() {
+  return [
+    ...getCreateJobBreadcrumbs(),
+    {
+      text: 'Advanced configuration',
+      href: ''
+    }
+  ];
+}
+
+export function getCreateRecognizerJobBreadcrumbs($routeParams) {
+  return [
+    ...getCreateJobBreadcrumbs(),
+    {
+      text: $routeParams.id,
+      href: ''
+    }
+  ];
+}
+
+export function getDataVisualizerIndexOrSearchBreadcrumbs() {
+  return [
+    ML_BREADCRUMB,
+    {
+      text: 'Select index or search',
+      href: ''
+    }
+  ];
+}

x-pack/plugins/ml/public/jobs/jobs_list/directive.js

@@ -14,6 +14,7 @@ const module = uiModules.get('apps/ml', ['react']);
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 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 { initPromise } from 'plugins/ml/util/promise';
 
@@ -24,6 +25,7 @@ const template = `<ml-nav-menu name="jobs" /><jobs-page />`;
 uiRoutes
   .when('/jobs/?', {
     template,
+    k7Breadcrumbs: getJobManagementBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/jobs/new_job/advanced/new_job_controller.js

@@ -18,6 +18,7 @@ import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import template from './new_job.html';
 import saveStatusTemplate from 'plugins/ml/jobs/new_job/advanced/save_status_modal/save_status_modal.html';
+import { getAdvancedJobConfigurationBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import {
   SearchItemsProvider,
   createJobForSaving,
@@ -42,6 +43,7 @@ import { initPromise } from 'plugins/ml/util/promise';
 uiRoutes
   .when('/jobs/new_job/advanced', {
     template,
+    k7Breadcrumbs: getAdvancedJobConfigurationBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkCreateJobsPrivilege,
@@ -55,6 +57,7 @@ uiRoutes
   })
   .when('/jobs/new_job/advanced/:jobId', {
     template,
+    k7Breadcrumbs: getAdvancedJobConfigurationBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkCreateJobsPrivilege,

x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_controller.js

@@ -19,6 +19,7 @@ import uiRoutes from 'ui/routes';
 import { checkLicenseExpired } from 'plugins/ml/license/check_license';
 import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { IntervalHelperProvider } from 'plugins/ml/util/ml_time_buckets';
+import { getCreateMultiMetricJobBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { filterAggTypes } from 'plugins/ml/jobs/new_job/simple/components/utils/filter_agg_types';
 import { validateJob } from 'plugins/ml/jobs/new_job/simple/components/utils/validate_job';
 import { adjustIntervalDisplayed } from 'plugins/ml/jobs/new_job/simple/components/utils/adjust_interval';
@@ -47,6 +48,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/jobs/new_job/simple/multi_metric', {
     template,
+    k7Breadcrumbs: getCreateMultiMetricJobBreadcrumbs,
     resolve: {
       CheckLicense: checkLicenseExpired,
       privileges: checkCreateJobsPrivilege,

x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_controller.js

@@ -19,6 +19,7 @@ import uiRoutes from 'ui/routes';
 import { checkLicenseExpired } from 'plugins/ml/license/check_license';
 import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { IntervalHelperProvider } from 'plugins/ml/util/ml_time_buckets';
+import { getCreatePopulationJobBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { filterAggTypes } from 'plugins/ml/jobs/new_job/simple/components/utils/filter_agg_types';
 import { validateJob } from 'plugins/ml/jobs/new_job/simple/components/utils/validate_job';
 import { adjustIntervalDisplayed } from 'plugins/ml/jobs/new_job/simple/components/utils/adjust_interval';
@@ -46,6 +47,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/jobs/new_job/simple/population', {
     template,
+    k7Breadcrumbs: getCreatePopulationJobBreadcrumbs,
     resolve: {
       CheckLicense: checkLicenseExpired,
       privileges: checkCreateJobsPrivilege,

x-pack/plugins/ml/public/jobs/new_job/simple/recognize/create_job/create_job_controller.js

@@ -10,6 +10,7 @@ import _ from 'lodash';
 import angular from 'angular';
 import dateMath from '@elastic/datemath';
 import { isJobIdValid, prefixDatafeedId } from 'plugins/ml/../common/util/job_utils';
+import { getCreateRecognizerJobBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { SearchItemsProvider, addNewJobToRecentlyAccessed } from 'plugins/ml/jobs/new_job/utils/new_job_utils';
 
 
@@ -29,6 +30,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/jobs/new_job/simple/recognize', {
     template,
+    k7Breadcrumbs: getCreateRecognizerJobBreadcrumbs,
     resolve: {
       CheckLicense: checkLicenseExpired,
       privileges: checkCreateJobsPrivilege,

x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/create_job_controller.js

@@ -20,6 +20,7 @@ import { getSafeAggregationName } from 'plugins/ml/../common/util/job_utils';
 import { checkLicenseExpired } from 'plugins/ml/license/check_license';
 import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { IntervalHelperProvider } from 'plugins/ml/util/ml_time_buckets';
+import { getCreateSingleMetricJobBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { filterAggTypes } from 'plugins/ml/jobs/new_job/simple/components/utils/filter_agg_types';
 import { validateJob } from 'plugins/ml/jobs/new_job/simple/components/utils/validate_job';
 import { adjustIntervalDisplayed } from 'plugins/ml/jobs/new_job/simple/components/utils/adjust_interval';
@@ -48,6 +49,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/jobs/new_job/simple/single_metric', {
     template,
+    k7Breadcrumbs: getCreateSingleMetricJobBreadcrumbs,
     resolve: {
       CheckLicense: checkLicenseExpired,
       privileges: checkCreateJobsPrivilege,

x-pack/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search_controller.js

@@ -13,6 +13,7 @@
 
 import uiRoutes from 'ui/routes';
 import { checkLicenseExpired, checkBasicLicense } from 'plugins/ml/license/check_license';
+import { getCreateJobBreadcrumbs, getDataVisualizerIndexOrSearchBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { preConfiguredJobRedirect } from 'plugins/ml/jobs/new_job/wizard/preconfigured_job_redirect';
 import { checkCreateJobsPrivilege, checkFindFileStructurePrivilege } from 'plugins/ml/privilege/check_privilege';
 import { loadIndexPatterns, getIndexPatterns } from 'plugins/ml/util/index_utils';
@@ -29,6 +30,7 @@ uiRoutes
 uiRoutes
   .when('/jobs/new_job/step/index_or_search', {
     template,
+    k7Breadcrumbs: getCreateJobBreadcrumbs,
     resolve: {
       CheckLicense: checkLicenseExpired,
       privileges: checkCreateJobsPrivilege,
@@ -43,6 +45,7 @@ uiRoutes
 uiRoutes
   .when('/datavisualizer_index_select', {
     template,
+    k7Breadcrumbs: getDataVisualizerIndexOrSearchBreadcrumbs,
     resolve: {
       CheckLicense: checkBasicLicense,
       privileges: checkFindFileStructurePrivilege,

x-pack/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type_controller.js

@@ -14,6 +14,7 @@
 import uiRoutes from 'ui/routes';
 import { checkLicenseExpired } from 'plugins/ml/license/check_license';
 import { checkCreateJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
+import { getCreateJobBreadcrumbs } from 'plugins/ml/jobs/breadcrumbs';
 import { SearchItemsProvider } from 'plugins/ml/jobs/new_job/utils/new_job_utils';
 import { loadCurrentIndexPattern, loadCurrentSavedSearch, timeBasedIndexCheck } from 'plugins/ml/util/index_utils';
 import { addItemToRecentlyAccessed } from 'plugins/ml/util/recently_accessed';
@@ -25,6 +26,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/jobs/new_job/step/job_type', {
     template,
+    k7Breadcrumbs: getCreateJobBreadcrumbs,
     resolve: {
       CheckLicense: checkLicenseExpired,
       privileges: checkCreateJobsPrivilege,

x-pack/plugins/ml/public/settings/breadcrumbs.js

@@ -0,0 +1,77 @@
+/*
+ * 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 { ML_BREADCRUMB } from '../breadcrumbs';
+
+
+export function getSettingsBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [
+    ML_BREADCRUMB
+  ];
+}
+
+export function getCalendarManagementBreadcrumbs() {
+  return [
+    ...getSettingsBreadcrumbs(),
+    {
+      text: 'Calendar management',
+      href: '#/settings/calendars_list'
+    }
+  ];
+}
+
+export function getCreateCalendarBreadcrumbs() {
+  return [
+    ...getCalendarManagementBreadcrumbs(),
+    {
+      text: 'Create',
+      href: '#/settings/calendars_list/new_calendar'
+    }
+  ];
+}
+
+export function getEditCalendarBreadcrumbs() {
+  return [
+    ...getCalendarManagementBreadcrumbs(),
+    {
+      text: 'Edit',
+      href: '#/settings/calendars_list/edit_calendar'
+    }
+  ];
+}
+
+export function getFilterListsBreadcrumbs() {
+  return [
+    ...getSettingsBreadcrumbs(),
+    {
+      text: 'Filter lists',
+      href: '#/settings/filter_lists'
+    }
+  ];
+}
+
+export function getCreateFilterListBreadcrumbs() {
+  return [
+    ...getFilterListsBreadcrumbs(),
+    {
+      text: 'Create',
+      href: '#/settings/filter_lists/new'
+    }
+  ];
+}
+
+export function getEditFilterListBreadcrumbs() {
+  return [
+    ...getFilterListsBreadcrumbs(),
+    {
+      text: 'Edit',
+      href: '#/settings/filter_lists/edit'
+    }
+  ];
+}

x-pack/plugins/ml/public/settings/filter_lists/edit/directive.js

@@ -12,6 +12,7 @@ import ReactDOM from 'react-dom';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
+import { getCreateFilterListBreadcrumbs, getEditFilterListBreadcrumbs } from '../../breadcrumbs';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
@@ -29,6 +30,7 @@ const template = `
 uiRoutes
   .when('/settings/filter_lists/new_filter_list', {
     template,
+    k7Breadcrumbs: getCreateFilterListBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,
@@ -38,6 +40,7 @@ uiRoutes
   })
   .when('/settings/filter_lists/edit_filter_list/:filterId', {
     template,
+    k7Breadcrumbs: getEditFilterListBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/settings/filter_lists/list/directive.js

@@ -12,6 +12,7 @@ import ReactDOM from 'react-dom';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml', ['react']);
 
+import { getFilterListsBreadcrumbs } from '../../breadcrumbs';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
@@ -29,6 +30,7 @@ const template = `
 uiRoutes
   .when('/settings/filter_lists', {
     template,
+    k7Breadcrumbs: getFilterListsBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/settings/scheduled_events/calendars_list/calendars_list_controller.js

@@ -13,6 +13,7 @@ import 'ui/pager';
 import 'ui/sortable_column';
 
 import uiRoutes from 'ui/routes';
+import { getCalendarManagementBreadcrumbs } from '../../breadcrumbs';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from 'plugins/ml/privilege/check_privilege';
 import { getMlNodeCount, mlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
@@ -27,6 +28,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/settings/calendars_list', {
     template,
+    k7Breadcrumbs: getCalendarManagementBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/settings/scheduled_events/new_calendar/create_calendar_controller.js

@@ -15,6 +15,7 @@ import 'plugins/ml/settings/scheduled_events/components/events_list';
 import { validateCalendarId } from 'plugins/ml/settings/scheduled_events/components/utils/validate_calendar';
 
 import uiRoutes from 'ui/routes';
+import { getCreateCalendarBreadcrumbs, getEditCalendarBreadcrumbs } from '../../breadcrumbs';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege } from 'plugins/ml/privilege/check_privilege';
 import { checkMlNodesAvailable } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
@@ -29,6 +30,7 @@ import template from './create_calendar.html';
 uiRoutes
   .when('/settings/calendars_list/new_calendar', {
     template,
+    k7Breadcrumbs: getCreateCalendarBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,
@@ -38,6 +40,7 @@ uiRoutes
   })
   .when('/settings/calendars_list/edit_calendar/:calendarId', {
     template,
+    k7Breadcrumbs: getEditCalendarBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/settings/settings_controller.js

@@ -7,6 +7,7 @@
 
 
 import uiRoutes from 'ui/routes';
+import { getSettingsBreadcrumbs } from './breadcrumbs';
 import { checkFullLicense } from 'plugins/ml/license/check_license';
 import { checkGetJobsPrivilege, checkPermission } from 'plugins/ml/privilege/check_privilege';
 import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
@@ -19,6 +20,7 @@ import { timefilter } from 'ui/timefilter';
 uiRoutes
   .when('/settings', {
     template,
+    k7Breadcrumbs: getSettingsBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,

x-pack/plugins/ml/public/timeseriesexplorer/breadcrumbs.js

@@ -0,0 +1,18 @@
+/*
+ * 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 { ML_BREADCRUMB } from '../breadcrumbs';
+
+
+export function getSingleMetricViewerBreadcrumbs() {
+  // Whilst top level nav menu with tabs remains,
+  // use root ML breadcrumb.
+  return [
+    ML_BREADCRUMB
+  ];
+}
+

x-pack/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js

@@ -30,6 +30,7 @@ import {
   isModelPlotEnabled,
   mlFunctionToESAggregation } from 'plugins/ml/../common/util/job_utils';
 import { loadIndexPatterns, getIndexPatterns } from 'plugins/ml/util/index_utils';
+import { getSingleMetricViewerBreadcrumbs } from './breadcrumbs';
 import {
   createTimeSeriesJobData,
   processForecastResults,
@@ -53,6 +54,7 @@ import { initPromise } from 'plugins/ml/util/promise';
 uiRoutes
   .when('/timeseriesexplorer/?', {
     template,
+    k7Breadcrumbs: getSingleMetricViewerBreadcrumbs,
     resolve: {
       CheckLicense: checkFullLicense,
       privileges: checkGetJobsPrivilege,