feat(singlestat): reduce max thresholds to two.

closes #3248
This commit is contained in:
bergquist 2016-01-25 16:27:00 +01:00
parent b0a24ae4aa
commit cd1b2e2841
4 changed files with 45 additions and 17 deletions

View File

@ -234,9 +234,9 @@ function (angular, $, _, moment) {
var i, j, k;
var oldVersion = this.schemaVersion;
var panelUpgrades = [];
this.schemaVersion = 8;
this.schemaVersion = 9;
if (oldVersion === 8) {
if (oldVersion === this.schemaVersion) {
return;
}
@ -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) {
return;
}

View File

@ -97,10 +97,10 @@
<label for="panel.colorValue" class="cr1"></label>
</li>
<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>
<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 class="tight-form-item">
Colors

View File

@ -54,7 +54,7 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
return valueString;
}
var color = getColorForValue(value);
var color = getColorForValue(data, value);
if (color) {
return '<span style="color:' + color + '">'+ valueString + '</span>';
}
@ -62,15 +62,6 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
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 + '">' +
@ -157,7 +148,7 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
var body = getBigValueHtml();
if (panel.colorBackground && !isNaN(data.valueRounded)) {
var color = getColorForValue(data.valueRounded);
var color = getColorForValue(data, data.valueRounded);
if (color) {
$panelContainer.css('background-color', color);
if (scope.fullscreen) {
@ -228,4 +219,14 @@ function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
};
}
export {singleStatPanel as panel};
function getColorForValue(data, value) {
for (var i = data.thresholds.length; i > 0; i--) {
if (value >= data.thresholds[i]) {
return data.colorMap[i];
}
}
return _.first(data.colorMap);
}
export {singleStatPanel as panel, getColorForValue};

View File

@ -141,6 +141,7 @@ define([
describe('when creating dashboard with old schema', function() {
var model;
var graph;
var singlestat;
beforeEach(function() {
model = _dashboardSrv.create({
@ -155,6 +156,10 @@ define([
{
type: 'graphite', legend: true, aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
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([
});
graph = model.rows[0].panels[0];
singlestat = model.rows[0].panels[1];
});
it('should have title', function() {
@ -181,6 +187,10 @@ define([
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() {
expect(graph.targets[1].refId).to.be('B');
});
@ -204,7 +214,7 @@ define([
});
it('dashboard schema version should be set to latest', function() {
expect(model.schemaVersion).to.be(8);
expect(model.schemaVersion).to.be(9);
});
});