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

* Introduce Echo for collecting frontend metrics

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

Co-Authored-By: Peter Holmberg <peterholmberg@users.noreply.github.com>

* 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

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,
+  });
+};