Skip to content

N
nexpie-grafana-theme
Commit 70cd9265 by Daniel Lee
Options

Merge pull request #3844 from bergquist/negative_single_stat_panel 

Reduce the amount of thresholds values to two in singlestat panel
parents a85bda13 cd1b2e28
Showing with 356 additions and 497 deletions
public/app/core/time_series2.ts
...@@ -41,6 +41,7 @@ export default class TimeSeries { ...@@ -41,6 +41,7 @@ export default class TimeSeries {
nullPointMode: any; nullPointMode: any;
fillBelowTo: any; fillBelowTo: any;
transform: any; transform: any;
flotpairs: any;
constructor(opts) { constructor(opts) {
this.datapoints = opts.datapoints; this.datapoints = opts.datapoints;
......
public/app/features/dashboard/dashboardSrv.js
...@@ -234,9 +234,9 @@ function (angular, $, _, moment) { ...@@ -234,9 +234,9 @@ function (angular, $, _, moment) {
var i, j, k; var i, j, k;
var oldVersion = this.schemaVersion; var oldVersion = this.schemaVersion;
var panelUpgrades = []; var panelUpgrades = [];
this.schemaVersion = 8; this.schemaVersion = 9;
if (oldVersion === 8) { if (oldVersion === this.schemaVersion) {
return; return;
} }
...@@ -390,6 +390,23 @@ function (angular, $, _, moment) { ...@@ -390,6 +390,23 @@ function (angular, $, _, moment) {
}); });
} }
// schema version 9 changes
if (oldVersion < 9) {
// move aliasYAxis changes
panelUpgrades.push(function(panel) {
if (panel.type !== 'singlestat' && panel.thresholds !== "") { return; }
if (panel.thresholds) {
var k = panel.thresholds.split(",");
if (k.length >= 3) {
k.shift();
panel.thresholds = k.join(",");
}
}
});
}
if (panelUpgrades.length === 0) { if (panelUpgrades.length === 0) {
return; return;
} }
......
public/app/plugins/panel/singlestat/controller.js → public/app/plugins/panel/singlestat/controller.ts
define([ ///<reference path="../../../headers/common.d.ts" />
'angular',
'app/app',
'lodash',
'app/core/utils/kbn',
'app/core/time_series',
'app/features/panel/panel_meta',
],
function (angular, app, _, kbn, TimeSeries, PanelMeta) {
'use strict';
/** @ngInject */ import angular from 'angular';
function SingleStatCtrl($scope, panelSrv, panelHelper) { import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import PanelMeta from 'app/features/panel/panel_meta2';
import TimeSeries from '../../../core/time_series2';
export class SingleStatCtrl {
/** @ngInject */
constructor($scope, panelSrv, panelHelper) {
$scope.panelMeta = new PanelMeta({ $scope.panelMeta = new PanelMeta({
panelName: 'Singlestat', panelName: 'Singlestat',
editIcon: "fa fa-dashboard", editIcon: "fa fa-dashboard",
...@@ -57,6 +55,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -57,6 +55,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
}; };
_.defaults($scope.panel, _d); _.defaults($scope.panel, _d);
$scope.unitFormats = kbn.getUnitFormats(); $scope.unitFormats = kbn.getUnitFormats();
$scope.setUnitFormat = function(subItem) { $scope.setUnitFormat = function(subItem) {
...@@ -104,8 +103,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -104,8 +103,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
if (options.background) { if (options.background) {
$scope.panel.colorValue = false; $scope.panel.colorValue = false;
$scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
} } else {
else {
$scope.panel.colorBackground = false; $scope.panel.colorBackground = false;
$scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
} }
...@@ -151,7 +149,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -151,7 +149,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
// reduce starting decimals if not needed // reduce starting decimals if not needed
if (Math.floor(value) === value) { dec = 0; } if (Math.floor(value) === value) { dec = 0; }
var result = {}; var result: any = {};
result.decimals = Math.max(0, dec); result.decimals = Math.max(0, dec);
result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;
...@@ -159,7 +157,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -159,7 +157,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
}; };
$scope.render = function() { $scope.render = function() {
var data = {}; var data: any = {};
$scope.setValues(data); $scope.setValues(data);
...@@ -176,7 +174,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -176,7 +174,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
$scope.setValues = function(data) { $scope.setValues = function(data) {
data.flotpairs = []; data.flotpairs = [];
if($scope.series.length > 1) { if ($scope.series.length > 1) {
$scope.inspector.error = new Error(); $scope.inspector.error = new Error();
$scope.inspector.error.message = 'Multiple Series Error'; $scope.inspector.error.message = 'Multiple Series Error';
$scope.inspector.error.data = 'Metric query returns ' + $scope.series.length + $scope.inspector.error.data = 'Metric query returns ' + $scope.series.length +
...@@ -204,7 +202,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -204,7 +202,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
} }
// check value to text mappings // check value to text mappings
for(var i = 0; i < $scope.panel.valueMaps.length; i++) { for (var i = 0; i < $scope.panel.valueMaps.length; i++) {
var map = $scope.panel.valueMaps[i]; var map = $scope.panel.valueMaps[i];
// special null case // special null case
if (map.value === 'null') { if (map.value === 'null') {
...@@ -239,7 +237,6 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) { ...@@ -239,7 +237,6 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
}; };
$scope.init(); $scope.init();
}
return SingleStatCtrl; }
}); }
public/app/plugins/panel/singlestat/editor.html
...@@ -97,10 +97,10 @@ ...@@ -97,10 +97,10 @@
<label for="panel.colorValue" class="cr1"></label> <label for="panel.colorValue" class="cr1"></label>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Thresholds<tip>Comma seperated values</tip> Thresholds<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
</li> </li>
<li> <li>
<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input> <input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="50,80"></input>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Colors Colors
......
public/app/plugins/panel/singlestat/module.js → public/app/plugins/panel/singlestat/module.ts
define([ ///<reference path="../../../headers/common.d.ts" />
'./controller',
'lodash',
'jquery',
'jquery.flot',
],
function (SingleStatCtrl, _, $) {
'use strict';
/** @ngInject */
function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
return {
controller: SingleStatCtrl,
templateUrl: 'app/plugins/panel/singlestat/module.html',
link: function(scope, elem) {
var data, panel, linkInfo, $panelContainer;
var firstRender = true;
scope.$on('render', function() {
if (firstRender) {
var inner = elem.find('.singlestat-panel');
if (inner.length) {
elem = inner;
$panelContainer = elem.parents('.panel-container');
firstRender = false;
hookupDrilldownLinkTooltip();
}
}
render();
scope.panelRenderingComplete();
});
function setElementHeight() {
try {
var height = scope.height || panel.height || scope.row.height;
if (_.isString(height)) {
height = parseInt(height.replace('px', ''), 10);
}
height -= 5; // padding import _ from 'lodash';
height -= panel.title ? 24 : 9; // subtract panel title bar import $ from 'jquery';
import angular from 'angular';
import {SingleStatCtrl} from './controller';
elem.css('height', height + 'px'); angular.module('grafana.directives').directive('singleStatPanel', singleStatPanel);
return true; function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
} catch(e) { // IE throws errors sometimes 'use strict';
return false; return {
controller: SingleStatCtrl,
templateUrl: 'app/plugins/panel/singlestat/module.html',
link: function(scope, elem) {
var data, panel, linkInfo, $panelContainer;
var firstRender = true;
scope.$on('render', function() {
if (firstRender) {
var inner = elem.find('.singlestat-panel');
if (inner.length) {
elem = inner;
$panelContainer = elem.parents('.panel-container');
firstRender = false;
hookupDrilldownLinkTooltip();
} }
} }
function applyColoringThresholds(value, valueString) { render();
if (!panel.colorValue) { scope.panelRenderingComplete();
return valueString; });
}
var color = getColorForValue(value); function setElementHeight() {
if (color) { try {
return '<span style="color:' + color + '">'+ valueString + '</span>'; var height = scope.height || panel.height || scope.row.height;
if (_.isString(height)) {
height = parseInt(height.replace('px', ''), 10);
} }
return valueString; height -= 5; // padding
height -= panel.title ? 24 : 9; // subtract panel title bar
elem.css('height', height + 'px');
return true;
} catch (e) { // IE throws errors sometimes
return false;
} }
}
function getColorForValue(value) { function applyColoringThresholds(value, valueString) {
for (var i = data.thresholds.length - 1; i >= 0 ; i--) { if (!panel.colorValue) {
if (value >= data.thresholds[i]) { return valueString;
return data.colorMap[i];
}
}
return null;
} }
function getSpan(className, fontSize, value) { var color = getColorForValue(data, value);
value = templateSrv.replace(value); if (color) {
return '<span class="' + className + '" style="font-size:' + fontSize + '">' + return '<span style="color:' + color + '">'+ valueString + '</span>';
value + '</span>';
} }
function getBigValueHtml() { return valueString;
var body = '<div class="singlestat-panel-value-container">'; }
if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); } function getSpan(className, fontSize, value) {
value = templateSrv.replace(value);
return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
value + '</span>';
}
var value = applyColoringThresholds(data.valueRounded, data.valueFormated); function getBigValueHtml() {
body += getSpan('singlestat-panel-value', panel.valueFontSize, value); var body = '<div class="singlestat-panel-value-container">';
if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); }
body += '</div>'; var value = applyColoringThresholds(data.valueRounded, data.valueFormated);
body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
return body; if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); }
}
function addSparkline() { body += '</div>';
var panel = scope.panel;
var width = elem.width() + 20;
var height = elem.height() || 100;
var plotCanvas = $('<div></div>');
var plotCss = {};
plotCss.position = 'absolute';
if (panel.sparkline.full) {
plotCss.bottom = '5px';
plotCss.left = '-5px';
plotCss.width = (width - 10) + 'px';
var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
plotCss.height = (height - dynamicHeightMargin) + 'px';
}
else {
plotCss.bottom = "0px";
plotCss.left = "-5px";
plotCss.width = (width - 10) + 'px';
plotCss.height = Math.floor(height * 0.25) + "px";
}
plotCanvas.css(plotCss); return body;
}
var options = {
legend: { show: false },
series: {
lines: {
show: true,
fill: 1,
lineWidth: 1,
fillColor: panel.sparkline.fillColor,
},
},
yaxes: { show: false },
xaxis: {
show: false,
mode: "time",
min: scope.range.from.valueOf(),
max: scope.range.to.valueOf(),
},
grid: { hoverable: false, show: false },
};
elem.append(plotCanvas); function addSparkline() {
var panel = scope.panel;
var width = elem.width() + 20;
var height = elem.height() || 100;
var plotCanvas = $('<div></div>');
var plotCss: any = {};
plotCss.position = 'absolute';
if (panel.sparkline.full) {
plotCss.bottom = '5px';
plotCss.left = '-5px';
plotCss.width = (width - 10) + 'px';
var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
plotCss.height = (height - dynamicHeightMargin) + 'px';
} else {
plotCss.bottom = "0px";
plotCss.left = "-5px";
plotCss.width = (width - 10) + 'px';
plotCss.height = Math.floor(height * 0.25) + "px";
}
var plotSeries = { plotCanvas.css(plotCss);
data: data.flotpairs,
color: panel.sparkline.lineColor
};
$.plot(plotCanvas, [plotSeries], options); var options = {
} legend: { show: false },
series: {
lines: {
show: true,
fill: 1,
lineWidth: 1,
fillColor: panel.sparkline.fillColor,
},
},
yaxes: { show: false },
xaxis: {
show: false,
mode: "time",
min: scope.range.from.valueOf(),
max: scope.range.to.valueOf(),
},
grid: { hoverable: false, show: false },
};
elem.append(plotCanvas);
var plotSeries = {
data: data.flotpairs,
color: panel.sparkline.lineColor
};
$.plot(plotCanvas, [plotSeries], options);
}
function render() { function render() {
if (!scope.data) { return; } if (!scope.data) { return; }
data = scope.data; data = scope.data;
panel = scope.panel; panel = scope.panel;
setElementHeight(); setElementHeight();
var body = getBigValueHtml(); var body = getBigValueHtml();
if (panel.colorBackground && !isNaN(data.valueRounded)) { if (panel.colorBackground && !isNaN(data.valueRounded)) {
var color = getColorForValue(data.valueRounded); var color = getColorForValue(data, data.valueRounded);
if (color) { if (color) {
$panelContainer.css('background-color', color); $panelContainer.css('background-color', color);
if (scope.fullscreen) { if (scope.fullscreen) {
elem.css('background-color', color); elem.css('background-color', color);
} else { } else {
elem.css('background-color', ''); elem.css('background-color', '');
}
} }
} else {
$panelContainer.css('background-color', '');
elem.css('background-color', '');
} }
} else {
$panelContainer.css('background-color', '');
elem.css('background-color', '');
}
elem.html(body); elem.html(body);
if (panel.sparkline.show) { if (panel.sparkline.show) {
addSparkline(); addSparkline();
} }
elem.toggleClass('pointer', panel.links.length > 0); elem.toggleClass('pointer', panel.links.length > 0);
if (panel.links.length > 0) { if (panel.links.length > 0) {
linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars); linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars);
} else { } else {
linkInfo = null; linkInfo = null;
}
} }
}
function hookupDrilldownLinkTooltip() { function hookupDrilldownLinkTooltip() {
// drilldown link tooltip // drilldown link tooltip
var drilldownTooltip = $('<div id="tooltip" class="">hello</div>"'); var drilldownTooltip = $('<div id="tooltip" class="">hello</div>"');
elem.mouseleave(function() { elem.mouseleave(function() {
if (panel.links.length === 0) { return;} if (panel.links.length === 0) { return;}
drilldownTooltip.detach(); drilldownTooltip.detach();
}); });
elem.click(function(evt) { elem.click(function(evt) {
if (!linkInfo) { return; } if (!linkInfo) { return; }
// ignore title clicks in title // ignore title clicks in title
if ($(evt).parents('.panel-header').length > 0) { return; } if ($(evt).parents('.panel-header').length > 0) { return; }
if (linkInfo.target === '_blank') { if (linkInfo.target === '_blank') {
var redirectWindow = window.open(linkInfo.href, '_blank'); var redirectWindow = window.open(linkInfo.href, '_blank');
redirectWindow.location; redirectWindow.location;
return; return;
} }
if (linkInfo.href.indexOf('http') === 0) { if (linkInfo.href.indexOf('http') === 0) {
window.location.href = linkInfo.href; window.location.href = linkInfo.href;
} else { } else {
$timeout(function() { $timeout(function() {
$location.url(linkInfo.href); $location.url(linkInfo.href);
}); });
} }
drilldownTooltip.detach(); drilldownTooltip.detach();
}); });
elem.mousemove(function(e) { elem.mousemove(function(e) {
if (!linkInfo) { return;} if (!linkInfo) { return;}
drilldownTooltip.text('click to go to: ' + linkInfo.title); drilldownTooltip.text('click to go to: ' + linkInfo.title);
drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); drilldownTooltip.place_tt(e.pageX+20, e.pageY-15);
}); });
}
} }
}; }
};
}
function getColorForValue(data, value) {
for (var i = data.thresholds.length; i > 0; i--) {
if (value >= data.thresholds[i]) {
return data.colorMap[i];
}
} }
return { return _.first(data.colorMap);
panel: singleStatPanel }
};
}); export {singleStatPanel as panel, getColorForValue};
public/app/plugins/panel/singlestat/singleStatPanel.js deleted 100644 → 0
define([
'angular',
'app/app',
'lodash',
'jquery',
'jquery.flot',
],
function (angular, app, _, $) {
'use strict';
var module = angular.module('grafana.panels.singlestat', []);
app.useModule(module);
module.directive('singlestatPanel', function($location, linkSrv, $timeout, templateSrv) {
return {
link: function(scope, elem) {
var data, panel, linkInfo;
var $panelContainer = elem.parents('.panel-container');
scope.$on('render', function() {
render();
scope.panelRenderingComplete();
});
function setElementHeight() {
try {
var height = scope.height || panel.height || scope.row.height;
if (_.isString(height)) {
height = parseInt(height.replace('px', ''), 10);
}
height -= 5; // padding
height -= panel.title ? 24 : 9; // subtract panel title bar
elem.css('height', height + 'px');
return true;
} catch(e) { // IE throws errors sometimes
return false;
}
}
function applyColoringThresholds(value, valueString) {
if (!panel.colorValue) {
return valueString;
}
var color = getColorForValue(value);
if (color) {
return '<span style="color:' + color + '">'+ valueString + '</span>';
}
return valueString;
}
function getColorForValue(value) {
for (var i = data.thresholds.length - 1; i >= 0 ; i--) {
if (value >= data.thresholds[i]) {
return data.colorMap[i];
}
}
return null;
}
function getSpan(className, fontSize, value) {
value = templateSrv.replace(value);
return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
value + '</span>';
}
function getBigValueHtml() {
var body = '<div class="singlestat-panel-value-container">';
if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); }
var value = applyColoringThresholds(data.valueRounded, data.valueFormated);
body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); }
body += '</div>';
return body;
}
function addSparkline() {
var panel = scope.panel;
var width = elem.width() + 20;
var height = elem.height() || 100;
var plotCanvas = $('<div></div>');
var plotCss = {};
plotCss.position = 'absolute';
if (panel.sparkline.full) {
plotCss.bottom = '5px';
plotCss.left = '-5px';
plotCss.width = (width - 10) + 'px';
var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
plotCss.height = (height - dynamicHeightMargin) + 'px';
}
else {
plotCss.bottom = "0px";
plotCss.left = "-5px";
plotCss.width = (width - 10) + 'px';
plotCss.height = Math.floor(height * 0.25) + "px";
}
plotCanvas.css(plotCss);
var options = {
legend: { show: false },
series: {
lines: {
show: true,
fill: 1,
lineWidth: 1,
fillColor: panel.sparkline.fillColor,
},
},
yaxes: { show: false },
xaxis: {
show: false,
mode: "time",
min: scope.range.from.valueOf(),
max: scope.range.to.valueOf(),
},
grid: { hoverable: false, show: false },
};
elem.append(plotCanvas);
var plotSeries = {
data: data.flotpairs,
color: panel.sparkline.lineColor
};
$.plot(plotCanvas, [plotSeries], options);
}
function render() {
if (!scope.data) { return; }
data = scope.data;
panel = scope.panel;
setElementHeight();
var body = getBigValueHtml();
if (panel.colorBackground && !isNaN(data.valueRounded)) {
var color = getColorForValue(data.valueRounded);
if (color) {
$panelContainer.css('background-color', color);
if (scope.fullscreen) {
elem.css('background-color', color);
} else {
elem.css('background-color', '');
}
}
} else {
$panelContainer.css('background-color', '');
elem.css('background-color', '');
}
elem.html(body);
if (panel.sparkline.show) {
addSparkline();
}
elem.toggleClass('pointer', panel.links.length > 0);
if (panel.links.length > 0) {
linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars);
} else {
linkInfo = null;
}
}
// drilldown link tooltip
var drilldownTooltip = $('<div id="tooltip" class="">hello</div>"');
elem.mouseleave(function() {
if (panel.links.length === 0) { return;}
drilldownTooltip.detach();
});
elem.click(function() {
if (!linkInfo) { return; }
if (linkInfo.target === '_blank') {
var redirectWindow = window.open(linkInfo.href, '_blank');
redirectWindow.location;
return;
}
if (linkInfo.href.indexOf('http') === 0) {
window.location.href = linkInfo.href;
} else {
$timeout(function() {
$location.url(linkInfo.href);
});
}
drilldownTooltip.detach();
});
elem.mousemove(function(e) {
if (!linkInfo) { return;}
drilldownTooltip.text('click to go to: ' + linkInfo.title);
drilldownTooltip.place_tt(e.pageX+20, e.pageY-15);
});
}
};
});
});
public/test/specs/singlestat-specs.js → public/app/plugins/panel/singlestat/specs/singlestat-specs.ts
define([ ///<reference path="../../../../headers/common.d.ts" />
'angular',
'./helpers',
'app/plugins/panel/singlestat/controller',
'app/features/panel/panel_srv',
'app/features/panel/panel_helper',
], function(angular, helpers, SingleStatCtrl) {
'use strict';
angular.module('grafana.controllers').controller('SingleStatCtrl', SingleStatCtrl); import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common';
describe('SingleStatCtrl', function() { import 'app/features/panel/panel_srv';
var ctx = new helpers.ControllerTestContext(); import 'app/features/panel/panel_helper';
function singleStatScenario(desc, func) { import angular from 'angular';
import helpers from '../../../../../test/specs/helpers';
import {SingleStatCtrl} from '../controller';
describe(desc, function() {
ctx.setup = function (setupFunc) { angular.module('grafana.controllers').controller('SingleStatCtrl', SingleStatCtrl);
beforeEach(module('grafana.services')); describe('SingleStatCtrl', function() {
beforeEach(module('grafana.controllers')); var ctx = new helpers.ControllerTestContext();
beforeEach(ctx.providePhase()); function singleStatScenario(desc, func) {
beforeEach(ctx.createControllerPhase('SingleStatCtrl'));
beforeEach(function() { describe(desc, function() {
setupFunc();
ctx.datasource.query = sinon.stub().returns(ctx.$q.when({
data: [{target: 'test.cpu1', datapoints: ctx.datapoints}]
}));
ctx.scope.refreshData(ctx.datasource); ctx.setup = function (setupFunc) {
ctx.scope.$digest();
ctx.data = ctx.scope.data;
});
};
func(ctx); beforeEach(angularMocks.module('grafana.services'));
}); beforeEach(angularMocks.module('grafana.controllers'));
}
singleStatScenario('with defaults', function(ctx) { beforeEach(ctx.providePhase());
ctx.setup(function() { beforeEach(ctx.createControllerPhase('SingleStatCtrl'));
ctx.datapoints = [[10,1], [20,2]];
});
it('Should use series avg as default main value', function() { beforeEach(function() {
expect(ctx.data.value).to.be(15); setupFunc();
expect(ctx.data.valueRounded).to.be(15); ctx.datasource.query = sinon.stub().returns(ctx.$q.when({
}); data: [{target: 'test.cpu1', datapoints: ctx.datapoints}]
}));
it('should set formated falue', function() { ctx.scope.refreshData(ctx.datasource);
expect(ctx.data.valueFormated).to.be('15'); ctx.scope.$digest();
}); ctx.data = ctx.scope.data;
});
};
func(ctx);
});
}
singleStatScenario('with defaults', function(ctx) {
ctx.setup(function() {
ctx.datapoints = [[10,1], [20,2]];
}); });
singleStatScenario('MainValue should use same number for decimals as displayed when checking thresholds', function(ctx) { it('Should use series avg as default main value', function() {
ctx.setup(function() { expect(ctx.data.value).to.be(15);
ctx.datapoints = [[99.999,1], [99.99999,2]]; expect(ctx.data.valueRounded).to.be(15);
}); });
it('should set formated falue', function() {
expect(ctx.data.valueFormated).to.be('15');
});
});
it('Should be rounded', function() { singleStatScenario('MainValue should use same number for decimals as displayed when checking thresholds', function(ctx) {
expect(ctx.data.value).to.be(99.999495); ctx.setup(function() {
expect(ctx.data.valueRounded).to.be(100); ctx.datapoints = [[99.999,1], [99.99999,2]];
}); });
it('should set formated falue', function() { it('Should be rounded', function() {
expect(ctx.data.valueFormated).to.be('100'); expect(ctx.data.value).to.be(99.999495);
}); expect(ctx.data.valueRounded).to.be(100);
}); });
singleStatScenario('When value to text mapping is specified', function(ctx) { it('should set formated falue', function() {
ctx.setup(function() { expect(ctx.data.valueFormated).to.be('100');
ctx.datapoints = [[10,1]]; });
ctx.scope.panel.valueMaps = [{value: '10', text: 'OK'}]; });
});
it('Should replace value with text', function() { singleStatScenario('When value to text mapping is specified', function(ctx) {
expect(ctx.data.value).to.be(10); ctx.setup(function() {
expect(ctx.data.valueFormated).to.be('OK'); ctx.datapoints = [[10,1]];
}); ctx.scope.panel.valueMaps = [{value: '10', text: 'OK'}];
});
it('Should replace value with text', function() {
expect(ctx.data.value).to.be(10);
expect(ctx.data.valueFormated).to.be('OK');
}); });
}); });
}); });
public/app/plugins/panel/singlestat/specs/singlestat_panel_spec.ts 0 → 100644
import {describe, beforeEach, it, sinon, expect} from 'test/lib/common';
import {getColorForValue} from '../module';
describe('grafanaSingleStat', function() {
describe('legacy thresholds', () => {
describe('positive thresholds', () => {
var data: any = {
colorMap: ['green', 'yellow', 'red'],
thresholds: [0, 20, 50]
};
it('5 should return green', () => {
expect(getColorForValue(data, 5)).to.be('green');
});
it('25 should return green', () => {
expect(getColorForValue(data, 25)).to.be('yellow');
});
it('55 should return green', () => {
expect(getColorForValue(data, 55)).to.be('red');
});
});
});
describe('negative thresholds', () => {
var data: any = {
colorMap: ['green', 'yellow', 'red'],
thresholds: [ -20, 0, 20]
};
it('-30 should return green', () => {
expect(getColorForValue(data, -30)).to.be('green');
});
it('1 should return green', () => {
expect(getColorForValue(data, 1)).to.be('yellow');
});
it('22 should return green', () => {
expect(getColorForValue(data, 22)).to.be('red');
});
});
describe('negative thresholds', () => {
var data: any = {
colorMap: ['green', 'yellow', 'red'],
thresholds: [ -40, -27, 20]
};
it('-30 should return green', () => {
expect(getColorForValue(data, -26)).to.be('yellow');
});
});
});
public/test/specs/dashboardSrv-specs.js
...@@ -141,6 +141,7 @@ define([ ...@@ -141,6 +141,7 @@ define([
describe('when creating dashboard with old schema', function() { describe('when creating dashboard with old schema', function() {
var model; var model;
var graph; var graph;
var singlestat;
beforeEach(function() { beforeEach(function() {
model = _dashboardSrv.create({ model = _dashboardSrv.create({
...@@ -155,6 +156,10 @@ define([ ...@@ -155,6 +156,10 @@ define([
{ {
type: 'graphite', legend: true, aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 }, type: 'graphite', legend: true, aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
targets: [{refId: 'A'}, {}], targets: [{refId: 'A'}, {}],
},
{
type: 'singlestat', legend: true, thresholds: '10,20,30', aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
targets: [{refId: 'A'}, {}],
} }
] ]
} }
...@@ -162,6 +167,7 @@ define([ ...@@ -162,6 +167,7 @@ define([
}); });
graph = model.rows[0].panels[0]; graph = model.rows[0].panels[0];
singlestat = model.rows[0].panels[1];
}); });
it('should have title', function() { it('should have title', function() {
...@@ -181,6 +187,10 @@ define([ ...@@ -181,6 +187,10 @@ define([
expect(graph.type).to.be('graph'); expect(graph.type).to.be('graph');
}); });
it('single stat panel should have two thresholds', function() {
expect(singlestat.thresholds).to.be('20,30');
});
it('queries without refId should get it', function() { it('queries without refId should get it', function() {
expect(graph.targets[1].refId).to.be('B'); expect(graph.targets[1].refId).to.be('B');
}); });
...@@ -204,7 +214,7 @@ define([ ...@@ -204,7 +214,7 @@ define([
}); });
it('dashboard schema version should be set to latest', function() { it('dashboard schema version should be set to latest', function() {
expect(model.schemaVersion).to.be(8); expect(model.schemaVersion).to.be(9);
}); });
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment