feat(panel references): when fetching dashboards referenced panel are also fetched

Author: cesco-f

src/platform/plugins/shared/dashboard/common/index.ts

@@ -21,3 +21,4 @@ export {
 } from './reference_utils';
 
 export { isDashboardSection } from './is_dashboard_section';
+export { isDashboardPanel } from './is_dashboard_panel';

src/platform/plugins/shared/dashboard/common/is_dashboard_panel.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { DashboardAttributes, DashboardPanel } from '../server/content_management';
+
+export const isDashboardPanel = (
+  widget: DashboardAttributes['panels'][number]
+): widget is DashboardPanel => {
+  return 'panelConfig' in widget;
+};

x-pack/solutions/observability/plugins/observability/server/routes/alerts/route.ts

@@ -34,6 +34,8 @@ const alertsDynamicDashboardSuggestions = createObservabilityServerRoute({
     const { alertId } = params.query;
     const { ruleRegistry, dashboard } = dependencies;
     const { getContentClient } = dashboard;
+    const { savedObjects } = await context.core;
+
     const dashboardClient = getContentClient()!.getForRequest<
       SavedObjectsFindResult<DashboardAttributes>
     >({
@@ -50,7 +52,8 @@ const alertsDynamicDashboardSuggestions = createObservabilityServerRoute({
       logger,
       dashboardClient,
       investigateAlertsClient,
-      alertId
+      alertId,
+      savedObjects.client
     );
     try {
       const { suggestedDashboards, linkedDashboards } =

x-pack/solutions/observability/plugins/observability/server/services/related_dashboards_client.test.ts

@@ -6,18 +6,20 @@
  */
 import Boom from '@hapi/boom';
 import { RelatedDashboardsClient } from './related_dashboards_client';
-import { Logger } from '@kbn/core/server';
+import { Logger, SavedObjectsClientContract } from '@kbn/core/server';
 import { IContentClient } from '@kbn/content-management-plugin/server/types';
 import { InvestigateAlertsClient } from './investigate_alerts_client';
 import { AlertData } from './alert_data';
 import { OBSERVABILITY_THRESHOLD_RULE_TYPE_ID } from '@kbn/rule-data-utils';
+import { savedObjectsClientMock } from '@kbn/core/server/mocks';
 
 describe('RelatedDashboardsClient', () => {
   let logger: jest.Mocked<Logger>;
   let dashboardClient: jest.Mocked<IContentClient<any>>;
   let alertsClient: jest.Mocked<InvestigateAlertsClient>;
   let alertId: string;
   let client: RelatedDashboardsClient;
+  let soClientMock: jest.Mocked<SavedObjectsClientContract>;
   const baseMockAlert = {
     getAllRelevantFields: jest.fn().mockReturnValue(['field1', 'field2']),
     getRuleQueryIndex: jest.fn().mockReturnValue('index1'),
@@ -60,7 +62,15 @@ describe('RelatedDashboardsClient', () => {
 
     alertId = 'test-alert-id';
 
-    client = new RelatedDashboardsClient(logger, dashboardClient, alertsClient, alertId);
+    soClientMock = savedObjectsClientMock.create();
+
+    client = new RelatedDashboardsClient(
+      logger,
+      dashboardClient,
+      alertsClient,
+      alertId,
+      soClientMock
+    );
 
     jest.clearAllMocks();
   });
@@ -417,6 +427,46 @@ describe('RelatedDashboardsClient', () => {
       expect(dashboardClient.search).toHaveBeenCalledWith({ limit: 2, cursor: '1' });
       expect(client.dashboardsById.size).toBe(2);
     });
+
+    it('should fetch referenced panels when fetching dashboards', async () => {
+      const PANEL_SO_ID = 'panelSOId';
+      const PANEL_TYPE = 'lens';
+      const PANEL_INDEX = 'panelIndex';
+      const PANEL_SO_ATTRIBUTES = { title: 'Panel 1' };
+      dashboardClient.search.mockResolvedValue({
+        contentTypeId: 'dashboard',
+        result: {
+          hits: [
+            {
+              id: 'dashboard1',
+              attributes: {
+                title: 'Dashboard 1',
+                panels: [{ panelConfig: {}, panelIndex: PANEL_INDEX, type: PANEL_TYPE }],
+              },
+              references: [{ name: PANEL_INDEX, type: PANEL_TYPE, id: PANEL_SO_ID }],
+            },
+          ],
+          pagination: { total: 1 },
+        },
+      });
+
+      soClientMock.get.mockResolvedValueOnce({
+        attributes: PANEL_SO_ATTRIBUTES,
+        type: PANEL_TYPE,
+        id: PANEL_SO_ID,
+        references: [],
+      });
+
+      // @ts-ignore next-line
+      await client.fetchDashboards({ page: 1 });
+
+      expect(soClientMock.get).toHaveBeenCalledWith(PANEL_TYPE, PANEL_SO_ID);
+      expect(client.dashboardsById.get('dashboard1')?.attributes.panels[0]).toStrictEqual({
+        panelConfig: { attributes: PANEL_SO_ATTRIBUTES },
+        panelIndex: PANEL_INDEX,
+        type: PANEL_TYPE,
+      });
+    });
   });
 
   describe('getDashboardsByIndex', () => {

x-pack/solutions/observability/plugins/observability/server/services/related_dashboards_client.ts

@@ -5,10 +5,10 @@
  * 2.0.
  */
 import { v4 as uuidv4 } from 'uuid';
-import { omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 import { IContentClient } from '@kbn/content-management-plugin/server/types';
-import type { Logger, SavedObjectsFindResult } from '@kbn/core/server';
-import { isDashboardSection } from '@kbn/dashboard-plugin/common';
+import type { Logger, SavedObjectsClientContract, SavedObjectsFindResult } from '@kbn/core/server';
+import { isDashboardPanel } from '@kbn/dashboard-plugin/common';
 import type { DashboardAttributes, DashboardPanel } from '@kbn/dashboard-plugin/server';
 import type {
   FieldBasedIndexPatternColumn,
@@ -33,7 +33,8 @@ export class RelatedDashboardsClient {
     private logger: Logger,
     private dashboardClient: IContentClient<Dashboard>,
     private alertsClient: InvestigateAlertsClient,
-    private alertId: string
+    private alertId: string,
+    private soClient: SavedObjectsClientContract
   ) {}
 
   public async fetchRelatedDashboards(): Promise<{
@@ -110,6 +111,43 @@ export class RelatedDashboardsClient {
     return sortedDashboards;
   }
 
+  private async fetchReferencedPanel({
+    dashboard,
+    panel,
+  }: {
+    dashboard: Dashboard;
+    panel: DashboardPanel;
+  }): Promise<DashboardPanel | null> {
+    const panelReference = dashboard.references.find(
+      (r) => panel.panelIndex && r.name.includes(panel.panelIndex) && r.type === panel.type
+    );
+
+    // A reference of the panel was not found
+    if (!panelReference) {
+      this.logger.error(
+        `Reference for panel of type ${panel.type} and panelIndex ${panel.panelIndex} was not found in dashboard with id ${dashboard.id}`
+      );
+      return null;
+    }
+
+    try {
+      const so = await this.soClient.get(panel.type, panelReference.id);
+      return {
+        ...panel,
+        panelConfig: {
+          ...panel.panelConfig,
+          attributes: so.attributes,
+        },
+      };
+    } catch (error) {
+      // There was an error fetching the referenced saved object
+      this.logger.error(
+        `Error fetching panel with type ${panel.type} and id ${panelReference.id}: ${error.message}`
+      );
+      return null;
+    }
+  }
+
   private async fetchDashboards({
     page,
     perPage = 20,
@@ -123,9 +161,24 @@ export class RelatedDashboardsClient {
     const {
       result: { hits },
     } = dashboards;
-    hits.forEach((dashboard: Dashboard) => {
-      this.dashboardsById.set(dashboard.id, dashboard);
-    });
+    for (const dashboard of hits) {
+      const panels: DashboardAttributes['panels'] = await Promise.all(
+        dashboard.attributes.panels.map(async (panel) => {
+          // Only fetch the panel if it's a panel (not a section) with an empty panelConfig
+          if (!isDashboardPanel(panel) || !isEmpty(panel.panelConfig)) return panel;
+          const referencedPanel = await this.fetchReferencedPanel({
+            dashboard,
+            panel,
+          });
+          return referencedPanel || panel;
+        })
+      );
+      this.dashboardsById.set(dashboard.id, {
+        ...dashboard,
+        attributes: { ...dashboard.attributes, panels },
+      });
+    }
+
     const fetchedUntil = (page - 1) * perPage + dashboards.result.hits.length;
 
     if (dashboards.result.pagination.total <= fetchedUntil) {
@@ -146,7 +199,7 @@ export class RelatedDashboardsClient {
   } {
     const relevantDashboards: SuggestedDashboard[] = [];
     this.dashboardsById.forEach((d) => {
-      const panels = d.attributes.panels;
+      const panels = d.attributes.panels.filter(isDashboardPanel);
       const matchingPanels = this.getPanelsByIndex(index, panels);
       if (matchingPanels.length > 0) {
         this.logger.debug(
@@ -190,7 +243,7 @@ export class RelatedDashboardsClient {
   } {
     const relevantDashboards: SuggestedDashboard[] = [];
     this.dashboardsById.forEach((d) => {
-      const panels = d.attributes.panels;
+      const panels = d.attributes.panels.filter(isDashboardPanel);
       const matchingPanels = this.getPanelsByField(fields, panels);
       const allMatchingFields = new Set(
         matchingPanels.map((p) => Array.from(p.matchingFields)).flat()
@@ -224,23 +277,17 @@ export class RelatedDashboardsClient {
     return { dashboards: relevantDashboards };
   }
 
-  private getPanelsByIndex(index: string, panels: DashboardAttributes['panels']): DashboardPanel[] {
-    const panelsByIndex = panels.filter((p) => {
-      if (isDashboardSection(p)) return false; // filter out sections
-      const panelIndices = this.getPanelIndices(p);
-      return panelIndices.has(index);
-    }) as DashboardPanel[]; // filtering with type guard doesn't actually limit type, so need to cast
+  private getPanelsByIndex(index: string, panels: DashboardPanel[]): DashboardPanel[] {
+    const panelsByIndex = panels.filter((p) => this.getPanelIndices(p).has(index));
     return panelsByIndex;
   }
 
   private getPanelsByField(
     fields: string[],
-    panels: DashboardAttributes['panels']
+    panels: DashboardPanel[]
   ): Array<{ matchingFields: Set<string>; panel: DashboardPanel }> {
     const panelsByField = panels.reduce((acc, p) => {
-      if (isDashboardSection(p)) return acc; // filter out sections
-      const panelFields = this.getPanelFields(p);
-      const matchingFields = fields.filter((f) => panelFields.has(f));
+      const matchingFields = fields.filter((f) => this.getPanelFields(p).has(f));
       if (matchingFields.length) {
         acc.push({ matchingFields: new Set(matchingFields), panel: p });
       }