EventBus: Introduces new event bus with emitter backward compatible interface (#27564)

* updated

* Experimenting with event bus with legacy support

* Before switch to emitter

* EventBus & Emitter unification

* Everything using new EventBus

* Making progress

* Fixing merge issues

* Final merge issues

* Updated

* Updates

* Fix

* Updated

* Update

* Update

* Rename methods to publish and subscribe

* Ts fixes

* Updated

* updated

* fixing doc warnigns

* removed unused file

public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx

@@ -97,6 +97,7 @@ function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<B
       width={532}
       transparent={false}
       height={250}
+      eventBus={{} as any}
     />
   );
 }

public/app/plugins/panel/graph/graph.ts

@@ -11,7 +11,7 @@ import './jquery.flot.events';
 import $ from 'jquery';
 import _ from 'lodash';
 import { tickStep } from 'app/core/utils/ticks';
-import { appEvents, coreModule, updateLegendValues } from 'app/core/core';
+import { coreModule, updateLegendValues } from 'app/core/core';
 import GraphTooltip from './graph_tooltip';
 import { ThresholdManager } from './threshold_manager';
 import { TimeRegionManager } from './time_region_manager';
@@ -37,6 +37,8 @@ import {
   getTimeField,
   getValueFormat,
   hasLinks,
+  LegacyGraphHoverClearEvent,
+  LegacyGraphHoverEvent,
   LinkModelSupplier,
   PanelEvents,
   toUtc,
@@ -45,7 +47,6 @@ import { GraphContextMenuCtrl } from './GraphContextMenuCtrl';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { ContextSrv } from 'app/core/services/context_srv';
 import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
-import { CoreEvents } from 'app/types';
 
 const LegendWithThemeProvider = provideTheme(Legend);
 
@@ -86,8 +87,11 @@ class GraphElement {
     this.ctrl.events.on(PanelEvents.render, this.onRender.bind(this));
 
     // global events
-    appEvents.on(CoreEvents.graphHover, this.onGraphHover.bind(this), scope);
-    appEvents.on(CoreEvents.graphHoverClear, this.onGraphHoverClear.bind(this), scope);
+    // Using old way here to use the scope unsubscribe model as the new $on function does not take scope
+    this.ctrl.dashboard.events.on(LegacyGraphHoverEvent.type, this.onGraphHover.bind(this), this.scope);
+    this.ctrl.dashboard.events.on(LegacyGraphHoverClearEvent.type, this.onGraphHoverClear.bind(this), this.scope);
+
+    // plot events
     this.elem.bind('plotselected', this.onPlotSelected.bind(this));
     this.elem.bind('plotclick', this.onPlotClick.bind(this));
 

public/app/plugins/panel/graph/graph_tooltip.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { appEvents } from 'app/core/core';
 import { CoreEvents } from 'app/types';
-import { textUtil, systemDateFormats } from '@grafana/data';
+import { textUtil, systemDateFormats, LegacyGraphHoverClearEvent, LegacyGraphHoverEvent } from '@grafana/data';
 
 export default function GraphTooltip(this: any, elem: any, dashboard: any, scope: any, getSeriesFn: any) {
   const self = this;
@@ -157,7 +157,7 @@ export default function GraphTooltip(this: any, elem: any, dashboard: any, scope
         plot.unhighlight();
       }
     }
-    appEvents.emit(CoreEvents.graphHoverClear);
+    dashboard.events.$emit(new LegacyGraphHoverClearEvent());
   });
 
   elem.bind('plothover', (event: any, pos: { panelRelY: number; pageY: number }, item: any) => {
@@ -165,7 +165,7 @@ export default function GraphTooltip(this: any, elem: any, dashboard: any, scope
 
     // broadcast to other graph panels that we are hovering!
     pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height();
-    appEvents.emit(CoreEvents.graphHover, { pos: pos, panel: panel });
+    dashboard.events.$emit(new LegacyGraphHoverEvent({ pos: pos, panel: panel }));
   });
 
   elem.bind('plotclick', (event: any, pos: any, item: any) => {

public/app/plugins/panel/graph/specs/graph.test.ts

@@ -20,13 +20,12 @@ import '../module';
 import { GraphCtrl } from '../module';
 import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';
 import { PanelCtrl } from 'app/features/panel/panel_ctrl';
-
 import config from 'app/core/config';
 
 import TimeSeries from 'app/core/time_series2';
 import $ from 'jquery';
 import { graphDirective } from '../graph';
-import { dateTime } from '@grafana/data';
+import { dateTime, EventBusSrv } from '@grafana/data';
 
 const ctx = {} as any;
 let ctrl: any;
@@ -84,6 +83,7 @@ describe('grafanaGraph', () => {
       hiddenSeries: {},
       dashboard: {
         getTimezone: () => 'browser',
+        events: new EventBusSrv(),
       },
       range: {
         from: dateTime([2015, 1, 1, 10]),

public/app/plugins/panel/heatmap/rendering.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import * as d3 from 'd3';
-import { appEvents, contextSrv } from 'app/core/core';
+import { contextSrv } from 'app/core/core';
 import * as ticksUtils from 'app/core/utils/ticks';
 import { HeatmapTooltip } from './heatmap_tooltip';
 import { mergeZeroBuckets } from './heatmap_data_converter';
@@ -12,10 +12,11 @@ import {
   getValueFormat,
   formattedValueToString,
   dateTimeFormat,
+  LegacyGraphHoverEvent,
+  LegacyGraphHoverClearEvent,
   getColorForTheme,
 } from '@grafana/data';
 import { graphTimeFormat } from '@grafana/ui';
-import { CoreEvents } from 'app/types';
 import { config } from 'app/core/config';
 
 const MIN_CARD_SIZE = 1,
@@ -84,9 +85,8 @@ export class HeatmapRenderer {
     /////////////////////////////
 
     // Shared crosshair and tooltip
-    appEvents.on(CoreEvents.graphHover, this.onGraphHover.bind(this), this.scope);
-
-    appEvents.on(CoreEvents.graphHoverClear, this.onGraphHoverClear.bind(this), this.scope);
+    this.ctrl.dashboard.events.on(LegacyGraphHoverEvent.type, this.onGraphHover.bind(this), this.scope);
+    this.ctrl.dashboard.events.on(LegacyGraphHoverClearEvent.type, this.onGraphHoverClear.bind(this), this.scope);
 
     // Register selection listeners
     this.$heatmap.on('mousedown', this.onMouseDown.bind(this));
@@ -735,7 +735,7 @@ export class HeatmapRenderer {
   }
 
   onMouseLeave() {
-    appEvents.emit(CoreEvents.graphHoverClear);
+    this.ctrl.dashboard.$emit(new LegacyGraphHoverClearEvent());
     this.clearCrosshair();
   }
 
@@ -781,7 +781,7 @@ export class HeatmapRenderer {
     // Set minimum offset to prevent showing legend from another panel
     pos.panelRelY = Math.max(pos.offset.y / this.height, 0.001);
     // broadcast to other graph panels that we are hovering
-    appEvents.emit(CoreEvents.graphHover, { pos: pos, panel: this.panel });
+    this.ctrl.dashboard.events.emit$(new LegacyGraphHoverEvent({ pos: pos, panel: this.panel }));
   }
 
   limitSelection(x2: number) {

public/app/plugins/panel/text/TextPanel.tsx

@@ -9,6 +9,7 @@ import { TextOptions } from './types';
 import { CustomScrollbar, stylesFactory } from '@grafana/ui';
 import { css, cx } from 'emotion';
 import DangerouslySetHtmlContent from 'dangerously-set-html-content';
+import { Unsubscribable } from 'rxjs';
 
 interface Props extends PanelProps<TextOptions> {}
 
@@ -17,6 +18,8 @@ interface State {
 }
 
 export class TextPanel extends PureComponent<Props, State> {
+  eventSub?: Unsubscribable;
+
   constructor(props: Props) {
     super(props);