Echo: mechanism for collecting custom events lazily (grafana#20365)

* Introduce Echo for collecting frontend metrics

* Update public/app/core/services/echo/Echo.ts

Co-Authored-By: Peter Holmberg <[email protected]>

* Custom meta when adding event

* Rename consumer to backend

* Remove buffer from Echo

* Minor tweaks

* Update package.json

* Update public/app/app.ts

* Update public/app/app.ts

* Collect paint metrics when collecting tti. Remove echoBackendFactory

* Update yarn.lock

* Move Echo interfaces to runtime

* progress on meta and echo

* Collect meta analytics events

* Move MetaanalyticsBackend to enterprise repo

* Fixed unit tests

* Removed unused type from test

* Fixed issues with chunk loading (reverted index-template changes)

* Restored changes

* Fixed webpack prod

Author: dprokop

package.json

@@ -256,6 +256,7 @@
     "tether": "1.4.5",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tinycolor2": "1.4.1",
+    "tti-polyfill": "0.2.2",
     "xss": "1.0.3"
   },
   "resolutions": {

packages/grafana-runtime/src/index.ts

@@ -1,3 +1,5 @@
 export * from './services';
 export * from './config';
+export * from './types';
 export { loadPluginCss, SystemJS } from './utils/plugin';
+export { reportMetaAnalytics } from './utils/analytics';

packages/grafana-runtime/src/services/EchoSrv.ts

@@ -0,0 +1,57 @@
+interface SizeMeta {
+  width: number;
+  height: number;
+}
+
+export interface EchoMeta {
+  screenSize: SizeMeta;
+  windowSize: SizeMeta;
+  userAgent: string;
+  url?: string;
+  /**
+   * A unique browser session
+   */
+  sessionId: string;
+  userLogin: string;
+  userId: number;
+  userSignedIn: boolean;
+  ts: number;
+}
+
+export interface EchoBackend<T extends EchoEvent = any, O = any> {
+  options: O;
+  supportedEvents: EchoEventType[];
+  flush: () => void;
+  addEvent: (event: T) => void;
+}
+
+export interface EchoEvent<T extends EchoEventType = any, P = any> {
+  type: EchoEventType;
+  payload: P;
+  meta: EchoMeta;
+}
+
+export enum EchoEventType {
+  Performance = 'performance',
+  MetaAnalytics = 'meta-analytics',
+}
+
+export interface EchoSrv {
+  flush(): void;
+  addBackend(backend: EchoBackend): void;
+  addEvent<T extends EchoEvent>(event: Omit<T, 'meta'>, meta?: {}): void;
+}
+
+let singletonInstance: EchoSrv;
+
+export function setEchoSrv(instance: EchoSrv) {
+  singletonInstance = instance;
+}
+
+export function getEchoSrv(): EchoSrv {
+  return singletonInstance;
+}
+
+export const registerEchoBackend = (backend: EchoBackend) => {
+  getEchoSrv().addBackend(backend);
+};

packages/grafana-runtime/src/services/index.ts

@@ -2,3 +2,4 @@ export * from './backendSrv';
 export * from './AngularLoader';
 export * from './dataSourceSrv';
 export * from './LocationSrv';
+export * from './EchoSrv';

packages/grafana-runtime/src/types/analytics.ts

@@ -0,0 +1,18 @@
+import { EchoEvent, EchoEventType } from '../services/EchoSrv';
+
+export interface MetaAnalyticsEventPayload {
+  eventName: string;
+  dashboardId?: number;
+  dashboardUid?: string;
+  dashboardName?: string;
+  folderName?: string;
+  panelId?: number;
+  panelName?: string;
+  datasourceName: string;
+  datasourceId?: number;
+  error?: string;
+  duration: number;
+  dataSize?: number;
+}
+
+export interface MetaAnalyticsEvent extends EchoEvent<EchoEventType.MetaAnalytics, MetaAnalyticsEventPayload> {}

packages/grafana-runtime/src/types/index.ts

@@ -0,0 +1 @@
+export * from './analytics';

packages/grafana-runtime/src/utils/analytics.ts

@@ -0,0 +1,9 @@
+import { getEchoSrv, EchoEventType } from '../services/EchoSrv';
+import { MetaAnalyticsEvent, MetaAnalyticsEventPayload } from '../types/analytics';
+
+export const reportMetaAnalytics = (payload: MetaAnalyticsEventPayload) => {
+  getEchoSrv().addEvent<MetaAnalyticsEvent>({
+    type: EchoEventType.MetaAnalytics,
+    payload,
+  });
+};

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -187,7 +187,7 @@ $btn-drag-image: '../img/grab_dark.svg';
 
 $navbar-btn-gicon-brightness: brightness(0.5);
 
-$btn-active-box-shadow: 0px 0px 4px rgba(255,120,10,0.5);
+$btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 
 // Forms
 // -------------------------

public/app/app.ts

@@ -16,6 +16,8 @@ import 'vendor/angular-other/angular-strap';
 import $ from 'jquery';
 import angular from 'angular';
 import config from 'app/core/config';
+// @ts-ignore
+import ttiPolyfill from 'tti-polyfill';
 // @ts-ignore ignoring this for now, otherwise we would have to extend _ interface with move
 import _ from 'lodash';
 import { AppEvents, setMarkdownOptions, setLocale } from '@grafana/data';
@@ -34,6 +36,10 @@ _.move = (array: [], fromIndex: number, toIndex: number) => {
 import { coreModule, angularModules } from 'app/core/core_module';
 import { registerAngularDirectives } from 'app/core/core';
 import { setupAngularRoutes } from 'app/routes/routes';
+import { setEchoSrv, registerEchoBackend } from '@grafana/runtime';
+import { Echo } from './core/services/echo/Echo';
+import { reportPerformance } from './core/services/echo/EchoSrv';
+import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
@@ -163,6 +169,26 @@ export class GrafanaApp {
       importPluginModule(modulePath);
     }
   }
+
+  initEchoSrv() {
+    setEchoSrv(new Echo({ debug: process.env.NODE_ENV === 'development' }));
+
+    ttiPolyfill.getFirstConsistentlyInteractive().then((tti: any) => {
+      // Collecting paint metrics first
+      const paintMetrics = performance.getEntriesByType('paint');
+
+      for (const metric of paintMetrics) {
+        reportPerformance(metric.name, Math.round(metric.startTime + metric.duration));
+      }
+      reportPerformance('tti', tti);
+    });
+
+    registerEchoBackend(new PerformanceBackend({}));
+
+    window.addEventListener('DOMContentLoaded', () => {
+      reportPerformance('dcl', Math.round(performance.now()));
+    });
+  }
 }
 
 export default new GrafanaApp();

public/app/core/components/sidemenu/BottomNavLinks.test.tsx

@@ -21,6 +21,7 @@ const setup = (propOverrides?: object) => {
         orgCount: 2,
         orgRole: '',
         orgId: 1,
+        login: 'hello',
         orgName: 'Grafana',
         timezone: 'UTC',
         helpFlags1: 1,

public/app/core/services/context_srv.ts

@@ -9,6 +9,7 @@ export class User {
   orgRole: any;
   orgId: number;
   orgName: string;
+  login: string;
   orgCount: number;
   timezone: string;
   helpFlags1: number;

public/app/core/services/echo/Echo.ts

@@ -0,0 +1,89 @@
+import { EchoBackend, EchoMeta, EchoEvent, EchoSrv } from '@grafana/runtime';
+import { contextSrv } from '../context_srv';
+
+interface EchoConfig {
+  // How often should metrics be reported
+  flushInterval: number;
+  // Enables debug mode
+  debug: boolean;
+}
+
+/**
+ * Echo is a service for collecting events from Grafana client-app
+ * It collects events, distributes them across registered backend and flushes once per configured interval
+ * It's up to the registered backend to decide what to do with a given type of metric
+ */
+export class Echo implements EchoSrv {
+  private config: EchoConfig = {
+    flushInterval: 10000, // By default Echo flushes every 10s
+    debug: false,
+  };
+
+  private backends: EchoBackend[] = [];
+  // meta data added to every event collected
+
+  constructor(config?: Partial<EchoConfig>) {
+    this.config = {
+      ...this.config,
+      ...config,
+    };
+    setInterval(this.flush, this.config.flushInterval);
+  }
+
+  logDebug = (...msg: any) => {
+    if (this.config.debug) {
+      // tslint:disable-next-line
+      // console.debug('ECHO:', ...msg);
+    }
+  };
+
+  flush = () => {
+    for (const backend of this.backends) {
+      backend.flush();
+    }
+  };
+
+  addBackend = (backend: EchoBackend) => {
+    this.logDebug('Adding backend', backend);
+    this.backends.push(backend);
+  };
+
+  addEvent = <T extends EchoEvent>(event: Omit<T, 'meta'>, _meta?: {}) => {
+    const meta = this.getMeta();
+    const _event = {
+      ...event,
+      meta: {
+        ...meta,
+        ..._meta,
+      },
+    };
+
+    for (const backend of this.backends) {
+      if (backend.supportedEvents.length === 0 || backend.supportedEvents.indexOf(_event.type) > -1) {
+        backend.addEvent(_event);
+      }
+    }
+
+    this.logDebug('Adding event', _event);
+  };
+
+  getMeta = (): EchoMeta => {
+    return {
+      sessionId: '',
+      userId: contextSrv.user.id,
+      userLogin: contextSrv.user.login,
+      userSignedIn: contextSrv.user.isSignedIn,
+      screenSize: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+      windowSize: {
+        width: window.screen.width,
+        height: window.screen.height,
+      },
+      userAgent: window.navigator.userAgent,
+      ts: performance.now(),
+      url: window.location.href,
+    };
+  };
+}

public/app/core/services/echo/EchoSrv.ts

@@ -0,0 +1,12 @@
+import { getEchoSrv, EchoEventType } from '@grafana/runtime';
+import { PerformanceEvent } from './backends/PerformanceBackend';
+
+export const reportPerformance = (metric: string, value: number) => {
+  getEchoSrv().addEvent<PerformanceEvent>({
+    type: EchoEventType.Performance,
+    payload: {
+      metricName: metric,
+      duration: value,
+    },
+  });
+};

public/app/core/services/echo/backends/PerformanceBackend.ts

@@ -0,0 +1,49 @@
+import { EchoBackend, EchoEvent, EchoEventType } from '@grafana/runtime';
+
+export interface PerformanceEventPayload {
+  metricName: string;
+  duration: number;
+}
+
+export interface PerformanceEvent extends EchoEvent<EchoEventType.Performance, PerformanceEventPayload> {}
+
+export interface PerformanceBackendOptions {
+  url?: string;
+}
+
+/**
+ * Echo's performance metrics consumer
+ * Reports performance metrics to given url (TODO)
+ */
+export class PerformanceBackend implements EchoBackend<PerformanceEvent, PerformanceBackendOptions> {
+  private buffer: PerformanceEvent[] = [];
+  supportedEvents = [EchoEventType.Performance];
+
+  constructor(public options: PerformanceBackendOptions) {}
+
+  addEvent = (e: EchoEvent) => {
+    this.buffer.push(e);
+  };
+
+  flush = () => {
+    if (this.buffer.length === 0) {
+      return;
+    }
+
+    const result = {
+      metrics: this.buffer,
+    };
+
+    // Currently we don have API for sending the metrics hence loging to console in dev environment
+    if (process.env.NODE_ENV === 'development') {
+      console.log('PerformanceBackend flushing:', result);
+    }
+
+    this.buffer = [];
+
+    // TODO: Enable backend request when we have metrics API
+    // if (this.options.url) {
+    // getBackendSrv().post(this.options.url, result);
+    // }
+  };
+}

public/app/features/dashboard/state/PanelQueryRunner.test.ts

@@ -1,22 +1,19 @@
 import { PanelQueryRunner } from './PanelQueryRunner';
 import { PanelData, DataQueryRequest, dateTime, ScopedVars } from '@grafana/data';
-import { PanelModel } from './PanelModel';
+import { DashboardModel } from './index';
+import { setEchoSrv } from '@grafana/runtime';
+import { Echo } from '../../../core/services/echo/Echo';
 
 jest.mock('app/core/services/backend_srv');
 
-// Defined within setup functions
-const panelsForCurrentDashboardMock: { [key: number]: PanelModel } = {};
+const dashboardModel = new DashboardModel({
+  panels: [{ id: 1, type: 'graph' }],
+});
 
 jest.mock('app/features/dashboard/services/DashboardSrv', () => ({
   getDashboardSrv: () => {
     return {
-      getCurrent: () => {
-        return {
-          getPanelById: (id: number) => {
-            return panelsForCurrentDashboardMock[id];
-          },
-        };
-      },
+      getCurrent: () => dashboardModel,
     };
   },
 }));
@@ -68,6 +65,7 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
     };
 
     beforeEach(async () => {
+      setEchoSrv(new Echo());
       setupFn();
 
       const datasource: any = {
@@ -103,13 +101,6 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
         },
       });
 
-      panelsForCurrentDashboardMock[1] = {
-        id: 1,
-        getQueryRunner: () => {
-          return ctx.runner;
-        },
-      } as PanelModel;
-
       ctx.events = [];
       ctx.runner.run(args);
     });