[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,
@@ -47,6 +48,7 @@ import {
   combineDashboardFiltersWithControlGroupFilters,
   syncDashboardControlGroup,
 } from '../lib/dashboard_control_group';
+import { DashboardDataLoadedEvent } from './grid/dashboard_grid';
 
 export interface DashboardContainerServices {
   ExitFullScreenButton: React.ComponentType<any>;
@@ -62,6 +64,7 @@ export interface DashboardContainerServices {
   uiActions: UiActionsStart;
   theme: CoreStart['theme'];
   http: CoreStart['http'];
+  analytics: CoreStart['analytics'];
 }
 
 interface IndexSignature {
@@ -153,6 +156,14 @@ export class DashboardContainer extends Container<InheritedChildInput, Dashboard
     }
   }
 
+  private onDataLoaded(data: DashboardDataLoadedEvent) {
+    // console.log(`${this.id} took ${data.timeTookMs} in total`);
+    this.services.analytics.reportEvent('dashboard-data-loaded', {
+      ...data,
+      id: this.id,
+    });
+  }
+
   protected createNewPanelState<
     TEmbeddableInput extends EmbeddableInput,
     TEmbeddable extends IEmbeddable<TEmbeddableInput, any>
@@ -289,6 +300,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,13 +19,19 @@ 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, EmbeddableLoadedEvent } from '../../../services/embeddable';
 import { DASHBOARD_GRID_COLUMN_COUNT, DASHBOARD_GRID_HEIGHT } from '../dashboard_constants';
 import { DashboardPanelState } from '../types';
 import { withKibana } from '../../../services/kibana_react';
 import { DashboardContainer, DashboardReactContextValue } from '../dashboard_container';
 import { DashboardGridItem } from './dashboard_grid_item';
 
+export interface DashboardDataLoadedEvent extends Record<string, unknown> {
+  timeTookMs: number;
+  numOfPanels: number;
+  status: string;
+}
+
 let lastValidGridSize = 0;
 
 /**
@@ -105,6 +111,7 @@ const ResponsiveSizedGrid = sizeMe(config)(ResponsiveGrid);
 export interface DashboardGridProps extends ReactIntl.InjectedIntlProps {
   kibana: DashboardReactContextValue;
   container: DashboardContainer;
+  onDataLoaded?: (data: DashboardDataLoadedEvent) => void;
 }
 
 interface State {
@@ -242,6 +249,24 @@ class DashboardGridUi extends React.Component<DashboardGridProps, State> {
       }
     });
 
+    const panelIds = [];
+    const loadStartTime = performance.now();
+    let loadStatus: string = 'ok';
+
+    const onPanelStatusChange = (info: EmbeddableLoadedEvent) => {
+      panelIds.push(info);
+      if (info.error !== undefined) {
+        loadStatus = 'error';
+      }
+      if (panelIds.length === panelsInOrder.length && this.props.onDataLoaded) {
+        this.props.onDataLoaded({
+          timeTookMs: performance.now() - loadStartTime,
+          numOfPanels: panelIds.length,
+          status: loadStatus,
+        });
+      }
+    };
+
     const dashboardPanels = _.map(panelsInOrder, ({ explicitInput, type }, index) => (
       <DashboardGridItem
         key={explicitInput.id}
@@ -252,6 +277,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,11 @@ 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,
+  EmbeddableLoadedEvent,
+  ViewMode,
+} from '../../../services/embeddable';
 import { useLabs } from '../../../services/presentation_util';
 import { DashboardPanelState } from '../types';
 import { DashboardContainer } from '..';
@@ -27,6 +31,7 @@ interface Props extends PanelProps, DivProps {
   expandedPanelId?: string;
   key: string;
   isRenderable?: boolean;
+  onPanelStatusChange?: (info: EmbeddableLoadedEvent) => void;
 }
 
 const Item = React.forwardRef<HTMLDivElement, Props>(
@@ -39,6 +44,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 +79,7 @@ const Item = React.forwardRef<HTMLDivElement, Props>(
               key={type}
               embeddableId={id}
               index={index}
+              onPanelStatusChange={onPanelStatusChange}
               {...{ container, PanelComponent }}
             />
             {children}

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 { DashboardDataLoadedEvent } from '../grid/dashboard_grid';
 
 export interface DashboardViewportProps {
   container: DashboardContainer;
   controlGroup?: ControlGroupContainer;
   controlsEnabled?: boolean;
+  onDataLoaded?: (data: DashboardDataLoadedEvent) => 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

@@ -138,6 +138,30 @@ export class DashboardPlugin
   private dashboardFeatureFlagConfig?: DashboardFeatureFlagConfig;
   private locator?: DashboardAppLocator;
 
+  private registerEvents(analytics: CoreSetup['analytics']) {
+    analytics.registerEventType({
+      eventType: 'dashboard-data-loaded',
+      schema: {
+        id: {
+          type: 'keyword',
+          _meta: { description: 'Dashboard saved object id' },
+        },
+        timeTookMs: {
+          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 +196,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 +311,8 @@ export class DashboardPlugin
       },
     };
 
+    this.registerEvents(core.analytics);
+
     core.application.register(app);
     urlForwarding.forwardApp(
       DashboardConstants.DASHBOARDS_ID,

src/plugins/embeddable/public/index.ts

@@ -19,6 +19,7 @@ export type {
   ContainerOutput,
   EmbeddableChildPanelProps,
   EmbeddableContext,
+  EmbeddableLoadedEvent,
   EmbeddableFactory,
   EmbeddableFactoryDefinition,
   EmbeddableInput,

src/plugins/embeddable/public/lib/containers/embeddable_child_panel.tsx

@@ -11,20 +11,29 @@ import React from 'react';
 
 import { EuiLoadingChart } from '@elastic/eui';
 import { Subscription } from 'rxjs';
+import { distinct, filter, map } from 'rxjs/operators';
 import { ErrorEmbeddable, IEmbeddable } from '../embeddables';
 import { IContainer } from './i_container';
 import { EmbeddableStart } from '../../plugin';
+import { EmbeddableError } from '../embeddables/i_embeddable';
+
+export interface EmbeddableLoadedEvent {
+  id: string;
+  status: string;
+  error?: EmbeddableError;
+  timeTookMs: number;
+}
 
 export interface EmbeddableChildPanelProps {
   embeddableId: string;
   index?: number;
   className?: string;
   container: IContainer;
   PanelComponent: EmbeddableStart['EmbeddablePanel'];
+  onPanelStatusChange?: (info: EmbeddableLoadedEvent) => void;
 }
-
 interface State {
-  loading: boolean;
+  firstTimeLoading: boolean;
 }
 
 /**
@@ -41,7 +50,7 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
   constructor(props: EmbeddableChildPanelProps) {
     super(props);
     this.state = {
-      loading: true,
+      firstTimeLoading: true,
     };
 
     this.mounted = false;
@@ -52,8 +61,42 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
     const { container } = this.props;
 
     this.embeddable = await container.untilEmbeddableLoaded(this.props.embeddableId);
+
+    let startTime = 0;
+    this.embeddable
+      .getOutput$()
+      .pipe(
+        /**
+         * Record start time if loading === true
+         * Forward events only if loading === false
+         */
+        filter((output) => {
+          if (output.loading === true) {
+            // Record start time
+            startTime = performance.now();
+          }
+          return output.loading === false;
+        }),
+        // Map loaded event properties
+        map((output) => {
+          const endTime = new Date().getTime();
+          return {
+            id: this.embeddable.id,
+            status: output.error ? 'error' : 'loaded',
+            error: output.error,
+            timeTookMs: endTime - performance.now(),
+          };
+        }),
+        // Dedupe
+        distinct()
+      )
+      .subscribe((statusOutput) => {
+        if (this.props.onPanelStatusChange) {
+          this.props.onPanelStatusChange(statusOutput);
+        }
+      });
     if (this.mounted) {
-      this.setState({ loading: false });
+      this.setState({ firstTimeLoading: false });
     }
   }
 
@@ -67,12 +110,12 @@ export class EmbeddableChildPanel extends React.Component<EmbeddableChildPanelPr
   public render() {
     const { PanelComponent, index } = this.props;
     const classes = classNames('embPanel', {
-      'embPanel-isLoading': this.state.loading,
+      'embPanel-isLoading': this.state.firstTimeLoading,
     });
 
     return (
       <div className={classes}>
-        {this.state.loading || !this.embeddable ? (
+        {this.state.firstTimeLoading || !this.embeddable ? (
           <EuiLoadingChart size="l" mono />
         ) : (
           <PanelComponent embeddable={this.embeddable} index={index} />

x-pack/plugins/lens/public/embeddable/embeddable.tsx

@@ -463,12 +463,18 @@ export class Embeddable
     return isDirty;
   }
 
-  private updateActiveData: ExpressionWrapperProps['onData$'] = (_, adapters) => {
+  private updateActiveData: ExpressionWrapperProps['onData$'] = (data: any, adapters) => {
     this.activeDataInfo.activeData = adapters?.tables?.tables;
     if (this.input.onLoad) {
       // once onData$ is get's called from expression renderer, loading becomes false
       this.input.onLoad(false);
     }
+
+    this.updateOutput({
+      ...this.getOutput(),
+      loading: false,
+      error: data.type === 'error' ? data.error : undefined,
+    });
   };
 
   private onRender: ExpressionWrapperProps['onRender$'] = () => {
@@ -492,6 +498,11 @@ export class Embeddable
 
     this.domNode.setAttribute('data-shared-item', '');
 
+    this.updateOutput({
+      ...this.getOutput(),
+      loading: true,
+      error: undefined,
+    });
     this.renderComplete.dispatchInProgress();
 
     const parentContext = this.input.executionContext;

x-pack/plugins/maps/public/embeddable/map_embeddable.tsx

@@ -137,6 +137,32 @@ export class MapEmbeddable
     this._savedMap = new SavedMap({ mapEmbeddableInput: initialInput });
     this._initializeSaveMap();
     this._subscription = this.getUpdated$().subscribe(() => this.onUpdate());
+    this.setEventHandlers({
+      onDataLoad: (_) => {
+        this.updateOutput({
+          ...this.getOutput(),
+          loading: true,
+          error: undefined,
+        });
+      },
+      onDataLoadEnd: (_) => {
+        this.updateOutput({
+          ...this.getOutput(),
+          loading: false,
+          error: undefined,
+        });
+      },
+      onDataLoadError: (e) => {
+        this.updateOutput({
+          ...this.getOutput(),
+          loading: false,
+          error: {
+            name: 'EmbeddableError',
+            message: e.errorMessage,
+          },
+        });
+      },
+    });
     this._controlledBy = `mapEmbeddablePanel${this.id}`;
     this._prevFilterByMapExtent =
       this.input.filterByMapExtent === undefined ? false : this.input.filterByMapExtent;