Skip to content

N
nexpie-grafana-theme
Commit 7b2a2199 by utkarshcmu
Options

Moved mappings to new tab, added rangeMaps feature

parent 7c06604f
Showing with 137 additions and 44 deletions
public/app/plugins/panel/singlestat/editor.html
......@@ -192,35 +192,3 @@
</div>
</div>
</div>
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
<strong>Value to text mapping</strong>
</li>
<li class="tight-form-item" ng-repeat-start="map in ctrl.panel.valueMaps">
<i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
</li>
<li>
<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
<li class="tight-form-item">
<i class="fa fa-arrow-right"></i>
</li>
<li ng-repeat-end>
<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
<li>
<a class="pointer tight-form-item last" ng-click="ctrl.addValueMap();">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
public/app/plugins/panel/singlestat/mappings.html 0 → 100644
<div class="editor-row">
<div class="section tight-form-container" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Type
</li>
<li>
<select class="input-medium tight-form-input" ng-model="ctrl.panel.mappingType"
ng-options="f.value as f.name for f in ctrl.panel.mappingTypes" ng-change="ctrl.render()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row" ng-if="ctrl.panel.mappingType==1">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
<strong>Value to text mapping</strong>
</li>
<li class="tight-form-item" ng-repeat-start="map in ctrl.panel.valueMaps">
<i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
</li>
<li>
<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
<li class="tight-form-item">
<i class="fa fa-arrow-right"></i>
</li>
<li ng-repeat-end>
<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
<li>
<a class="pointer tight-form-item last" ng-click="ctrl.addValueMap();">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row" ng-if="ctrl.panel.mappingType==2">
<h5>Set range mappings</h5>
<div class="section gf-form-group">
<div class="tight-form-container">
<div class="tight-form" ng-repeat="rangeMap in ctrl.panel.rangeMaps">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="ctrl.panel.removeRangeMap(rangeMap)"></i>
</li>
<li class="tight-form-item">
From
</li>
<li>
<input type="text" ng-model="rangeMap.from" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
<li class="tight-form-item">
To
</li>
<li>
<input type="text" ng-model="rangeMap.to" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
<li class="tight-form-item">
Text
</li>
<li>
<input type="text" ng-model="rangeMap.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<button class="btn btn-inverse" style="margin-top: 20px" ng-click="ctrl.addRangeMap()">
Add a range mapping
</button>
</div>
</div>
public/app/plugins/panel/singlestat/module.ts
......@@ -34,6 +34,14 @@ class SingleStatCtrl extends MetricsPanelCtrl {
valueMaps: [
{ value: 'null', op: '=', text: 'N/A' }
],
mappingTypes: [
{name: 'value to text', value: 1},
{name: 'range to text', value: 2},
],
rangeMaps: [
{ from: 'null', to: 'null', text: 'N/A' }
],
mappingType: 1,
nullPointMode: 'connected',
valueName: 'avg',
prefixFontSize: '50%',
......@@ -71,6 +79,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
onInitEditMode() {
this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
this.addEditorTab('Options', 'public/app/plugins/panel/singlestat/editor.html', 2);
this.addEditorTab('Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
this.unitFormats = kbn.getUnitFormats();
}
......@@ -195,23 +204,45 @@ class SingleStatCtrl extends MetricsPanelCtrl {
}
}
// check value to text mappings
for (var i = 0; i < this.panel.valueMaps.length; i++) {
var map = this.panel.valueMaps[i];
// special null case
if (map.value === 'null') {
if (data.value === null || data.value === void 0) {
// check value to text mappings if its enabled
if (this.panel.mappingType === 1) {
for (var i = 0; i < this.panel.valueMaps.length; i++) {
var map = this.panel.valueMaps[i];
// special null case
if (map.value === 'null') {
if (data.value === null || data.value === void 0) {
data.valueFormated = map.text;
return;
}
continue;
}
// value/number to text mapping
var value = parseFloat(map.value);
if (value === data.valueRounded) {
data.valueFormated = map.text;
return;
}
continue;
}
} else if (this.panel.mappingType === 2) {
for (var i = 0; i < this.panel.rangeMaps.length; i++) {
var map = this.panel.rangeMaps[i];
// special null case
if (map.from === 'null' && map.to === 'null') {
if (data.value === null || data.value === void 0) {
data.valueFormated = map.text;
return;
}
continue;
}
// value/number to text mapping
var value = parseFloat(map.value);
if (value === data.valueRounded) {
data.valueFormated = map.text;
return;
// value/number to range mapping
var from = parseFloat(map.from);
var to = parseFloat(map.to);
if (to >= data.valueRounded && from <= data.valueRounded) {
data.valueFormated = map.text;
return;
}
}
}
......@@ -230,6 +261,16 @@ class SingleStatCtrl extends MetricsPanelCtrl {
this.panel.valueMaps.push({value: '', op: '=', text: '' });
}
removeRangeMap(rangeMap) {
var index = _.indexOf(this.panel.rangeMaps, rangeMap);
this.panel.rangeMaps.splice(index, 1);
this.render();
};
addRangeMap() {
this.panel.rangeMaps.push({from: '', to: '', text: ''});
}
link(scope, elem, attrs, ctrl) {
var $location = this.$location;
var linkSrv = this.linkSrv;
......
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