From c9801595e5df3490b1a561c912ddd8e7a91de6d0 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 27 Mar 2017 19:04:29 +0300 Subject: [PATCH] heatmap: add heatmap_ctrl tests and fix errors --- .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 36 ++++++++++++++++++- .../plugins/panel/heatmap/heatmap_tooltip.ts | 2 ++ public/app/plugins/panel/heatmap/module.html | 5 +++ public/app/plugins/panel/heatmap/rendering.ts | 10 ++++-- public/sass/components/_panel_heatmap.scss | 4 ++- 5 files changed, 53 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 1a41e4be8e9..13f50eb0b5e 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/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; } diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts index 54cede5c4ab..5175ceca150 100644 --- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts +++ b/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); diff --git a/public/app/plugins/panel/heatmap/module.html b/public/app/plugins/panel/heatmap/module.html index d88681a38b8..a59092b2687 100644 --- a/public/app/plugins/panel/heatmap/module.html +++ b/public/app/plugins/panel/heatmap/module.html @@ -1,5 +1,10 @@
+ +
+ {{ctrl.dataWarning.title}} +
+
diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 9c5b36b8857..cbfb2a52b6b 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/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; diff --git a/public/sass/components/_panel_heatmap.scss b/public/sass/components/_panel_heatmap.scss index ad27c094fea..cf55c91ab7c 100644 --- a/public/sass/components/_panel_heatmap.scss +++ b/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;