heatmap: add heatmap_ctrl tests and fix errors

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

@@ -103,6 +103,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   data: any;
   series: any;
   timeSrv: any;
+  dataWarning: any;
 
   constructor($scope, $injector, private $rootScope, timeSrv) {
     super($scope, $injector);
@@ -187,6 +188,29 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
 
   onDataReceived(dataList) {
     this.series = dataList.map(this.seriesHandler.bind(this));
+
+    this.dataWarning = null;
+    const datapointsCount = _.reduce(this.series, (sum, series) => {
+      return sum + series.datapoints.length;
+    }, 0);
+
+    if (datapointsCount === 0) {
+      this.dataWarning = {
+        title: 'No data points',
+        tip: 'No datapoints returned from data query'
+      };
+    } else {
+      for (let series of this.series) {
+        if (series.isOutsideRange) {
+          this.dataWarning = {
+            title: 'Data points outside time range',
+            tip: 'Can be caused by timezone mismatch or missing time filter in query',
+          };
+          break;
+        }
+      }
+    }
+
     this.render();
   }
 
@@ -196,13 +220,23 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   }
 
   seriesHandler(seriesData) {
-    var series = new TimeSeries({
+    let series = new TimeSeries({
       datapoints: seriesData.datapoints,
       alias: seriesData.target
     });
 
     series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
     series.minLog = getMinLog(series);
+
+    let datapoints = seriesData.datapoints || [];
+    if (datapoints && datapoints.length > 0) {
+      let last = datapoints[datapoints.length - 1][1];
+      let from = this.range.from;
+      if (last - from < -10000) {
+        series.isOutsideRange = true;
+      }
+    }
+
     return series;
   }
 

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

@@ -33,6 +33,8 @@ export class HeatmapTooltip {
   }
 
   onMouseOver(e) {
+    if (!this.panel.tooltip.show || _.isEmpty(this.scope.ctrl.data.buckets)) { return; }
+
     if (!this.tooltip) {
       this.add();
       this.move(e);

public/app/plugins/panel/heatmap/module.html

@@ -1,5 +1,10 @@
 <div class="heatmap-wrapper">
 	<div class="heatmap-canvas-wrapper">
+
+		<div class="datapoints-warning" ng-if="ctrl.dataWarning">
+			<span class="small" bs-tooltip="ctrl.dataWarning.tip">{{ctrl.dataWarning.title}}</span>
+		</div>
+
 		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 	</div>
 	<!-- <div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" heatmap-legend></div> -->

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

@@ -761,13 +761,19 @@ export default function link(scope, elem, attrs, ctrl) {
   }
 
   function render() {
-    if (!ctrl.data || _.isEmpty(ctrl.data.buckets)) { return; }
-
     data = ctrl.data;
     panel = ctrl.panel;
     timeRange = ctrl.range;
 
     if (setElementHeight()) {
+
+      // Draw default axes and return if no data
+      if (!data || _.isEmpty(data.buckets)) {
+        addHeatmapCanvas();
+        addAxes();
+        return;
+      }
+
       addHeatmap();
       scope.yScale = yScale;
       scope.xScale = xScale;

public/sass/components/_panel_heatmap.scss

@@ -1,9 +1,11 @@
 .heatmap-canvas-wrapper {
-  position: relative;
+  // position: relative;
   cursor: crosshair;
 }
 
 .heatmap-panel {
+  position: relative;
+
   .axis .tick {
     text {
       fill: $text-color;