From e8aa4ba943c6e2d4780517107d7970a1dbe41567 Mon Sep 17 00:00:00 2001 From: Yuliia Naumenko Date: Tue, 4 Aug 2020 09:51:11 -0700 Subject: [PATCH] Added alert name to details breadcrumb as a dynamic title --- .../public/application/home.tsx | 4 ++-- .../public/application/lib/breadcrumb.test.ts | 21 +++++++++++++----- .../public/application/lib/breadcrumb.ts | 22 ++++++++++++------- .../components/alert_details.tsx | 9 +++++--- 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx index 15099242b6e17..eb6b1ada3ba93 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx @@ -22,7 +22,7 @@ import { import { i18n } from '@kbn/i18n'; import { Section, routeToConnectors, routeToAlerts } from './constants'; -import { getCurrentBreadcrumb } from './lib/breadcrumb'; +import { getAlertingSectionBreadcrumb } from './lib/breadcrumb'; import { getCurrentDocTitle } from './lib/doc_title'; import { useAppDependencies } from './app_context'; import { hasShowActionsCapability } from './lib/capabilities'; @@ -75,7 +75,7 @@ export const TriggersActionsUIHome: React.FunctionComponent { - setBreadcrumbs([getCurrentBreadcrumb(section || 'home')]); + setBreadcrumbs([getAlertingSectionBreadcrumb(section || 'home')]); chrome.docTitle.change(getCurrentDocTitle(section || 'home')); }, [section, chrome, setBreadcrumbs]); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts index 8ba909beff2a8..f5578aa5271be 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts @@ -3,25 +3,25 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import { getCurrentBreadcrumb } from './breadcrumb'; +import { getAlertingSectionBreadcrumb, getAlertDetailsBreadcrumb } from './breadcrumb'; import { i18n } from '@kbn/i18n'; import { routeToConnectors, routeToAlerts, routeToHome } from '../constants'; -describe('getCurrentBreadcrumb', () => { +describe('getAlertingSectionBreadcrumb', () => { test('if change calls return proper breadcrumb title ', async () => { - expect(getCurrentBreadcrumb('connectors')).toMatchObject({ + expect(getAlertingSectionBreadcrumb('connectors')).toMatchObject({ text: i18n.translate('xpack.triggersActionsUI.connectors.breadcrumbTitle', { defaultMessage: 'Connectors', }), href: `${routeToConnectors}`, }); - expect(getCurrentBreadcrumb('alerts')).toMatchObject({ + expect(getAlertingSectionBreadcrumb('alerts')).toMatchObject({ text: i18n.translate('xpack.triggersActionsUI.alerts.breadcrumbTitle', { defaultMessage: 'Alerts', }), href: `${routeToAlerts}`, }); - expect(getCurrentBreadcrumb('home')).toMatchObject({ + expect(getAlertingSectionBreadcrumb('home')).toMatchObject({ text: i18n.translate('xpack.triggersActionsUI.home.breadcrumbTitle', { defaultMessage: 'Alerts and Actions', }), @@ -29,3 +29,14 @@ describe('getCurrentBreadcrumb', () => { }); }); }); + +describe('getAlertDetailsBreadcrumb', () => { + test('if select an alert should return proper breadcrumb title with alert name ', async () => { + expect(getAlertDetailsBreadcrumb('testId', 'testName')).toMatchObject({ + text: i18n.translate('xpack.triggersActionsUI.alertDetails.breadcrumbTitle', { + defaultMessage: 'testName', + }), + href: '/alert/testId', + }); + }); +}); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts index 0a8b04596b5e0..f0c45e6f86050 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts @@ -7,7 +7,7 @@ import { i18n } from '@kbn/i18n'; import { routeToHome, routeToConnectors, routeToAlerts, routeToAlertDetails } from '../constants'; -export const getCurrentBreadcrumb = (type: string): { text: string; href: string } => { +export const getAlertingSectionBreadcrumb = (type: string): { text: string; href: string } => { // Home and sections switch (type) { case 'connectors': @@ -24,13 +24,6 @@ export const getCurrentBreadcrumb = (type: string): { text: string; href: string }), href: `${routeToAlerts}`, }; - case 'alertDetails': - return { - text: i18n.translate('xpack.triggersActionsUI.alertDetails.breadcrumbTitle', { - defaultMessage: 'Alert Details', - }), - href: `${routeToAlertDetails}`, - }; default: return { text: i18n.translate('xpack.triggersActionsUI.home.breadcrumbTitle', { @@ -40,3 +33,16 @@ export const getCurrentBreadcrumb = (type: string): { text: string; href: string }; } }; + +export const getAlertDetailsBreadcrumb = ( + id: string, + name: string +): { text: string; href: string } => { + return { + text: i18n.translate('xpack.triggersActionsUI.alertDetails.breadcrumbTitle', { + defaultMessage: '{name}', + values: { name }, + }), + href: `${routeToAlertDetails.replace(':alertId', id)}`, + }; +}; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx index b064aefb29b19..6ee7915e2be71 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx @@ -29,7 +29,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { useAppDependencies } from '../../../app_context'; import { hasAllPrivilege, hasExecuteActionsCapability } from '../../../lib/capabilities'; -import { getCurrentBreadcrumb } from '../../../lib/breadcrumb'; +import { getAlertingSectionBreadcrumb, getAlertDetailsBreadcrumb } from '../../../lib/breadcrumb'; import { getCurrentDocTitle } from '../../../lib/doc_title'; import { Alert, AlertType, ActionType } from '../../../../types'; import { @@ -77,8 +77,11 @@ export const AlertDetails: React.FunctionComponent = ({ // Set breadcrumb and page title useEffect(() => { - setBreadcrumbs([getCurrentBreadcrumb('alertDetails')]); - chrome.docTitle.change(getCurrentDocTitle('alertDetails')); + setBreadcrumbs([ + getAlertingSectionBreadcrumb('alerts'), + getAlertDetailsBreadcrumb(alert.id, alert.name), + ]); + chrome.docTitle.change(getCurrentDocTitle('alerts')); // eslint-disable-next-line react-hooks/exhaustive-deps }, []);