[Incident Management] Render suggested dashboards

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

@@ -11,6 +11,7 @@ import { relevantPanelSchema } from '../relevant_panel/latest';
 export const relatedDashboardSchema = z.object({
   id: z.string(),
   title: z.string(),
+  description: z.string(),
   matchedBy: z.object({
     fields: z.array(z.string()).optional(),
     index: z.array(z.string()).optional(),
@@ -23,6 +24,7 @@ export const relatedDashboardSchema = z.object({
 export const suggestedDashboardSchema = z.object({
   id: z.string(),
   title: z.string(),
+  description: z.string(),
   matchedBy: z.object({
     fields: z.array(z.string()).optional(),
     index: z.array(z.string()).optional(),

x-pack/solutions/observability/plugins/observability/common/constants.ts

@@ -39,3 +39,7 @@ export const OBSERVABILITY_RULE_TYPE_IDS_WITH_SUPPORTED_STACK_RULE_TYPES = [
   ...OBSERVABILITY_RULE_TYPE_IDS,
   ...STACK_RULE_TYPE_IDS_SUPPORTED_BY_OBSERVABILITY,
 ];
+
+export enum ALERTS_API_URLS {
+  INTERNAL_RELATED_DASHBOARDS = '/internal/observability/alerts/related_dashboards',
+}

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

@@ -13,7 +13,6 @@ import { observabilityAIAssistantPluginMock } from '@kbn/observability-ai-assist
 import { useBreadcrumbs, TagsList } from '@kbn/observability-shared-plugin/public';
 import { RuleTypeModel, ValidationResult } from '@kbn/triggers-actions-ui-plugin/public';
 import { ruleTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/rule_type_registry.mock';
-import { dashboardServiceProvider } from '@kbn/response-ops-rule-form/src/common';
 import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Chance } from 'chance';
@@ -49,12 +48,36 @@ const ruleType: RuleTypeModel = {
   ruleParamsExpression: () => <Fragment />,
   alertDetailsAppSection: () => <Fragment />,
 };
+
+jest.mock('./hooks/use_add_suggested_dashboard', () => ({
+  useAddSuggestedDashboards: () => ({
+    onClickAddSuggestedDashboard: jest.fn(),
+    addingDashboardId: undefined,
+  }),
+}));
+
+jest.mock('./hooks/use_related_dashboards', () => ({
+  useRelatedDashboards: () => ({
+    isLoadingSuggestedDashboards: false,
+    suggestedDashboards: [
+      {
+        id: 'suggested-dashboard-1',
+        title: 'Suggested Dashboard 1',
+        description: 'A suggested dashboard for testing',
+      },
+    ],
+    linkedDashboards: [
+      {
+        id: 'dashboard-1',
+      },
+    ],
+  }),
+}));
+
 const ruleTypeRegistry = ruleTypeRegistryMock.create();
 
 const useKibanaMock = useKibana as jest.Mock;
 
-const dashboardServiceProviderMock = dashboardServiceProvider as jest.Mock;
-
 const mockObservabilityAIAssistant = observabilityAIAssistantPluginMock.createStartContract();
 
 const mockKibana = () => {
@@ -76,26 +99,30 @@ const mockKibana = () => {
   });
 };
 
+const MOCK_RULE_TYPE_ID = 'observability.rules.custom_threshold';
+
+const MOCK_RULE = {
+  id: 'ruleId',
+  name: 'ruleName',
+  ruleTypeId: MOCK_RULE_TYPE_ID,
+  consumer: 'logs',
+  artifacts: {
+    dashboards: [
+      {
+        id: 'dashboard-1',
+      },
+      {
+        id: 'dashboard-2',
+      },
+    ],
+  },
+};
 jest.mock('../../hooks/use_fetch_alert_detail');
 jest.mock('../../hooks/use_fetch_rule', () => {
   return {
     useFetchRule: () => ({
       reloadRule: jest.fn(),
-      rule: {
-        id: 'ruleId',
-        name: 'ruleName',
-        consumer: 'logs',
-        artifacts: {
-          dashboards: [
-            {
-              id: 'dashboard-1',
-            },
-            {
-              id: 'dashboard-2',
-            },
-          ],
-        },
-      },
+      rule: MOCK_RULE,
     }),
   };
 });
@@ -112,14 +139,6 @@ const TagsListMock = TagsList as jest.Mock;
 
 usePerformanceContextMock.mockReturnValue({ onPageReady: jest.fn() });
 
-dashboardServiceProviderMock.mockReturnValue({
-  fetchValidDashboards: jest.fn().mockResolvedValue([
-    {
-      id: 'dashboard-1',
-    },
-  ]),
-});
-
 const chance = new Chance();
 const params = {
   alertId: chance.guid(),
@@ -168,7 +187,7 @@ describe('Alert details', () => {
 
     expect(alertDetails.queryByTestId('alertDetails')).toBeTruthy();
     expect(alertDetails.queryByTestId('alertDetailsError')).toBeFalsy();
-    expect(alertDetails.queryByTestId('alertDetailsPageTitle')).toBeTruthy();
+    expect(alertDetails.queryByTestId(MOCK_RULE_TYPE_ID)).toBeTruthy();
     expect(alertDetails.queryByTestId('alertDetailsTabbedContent')).toBeTruthy();
     expect(alertDetails.queryByTestId('alert-summary-container')).toBeFalsy();
     expect(alertDetails.queryByTestId('overviewTab')).toBeTruthy();
@@ -211,4 +230,33 @@ describe('Alert details', () => {
     expect(alertDetails.queryByTestId('alertDetailsError')).toBeFalsy();
     expect(alertDetails.queryByTestId('alertDetails')).toBeFalsy();
   });
+
+  it('should navigate to Related Dashboards tab and display linked and suggested dashboards', async () => {
+    useFetchAlertDetailMock.mockReturnValue([false, alertDetail]);
+
+    const alertDetails = renderComponent();
+
+    await waitFor(() => expect(alertDetails.queryByTestId('centerJustifiedSpinner')).toBeFalsy());
+
+    // Find and click the Related Dashboards tab
+    const relatedDashboardsTab = alertDetails.getByText(/Related dashboards/);
+    expect(relatedDashboardsTab).toBeTruthy();
+    expect(relatedDashboardsTab.textContent).toContain('2');
+
+    // Click on the Related Dashboards tab
+    await userEvent.click(relatedDashboardsTab);
+
+    // Check that linked dashboards section is displayed
+    expect(alertDetails.queryByTestId('linked-dashboards')).toBeTruthy();
+
+    // Check that suggested dashboards section is displayed
+    expect(alertDetails.queryByTestId('suggested-dashboards')).toBeTruthy();
+
+    // Verify the suggested dashboard from our mock is displayed
+    expect(alertDetails.queryByText('Suggested Dashboard 1')).toBeTruthy();
+    expect(alertDetails.queryByText('A suggested dashboard for testing')).toBeTruthy();
+    expect(
+      alertDetails.queryByTestId('addSuggestedDashboard_alertDetailsPage_custom_threshold')
+    ).toBeTruthy();
+  });
 });