IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11892 from ApsOps/colorize-singlestat-prefix-postfix-option

Browse Source 
Make colorization of prefix and postfix optional in singlestat
This commit is contained in:
Daniel Lee 2018-06-28 14:42:48 +02:00 committed by GitHub
commit 8537f10285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/plugins/panel/singlestat/editor.html
View File

@ -29,7 +29,7 @@
<input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="ctrl.canChangeFontSize()"></select>
<select class="gf-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></select>
</div>
</div>
</div>
@ -39,7 +39,7 @@
<input type="text" class="gf-form-input width-12" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper">
<select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="ctrl.canChangeFontSize()"></select>
<select class="input-small gf-form-input" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></select>
</div>
</div>
<div class="gf-form">
@ -58,6 +58,10 @@
<gf-form-switch class="gf-form" label-class="width-8" label="Background" checked="ctrl.panel.colorBackground" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-4" label="Value" checked="ctrl.panel.colorValue" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label-class="width-6" label="Prefix" checked="ctrl.panel.colorPrefix" on-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-6" label="Postfix" checked="ctrl.panel.colorPostfix" on-change="ctrl.render()" ng-disabled="!ctrl.canModifyText()"></gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-21">
<label class="gf-form-label width-8">Thresholds

23
public/app/plugins/panel/singlestat/module.ts
View File

@ -198,8 +198,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
this.setValueMapping(data);
}
canChangeFontSize() {
return this.panel.gauge.show;
canModifyText() {
return !this.panel.gauge.show;
}
setColoring(options) {
@ -405,10 +405,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
elem = elem.find('.singlestat-panel');
function applyColoringThresholds(value, valueString) {
if (!panel.colorValue) {
return valueString;
}
var color = getColorForValue(data, value);
if (color) {
return '<span style="color:' + color + '">' + valueString + '</span>';
@ -426,15 +422,24 @@ class SingleStatCtrl extends MetricsPanelCtrl {
var body = '<div class="singlestat-panel-value-container">';
if (panel.prefix) {
var prefix = applyColoringThresholds(data.value, panel.prefix);
var prefix = panel.prefix;
if (panel.colorPrefix) {
prefix = applyColoringThresholds(data.value, panel.prefix);
}
body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, prefix);
}
var value = applyColoringThresholds(data.value, data.valueFormatted);
var value = data.valueFormatted;
if (panel.colorValue) {
value = applyColoringThresholds(data.value, value);
}
body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
if (panel.postfix) {
var postfix = applyColoringThresholds(data.value, panel.postfix);
var postfix = panel.postfix;
if (panel.colorPostfix) {
postfix = applyColoringThresholds(data.value, panel.postfix);
}
body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, postfix);
}