[ML] Implement k7 breadcrumbs for ML routes

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);
+        // get crumbs from url
+        const crumbs = uiRouter.getBreadcrumbs();
+        if (crumbs.length > 1) {
+          crumbs.forEach((crumb) => {
+            breadcrumbs.push(crumbNames[crumb.id]);
+          });
+        }
 
-      config.watch('k7design', (val) => scope.showPluginBreadcrumbs = !val);
-      chrome.breadcrumbs.set(scope.breadcrumbs.map(b => ({ text: b.label, href: b.url })));
+        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();
+          }
+        });
+      }
 
-      // 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,