[Dashboard] Resolve flaky telemetry, track load type (#184061)

Resolves Dashboard telemetry flakiness and tracks the type of dashboard load.

packages/presentation/presentation_containers/index.ts

@@ -40,4 +40,5 @@ export { tracksOverlays, type TracksOverlays } from './interfaces/tracks_overlay
 export {
   canTrackContentfulRender,
   type TrackContentfulRender,
-} from './interfaces/track_contentful_render';
+  type TracksQueryPerformance,
+} from './interfaces/performance_trackers';

packages/presentation/presentation_containers/interfaces/track_contentful_render.ts → packages/presentation/presentation_containers/interfaces/performance_trackers.ts

@@ -16,3 +16,10 @@ export interface TrackContentfulRender {
 export const canTrackContentfulRender = (root: unknown): root is TrackContentfulRender => {
   return root !== null && typeof root === 'object' && 'trackContentfulRender' in root;
 };
+
+export interface TracksQueryPerformance {
+  firstLoad: boolean;
+  creationStartTime?: number;
+  creationEndTime?: number;
+  lastLoadStartTime?: number;
+}

packages/presentation/presentation_containers/interfaces/presentation_container.ts

@@ -23,13 +23,34 @@ export interface PanelPackage<SerializedState extends object = object> {
 export interface PresentationContainer
   extends Partial<PublishesViewMode & PublishesSettings>,
     CanAddNewPanel {
+  /**
+   * Removes a panel from the container.
+   */
   removePanel: (panelId: string) => void;
+
+  /**
+   * Determines whether or not a container is capable of removing panels.
+   */
   canRemovePanels?: () => boolean;
+
+  /**
+   * Replaces a panel in the container with a new panel.
+   */
   replacePanel: <SerializedState extends object = object>(
     idToRemove: string,
     newPanel: PanelPackage<SerializedState>
   ) => Promise<string>;
 
+  /**
+   * Returns the number of panels in the container.
+   */
+  getPanelCount: () => number;
+
+  /**
+   * A publishing subject containing the child APIs of the container. Note that
+   * children are created asynchronously. This means that the children$ observable might
+   * contain fewer children than the actual number of panels in the container.
+   */
   children$: PublishingSubject<{ [key: string]: unknown }>;
 }
 

packages/presentation/presentation_containers/mocks.ts

@@ -14,6 +14,7 @@ export const getMockPresentationContainer = (): PresentationContainer => {
     removePanel: jest.fn(),
     addNewPanel: jest.fn(),
     replacePanel: jest.fn(),
+    getPanelCount: jest.fn(),
     children$: new BehaviorSubject<{ [key: string]: unknown }>({}),
   };
 };

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx

@@ -20,7 +20,6 @@ import { DashboardPanelState } from '../../../../common';
 import { DashboardGridItem } from './dashboard_grid_item';
 import { useDashboardGridSettings } from './use_dashboard_grid_settings';
 import { useDashboardContainer } from '../../embeddable/dashboard_container';
-import { useDashboardPerformanceTracker } from './use_dashboard_performance_tracker';
 import { getPanelLayoutsAreEqual } from '../../state/diffing/dashboard_diffing_utils';
 import { DASHBOARD_GRID_HEIGHT, DASHBOARD_MARGIN_SIZE } from '../../../dashboard_constants';
 
@@ -48,10 +47,6 @@ export const DashboardGrid = ({ viewportWidth }: { viewportWidth: number }) => {
     }
   }, [expandedPanelId]);
 
-  const { onPanelStatusChange } = useDashboardPerformanceTracker({
-    panelCount: Object.keys(panels).length,
-  });
-
   const panelsInOrder: string[] = useMemo(() => {
     return Object.keys(panels).sort((embeddableIdA, embeddableIdB) => {
       const panelA = panels[embeddableIdA];
@@ -80,11 +75,10 @@ export const DashboardGrid = ({ viewportWidth }: { viewportWidth: number }) => {
           type={type}
           expandedPanelId={expandedPanelId}
           focusedPanelId={focusedPanelId}
-          onPanelStatusChange={onPanelStatusChange}
         />
       );
     });
-  }, [expandedPanelId, onPanelStatusChange, panels, panelsInOrder, focusedPanelId]);
+  }, [expandedPanelId, panels, panelsInOrder, focusedPanelId]);
 
   const onLayoutChange = useCallback(
     (newLayout: Array<Layout & { i: string }>) => {

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx

@@ -9,7 +9,6 @@
 import { EuiLoadingChart } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { EmbeddablePanel, ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public';
-import { PhaseEvent } from '@kbn/presentation-publishing';
 import classNames from 'classnames';
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { DashboardPanelState } from '../../../../common';
@@ -26,7 +25,6 @@ export interface Props extends DivProps {
   focusedPanelId?: string;
   key: string;
   isRenderable?: boolean;
-  onPanelStatusChange?: (info: PhaseEvent) => void;
 }
 
 export const Item = React.forwardRef<HTMLDivElement, Props>(
@@ -37,7 +35,6 @@ export const Item = React.forwardRef<HTMLDivElement, Props>(
       id,
       index,
       type,
-      onPanelStatusChange,
       isRenderable = true,
       // The props below are passed from ReactGridLayoutn and need to be merged with their counterparts.
       // https://github.com/react-grid-layout/react-grid-layout/issues/1241#issuecomment-658306889
@@ -103,7 +100,6 @@ export const Item = React.forwardRef<HTMLDivElement, Props>(
         showBorder: useMargins,
         showNotifications: true,
         showShadow: false,
-        onPanelStatusChange,
       };
 
       // render React embeddable
@@ -128,7 +124,7 @@ export const Item = React.forwardRef<HTMLDivElement, Props>(
           {...panelProps}
         />
       );
-    }, [id, container, type, index, useMargins, onPanelStatusChange]);
+    }, [id, container, type, index, useMargins]);
 
     return (
       <div

src/plugins/dashboard/public/dashboard_container/embeddable/create/create_dashboard.ts

@@ -60,6 +60,7 @@ import { startSyncingDashboardControlGroup } from './controls/dashboard_control_
 import { startSyncingDashboardDataViews } from './data_views/sync_dashboard_data_views';
 import { startDashboardSearchSessionIntegration } from './search_sessions/start_dashboard_search_session_integration';
 import { syncUnifiedSearchState } from './unified_search/sync_dashboard_unified_search_state';
+import { startQueryPerformanceTracking } from './performance/query_performance_tracking';
 
 /**
  * Builds a new Dashboard from scratch.
@@ -509,6 +510,15 @@ export const initializeDashboard = async ({
     );
   });
 
+  // --------------------------------------------------------------------------------------
+  // Start performance tracker
+  // --------------------------------------------------------------------------------------
+  untilDashboardReady().then((dashboardContainer) =>
+    dashboardContainer.integrationSubscriptions.add(
+      startQueryPerformanceTracking(dashboardContainer)
+    )
+  );
+
   // --------------------------------------------------------------------------------------
   // Start animating panel transforms 500 ms after dashboard is created.
   // --------------------------------------------------------------------------------------