apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(singlestat): slight layout changes to options tab

Browse Source
pull/6108/head
Torkel Ödegaard 9 years ago
parent 7b7ba46f12
commit 7c10af012e
1 changed files with 120 additions and 187 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 307
      public/app/plugins/panel/singlestat/editor.html

307
public/app/plugins/panel/singlestat/editor.html
Unescape View File

@ -1,192 +1,125 @@
<div class="editor-row">
<div class="section gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-6"><strong>Big value</strong></label>
</div>
<div class="gf-form max-width-11">
<label class="gf-form-label width-4">Prefix</label>
<input type="text" class="gf-form-input" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-4">Value</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.valueName"
ng-options="f for f in ctrl.valueNameOptions"
ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form max-width-12">
<label class="gf-form-label width-5">Postfix</label>
<input type="text" class="gf-form-input last" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-6"><strong>Font size</strong></label>
</div>
<div class="gf-form max-width-11">
<label class="gf-form-label width-4">Prefix</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.prefixFontSize"
ng-options="f for f in ctrl.fontSizes"
ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-4">Value</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input"
ng-model="ctrl.panel.valueFontSize"
ng-options="f for f in ctrl.fontSizes"
ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form max-width-12">
<label class="gf-form-label width-5">Postfix</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="input-small gf-form-input last"
ng-model="ctrl.panel.postfixFontSize"
ng-options="f for f in ctrl.fontSizes"
ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-6"><strong>Unit</strong></label>
</div>
<div class="gf-form max-width-15">
<div class="gf-form-dropdown-typeahead max-width-19"
ng-model="ctrl.panel.format"
dropdown-typeahead2="ctrl.unitFormats"
dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
</div>
</div>
<div class="gf-form max-width-11">
<label class="gf-form-label width-6">Decimals</label>
<input type="number" class="gf-form-input"
placeholder="auto" data-placement="right"
bs-tooltip="'Override automatic decimal precision for legend and tooltips'"
ng-model="ctrl.panel.decimals"
ng-change="ctrl.refresh()"
ng-model-onblur>
</div>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Value</h5>
<div class="editor-row">
<h5 class="section-heading">Coloring</h5>
<div class="section gf-form-group">
<div class="gf-form-inline">
<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>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-21">
<label class="gf-form-label width-8">Thresholds
<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
</label>
<input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Colors</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
</span>
<div class="gf-form-button">
<button class="btn btn-inverse" ng-click="ctrl.invertColorOrder()">
invert order
</button>
</div>
</div>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-4">Stat</label>
<div class="gf-form-select-wrapper width-7">
<select class="gf-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ctrl.valueNameOptions" ng-change="ctrl.render()"></select>
</div>
<label class="gf-form-label width-6">Font size</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
</div>
</div>
</div>
<div class="editor-row">
<h5 class="section-heading">Spark lines</h5>
<div class="section gf-form-group">
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label-class="width-4"
label="Show"
checked="ctrl.panel.sparkline.show"
on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-10"
label="Background mode"
checked="ctrl.panel.sparkline.full"
on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-6">Line Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
</span>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">Fill Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
</span>
</div>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-4">Prefix</label>
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label>
<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()"></select>
</div>
</div>
</div>
<div class="editor-row">
<h5 class="section-heading">Gauge</h5>
<div class="section gf-form-group">
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label-class="width-4"
label="Show"
checked="ctrl.panel.gauge.show"
on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form max-width-11">
<label class="gf-form-label width-4">Min</label>
<input type="number" class="gf-form-input"
placeholder="0" data-placement="right"
ng-model="ctrl.panel.gauge.minValue"
ng-change="ctrl.refresh()"
ng-model-onblur>
</div>
<div class="gf-form max-width-11">
<label class="gf-form-label width-4">Max</label>
<input type="number" class="gf-form-input"
placeholder="0" data-placement="right"
ng-model="ctrl.panel.gauge.maxValue"
ng-change="ctrl.refresh()"
ng-model-onblur>
</div>
<div class="gf-form" ng-show="ctrl.invalidGaugeRange">
<label class="gf-form-label alert-state-critical">
&nbsp; <i class="fa fa-warning"></i>
Min value is bigger than max.
</label>
</div>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form" label-class="width-10"
label="Threshold labels"
checked="ctrl.panel.gauge.thresholdLabels"
on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-11"
label="Threshold markers"
checked="ctrl.panel.gauge.thresholdMarkers"
on-change="ctrl.render()"></gf-form-switch>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-4">Postfix</label>
<input type="text" class="gf-form-input width-7" ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
<label class="gf-form-label width-6">Font size</label>
<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()"></select>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Unit</h5>
<div class="gf-form-inline">
<div class="gf-form">
<div class="gf-form-dropdown-typeahead" ng-model="ctrl.panel.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)"></div>
</div>
<div class="gf-form">
<label class="gf-form-label">Decimals</label>
<input type="number" class="gf-form-input width-5" placeholder="auto" data-placement="right" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" ng-model="ctrl.panel.decimals" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Coloring</h5>
<div class="gf-form-inline">
<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>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-21">
<label class="gf-form-label width-8">Thresholds
<tip>Define two threshold values&lt;br /&gt; 50,80 will produce: &lt;50 = Green, 50:80 = Yellow, &gt;80 = Red</tip>
</label>
<input type="text" class="gf-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Colors</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
</span>
<span class="gf-form-label">
<a ng-click="ctrl.invertColorOrder()">
Invert
</a>
</span>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Spark lines</h5>
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.sparkline.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="ctrl.panel.sparkline.show">
<gf-form-switch class="gf-form" label-class="width-9" label="Background mode" checked="ctrl.panel.sparkline.full" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-9">Line Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
</span>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Fill Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
</span>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Gauge</h5>
<gf-form-switch class="gf-form" label-class="width-9" label="Show" checked="ctrl.panel.gauge.show" on-change="ctrl.render()"></gf-form-switch>
<div ng-if="ctrl.panel.gauge.show">
<div class="gf-form">
<label class="gf-form-label width-9">Min</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.minValue" ng-change="ctrl.refresh()" ng-model-onblur>
<label class="gf-form-label alert-state-critical" ng-show="ctrl.invalidGaugeRange">
&nbsp; <i class="fa fa-warning"></i>
Min value is bigger than max.
</label>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Max</label>
<input type="number" class="gf-form-input width-6" placeholder="0" data-placement="right" ng-model="ctrl.panel.gauge.maxValue" ng-change="ctrl.refresh()" ng-model-onblur>
</div>
<gf-form-switch class="gf-form" label-class="width-9" label="Threshold labels" checked="ctrl.panel.gauge.thresholdLabels" on-change="ctrl.render()"></gf-form-switch>
<gf-form-switch class="gf-form" label-class="width-9" label="Threshold markers" checked="ctrl.panel.gauge.thresholdMarkers" on-change="ctrl.render()"></gf-form-switch>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save