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 152 additions and 293 deletions
public/app/core/time_series2.ts
......@@ -41,6 +41,7 @@ export default class TimeSeries {
nullPointMode: any;
fillBelowTo: any;
transform: any;
flotpairs: any;
constructor(opts) {
this.datapoints = opts.datapoints;
......
public/app/features/dashboard/dashboardSrv.js
......@@ -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;
}
......
public/app/plugins/panel/singlestat/controller.js → public/app/plugins/panel/singlestat/controller.ts
define([
'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';
///<reference path="../../../headers/common.d.ts" />
/** @ngInject */
function SingleStatCtrl($scope, panelSrv, panelHelper) {
import angular from 'angular';
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({
panelName: 'Singlestat',
editIcon: "fa fa-dashboard",
......@@ -57,6 +55,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
};
_.defaults($scope.panel, _d);
$scope.unitFormats = kbn.getUnitFormats();
$scope.setUnitFormat = function(subItem) {
......@@ -104,8 +103,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
if (options.background) {
$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)'];
}
else {
} else {
$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)'];
}
......@@ -151,7 +149,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
// reduce starting decimals if not needed
if (Math.floor(value) === value) { dec = 0; }
var result = {};
var result: any = {};
result.decimals = Math.max(0, dec);
result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;
......@@ -159,7 +157,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
};
$scope.render = function() {
var data = {};
var data: any = {};
$scope.setValues(data);
......@@ -176,7 +174,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
$scope.setValues = function(data) {
data.flotpairs = [];
if($scope.series.length > 1) {
if ($scope.series.length > 1) {
$scope.inspector.error = new Error();
$scope.inspector.error.message = 'Multiple Series Error';
$scope.inspector.error.data = 'Metric query returns ' + $scope.series.length +
......@@ -204,7 +202,7 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
}
// 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];
// special null case
if (map.value === 'null') {
......@@ -239,7 +237,6 @@ function (angular, app, _, kbn, TimeSeries, PanelMeta) {
};
$scope.init();
}
return SingleStatCtrl;
});
}
}
public/app/plugins/panel/singlestat/editor.html
......@@ -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
......
public/app/plugins/panel/singlestat/module.js → public/app/plugins/panel/singlestat/module.ts
define([
'./controller',
'lodash',
'jquery',
'jquery.flot',
],
function (SingleStatCtrl, _, $) {
'use strict';
///<reference path="../../../headers/common.d.ts" />
import _ from 'lodash';
import $ from 'jquery';
import angular from 'angular';
import {SingleStatCtrl} from './controller';
angular.module('grafana.directives').directive('singleStatPanel', singleStatPanel);
/** @ngInject */
function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
'use strict';
return {
controller: SingleStatCtrl,
templateUrl: 'app/plugins/panel/singlestat/module.html',
......@@ -44,7 +44,7 @@ function (SingleStatCtrl, _, $) {
elem.css('height', height + 'px');
return true;
} catch(e) { // IE throws errors sometimes
} catch (e) { // IE throws errors sometimes
return false;
}
}
......@@ -54,7 +54,7 @@ function (SingleStatCtrl, _, $) {
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 (SingleStatCtrl, _, $) {
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 + '">' +
......@@ -98,7 +89,7 @@ function (SingleStatCtrl, _, $) {
var height = elem.height() || 100;
var plotCanvas = $('<div></div>');
var plotCss = {};
var plotCss: any = {};
plotCss.position = 'absolute';
if (panel.sparkline.full) {
......@@ -107,8 +98,7 @@ function (SingleStatCtrl, _, $) {
plotCss.width = (width - 10) + 'px';
var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
plotCss.height = (height - dynamicHeightMargin) + 'px';
}
else {
} else {
plotCss.bottom = "0px";
plotCss.left = "-5px";
plotCss.width = (width - 10) + 'px';
......@@ -158,7 +148,7 @@ function (SingleStatCtrl, _, $) {
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) {
......@@ -227,9 +217,16 @@ function (SingleStatCtrl, _, $) {
}
}
};
}
function getColorForValue(data, value) {
for (var i = data.thresholds.length; i > 0; i--) {
if (value >= data.thresholds[i]) {
return data.colorMap[i];
}
}
return {
panel: singleStatPanel
};
});
return _.first(data.colorMap);
}
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([
'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);
describe('SingleStatCtrl', function() {
///<reference path="../../../../headers/common.d.ts" />
import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common';
import 'app/features/panel/panel_srv';
import 'app/features/panel/panel_helper';
import angular from 'angular';
import helpers from '../../../../../test/specs/helpers';
import {SingleStatCtrl} from '../controller';
angular.module('grafana.controllers').controller('SingleStatCtrl', SingleStatCtrl);
describe('SingleStatCtrl', function() {
var ctx = new helpers.ControllerTestContext();
function singleStatScenario(desc, func) {
......@@ -18,8 +21,8 @@ define([
ctx.setup = function (setupFunc) {
beforeEach(module('grafana.services'));
beforeEach(module('grafana.controllers'));
beforeEach(angularMocks.module('grafana.services'));
beforeEach(angularMocks.module('grafana.controllers'));
beforeEach(ctx.providePhase());
beforeEach(ctx.createControllerPhase('SingleStatCtrl'));
......@@ -82,7 +85,4 @@ define([
});
});
});
});
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([
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);
});
});
......
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