Skip to content

Commit

Permalink
[ML] Implement k7 breadcrumbs for ML routes (#26774)
Browse files Browse the repository at this point in the history
* [ML] Implement k7 breadcrumbs for ML routes

* [ML] Remove duplicate nouns from jobs and settings breadcrumbs
  • Loading branch information
peteharverson authored and chrisronline committed Dec 12, 2018
1 parent d9a30e1 commit 9240b8d
Show file tree
Hide file tree
Showing 26 changed files with 331 additions and 40 deletions.
11 changes: 11 additions & 0 deletions x-pack/plugins/ml/public/breadcrumbs.js
Original file line number Diff line number Diff line change
@@ -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: '#/'
});
84 changes: 44 additions & 40 deletions x-pack/plugins/ml/public/components/nav_menu/nav_menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
*/



import _ from 'lodash';
import $ from 'jquery';
import template from './nav_menu.html';
import uiRouter from 'ui/routes';
Expand All @@ -23,8 +21,6 @@ module.directive('mlNavMenu', function (config) {
template,
link: function (scope, el, attrs) {



// Tabs
scope.name = attrs.name;

Expand All @@ -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();
}
});
}
};
});
18 changes: 18 additions & 0 deletions x-pack/plugins/ml/public/datavisualizer/breadcrumbs.js
Original file line number Diff line number Diff line change
@@ -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
];
}

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -36,6 +37,7 @@ import template from './datavisualizer.html';
uiRoutes
.when('/jobs/new_job/datavisualizer', {
template,
k7Breadcrumbs: getDataVisualizerBreadcrumbs,
resolve: {
CheckLicense: checkBasicLicense,
privileges: checkGetJobsPrivilege,
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/ml/public/datavisualizer/selector/directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -20,6 +21,7 @@ const template = `<ml-nav-menu name="datavisualizer" /><datavisualizer-selector
uiRoutes
.when('/datavisualizer', {
template,
k7Breadcrumbs: getDataVisualizerBreadcrumbs,
resolve: {
CheckLicense: checkBasicLicense,
privileges: checkFindFileStructurePrivilege,
Expand Down
18 changes: 18 additions & 0 deletions x-pack/plugins/ml/public/explorer/breadcrumbs.js
Original file line number Diff line number Diff line change
@@ -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
];
}

2 changes: 2 additions & 0 deletions x-pack/plugins/ml/public/explorer/explorer_controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -50,6 +51,7 @@ import {
uiRoutes
.when('/explorer/?', {
template,
k7Breadcrumbs: getAnomalyExplorerBreadcrumbs,
resolve: {
CheckLicense: checkFullLicense,
privileges: checkGetJobsPrivilege,
Expand Down
18 changes: 18 additions & 0 deletions x-pack/plugins/ml/public/file_datavisualizer/breadcrumbs.js
Original file line number Diff line number Diff line change
@@ -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
];
}

Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down
87 changes: 87 additions & 0 deletions x-pack/plugins/ml/public/jobs/breadcrumbs.js
Original file line number Diff line number Diff line change
@@ -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: ''
}
];
}
2 changes: 2 additions & 0 deletions x-pack/plugins/ml/public/jobs/jobs_list/directive.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -24,6 +25,7 @@ const template = `<ml-nav-menu name="jobs" /><jobs-page />`;
uiRoutes
.when('/jobs/?', {
template,
k7Breadcrumbs: getJobManagementBreadcrumbs,
resolve: {
CheckLicense: checkFullLicense,
privileges: checkGetJobsPrivilege,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -55,6 +57,7 @@ uiRoutes
})
.when('/jobs/new_job/advanced/:jobId', {
template,
k7Breadcrumbs: getAdvancedJobConfigurationBreadcrumbs,
resolve: {
CheckLicense: checkFullLicense,
privileges: checkCreateJobsPrivilege,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 9240b8d

Please sign in to comment.