mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Updated design of singlestat options view, it now uses the new unit format selector, #1331
This commit is contained in:
Torkel Ödegaard
parent
1e9c51072a
commit
cc21c66b3a
@ -1,113 +1,189 @@
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Big value</h5>
|
||||
<div class="editor-option">
|
||||
<label class="small">Prefix</label>
|
||||
<input type="text" class="input-small" ng-model="panel.prefix" ng-blur="render()"></input>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Value</label>
|
||||
<select class="input-small" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Postfix</label>
|
||||
<input type="text" class="input-small" ng-model="panel.postfix" ng-blur="render()" ng-trim="false"></input>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Null point mode<tip>Define how null values should handled, connected = ignored</tip></label>
|
||||
<select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="get_data()"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5>Big value font size</h5>
|
||||
<div class="editor-option">
|
||||
<label class="small">Prefix</label>
|
||||
<select class="input-mini" style="width: 75px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Value</label>
|
||||
<select class="input-mini" style="width: 75px;" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Postfix</label>
|
||||
<select class="input-mini" style="width: 75px;" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5>Formats</h5>
|
||||
<div class="editor-option">
|
||||
<label class="small">Unit format</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Coloring</h5>
|
||||
<editor-opt-bool text="Background" model="panel.colorBackground" change="setColoring({background: true})"></editor-opt-bool>
|
||||
<editor-opt-bool text="Value" model="panel.colorValue" change="setColoring({value: true})"></editor-opt-bool>
|
||||
<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue">
|
||||
<label class="small">Thresholds<tip>Comma seperated values</tip></label>
|
||||
<input type="text" class="input-large" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
|
||||
</div>
|
||||
<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue">
|
||||
<label class="small">Colors</label>
|
||||
<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
|
||||
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h5>Spark lines</h5>
|
||||
<editor-opt-bool text="Spark line" model="panel.sparkline.show" change="render()"></editor-opt-bool>
|
||||
<editor-opt-bool text="Background mode" model="panel.sparkline.full" change="render()"></editor-opt-bool>
|
||||
<div class="editor-option">
|
||||
<label class="small">Line color</label>
|
||||
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
|
||||
</div>
|
||||
<div class="editor-option">
|
||||
<label class="small">Fill color</label>
|
||||
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Value to text mapping</h5>
|
||||
<div class="editor-option">
|
||||
<label class="small">Specify mappings</label>
|
||||
<div class="grafana-target">
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list">
|
||||
<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 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>Big value</strong>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Prefix
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-small grafana-target-segment-input"
|
||||
ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Value
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
<li class="grafana-target-segment">
|
||||
Postfix
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-small grafana-target-segment-input last"
|
||||
ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list">
|
||||
<li class="grafana-target-segment" style="width: 80px">
|
||||
<strong>Font size</strong>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Prefix
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Value
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Postfix
|
||||
</li>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="grafana-target-inner">
|
||||
<ul class="grafana-segment-list">
|
||||
<li class="grafana-target-segment" style="width: 80px">
|
||||
<strong>Unit</strong>
|
||||
</li>
|
||||
<li class="dropdown" style="width: 130px;"
|
||||
ng-model="panel.format"
|
||||
dropdown-typeahead="unitFormats"
|
||||
dropdown-typeahead-on-select="setUnitFormat($subItem)">
|
||||
</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>Coloring</strong>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Background
|
||||
<input class="cr1" id="panel.colorBackground" type="checkbox"
|
||||
ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
|
||||
<label for="panel.colorBackground" class="cr1"></label>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Value
|
||||
<input class="cr1" id="panel.colorValue" type="checkbox"
|
||||
ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
|
||||
<label for="panel.colorValue" class="cr1"></label>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Thresholds<tip>Comma seperated values</tip>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
Colors
|
||||
</li>
|
||||
<li class="grafana-target-segment">
|
||||
<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
|
||||
</li>
|
||||
<li class="grafana-target-segment last">
|
||||
<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
|
||||
<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
|
||||
<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>
|
||||
|
||||
@ -57,6 +57,12 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
|
||||
};
|
||||
|
||||
_.defaults($scope.panel, _d);
|
||||
$scope.unitFormats = kbn.getUnitFormats();
|
||||
|
||||
$scope.setUnitFormat = function(subItem) {
|
||||
$scope.panel.format = subItem.value;
|
||||
$scope.render();
|
||||
};
|
||||
|
||||
$scope.init = function() {
|
||||
panelSrv.init($scope);
|
||||
|
||||
@ -236,6 +236,9 @@ select.grafana-target-segment-input {
|
||||
border-radius: 0;
|
||||
height: 36px;
|
||||
padding: 8px 5px;
|
||||
&.last {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grafana-target .dropdown {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user