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

Updated design of singlestat options view, it now uses the new unit format selector, #1331

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-01-12 17:02:58 +01:00
parent 1e9c51072a
commit cc21c66b3a
3 changed files with 194 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
src/app/panels/singlestat/editor.html
View File

@ -1,113 +1,189 @@
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section" style="margin-bottom: 20px">
<h5>Big value</h5> <div class="grafana-target">
<div class="editor-option"> <div class="grafana-target-inner">
<label class="small">Prefix</label> <ul class="grafana-segment-list">
<input type="text" class="input-small" ng-model="panel.prefix" ng-blur="render()"></input> <li class="grafana-target-segment" style="width: 80px">
</div> <strong>Big value</strong>
<div class="editor-option"> </li>
<label class="small">Value</label> <li class="grafana-target-segment">
<select class="input-small" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select> Prefix
</div> </li>
<div class="editor-option"> <li>
<label class="small">Postfix</label> <input type="text" class="input-small grafana-target-segment-input"
<input type="text" class="input-small" ng-model="panel.postfix" ng-blur="render()" ng-trim="false"></input> ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
</div> </li>
<div class="editor-option"> <li class="grafana-target-segment">
<label class="small">Null point mode<tip>Define how null values should handled, connected = ignored</tip></label> Value
<select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="get_data()"></select> </li>
</div> <li>
</div> <select class="input-small grafana-target-segment-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
</li>
<div class="section"> <li class="grafana-target-segment">
<h5>Big value font size</h5> Postfix
<div class="editor-option"> </li>
<label class="small">Prefix</label> <li>
<select class="input-mini" style="width: 75px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select> <input type="text" class="input-small grafana-target-segment-input last"
</div> ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
<div class="editor-option"> </li>
<label class="small">Value</label> </ul>
<select class="input-mini" style="width: 75px;" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select> <div class="clearfix"></div>
</div> </div>
<div class="editor-option"> <div class="grafana-target-inner">
<label class="small">Postfix</label> <ul class="grafana-segment-list">
<select class="input-mini" style="width: 75px;" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select> <li class="grafana-target-segment" style="width: 80px">
</div> <strong>Font size</strong>
</div> </li>
<li class="grafana-target-segment">
<div class="section"> Prefix
<h5>Formats</h5> </li>
<div class="editor-option"> <li>
<label class="small">Unit format</label> <select class="input-small grafana-target-segment-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'kbytes', 'bits', 'Bps', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select> </li>
</div> <li class="grafana-target-segment">
</div> Value
</div> </li>
<li>
<div class="editor-row"> <select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
<div class="section"> </li>
<h5>Coloring</h5> <li class="grafana-target-segment">
<editor-opt-bool text="Background" model="panel.colorBackground" change="setColoring({background: true})"></editor-opt-bool> Postfix
<editor-opt-bool text="Value" model="panel.colorValue" change="setColoring({value: true})"></editor-opt-bool> </li>
<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue"> <li>
<label class="small">Thresholds<tip>Comma seperated values</tip></label> <select class="input-small grafana-target-segment-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
<input type="text" class="input-large" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input> </li>
</div> </ul>
<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue"> <div class="clearfix"></div>
<label class="small">Colors</label> </div>
<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker> <div class="grafana-target-inner">
<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker> <ul class="grafana-segment-list">
<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker> <li class="grafana-target-segment" style="width: 80px">
<a class="pointer" ng-click="invertColorOrder()">invert order</a> <strong>Unit</strong>
</div> </li>
</div> <li class="dropdown" style="width: 130px;"
ng-model="panel.format"
<div class="section"> dropdown-typeahead="unitFormats"
<h5>Spark lines</h5> dropdown-typeahead-on-select="setUnitFormat($subItem)">
<editor-opt-bool text="Spark line" model="panel.sparkline.show" change="render()"></editor-opt-bool> </li>
<editor-opt-bool text="Background mode" model="panel.sparkline.full" change="render()"></editor-opt-bool> </ul>
<div class="editor-option"> <div class="clearfix"></div>
<label class="small">Line color</label> </div>
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker> </div>
</div> </div>
<div class="editor-option"> </div>
<label class="small">Fill color</label>
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker> <div class="editor-row">
</div> <div class="section" style="margin-bottom: 20px">
</div> <div class="grafana-target">
</div> <div class="grafana-target-inner">
<ul class="grafana-segment-list">
<div class="editor-row"> <li class="grafana-target-segment" style="width: 80px">
<div class="section"> <strong>Coloring</strong>
<h5>Value to text mapping</h5> </li>
<div class="editor-option"> <li class="grafana-target-segment">
<label class="small">Specify mappings</label> Background&nbsp;
<div class="grafana-target"> <input class="cr1" id="panel.colorBackground" type="checkbox"
<div class="grafana-target-inner"> ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
<ul class="grafana-segment-list"> <label for="panel.colorBackground" class="cr1"></label>
<li class="grafana-target-segment" ng-repeat-start="map in panel.valueMaps"> </li>
<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i> <li class="grafana-target-segment">
</li> Value&nbsp;
<input class="cr1" id="panel.colorValue" type="checkbox"
<li> ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()"> <label for="panel.colorValue" class="cr1"></label>
</li> </li>
<li class="grafana-target-segment"> <li class="grafana-target-segment">
<i class="fa fa-arrow-right"></i> Thresholds<tip>Comma seperated values</tip>
</li> </li>
<li ng-repeat-end> <li>
<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()"> <input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
</li> </li>
<li class="grafana-target-segment">
<li> Colors
<a class="pointer grafana-target-segment" ng-click="addValueMap();"> </li>
<i class="fa fa-plus"></i> <li class="grafana-target-segment">
</a> <spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
</li> <spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
</ul> </li>
<div class="clearfix"></div> <li class="grafana-target-segment last">
</div> <a class="pointer" ng-click="invertColorOrder()">invert order</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment" style="width: 80px">
<strong>Spark lines</strong>
</li>
<li class="grafana-target-segment">
Show&nbsp;
<input class="cr1" id="panel.sparkline.show" type="checkbox"
ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
<label for="panel.sparkline.show" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Background mode&nbsp;
<input class="cr1" id="panel.sparkline.full" type="checkbox"
ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
<label for="panel.sparkline.full" class="cr1"></label>
</li>
<li class="grafana-target-segment">
Line Color
</li>
<li class="grafana-target-segment">
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
</li>
<li class="grafana-target-segment">
Fill Color
</li>
<li class="grafana-target-segment">
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="grafana-target">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment">
<strong>Value to text mapping</strong>
</li>
<li class="grafana-target-segment" ng-repeat-start="map in panel.valueMaps">
<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
</li>
<li>
<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
</li>
<li class="grafana-target-segment">
<i class="fa fa-arrow-right"></i>
</li>
<li ng-repeat-end>
<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
</li>
<li>
<a class="pointer grafana-target-segment" ng-click="addValueMap();">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>

6
src/app/panels/singlestat/module.js
View File

@ -57,6 +57,12 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
}; };
_.defaults($scope.panel, _d); _.defaults($scope.panel, _d);
$scope.unitFormats = kbn.getUnitFormats();
$scope.setUnitFormat = function(subItem) {
$scope.panel.format = subItem.value;
$scope.render();
};
$scope.init = function() { $scope.init = function() {
panelSrv.init($scope); panelSrv.init($scope);

3
src/css/less/grafana.less
View File

@ -236,6 +236,9 @@ select.grafana-target-segment-input {
border-radius: 0; border-radius: 0;
height: 36px; height: 36px;
padding: 8px 5px; padding: 8px 5px;
&.last {
border-right: none;
}
} }
.grafana-target .dropdown { .grafana-target .dropdown {