Merge pull request #56 from flant/enable_annotations

Enable annotations

Gruntfile.js

@@ -3,8 +3,18 @@ module.exports = (grunt) => {
 
   grunt.loadNpmTasks('grunt-execute');
   grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-notify');
 
   grunt.initConfig({
+    notify: {
+      watch: {
+        options: {
+          message: 'grunt watch Complete',
+          title: 'flant-statusmap-panel rebuilded',
+          duration: 2
+        }
+      }
+    },
 
     clean: ['dist'],
 
@@ -25,7 +35,7 @@ module.exports = (grunt) => {
     watch: {
       rebuild_all: {
         files: ['src/**/*', 'plugin.json'],
-        tasks: ['default'],
+        tasks: ['default', 'notify:watch'],
         options: {
           spawn: false,
           livereload: true

dist/annotations.js

@@ -0,0 +1,183 @@
+'use strict';
+
+System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_export, _context) {
+  "use strict";
+
+  var d3, $, _, kbn, _createClass, TOOLTIP_PADDING_X, TOOLTIP_PADDING_Y, AnnotationTooltip;
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  return {
+    setters: [function (_d) {
+      d3 = _d.default;
+    }, function (_jquery) {
+      $ = _jquery.default;
+    }, function (_lodash) {
+      _ = _lodash.default;
+    }, function (_appCoreUtilsKbn) {
+      kbn = _appCoreUtilsKbn.default;
+    }],
+    execute: function () {
+      _createClass = function () {
+        function defineProperties(target, props) {
+          for (var i = 0; i < props.length; i++) {
+            var descriptor = props[i];
+            descriptor.enumerable = descriptor.enumerable || false;
+            descriptor.configurable = true;
+            if ("value" in descriptor) descriptor.writable = true;
+            Object.defineProperty(target, descriptor.key, descriptor);
+          }
+        }
+
+        return function (Constructor, protoProps, staticProps) {
+          if (protoProps) defineProperties(Constructor.prototype, protoProps);
+          if (staticProps) defineProperties(Constructor, staticProps);
+          return Constructor;
+        };
+      }();
+
+      TOOLTIP_PADDING_X = 30;
+      TOOLTIP_PADDING_Y = 10;
+
+      _export('AnnotationTooltip', AnnotationTooltip = function () {
+        function AnnotationTooltip(elem, scope) {
+          _classCallCheck(this, AnnotationTooltip);
+
+          this.scope = scope;
+          this.dashboard = scope.ctrl.dashboard;
+          this.panelCtrl = scope.ctrl;
+          this.panel = scope.ctrl.panel;
+          this.mouseOverAnnotationTick = false;
+
+          elem.on("mouseover", this.onMouseOver.bind(this));
+          elem.on("mouseleave", this.onMouseLeave.bind(this));
+        }
+
+        _createClass(AnnotationTooltip, [{
+          key: 'onMouseOver',
+          value: function onMouseOver(e) {
+            if (!this.panel.tooltip.show || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) {
+              return;
+            }
+
+            if (!this.tooltip) {
+              this.add();
+              this.move(e);
+            }
+          }
+        }, {
+          key: 'onMouseLeave',
+          value: function onMouseLeave() {
+            this.destroy();
+          }
+        }, {
+          key: 'onMouseMove',
+          value: function onMouseMove(e) {
+            if (!this.panel.tooltip.show) {
+              return;
+            }
+
+            this.move(e);
+          }
+        }, {
+          key: 'add',
+          value: function add() {
+            this.tooltipBase = d3.select("body").append("div").attr("class", "statusmap-annotation-tooltip drop drop-popover drop-popover--annotation drop-element drop-enabled drop-target-attached-center drop-open drop-open-transitionend drop-after-open").style("position", "absolute");
+            this.tooltip = this.tooltipBase.append("div").attr("class", "drop-content").append("div").append("annotation-tooltip").append("div").attr("class", "graph-annotation");
+          }
+        }, {
+          key: 'destroy',
+          value: function destroy() {
+            if (this.tooltip) {
+              this.tooltip.remove();
+            }
+
+            this.tooltip = null;
+
+            if (this.tooltipBase) {
+              this.tooltipBase.remove();
+            }
+
+            this.tooltipBase = null;
+          }
+        }, {
+          key: 'show',
+          value: function show(pos) {
+            if (!this.panel.tooltip.show || !this.tooltip) {
+              return;
+            }
+            // shared tooltip mode
+            //if (pos.panelRelY) {
+            //  return;
+            //}
+
+            var annoId = d3.select(pos.target).attr('annoId');
+            if (!annoId) {
+              this.destroy();
+              return;
+            }
+
+            var anno = this.panelCtrl.annotations[annoId];
+            if (!anno) {
+              this.destroy();
+              return;
+            }
+
+            var annoTitle = "";
+
+            var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+            var annoTime = this.dashboard.formatDate(anno.time, tooltipTimeFormat);
+            var annoText = anno.text;
+            var annoTags = [];
+            if (anno.tags) {
+              annoTags = _.map(anno.tags, function (t) {
+                return { "text": t, "backColor": "rgb(63, 43, 91)", "borderColor": "rgb(101, 81, 129)" };
+              });
+            }
+
+            var tooltipHtml = '<div class="graph-annotation__header">\n      <span class="graph-annotation__title">' + annoTitle + '</span>\n    <span class="graph-annotation__time">' + annoTime + '</span></div>\n    <div class="graph-annotation__body">\n      <div>' + annoText + '</div>\n      ' + _.join(_.map(annoTags, function (t) {
+              return '<span class="label label-tag small" style="background-color: ' + t.backColor + '; border-color: ' + t.borderColor + '">' + t.text + '</span>';
+            }), "") + '\n    </div>\n      <div class="statusmap-histogram"></div>';
+
+            this.tooltip.html(tooltipHtml);
+
+            this.move(pos);
+          }
+        }, {
+          key: 'move',
+          value: function move(pos) {
+            if (!this.tooltipBase) {
+              return;
+            }
+
+            var elem = $(this.tooltipBase.node())[0];
+            var tooltipWidth = elem.clientWidth;
+            var tooltipHeight = elem.clientHeight;
+
+            var left = pos.pageX - tooltipWidth / 2;
+            var top = pos.pageY + TOOLTIP_PADDING_Y;
+
+            if (pos.pageX + tooltipWidth / 2 + 10 > window.innerWidth) {
+              left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
+            }
+
+            if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
+              top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
+            }
+
+            return this.tooltipBase.style("left", left + "px").style("top", top + "px");
+          }
+        }]);
+
+        return AnnotationTooltip;
+      }());
+
+      _export('AnnotationTooltip', AnnotationTooltip);
+    }
+  };
+});
+//# sourceMappingURL=annotations.js.map

dist/rendering.js

@@ -1,9 +1,9 @@
 'use strict';
 
-System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/core', 'app/core/utils/ticks', 'd3', './libs/d3-scale-chromatic/index', './tooltip'], function (_export, _context) {
+System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/core', 'app/core/utils/ticks', 'd3', './libs/d3-scale-chromatic/index', './tooltip', './annotations'], function (_export, _context) {
   "use strict";
 
-  var _, $, moment, kbn, appEvents, contextSrv, tickStep, getScaledDecimals, getFlotTickSize, d3, d3ScaleChromatic, StatusHeatmapTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH;
+  var _, $, moment, kbn, appEvents, contextSrv, tickStep, getScaledDecimals, getFlotTickSize, d3, d3ScaleChromatic, StatusHeatmapTooltip, AnnotationTooltip, MIN_CARD_SIZE, CARD_H_SPACING, CARD_V_SPACING, CARD_ROUND, DATA_RANGE_WIDING_FACTOR, DEFAULT_X_TICK_SIZE_PX, DEFAULT_Y_TICK_SIZE_PX, X_AXIS_TICK_PADDING, Y_AXIS_TICK_PADDING, MIN_SELECTION_WIDTH;
 
   function link(scope, elem, attrs, ctrl) {
     var data = void 0,
@@ -15,6 +15,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
     // $heatmap is JQuery object, but heatmap is D3
     var $heatmap = elem.find('.status-heatmap-panel');
     var tooltip = new StatusHeatmapTooltip($heatmap, scope);
+    var annotationTooltip = new AnnotationTooltip($heatmap, scope);
 
     var width = void 0,
         height = void 0,
@@ -78,7 +79,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
         return text.getBBox().width;
       }));
 
-      return max_text_width;
+      return Math.ceil(max_text_width);
     }
 
     function getXAxisHeight(elem) {
@@ -289,6 +290,8 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
         resetCardHighLight(event);
       });
 
+      _renderAnnotations();
+
       ctrl.events.emit('render-complete', {
         "chartWidth": chartWidth
       });
@@ -475,6 +478,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
     function onMouseLeave() {
       appEvents.emit('graph-hover-clear');
       clearCrosshair();
+      //annotationTooltip.destroy();
     }
 
     function onMouseMove(event) {
@@ -486,6 +490,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
         // Clear crosshair and tooltip
         clearCrosshair();
         tooltip.destroy();
+        annotationTooltip.destroy();
 
         selection.x2 = limitSelection(event.offsetX);
         drawSelection(selection.x1, selection.x2);
@@ -493,6 +498,7 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
         emitGraphHoverEvet(event);
         drawCrosshair(event.offsetX);
         tooltip.show(event); //, data);
+        annotationTooltip.show(event);
       }
     }
 
@@ -595,6 +601,49 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
     $heatmap.on("mousedown", onMouseDown);
     $heatmap.on("mousemove", onMouseMove);
     $heatmap.on("mouseleave", onMouseLeave);
+
+    function _renderAnnotations() {
+      if (!ctrl.annotations || ctrl.annotations.length == 0) {
+        return;
+      }
+
+      if (!heatmap) {
+        return;
+      }
+
+      var annoData = _.map(ctrl.annotations, function (d, i) {
+        return { "x": Math.floor(yAxisWidth + xScale(d.time)), "id": i, "anno": d.source };
+      });
+
+      var anno = heatmap.append("g").attr("class", "statusmap-annotations").attr("transform", "translate(0.5,0)").selectAll(".statusmap-annotations").data(annoData).enter().append("g");
+      anno.append("line")
+      //.attr("class", "statusmap-annotation-tick")
+      .attr("x1", function (d) {
+        return d.x;
+      }).attr("y1", chartTop).attr("x2", function (d) {
+        return d.x;
+      }).attr("y2", chartBottom).style("stroke", function (d) {
+        return d.anno.iconColor;
+      }).style("stroke-width", 1).style("stroke-dasharray", "3,3");
+      anno.append("polygon").attr("points", function (d) {
+        return [[d.x, chartBottom + 1], [d.x - 5, chartBottom + 6], [d.x + 5, chartBottom + 6]].join(" ");
+      }).style("stroke-width", 0).style("fill", function (d) {
+        return d.anno.iconColor;
+      });
+      // Polygons didn't fire mouseevents
+      anno.append("rect").attr("x", function (d) {
+        return d.x - 5;
+      }).attr("width", 10).attr("y", chartBottom + 1).attr("height", 5).attr("class", "statusmap-annotation-tick").attr("annoId", function (d) {
+        return d.id;
+      }).style("opacity", 0);
+
+      var $ticks = $heatmap.find(".statusmap-annotation-tick");
+      $ticks.on("mouseenter", function (event) {
+        annotationTooltip.mouseOverAnnotationTick = true;
+      }).on("mouseleave", function (event) {
+        annotationTooltip.mouseOverAnnotationTick = false;
+      });
+    }
   }
 
   _export('default', link);
@@ -645,6 +694,8 @@ System.register(['lodash', 'jquery', 'moment', 'app/core/utils/kbn', 'app/core/c
       d3ScaleChromatic = _libsD3ScaleChromaticIndex;
     }, function (_tooltip) {
       StatusHeatmapTooltip = _tooltip.StatusHeatmapTooltip;
+    }, function (_annotations) {
+      AnnotationTooltip = _annotations.AnnotationTooltip;
     }],
     execute: function () {
       MIN_CARD_SIZE = 5;

dist/status_heatmap_ctrl.js

@@ -3,7 +3,7 @@
 System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/kbn', './color_legend', './rendering', './options_editor', './color_mode_discrete'], function (_export, _context) {
   "use strict";
 
-  var MetricsPanelCtrl, _, contextSrv, kbn, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, CANVAS, SVG, VALUE_INDEX, TIME_INDEX, panelDefaults, renderer, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
+  var MetricsPanelCtrl, _, contextSrv, kbn, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, _get, CANVAS, SVG, VALUE_INDEX, TIME_INDEX, panelDefaults, renderer, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -52,6 +52,31 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
       ColorModeDiscrete = _color_mode_discrete.ColorModeDiscrete;
     }],
     execute: function () {
+      _get = function get(object, property, receiver) {
+        if (object === null) object = Function.prototype;
+        var desc = Object.getOwnPropertyDescriptor(object, property);
+
+        if (desc === undefined) {
+          var parent = Object.getPrototypeOf(object);
+
+          if (parent === null) {
+            return undefined;
+          } else {
+            return get(parent, property, receiver);
+          }
+        } else if ("value" in desc) {
+          return desc.value;
+        } else {
+          var getter = desc.get;
+
+          if (getter === undefined) {
+            return undefined;
+          }
+
+          return getter.call(receiver);
+        }
+      };
+
       CANVAS = 'CANVAS';
       SVG = 'SVG';
       VALUE_INDEX = 0;
@@ -118,7 +143,8 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
       _export('StatusHeatmapCtrl', StatusHeatmapCtrl = function (_MetricsPanelCtrl) {
         _inherits(StatusHeatmapCtrl, _MetricsPanelCtrl);
 
-        function StatusHeatmapCtrl($scope, $injector, $rootScope, timeSrv) {
+        /** @ngInject */
+        function StatusHeatmapCtrl($scope, $injector, $rootScope, timeSrv, annotationsSrv) {
           _classCallCheck(this, StatusHeatmapCtrl);
 
           var _this = _possibleConstructorReturn(this, (StatusHeatmapCtrl.__proto__ || Object.getPrototypeOf(StatusHeatmapCtrl)).call(this, $scope, $injector));
@@ -169,11 +195,44 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
             _this.interval = kbn.secondsToHms(intervalMs / 1000);
           };
 
+          _this.issueQueries = function (datasource) {
+            _this.annotationsPromise = _this.annotationsSrv.getAnnotations({
+              dashboard: _this.dashboard,
+              panel: _this.panel,
+              range: _this.range
+            });
+
+            /* Wait for annotationSrv requests to get datasources to
+             * resolve before issuing queries. This allows the annotations
+             * service to fire annotations queries before graph queries
+             * (but not wait for completion). This resolves
+             * issue 11806.
+             */
+            return _this.annotationsSrv.datasourcePromises.then(function (r) {
+              return _get(StatusHeatmapCtrl.prototype.__proto__ || Object.getPrototypeOf(StatusHeatmapCtrl.prototype), 'issueQueries', _this).call(_this, datasource);
+            });
+          };
+
           _this.onDataReceived = function (dataList) {
             _this.data = dataList;
             _this.cardsData = _this.convertToCards(_this.data);
 
-            _this.render();
+            _this.annotationsPromise.then(function (result) {
+              _this.loading = false;
+              //this.alertState = result.alertState;
+              if (result.annotations && result.annotations.length > 0) {
+                _this.annotations = result.annotations;
+              } else {
+                _this.annotations = null;
+              }
+              _this.render();
+            }, function () {
+              _this.loading = false;
+              _this.annotations = null;
+              _this.render();
+            });
+
+            //this.render();
           };
 
           _this.onInitEditMode = function () {
@@ -209,6 +268,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
 
           _this.onDataError = function () {
             _this.data = [];
+            _this.annotations = [];
             _this.render();
           };
 
@@ -296,7 +356,9 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
                   id: i * cardsData.xBucketSize + j,
                   values: [],
                   multipleValues: false,
-                  noColorDefined: false
+                  noColorDefined: false,
+                  y: target,
+                  x: -1
                 };
 
                 // collect values from all timeseries with target
@@ -308,7 +370,6 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
                   var datapoint = s.datapoints[j];
                   if (card.values.length === 0) {
                     card.x = datapoint[TIME_INDEX];
-                    card.y = s.target;
                   }
                   card.values.push(datapoint[VALUE_INDEX]);
                 }
@@ -326,7 +387,9 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
 
                 if (cardsData.minValue > card.minValue) cardsData.minValue = card.minValue;
 
-                cardsData.cards.push(card);
+                if (card.x != -1) {
+                  cardsData.cards.push(card);
+                }
               }
             }
 
@@ -360,6 +423,9 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
             }
           };
 
+          _this.annotations = [];
+          _this.annotationsSrv = annotationsSrv;
+
           _this.events.on('data-received', _this.onDataReceived);
           _this.events.on('data-snapshot-load', _this.onDataReceived);
           _this.events.on('data-error', _this.onDataError);

package.json

@@ -27,6 +27,7 @@
     "grunt-contrib-uglify": "^3.0.1",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-execute": "^0.2.2",
+    "grunt-notify": "^0.4.5",
     "grunt-systemjs-builder": "^1.0.0",
     "load-grunt-tasks": "^3.5.2"
   },

src/annotations.js

@@ -0,0 +1,134 @@
+import d3 from 'd3';
+import $ from 'jquery';
+import _ from 'lodash';
+import kbn from 'app/core/utils/kbn';
+
+let TOOLTIP_PADDING_X = 30;
+let TOOLTIP_PADDING_Y = 10;
+
+export class AnnotationTooltip {
+  constructor(elem, scope) {
+    this.scope = scope;
+    this.dashboard = scope.ctrl.dashboard;
+    this.panelCtrl = scope.ctrl;
+    this.panel = scope.ctrl.panel;
+    this.mouseOverAnnotationTick = false;
+
+    elem.on("mouseover", this.onMouseOver.bind(this));
+    elem.on("mouseleave", this.onMouseLeave.bind(this));
+  }
+
+  onMouseOver(e) {
+    if (!this.panel.tooltip.show || !this.scope.ctrl.data || _.isEmpty(this.scope.ctrl.data)) { return; }
+
+    if (!this.tooltip) {
+      this.add();
+      this.move(e);
+    }
+  }
+
+  onMouseLeave() {
+    this.destroy();
+  }
+
+  onMouseMove(e) {
+    if (!this.panel.tooltip.show) { return; }
+
+    this.move(e);
+  }
+
+  add() {
+    this.tooltipBase = d3.select("body")
+    .append("div")
+    .attr("class", "statusmap-annotation-tooltip drop drop-popover drop-popover--annotation drop-element drop-enabled drop-target-attached-center drop-open drop-open-transitionend drop-after-open")
+    .style("position", "absolute")
+    this.tooltip = this.tooltipBase
+      .append("div")
+      .attr("class", "drop-content")
+      .append("div")
+      .append("annotation-tooltip")
+      .append("div")
+      .attr("class", "graph-annotation");
+  }
+
+  destroy() {
+    if (this.tooltip) {
+      this.tooltip.remove();
+    }
+
+    this.tooltip = null;
+
+    if (this.tooltipBase) {
+      this.tooltipBase.remove();
+    }
+
+    this.tooltipBase = null;
+
+  }
+
+  show(pos) {
+    if (!this.panel.tooltip.show || !this.tooltip) { return; }
+    // shared tooltip mode
+    //if (pos.panelRelY) {
+    //  return;
+    //}
+
+    let annoId = d3.select(pos.target).attr('annoId');
+    if (!annoId) {
+      this.destroy();
+      return;
+    }
+
+    let anno = this.panelCtrl.annotations[annoId];
+    if (!anno) {
+      this.destroy();
+      return;
+    }
+
+    let annoTitle = "";
+
+    let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
+    let annoTime = this.dashboard.formatDate(anno.time, tooltipTimeFormat);
+    let annoText = anno.text;
+    let annoTags = [];
+    if (anno.tags) {
+      annoTags = _.map(anno.tags, t => ({"text": t, "backColor": "rgb(63, 43, 91)", "borderColor":"rgb(101, 81, 129)"}))
+    }
+
+    let tooltipHtml = `<div class="graph-annotation__header">
+      <span class="graph-annotation__title">${annoTitle}</span>
+    <span class="graph-annotation__time">${annoTime}</span></div>
+    <div class="graph-annotation__body">
+      <div>${annoText}</div>
+      ${_.join(_.map(annoTags, t => `<span class="label label-tag small" style="background-color: ${t.backColor}; border-color: ${t.borderColor}">${t.text}</span>`), "")}
+    </div>
+      <div class="statusmap-histogram"></div>`;
+
+    this.tooltip.html(tooltipHtml);
+
+    this.move(pos);
+  }
+
+  move(pos) {
+    if (!this.tooltipBase) { return; }
+
+    let elem = $(this.tooltipBase.node())[0];
+    let tooltipWidth = elem.clientWidth;
+    let tooltipHeight = elem.clientHeight;
+
+    let left = pos.pageX - tooltipWidth/2;
+    let top = pos.pageY + TOOLTIP_PADDING_Y;
+
+    if (pos.pageX + tooltipWidth/2 + 10 > window.innerWidth) {
+      left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;
+    }
+
+    if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {
+      top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;
+    }
+
+    return this.tooltipBase
+      .style("left", left + "px")
+      .style("top", top + "px");
+  }
+}

src/rendering.js

@@ -7,6 +7,7 @@ import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks
 import d3 from 'd3';
 import * as d3ScaleChromatic from './libs/d3-scale-chromatic/index';
 import {StatusHeatmapTooltip} from './tooltip';
+import {AnnotationTooltip} from './annotations';
 
 let MIN_CARD_SIZE = 5,
     CARD_H_SPACING = 2,
@@ -25,6 +26,7 @@ export default function link(scope, elem, attrs, ctrl) {
   // $heatmap is JQuery object, but heatmap is D3
   let $heatmap = elem.find('.status-heatmap-panel');
   let tooltip = new StatusHeatmapTooltip($heatmap, scope);
+  let annotationTooltip = new AnnotationTooltip($heatmap, scope);
 
   let width, height,
       yScale, xScale,
@@ -77,7 +79,7 @@ export default function link(scope, elem, attrs, ctrl) {
       return text.getBBox().width;
     }));
 
-    return max_text_width;
+    return Math.ceil(max_text_width);
   }
 
   function getXAxisHeight(elem) {
@@ -310,6 +312,8 @@ export default function link(scope, elem, attrs, ctrl) {
       resetCardHighLight(event);
     });
 
+    _renderAnnotations();
+
     ctrl.events.emit('render-complete', {
       "chartWidth": chartWidth
     });
@@ -506,6 +510,7 @@ export default function link(scope, elem, attrs, ctrl) {
   function onMouseLeave() {
     appEvents.emit('graph-hover-clear');
     clearCrosshair();
+    //annotationTooltip.destroy();
   }
 
   function onMouseMove(event) {
@@ -515,6 +520,7 @@ export default function link(scope, elem, attrs, ctrl) {
       // Clear crosshair and tooltip
       clearCrosshair();
       tooltip.destroy();
+      annotationTooltip.destroy();
 
       selection.x2 = limitSelection(event.offsetX);
       drawSelection(selection.x1, selection.x2);
@@ -522,6 +528,7 @@ export default function link(scope, elem, attrs, ctrl) {
       emitGraphHoverEvet(event);
       drawCrosshair(event.offsetX);
       tooltip.show(event); //, data);
+      annotationTooltip.show(event);
     }
   }
 
@@ -637,6 +644,62 @@ export default function link(scope, elem, attrs, ctrl) {
   $heatmap.on("mousedown", onMouseDown);
   $heatmap.on("mousemove", onMouseMove);
   $heatmap.on("mouseleave", onMouseLeave);
+
+  function _renderAnnotations() {
+    if (!ctrl.annotations || ctrl.annotations.length == 0) {
+      return;
+    }
+  
+    if (!heatmap) {
+      return;
+    }
+
+    let annoData = _.map(ctrl.annotations, (d,i) => ({"x": Math.floor(yAxisWidth + xScale(d.time)), "id":i, "anno": d.source}));
+
+
+    let anno = heatmap
+      .append("g")
+      .attr("class", "statusmap-annotations")
+      .attr("transform", "translate(0.5,0)")
+      .selectAll(".statusmap-annotations")
+      .data(annoData)
+      .enter().append("g")
+      ;
+    anno.append("line")
+      //.attr("class", "statusmap-annotation-tick")
+      .attr("x1", d => d.x)
+      .attr("y1", chartTop)
+      .attr("x2", d => d.x)
+      .attr("y2", chartBottom)
+      .style("stroke", d => d.anno.iconColor)
+      .style("stroke-width", 1)
+      .style("stroke-dasharray", "3,3")
+    ;
+    anno.append("polygon")
+      .attr("points", d => [[d.x, chartBottom+1], [d.x-5, chartBottom+6], [d.x+5, chartBottom+6]].join(" "))
+      .style("stroke-width", 0)
+      .style("fill", d => d.anno.iconColor)
+    ;
+    // Polygons didn't fire mouseevents
+    anno.append("rect") 
+      .attr("x", d => d.x-5)
+      .attr("width", 10)
+      .attr("y", chartBottom+1)
+      .attr("height", 5)
+      .attr("class", "statusmap-annotation-tick")
+      .attr("annoId", d => d.id)
+      .style("opacity", 0)
+    ;
+
+    let $ticks = $heatmap.find(".statusmap-annotation-tick");
+    $ticks.on("mouseenter", (event) => {
+      annotationTooltip.mouseOverAnnotationTick = true;
+    })
+    .on("mouseleave", (event) => {
+      annotationTooltip.mouseOverAnnotationTick = false;
+    });
+    
+  }
 }
 
 function grafanaTimeFormat(ticks, min, max) {

src/status_heatmap_ctrl.js

@@ -100,7 +100,8 @@ let opacityScales = ['linear', 'sqrt'];
 export class StatusHeatmapCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
 
-  constructor($scope, $injector, $rootScope, timeSrv) {
+  /** @ngInject */
+  constructor($scope, $injector, $rootScope, timeSrv, annotationsSrv) {
     super($scope, $injector);
     _.defaultsDeep(this.panel, panelDefaults);
 
@@ -129,6 +130,9 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
       }
     };
 
+    this.annotations = [];
+    this.annotationsSrv = annotationsSrv;
+
     this.events.on('data-received', this.onDataReceived);
     this.events.on('data-snapshot-load', this.onDataReceived);
     this.events.on('data-error', this.onDataError);
@@ -189,11 +193,48 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
     this.interval = kbn.secondsToHms(intervalMs / 1000);
   };
 
+  issueQueries = (datasource) => {
+    this.annotationsPromise = this.annotationsSrv.getAnnotations({
+      dashboard: this.dashboard,
+      panel: this.panel,
+      range: this.range,
+    });
+
+    /* Wait for annotationSrv requests to get datasources to
+     * resolve before issuing queries. This allows the annotations
+     * service to fire annotations queries before graph queries
+     * (but not wait for completion). This resolves
+     * issue 11806.
+     */
+    return this.annotationsSrv.datasourcePromises.then(r => {
+      return super.issueQueries(datasource);
+    });
+  }
+
+
   onDataReceived = (dataList) => {
     this.data      = dataList;
     this.cardsData = this.convertToCards(this.data);
 
-    this.render();
+    this.annotationsPromise.then(
+      result => {
+        this.loading = false;
+        //this.alertState = result.alertState;
+        if (result.annotations && result.annotations.length > 0) {
+          this.annotations = result.annotations;
+        } else {
+          this.annotations = null;
+        }
+        this.render();
+      },
+      () => {
+        this.loading = false;
+        this.annotations = null;
+        this.render();
+      }
+    );
+
+    //this.render();
   };
 
   onInitEditMode = () => {
@@ -227,6 +268,7 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
 
   onDataError = () => {
     this.data = [];
+    this.annotations = [];
     this.render();
   };
 
@@ -313,6 +355,8 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
           values: [],
           multipleValues: false,
           noColorDefined: false,
+          y: target,
+          x: -1,
         };
 
         // collect values from all timeseries with target
@@ -324,7 +368,6 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
           let datapoint = s.datapoints[j];
           if (card.values.length === 0) {
             card.x = datapoint[TIME_INDEX];
-            card.y = s.target;
           }
           card.values.push(datapoint[VALUE_INDEX]);
         }
@@ -344,7 +387,9 @@ export class StatusHeatmapCtrl extends MetricsPanelCtrl {
         if (cardsData.minValue > card.minValue)
           cardsData.minValue = card.minValue;
 
+        if (card.x != -1) {
         cardsData.cards.push(card);
+        }
       }
     }