[es-management/watcher] implement k7Breadcrumbs (#26719)

x-pack/plugins/watcher/public/lib/breadcrumbs.js

@@ -0,0 +1,49 @@
+/*
+ * 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 chrome from 'ui/chrome';
+import { i18n } from '@kbn/i18n';
+
+import { MANAGEMENT_BREADCRUMB } from 'ui/management';
+
+const uiSettings = chrome.getUiSettingsClient();
+
+export function getWatchListBreadcrumbs() {
+  return [
+    MANAGEMENT_BREADCRUMB,
+    {
+      text: i18n.translate('xpack.watcher.list.breadcrumb', {
+        defaultMessage: 'Watcher'
+      }),
+      href: '#/management/elasticsearch/watcher/watches/'
+    }
+  ];
+}
+
+export function getWatchDetailBreadcrumbs($route) {
+  const watch = $route.current.locals.watch || $route.current.locals.xpackWatch;
+
+  return [
+    ...getWatchListBreadcrumbs(),
+    {
+      text: !watch.isNew
+        ? watch.name
+        : i18n.translate('xpack.watcher.create.breadcrumb', { defaultMessage: 'Create' }),
+      href: '#/management/elasticsearch/watcher/watches/watch/23eebf28-94fd-47e9-ac44-6fee6e427c33'
+    }
+  ];
+}
+
+export function getWatchHistoryBreadcrumbs($route) {
+  const { watchHistoryItem } = $route.current.locals;
+
+  return [
+    ...getWatchDetailBreadcrumbs($route),
+    {
+      text: watchHistoryItem.startTime.format(uiSettings.get('dateFormat'))
+    }
+  ];
+}

x-pack/plugins/watcher/public/sections/watch_detail/watch_detail_route.js

@@ -13,6 +13,7 @@ import './components/watch_detail';
 import { WATCH_HISTORY } from '../../../common/constants';
 import { updateWatchSections } from 'plugins/watcher/lib/update_management_sections';
 import 'plugins/watcher/services/license';
+import { getWatchDetailBreadcrumbs } from '../../lib/breadcrumbs';
 
 routes
   .when('/management/elasticsearch/watcher/watches/watch/:id', {
@@ -22,6 +23,7 @@ routes
 routes
   .when('/management/elasticsearch/watcher/watches/watch/:id/status', {
     template: template,
+    k7Breadcrumbs: getWatchDetailBreadcrumbs,
     resolve: {
       watchTabs: ($injector) => {
         const $route = $injector.get('$route');

x-pack/plugins/watcher/public/sections/watch_edit/watch_edit_route.js

@@ -14,12 +14,14 @@ import './components/threshold_watch_edit';
 import { WATCH_TYPES } from 'plugins/watcher/../common/constants';
 import { updateWatchSections } from 'plugins/watcher/lib/update_management_sections';
 import 'plugins/watcher/services/license';
+import { getWatchDetailBreadcrumbs } from '../../lib/breadcrumbs';
 
 routes
   .when('/management/elasticsearch/watcher/watches/watch/:id/edit')
   .when('/management/elasticsearch/watcher/watches/new-watch/:watchType')
   .defaults(/management\/elasticsearch\/watcher\/watches\/(new-watch\/:watchType|watch\/:id\/edit)/, {
     template: template,
+    k7Breadcrumbs: getWatchDetailBreadcrumbs,
     controller: class WatchEditRouteController {
       constructor($injector) {
         const $route = $injector.get('$route');

x-pack/plugins/watcher/public/sections/watch_history_item/watch_history_item_route.js

@@ -12,10 +12,12 @@ import 'plugins/watcher/services/watch';
 import 'plugins/watcher/services/watch_history';
 import './components/watch_history_item';
 import { updateHistorySection } from 'plugins/watcher/lib/update_management_sections';
+import { getWatchHistoryBreadcrumbs } from '../../lib/breadcrumbs';
 
 routes
   .when('/management/elasticsearch/watcher/watches/watch/:watchId/history-item/:watchHistoryItemId', {
     template: template,
+    k7Breadcrumbs: getWatchHistoryBreadcrumbs,
     resolve: {
       watch: function ($injector) {
         const $route = $injector.get('$route');

x-pack/plugins/watcher/public/sections/watch_list/watch_list_route.js

@@ -10,6 +10,7 @@ import { toastNotifications } from 'ui/notify';
 import template from './watch_list_route.html';
 import './components/watch_list';
 import 'plugins/watcher/services/license';
+import { getWatchListBreadcrumbs } from '../../lib/breadcrumbs';
 
 routes
   .when('/management/elasticsearch/watcher/', {
@@ -26,6 +27,7 @@ routes
       }
     },
     controllerAs: 'watchListRoute',
+    k7Breadcrumbs: getWatchListBreadcrumbs,
     resolve: {
       watches: ($injector) => {
         const watchesService = $injector.get('xpackWatcherWatchesService');