[Alert details] Related dashboards tags are shown (#228902)

This PR closes #212131 

Before:
<img width="1510" height="824" alt="Screenshot 2025-07-22 at 09 46 01"
src="https://github.com/user-attachments/assets/1e86d302-099d-423d-ac8a-0d1a66105dd2"
/>

After:
<img width="1512" height="828" alt="Screenshot 2025-07-22 at 09 47 24"
src="https://github.com/user-attachments/assets/982ca76e-2356-4577-884d-8e81b68333c5"
/>

### **Acceptance criteria**:

- Dashboard tags should appear for both linked dashboards and suggested
dashboards when they are shown on the alert details page "related
dashboards" tab ✅

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

Author: cesco-f

x-pack/solutions/observability/packages/kbn-observability-schema/related_dashboards/latest.ts

@@ -7,9 +7,10 @@
 
 export { type RelevantPanel, relevantPanelSchema } from './schema/relevant_panel/v1';
 export {
-  type RelatedDashboard,
+  type LinkedDashboard,
   type SuggestedDashboard,
-  relatedDashboardSchema,
+  type RelatedDashboard,
+  linkedDashboardSchema,
   suggestedDashboardSchema,
 } from './schema/related_dashboard/v1';
 export {

x-pack/solutions/observability/packages/kbn-observability-schema/related_dashboards/rest_specs/get_related_dashboards/v1.ts

@@ -6,7 +6,7 @@
  */
 
 import { z } from '@kbn/zod';
-import { relatedDashboardSchema } from '../../schema/related_dashboard/v1';
+import { linkedDashboardSchema, suggestedDashboardSchema } from '../../schema/related_dashboard/v1';
 
 export const getRelatedDashboardsParamsSchema = z.object({
   query: z.object({
@@ -15,8 +15,8 @@ export const getRelatedDashboardsParamsSchema = z.object({
 });
 
 export const getRelatedDashboardsResponseSchema = z.object({
-  suggestedDashboards: z.array(relatedDashboardSchema),
-  linkedDashboards: z.array(relatedDashboardSchema),
+  suggestedDashboards: z.array(suggestedDashboardSchema),
+  linkedDashboards: z.array(linkedDashboardSchema),
 });
 
 export type GetRelatedDashboardsResponse = z.output<typeof getRelatedDashboardsResponseSchema>;

x-pack/solutions/observability/packages/kbn-observability-schema/related_dashboards/schema/related_dashboard/latest.ts

@@ -8,10 +8,15 @@
 import { z } from '@kbn/zod';
 import { relevantPanelSchema } from '../relevant_panel/latest';
 
-export const relatedDashboardSchema = z.object({
+const commonDashboardSchema = {
   id: z.string(),
   title: z.string(),
   description: z.string(),
+  tags: z.array(z.string()).optional(),
+};
+
+export const linkedDashboardSchema = z.object({
+  ...commonDashboardSchema,
   matchedBy: z.object({
     fields: z.array(z.string()).optional(),
     index: z.array(z.string()).optional(),
@@ -22,9 +27,7 @@ export const relatedDashboardSchema = z.object({
 });
 
 export const suggestedDashboardSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  description: z.string(),
+  ...commonDashboardSchema,
   matchedBy: z.object({
     fields: z.array(z.string()).optional(),
     index: z.array(z.string()).optional(),
@@ -34,5 +37,6 @@ export const suggestedDashboardSchema = z.object({
   score: z.number(),
 });
 
-export type RelatedDashboard = z.output<typeof relatedDashboardSchema>;
+export type LinkedDashboard = z.output<typeof linkedDashboardSchema>;
 export type SuggestedDashboard = z.output<typeof suggestedDashboardSchema>;
+export type RelatedDashboard = LinkedDashboard | SuggestedDashboard;

x-pack/solutions/observability/packages/kbn-observability-schema/related_dashboards/schema/related_dashboard/v1.ts

@@ -43,7 +43,8 @@
       "licensing",
       "navigation",
       "fieldsMetadata",
-      "esql"
+      "esql",
+      "savedObjectsTagging",
     ],
     "optionalPlugins": [
       "aiops",

x-pack/solutions/observability/plugins/observability/kibana.jsonc

@@ -28,6 +28,7 @@ import { render } from '../../utils/test_helper';
 import { AlertDetails } from './alert_details';
 import { alertDetail, alertWithNoData } from './mock/alert';
 import { createTelemetryClientMock } from '../../services/telemetry/telemetry_client.mock';
+import type { SavedObjectReference } from '@kbn/core/server';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -65,6 +66,7 @@ jest.mock('./hooks/use_related_dashboards', () => ({
         id: 'suggested-dashboard-1',
         title: 'Suggested Dashboard 1',
         description: 'A suggested dashboard for testing',
+        tags: ['SuggestedTag', 'SecondTag'],
       },
     ],
     linkedDashboards: [
@@ -92,6 +94,10 @@ const mockSpaces = {
   }),
 };
 
+const mockConvertNameToReference = jest
+  .fn()
+  .mockImplementation((value: string) => ({ id: value, type: value }));
+
 const mockKibana = () => {
   useKibanaMock.mockReturnValue({
     services: {
@@ -109,6 +115,28 @@ const mockKibana = () => {
       dashboard: {},
       spaces: mockSpaces,
       telemetryClient: createTelemetryClientMock(),
+      savedObjectsTagging: {
+        ui: {
+          convertNameToReference: (value: string) => mockConvertNameToReference(value),
+          components: {
+            TagList: ({
+              object,
+            }: {
+              object: {
+                references: SavedObjectReference[];
+              };
+            }) => {
+              return (
+                <div data-test-subj="tagList">
+                  {object.references.map(({ name }) => (
+                    <div>{name}</div>
+                  ))}
+                </div>
+              );
+            },
+          },
+        },
+      },
     },
   });
 };
@@ -273,5 +301,10 @@ describe('Alert details', () => {
     expect(
       alertDetails.queryByTestId('addSuggestedDashboard_alertDetailsPage_custom_threshold')
     ).toBeTruthy();
+
+    // Verify that tags are displayed
+    expect(mockConvertNameToReference).toHaveBeenNthCalledWith(1, 'SuggestedTag');
+    expect(mockConvertNameToReference).toHaveBeenNthCalledWith(2, 'SecondTag');
+    expect(alertDetails.queryByTestId('tagList')).toBeTruthy();
   });
 });

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/alert_details.test.tsx

@@ -8,14 +8,14 @@
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
+import type { LinkedDashboard, SuggestedDashboard } from '@kbn/observability-schema';
 import { DashboardTiles } from './related_dashboards/dashboard_tiles';
-import { DashboardMetadata } from './related_dashboards/dashboard_tile';
 import { useAddSuggestedDashboards } from '../hooks/use_add_suggested_dashboard';
 
 interface RelatedDashboardsProps {
   rule: Rule;
-  suggestedDashboards?: DashboardMetadata[];
-  linkedDashboards?: DashboardMetadata[];
+  suggestedDashboards?: SuggestedDashboard[];
+  linkedDashboards?: LinkedDashboard[];
   isLoadingRelatedDashboards: boolean;
   onSuccessAddSuggestedDashboard: () => Promise<void>;
 }

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/components/related_dashboards.tsx

@@ -16,15 +16,12 @@ import {
   EuiButtonEmpty,
   EuiLink,
 } from '@elastic/eui';
+import { SavedObjectsReference } from '@kbn/content-management-content-editor';
+import type { RelatedDashboard } from '@kbn/observability-schema';
 import { useKibana } from '../../../../utils/kibana_react';
-export interface DashboardMetadata {
-  id: string;
-  title: string;
-  description: string;
-}
 
 export interface ActionButtonProps {
-  onClick: (dashboard: DashboardMetadata) => void;
+  onClick: (dashboard: RelatedDashboard) => void;
   label: string;
   isLoading: boolean;
   isDisabled: boolean;
@@ -35,20 +32,26 @@ export function DashboardTile({
   dashboard,
   actionButtonProps,
 }: {
-  dashboard: DashboardMetadata;
+  dashboard: RelatedDashboard;
   actionButtonProps?: ActionButtonProps;
 }) {
   const {
     services: {
       share: { url: urlService },
+      savedObjectsTagging: { ui: savedObjectsTaggingUi },
     },
   } = useKibana();
   const dashboardLocator = urlService.locators.get<DashboardLocatorParams>(DASHBOARD_APP_LOCATOR);
 
+  const tagsReferences: SavedObjectsReference[] = (dashboard.tags || []).flatMap((tag) => {
+    const ref = savedObjectsTaggingUi.convertNameToReference(tag);
+    return ref ? [{ ...ref, name: tag }] : [];
+  });
+
   return (
     <>
-      <EuiFlexGroup gutterSize="xs" responsive={false} key={dashboard.id}>
-        <EuiFlexItem key={dashboard.id}>
+      <EuiFlexGroup gutterSize="xs" responsive={false} key={dashboard.id} alignItems="center">
+        <EuiFlexGroup key={dashboard.id} gutterSize="s" direction="column">
           <EuiLink
             data-test-subj="o11yDashboardTileLink"
             href={dashboardLocator?.getRedirectUrl({
@@ -61,7 +64,14 @@ export function DashboardTile({
           <EuiText color={'subdued'} size="s">
             {dashboard.description}
           </EuiText>
-        </EuiFlexItem>
+          {tagsReferences.length ? (
+            <savedObjectsTaggingUi.components.TagList
+              object={{
+                references: tagsReferences,
+              }}
+            />
+          ) : null}
+        </EuiFlexGroup>
         {actionButtonProps ? (
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/components/related_dashboards/dashboard_tile.tsx

@@ -16,7 +16,8 @@ import {
   EuiLoadingSpinner,
   EuiText,
 } from '@elastic/eui';
-import { ActionButtonProps, DashboardTile, DashboardMetadata } from './dashboard_tile';
+import type { RelatedDashboard } from '@kbn/observability-schema';
+import { ActionButtonProps, DashboardTile } from './dashboard_tile';
 
 export function DashboardTiles({
   title,
@@ -26,7 +27,7 @@ export function DashboardTiles({
 }: {
   title: string;
   isLoadingDashboards: boolean;
-  dashboards?: Array<DashboardMetadata & { actionButtonProps?: ActionButtonProps }>;
+  dashboards?: Array<RelatedDashboard & { actionButtonProps?: ActionButtonProps }>;
   dataTestSubj: string;
 }) {
   const wrapWithHeader = (component: React.ReactNode) => {

x-pack/solutions/observability/plugins/observability/public/pages/alert_details/components/related_dashboards/dashboard_tiles.tsx

@@ -9,7 +9,7 @@ import { renderHook, act } from '@testing-library/react';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import { useAddSuggestedDashboards } from './use_add_suggested_dashboard';
 import { kibanaStartMock } from '../../../utils/kibana_react.mock';
-import { DashboardMetadata } from '../components/related_dashboards/dashboard_tile';
+import type { RelatedDashboard } from '@kbn/observability-schema';
 
 const mockUseKibanaReturnValue = kibanaStartMock.startContract();
 let capturedOnSuccess: (data: Rule) => Promise<void> | undefined;
@@ -54,11 +54,11 @@ const mockRule = {
 
 const mockOnSuccessAddSuggestedDashboard = jest.fn();
 
-const mockDashboard: DashboardMetadata = {
+const mockDashboard = {
   id: TEST_DASHBOARD.id,
   title: TEST_DASHBOARD.title,
   description: TEST_DASHBOARD.description,
-};
+} as RelatedDashboard;
 
 describe('useAddSuggestedDashboards', () => {
   beforeEach(() => {