[EBT] Dashboard data loaded event

src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx

@@ -14,8 +14,9 @@ import { CoreStart, IUiSettingsClient, KibanaExecutionContext } from '@kbn/core/
 import { Start as InspectorStartContract } from '@kbn/inspector-plugin/public';
 
 import { ControlGroupContainer } from '@kbn/controls-plugin/public';
+import { Filter, TimeRange } from '@kbn/es-query';
 import { UiActionsStart } from '../../services/ui_actions';
-import { RefreshInterval, TimeRange, Query, Filter } from '../../services/data';
+import { RefreshInterval, Query } from '../../services/data';
 import {
   ViewMode,
   Container,
@@ -30,7 +31,7 @@ import {
 } from '../../services/embeddable';
 import { DASHBOARD_CONTAINER_TYPE } from './dashboard_constants';
 import { createPanelState } from './panel';
-import { DashboardPanelState } from './types';
+import { DashboardLoadedEvent, DashboardPanelState } from './types';
 import { DashboardViewport } from './viewport/dashboard_viewport';
 import {
   KibanaContextProvider,
@@ -62,6 +63,7 @@ export interface DashboardContainerServices {
   uiActions: UiActionsStart;
   theme: CoreStart['theme'];
   http: CoreStart['http'];
+  analytics?: CoreStart['analytics'];
 }
 
 interface IndexSignature {
@@ -153,6 +155,12 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     }
   }
 
+  private onDataLoaded(data: DashboardLoadedEvent) {
+    this.services.analytics?.reportEvent('dashboard-data-loaded', {
+      ...data,
+    });
+  }
+
   protected createNewPanelState<
     TEmbeddableInput extends EmbeddableInput,
     TEmbeddable extends IEmbeddable<TEmbeddableInput, any>
@@ -289,6 +297,7 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
                 controlsEnabled={controlsEnabled}
                 container={this}
                 controlGroup={this.controlGroup}
+                onDataLoaded={this.onDataLoaded.bind(this)}
               />
             </this.services.presentationUtil.ContextProvider>
           </KibanaThemeProvider>

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid.tsx

@@ -19,9 +19,9 @@ import React from 'react';
 import { Subscription } from 'rxjs';
 import ReactGridLayout, { Layout, ReactGridLayoutProps } from 'react-grid-layout';
 import { GridData } from '../../../../common';
-import { ViewMode } from '../../../services/embeddable';
+import { ViewMode, EmbeddablePhaseEvent } from '../../../services/embeddable';
 import { DASHBOARD_GRID_COLUMN_COUNT, DASHBOARD_GRID_HEIGHT } from '../dashboard_constants';
-import { DashboardPanelState } from '../types';
+import { DashboardLoadedEventStatus, DashboardLoadedEvent, DashboardPanelState } from '../types';
 import { withKibana } from '../../../services/kibana_react';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGridItem } from './dashboard_grid_item';
@@ -105,6 +105,7 @@ const ResponsiveSizedGrid = sizeMe(config)(ResponsiveGrid);
 export interface DashboardGridProps extends ReactIntl.InjectedIntlProps {
   kibana: DashboardReactContextValue;
   container: DashboardContainer;
+  onDataLoaded?: (data: DashboardLoadedEvent) => void;
 }
 
 interface State {
@@ -230,9 +231,9 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
     const isViewMode = viewMode === ViewMode.VIEW;
 
     // Part of our unofficial API - need to render in a consistent order for plugins.
-    const panelsInOrder = Object.keys(panels).map(
-      (key: string) => panels[key] as DashboardPanelState
-    );
+    const panelsInOrder = Object.keys(panels).map((key: string) => {
+      return panels[key] as DashboardPanelState;
+    });
 
     panelsInOrder.sort((panelA, panelB) => {
       if (panelA.gridData.y === panelB.gridData.y) {
@@ -242,6 +243,46 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
       }
     });
 
+    const panelIds: Record<string, Record<string, number>> = {};
+    const loadStartTime = performance.now();
+    let lastTimeToData = 0;
+    let status: DashboardLoadedEventStatus = 'done';
+    let doneCount = 0;
+
+    /**
+     * Sends an event
+     *
+     * @param info
+     * @returns
+     */
+    const onPanelStatusChange = (info: EmbeddablePhaseEvent) => {
+      if (!this.props.onDataLoaded) return;
+
+      if (panelIds[info.id] === undefined || info.status === 'loading') {
+        panelIds[info.id] = {};
+      } else if (info.status === 'error') {
+        status = 'error';
+      } else if (info.status === 'loaded') {
+        lastTimeToData = performance.now();
+      }
+
+      panelIds[info.id][info.status] = performance.now();
+
+      if (info.status === 'error' || info.status === 'rendered') {
+        doneCount++;
+        if (doneCount === panelsInOrder.length) {
+          const doneTime = performance.now();
+          const data: DashboardLoadedEvent = {
+            timeToData: (lastTimeToData || doneTime) - loadStartTime,
+            timeToDone: doneTime - loadStartTime,
+            numOfPanels: panelsInOrder.length,
+            status,
+          };
+          this.props.onDataLoaded(data);
+        }
+      }
+    };
+
     const dashboardPanels = _.map(panelsInOrder, ({ explicitInput, type }, index) => (
       <DashboardGridItem
         key={explicitInput.id}
@@ -252,6 +293,7 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
         PanelComponent={kibana.services.embeddable.EmbeddablePanel}
         expandedPanelId={expandedPanelId}
         focusedPanelId={focusedPanelIndex}
+        onPanelStatusChange={onPanelStatusChange}
       />
     ));
 

src/plugins/dashboard/public/application/embeddable/grid/dashboard_grid_item.tsx

@@ -10,7 +10,7 @@ import React, { useState, useRef, useEffect, FC } from 'react';
 import { EuiLoadingChart } from '@elastic/eui';
 import classNames from 'classnames';
 
-import { EmbeddableChildPanel, ViewMode } from '../../../services/embeddable';
+import { EmbeddableChildPanel, EmbeddablePhaseEvent, ViewMode } from '../../../services/embeddable';
 import { useLabs } from '../../../services/presentation_util';
 import { DashboardPanelState } from '../types';
 import { DashboardContainer } from '..';
@@ -27,6 +27,7 @@ interface Props extends PanelProps, DivProps {
   expandedPanelId?: string;
   key: string;
   isRenderable?: boolean;
+  onPanelStatusChange?: (info: EmbeddablePhaseEvent) => void;
 }
 
 const Item = React.forwardRef<HTMLDivElement, Props>(
@@ -39,6 +40,7 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
       index,
       PanelComponent,
       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
@@ -73,6 +75,7 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
               key={type}
               embeddableId={id}
               index={index}
+              onPanelStatusChange={onPanelStatusChange}
               {...{ container, PanelComponent }}
             />
             {children}

src/plugins/dashboard/public/application/embeddable/types.ts

@@ -7,3 +7,14 @@
  */
 
 export * from '../../../common/types';
+
+export type DashboardLoadedEventStatus = 'done' | 'error';
+
+export interface DashboardLoadedEvent {
+  // Time from start to when data is loaded
+  timeToData: number;
+  // Time from start until render or error
+  timeToDone: number;
+  numOfPanels: number;
+  status: DashboardLoadedEventStatus;
+}

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.tsx

@@ -19,11 +19,13 @@ import { DashboardGrid } from '../grid';
 import { context } from '../../../services/kibana_react';
 import { DashboardEmptyScreen } from '../empty_screen/dashboard_empty_screen';
 import { withSuspense } from '../../../services/presentation_util';
+import { DashboardLoadedEvent } from '../types';
 
 export interface DashboardViewportProps {
   container: DashboardContainer;
   controlGroup?: ControlGroupContainer;
   controlsEnabled?: boolean;
+  onDataLoaded?: (data: DashboardLoadedEvent) => void;
 }
 
 interface State {
@@ -155,7 +157,9 @@ export class DashboardViewport extends React.Component<DashboardViewportProps, S
               />
             </div>
           )}
-          {this.state.controlGroupReady && <DashboardGrid container={container} />}
+          {this.state.controlGroupReady && (
+            <DashboardGrid container={container} onDataLoaded={this.props.onDataLoaded} />
+          )}
         </div>
       </>
     );

src/plugins/dashboard/public/plugin.tsx

@@ -71,6 +71,7 @@ import {
   LibraryNotificationAction,
   CopyToDashboardAction,
   DashboardCapabilities,
+  DashboardLoadedEvent,
 } from './application';
 import { DashboardAppLocatorDefinition, DashboardAppLocator } from './locator';
 import { createSavedDashboardLoader } from './saved_dashboards';
@@ -138,6 +139,30 @@ export class DashboardPlugin
   private dashboardFeatureFlagConfig?: DashboardFeatureFlagConfig;
   private locator?: DashboardAppLocator;
 
+  private registerEvents(analytics: CoreSetup['analytics']) {
+    analytics.registerEventType<DashboardLoadedEvent>({
+      eventType: 'dashboard-data-loaded',
+      schema: {
+        timeToData: {
+          type: 'long',
+          _meta: { description: 'Time all embeddables took to load data' },
+        },
+        timeToDone: {
+          type: 'long',
+          _meta: { description: 'Time all embeddables took to load data' },
+        },
+        status: {
+          type: 'keyword',
+          _meta: { description: 'Error  ok' },
+        },
+        numOfPanels: {
+          type: 'long',
+          _meta: { description: 'Number of panels loaded' },
+        },
+      },
+    });
+  }
+
   public setup(
     core: CoreSetup<DashboardStartDependencies, DashboardStart>,
     {
@@ -172,6 +197,7 @@ export class DashboardPlugin
         application: coreStart.application,
         uiSettings: coreStart.uiSettings,
         overlays: coreStart.overlays,
+        analytics: coreStart.analytics,
         embeddable: deps.embeddable,
         uiActions: deps.uiActions,
         inspector: deps.inspector,
@@ -286,6 +312,8 @@ export class DashboardPlugin
       },
     };
 
+    this.registerEvents(core.analytics);
+
     core.application.register(app);
     urlForwarding.forwardApp(
       DashboardConstants.DASHBOARDS_ID,

src/plugins/discover/public/embeddable/saved_search_embeddable.tsx

@@ -99,6 +99,8 @@ export class SavedSearchEmbeddable
 
   private node?: HTMLElement;
 
+  reportsEmbeddableLoad = true;
+
   constructor(
     {
       savedSearch,
@@ -172,7 +174,12 @@ export class SavedSearchEmbeddable
 
     this.searchProps!.isLoading = true;
 
-    this.updateOutput({ loading: true, error: undefined });
+    this.updateOutput({
+      ...this.getOutput(),
+      loading: true,
+      rendered: false,
+      error: undefined,
+    });
 
     const parentContext = this.input.executionContext;
     const child: KibanaExecutionContext = {
@@ -208,7 +215,11 @@ export class SavedSearchEmbeddable
           executionContext,
         })
       );
-      this.updateOutput({ loading: false, error: undefined });
+
+      this.updateOutput({
+        ...this.getOutput(),
+        loading: false,
+      });
 
       this.searchProps!.rows = resp.hits.hits.map((hit) =>
         buildDataTableRecord(hit, this.searchProps!.indexPattern)
@@ -217,7 +228,11 @@ export class SavedSearchEmbeddable
       this.searchProps!.isLoading = false;
     } catch (error) {
       if (!this.destroyed) {
-        this.updateOutput({ loading: false, error });
+        this.updateOutput({
+          ...this.getOutput(),
+          loading: false,
+          error,
+        });
 
         this.searchProps!.isLoading = false;
       }
@@ -455,6 +470,11 @@ export class SavedSearchEmbeddable
         domNode
       );
     }
+
+    this.updateOutput({
+      ...this.getOutput(),
+      rendered: true,
+    });
   }
 
   public reload() {

src/plugins/embeddable/public/index.ts

@@ -19,6 +19,8 @@ export type {
   ContainerOutput,
   EmbeddableChildPanelProps,
   EmbeddableContext,
+  EmbeddablePhaseEvent,
+  EmbeddablePhase,
   EmbeddableFactory,
   EmbeddableFactoryDefinition,
   EmbeddableInput,