Add options to colorize prefix and postfix in singlestat

This commit is contained in:
Aman
2018-05-09 13:32:44 +05:30
parent b2187b70a7
commit 1dd65f7a39
2 changed files with 16 additions and 7 deletions

View File

@@ -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-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> <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>
<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()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-6" label="Postfix" checked="ctrl.panel.colorPostfix" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
<label class="gf-form-label width-8">Thresholds <label class="gf-form-label width-8">Thresholds

View File

@@ -405,10 +405,6 @@ class SingleStatCtrl extends MetricsPanelCtrl {
elem = elem.find('.singlestat-panel'); elem = elem.find('.singlestat-panel');
function applyColoringThresholds(value, valueString) { function applyColoringThresholds(value, valueString) {
if (!panel.colorValue) {
return valueString;
}
var color = getColorForValue(data, value); var color = getColorForValue(data, value);
if (color) { if (color) {
return '<span style="color:' + color + '">' + valueString + '</span>'; return '<span style="color:' + color + '">' + valueString + '</span>';
@@ -426,15 +422,24 @@ class SingleStatCtrl extends MetricsPanelCtrl {
var body = '<div class="singlestat-panel-value-container">'; var body = '<div class="singlestat-panel-value-container">';
if (panel.prefix) { 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); 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); body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
if (panel.postfix) { 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); body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, postfix);
} }