Skip to content

N
nexpie-grafana-theme
Commit 8537f102 by Daniel Lee Committed by GitHub
Options

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

Make colorization of prefix and postfix optional in singlestat
parents 4c4bd2eb e11f6f5c
Showing with 20 additions and 11 deletions
public/app/plugins/panel/singlestat/editor.html
...@@ -29,7 +29,7 @@ ...@@ -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> <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> <label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper"> <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> </div>
</div> </div>
...@@ -39,7 +39,7 @@ ...@@ -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> <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> <label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper"> <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> </div>
<div class="gf-form"> <div class="gf-form">
...@@ -59,6 +59,10 @@ ...@@ -59,6 +59,10 @@
<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"> <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"> <div class="gf-form max-width-21">
<label class="gf-form-label width-8">Thresholds <label class="gf-form-label width-8">Thresholds
<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: value &lt; 50 = Green, 50 &lt;= value &lt; 80 = Yellow, value &gt;= 80 = Red</tip> <tip>Define two threshold values&lt;br /&gt; 50,80 will produce: value &lt; 50 = Green, 50 &lt;= value &lt; 80 = Yellow, value &gt;= 80 = Red</tip>
......
public/app/plugins/panel/singlestat/module.ts
...@@ -198,8 +198,8 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -198,8 +198,8 @@ class SingleStatCtrl extends MetricsPanelCtrl {
this.setValueMapping(data); this.setValueMapping(data);
} }
canChangeFontSize() { canModifyText() {
return this.panel.gauge.show; return !this.panel.gauge.show;
} }
setColoring(options) { setColoring(options) {
...@@ -405,10 +405,6 @@ class SingleStatCtrl extends MetricsPanelCtrl { ...@@ -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 { ...@@ -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);
} }
......
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