improve slos and alerts breadcrumbs

elastic · Oct 25, 2023 · 8fa3ed2 · 8fa3ed2
1 parent 5c578a0
commit 8fa3ed2
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 3 deletions.
diff --git a/x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx b/x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx
@@ -75,6 +75,7 @@ export function AlertDetails() {
       text: i18n.translate('xpack.observability.breadcrumbs.alertsLinkText', {
         defaultMessage: 'Alerts',
       }),
+      deepLinkId: 'observability-overview:alerts',
     },
     {
       text: alert ? pageTitleContent(alert.fields[ALERT_RULE_CATEGORY]) : defaultBreadcrumb,

diff --git a/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx b/x-pack/plugins/observability/public/pages/rule_details/rule_details.tsx
@@ -85,6 +85,7 @@ export function RuleDetailsPage() {
         defaultMessage: 'Alerts',
       }),
       href: basePath.prepend(paths.observability.alerts),
+      deepLinkId: 'observability-overview:alerts',
     },
     {
       href: basePath.prepend(paths.observability.rules),

diff --git a/x-pack/plugins/observability/public/pages/rules/rules.tsx b/x-pack/plugins/observability/public/pages/rules/rules.tsx
@@ -46,6 +46,7 @@ export function RulesPage({ activeTab = RULES_TAB_NAME }: RulesPageProps) {
         defaultMessage: 'Alerts',
       }),
       href: http.basePath.prepend('/app/observability/alerts'),
+      deepLinkId: 'observability-overview:alerts',
     },
     {
       text: i18n.translate('xpack.observability.breadcrumbs.rulesLinkText', {

diff --git a/x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx b/x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx
@@ -8,10 +8,10 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIsMutating } from '@tanstack/react-query';
-import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { IBasePath } from '@kbn/core-http-browser';
+import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
 import type { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
 
@@ -97,13 +97,14 @@ export function SloDetailsPage() {
 function getBreadcrumbs(
   basePath: IBasePath,
   slo: SLOWithSummaryResponse | undefined
-): EuiBreadcrumbProps[] {
+): ChromeBreadcrumb[] {
   return [
     {
       href: basePath.prepend(paths.observability.slos),
       text: i18n.translate('xpack.observability.breadcrumbs.slosLinkText', {
         defaultMessage: 'SLOs',
       }),
+      deepLinkId: 'observability-overview:slos',
     },
     {
       text:

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx
@@ -41,6 +41,7 @@ export function SloEditPage() {
       text: i18n.translate('xpack.observability.breadcrumbs.sloLabel', {
         defaultMessage: 'SLOs',
       }),
+      deepLinkId: 'observability-overview:slos',
     },
     ...(!!slo
       ? [

diff --git a/x-pack/plugins/observability/public/pages/slos/slos.tsx b/x-pack/plugins/observability/public/pages/slos/slos.tsx
@@ -44,6 +44,7 @@ export function SlosPage() {
       text: i18n.translate('xpack.observability.breadcrumbs.slosLinkText', {
         defaultMessage: 'SLOs',
       }),
+      deepLinkId: 'observability-overview:slos',
     },
   ]);
 

diff --git a/x-pack/plugins/observability/tsconfig.json b/x-pack/plugins/observability/tsconfig.json
@@ -91,7 +91,8 @@
     "@kbn/core-application-common",
     "@kbn/react-kibana-mount",
     "@kbn/react-kibana-context-theme",
-    "@kbn/shared-ux-link-redirect-app"
+    "@kbn/shared-ux-link-redirect-app",
+    "@kbn/core-chrome-browser"
   ],
   "exclude": [
     "target/**/*"

diff --git a/x-pack/test_serverless/functional/test_suites/observability/navigation.ts b/x-pack/test_serverless/functional/test_suites/observability/navigation.ts
@@ -15,6 +15,7 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
   const svlCommonNavigation = getPageObject('svlCommonNavigation');
   const browser = getService('browser');
   const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
 
   describe('navigation', function () {
     before(async () => {
@@ -129,6 +130,18 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
       await svlCommonNavigation.breadcrumbs.expectBreadcrumbTexts(['Cases', 'Settings']);
     });
 
+    it('navigates to alerts app', async () => {
+      await svlCommonNavigation.sidenav.clickLink({ deepLinkId: 'observability-overview:alerts' });
+      await svlCommonNavigation.sidenav.expectLinkActive({
+        deepLinkId: 'observability-overview:alerts',
+      });
+      await testSubjects.click('manageRulesPageButton');
+      await svlCommonNavigation.breadcrumbs.expectBreadcrumbTexts(['Alerts', 'Rules']);
+      await svlCommonNavigation.sidenav.expectLinkActive({
+        deepLinkId: 'observability-overview:alerts',
+      });
+    });
+
     it('navigates to integrations', async () => {
       await svlCommonNavigation.sidenav.openSection('project_settings_project_nav');
       await svlCommonNavigation.sidenav.clickLink({ deepLinkId: 'integrations' });