fix: remove messages 'Using strings as events are deprecated'

src/color_legend.ts

@@ -5,7 +5,8 @@ import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
 import {contextSrv} from 'app/core/core';
 import {tickStep} from 'app/core/utils/ticks';
 import coreModule from 'app/core/core_module';
-import { BucketMatrix } from './statusmap_data';
+import { StatusHeatmapCtrl } from "./module";
+import { PanelEvents } from './libs/grafana/events/index';
 
 const LEGEND_STEP_WIDTH = 2;
 
@@ -22,7 +23,7 @@ coreModule.directive('optionsColorLegend', function() {
 
       render();
 
-      ctrl.events.on('render', function() {
+      ctrl.events.on(PanelEvents.render, function() {
         render();
       });
 
@@ -51,11 +52,11 @@ coreModule.directive('statusHeatmapLegend', function() {
     restrict: 'E',
     template: '<div class="status-heatmap-color-legend"><svg width="100px" height="6px"></svg></div>',
     link: function(scope, elem, attrs) {
-      let ctrl = scope.ctrl;
+      let ctrl:StatusHeatmapCtrl = scope.ctrl;
       let panel = scope.ctrl.panel;
 
       render();
-      ctrl.events.on('render', function() {
+      ctrl.events.on(PanelEvents.render, function() {
         render();
       });
 
@@ -83,14 +84,6 @@ coreModule.directive('statusHeatmapLegend', function() {
             }
           }
 
-          // console.log("legend state:", {
-          //   rangeFrom: rangeFrom,
-          //   rangeTo: rangeTo,
-          //   maxValue: maxValue,
-          //   minValue: minValue,
-          //   colorMode: panel.color.mode
-          // });
-
           if (panel.color.mode === 'spectrum') {
             let colorScheme = _.find(ctrl.colorSchemes, {value: panel.color.colorScheme});
             drawColorLegend(elem, colorScheme, rangeFrom, rangeTo, maxValue, minValue);
@@ -109,7 +102,7 @@ coreModule.directive('statusHeatmapLegend', function() {
 
 function drawColorLegend(elem, colorScheme, rangeFrom: number, rangeTo:number, maxValue: number, minValue:number) {
   let legendElem = $(elem).find('svg');
-  let legend = d3.select(legendElem.get(0));
+  let legend: any = d3.select(legendElem.get(0));
   clearLegend(elem);
 
   let legendWidth = Math.floor(legendElem.outerWidth()) - 30;  // narrow legendWidth by 30px to get space for first and last tick values
@@ -265,8 +258,7 @@ function drawDiscreteLegendValues(elem, colorOptions, legendWidth) {
 
   let valuesNumber = thresholds.length;
   let rangeStep  = Math.floor(legendWidth / valuesNumber);
-  let valuesRange = d3.range(0, legendWidth, rangeStep);
-
+  //let valuesRange = d3.range(0, legendWidth, rangeStep);
 
   let legendValueScale = d3.scaleLinear()
     .domain([0, valuesNumber])
@@ -283,7 +275,7 @@ function drawDiscreteLegendValues(elem, colorOptions, legendWidth) {
     .tickValues(d3.range(0, valuesNumber, 1)) //thresholdValues)
     .tickSize(2)
     .tickFormat((t) => {
-      let i = Math.floor(t);
+      let i = Math.floor(t.valueOf());
       let v = thresholdTooltips[i];
       if (v != undefined) {
         return ""+v;

src/libs/grafana/events/appEvents.ts

@@ -0,0 +1,4 @@
+export interface AppEvent<T> {
+    readonly name: string;
+    payload?: T;
+}

src/libs/grafana/events/events.ts

@@ -0,0 +1,16 @@
+import {AppEvent} from './appEvents';
+
+export interface GraphHoverPayload {
+    pos: any;
+    panel: {
+        id: number;
+    };
+}
+
+export var graphHover:(AppEvent<GraphHoverPayload>|string) = {name: 'graph-hover'};
+export var graphHoverClear:(AppEvent<any>|string) = {name: 'graph-hover-clear'};
+
+export function fallbackToStringEvents() {
+    graphHover = 'graph-hover';
+    graphHoverClear = 'graph-hover-clear';
+}

src/libs/grafana/events/index.ts

@@ -0,0 +1,3 @@
+import * as CoreEvents from './events';
+import * as PanelEvents from './panelEvents';
+export { CoreEvents, PanelEvents }

src/libs/grafana/events/panelEvents.ts

@@ -0,0 +1,29 @@
+import { AppEvent } from './appEvents';
+
+export interface DataQueryError {
+    data?: {
+        message?: string;
+        error?: string;
+    };
+    message?: string;
+    status?: string;
+    statusText?: string;
+    refId?: string;
+    cancelled?: boolean;
+}
+
+export var refresh:(AppEvent<undefined>|string) = {name: 'refresh'};
+export var render:(AppEvent<any>|string) = {name: 'render'};
+export var dataError:(AppEvent<DataQueryError>|string) = {name: 'data-error'};
+export var dataReceived:(AppEvent<any[]>|string) = {name: 'data-received'};
+export var dataSnapshotLoad:(AppEvent<any[]>|string) = {name: 'data-snapshot-load'};
+export var editModeInitialized:(AppEvent<undefined>|string) = {name: 'init-edit-mode'};
+
+export function fallbackToStringEvents() {
+    refresh = 'refresh';
+    render = 'render';
+    dataError = 'data-error';
+    dataReceived = 'data-received';
+    dataSnapshotLoad = 'data-snapshot-load';
+    editModeInitialized = 'init-edit-mode';
+}

src/libs/polygrafill/README.md

@@ -0,0 +1,8 @@
+1. @grafana/data is not supported in grafana 5.x and 6.2. The workaround is
+the module `./libs/grafana/events` that include copy-pasted events
+from @grafana/data and app/core from grafana sources.
+
+2. Newly Grafana versions flood Console with
+"Usage strings as events is deprecated ..." messages.
+This module has a function to detect if Grafana’s Emitter support AppEvent style event ids.
+

src/libs/polygrafill/funcs.ts

@@ -0,0 +1,23 @@
+import { Emitter } from 'app/core/utils/emitter';
+
+// Old Grafana releases use strings as event ids and
+// new event ids in form of object {name: "event-id"} are not
+// supported properly: first defined listener will receive
+// all emitted events despite of the value in 'name' field.
+//
+// This method detects this behaviour and return true
+// only for new Grafana versions.
+export function hasAppEventCompatibleEmitter(emitter: Emitter):boolean {
+    let receiveEvents = 0;
+    let eventId: any = {name: "non-existed-event-id"};
+    let eventId2: any = {name: "non-existed-event-id-2"};
+    emitter.on(eventId, function(){
+        receiveEvents++;
+    });
+    emitter.emit(eventId);
+    emitter.emit(eventId2);
+    emitter.removeAllListeners(eventId);
+
+    // New Grafana versions should receive one event.
+    return receiveEvents == 1;
+}

src/libs/polygrafill/index.ts

@@ -0,0 +1,2 @@
+import * as Polygrafill from './funcs';
+export { Polygrafill };

src/module.ts

@@ -15,8 +15,11 @@ import {loadPluginCss} from 'app/plugins/sdk';
 // Types
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { AnnotationsSrv } from 'app/features/annotations/annotations_srv';
+import { CoreEvents, PanelEvents } from './libs/grafana/events/index';
 import { Bucket, BucketMatrix } from './statusmap_data';
 import rendering from './rendering';
+import { Polygrafill } from './libs/polygrafill/index';
+
 
 import {ColorModeDiscrete} from "./color_mode_discrete";
 
@@ -60,6 +63,8 @@ loadPluginCss({
   light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
 });
 
+export var renderComplete:any = {name:'statusmap-render-complete'}; // eventFactory('statusmap-render-complete');
+
 class StatusHeatmapCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
 
@@ -134,6 +139,12 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   constructor($scope: any, $injector: auto.IInjectorService, timeSrv, private annotationsSrv: AnnotationsSrv, $window, datasourceSrv, public variableSrv: any, templateSrv) {
     super($scope, $injector);
 
+    if(!Polygrafill.hasAppEventCompatibleEmitter(this.events)){
+      CoreEvents.fallbackToStringEvents();
+      PanelEvents.fallbackToStringEvents();
+      renderComplete = renderComplete.name;
+    }
+
     migratePanelConfig(this.panel);
     _.defaultsDeep(this.panel, this.panelDefaults);
 
@@ -171,14 +182,14 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
     
     this.timeSrv = timeSrv;
 
-    this.events.on('render', this.onRender.bind(this));
-    this.events.on('data-received', this.onDataReceived.bind(this));
-    this.events.on('data-error', this.onDataError.bind(this));
-    this.events.on('data-snapshot-load', this.onDataReceived.bind(this));
-    this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
-    this.events.on('refresh', this.postRefresh.bind(this));
+    this.events.on(PanelEvents.render, this.onRender.bind(this));
+    this.events.on(PanelEvents.dataReceived, this.onDataReceived.bind(this));
+    this.events.on(PanelEvents.dataError, this.onDataError.bind(this));
+    this.events.on(PanelEvents.dataSnapshotLoad, this.onDataReceived.bind(this));
+    this.events.on(PanelEvents.editModeInitialized, this.onInitEditMode.bind(this));
+    this.events.on(PanelEvents.refresh, this.postRefresh.bind(this));
     // custom event from rendering.js
-    this.events.on('render-complete', this.onRenderComplete.bind(this));
+    this.events.on(renderComplete, this.onRenderComplete.bind(this));
 
     this.onCardColorChange = this.onCardColorChange.bind(this);
   }

src/rendering.ts

@@ -8,7 +8,8 @@ import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
 import {StatusmapTooltip} from './tooltip';
 import {AnnotationTooltip} from './annotations';
 import { Bucket, BucketMatrix } from './statusmap_data';
-import { StatusHeatmapCtrl } from './module';
+import { StatusHeatmapCtrl, renderComplete } from './module';
+import { CoreEvents, PanelEvents } from './libs/grafana/events/index';
 
 let MIN_CARD_SIZE = 5,
     CARD_H_SPACING = 2,
@@ -90,7 +91,7 @@ export class StatusmapRenderer {
     this.padding = { left: 0, right: 0, top: 0, bottom: 0 };
     this.margin = { left: 25, right: 15, top: 10, bottom: 20 };
 
-    this.ctrl.events.on('render', this.onRender.bind(this));
+    this.ctrl.events.on(PanelEvents.render, this.onRender.bind(this));
 
     this.ctrl.tickValueFormatter = this.tickValueFormatter.bind(this);
 
@@ -100,9 +101,9 @@ export class StatusmapRenderer {
 
     // Shared crosshair and tooltip    this.empty = true;
 
-    appEvents.on('graph-hover', this.onGraphHover.bind(this), this.scope);
+    appEvents.on( CoreEvents.graphHover, this.onGraphHover.bind(this), this.scope);
 
-    appEvents.on('graph-hover-clear', this.onGraphHoverClear.bind(this), this.scope);
+    appEvents.on( CoreEvents.graphHoverClear, this.onGraphHoverClear.bind(this), this.scope);
 
     // Register selection listeners
     this.$heatmap.on('mousedown', this.onMouseDown.bind(this));
@@ -400,7 +401,7 @@ export class StatusmapRenderer {
 
     this._renderAnnotations();
 
-    this.ctrl.events.emit('render-complete', {
+    this.ctrl.events.emit(renderComplete, {
       "chartWidth": this.chartWidth
     });
   }
@@ -608,7 +609,7 @@ export class StatusmapRenderer {
   }
 
   onMouseLeave(e) {
-    appEvents.emit('graph-hover-clear');
+    appEvents.emit(CoreEvents.graphHoverClear);
     this.clearCrosshair();
     this.annotationTooltip.destroy();
   }
@@ -674,7 +675,7 @@ export class StatusmapRenderer {
     pos.panelRelY = Math.max(event.offsetY / this.height, 0.001);
 
     // broadcast to other graph panels that we are hovering
-    appEvents.emit('graph-hover', {pos: pos, panel: this.panel});
+    appEvents.emit(CoreEvents.graphHover, {pos: pos, panel: this.panel});
   }
 
   limitSelection(x2) {