Skip to content

N
nexpie-grafana-theme
Commit becdaafd by Torkel Ödegaard
Options

Refactored away the graphite-target-inner / tight-form-row

parent 72d7a7d9
Showing with 612 additions and 642 deletions
src/app/features/graphite/funcEditor.js
......@@ -126,7 +126,7 @@ function (angular, _, $) {
}
function toggleFuncControls() {
var targetDiv = elem.closest('.tight-form-row');
var targetDiv = elem.closest('.tight-form');
if (elem.hasClass('show-function-controls')) {
elem.removeClass('show-function-controls');
......
src/app/features/graphite/partials/query.editor.html
......@@ -5,8 +5,6 @@
ng-class="{'tight-form-disabled': target.hide}"
ng-controller="GraphiteQueryCtrl"
ng-init="init()">
<div class="tight-form-row">
<ul class="tight-form-list pull-right">
<li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
......@@ -86,80 +84,75 @@
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<section class="grafana-metric-options">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i>
</li>
<li class="tight-form-item">
Cache timeout
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="panel.cacheTimeout"
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
data-placement="right"
spellcheck='false'
placeholder="60">
</li>
<li class="tight-form-item">
Max data points
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="panel.maxDataPoints"
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
data-placement="right"
ng-model-onblur ng-change="get_data()"
spellcheck='false'
placeholder="auto">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
shorter legend names
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
series as parameters
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
templating
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
max data points
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i>
</li>
<li class="tight-form-item">
Cache timeout
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="panel.cacheTimeout"
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
data-placement="right"
spellcheck='false'
placeholder="60">
</li>
<li class="tight-form-item">
Max data points
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="panel.maxDataPoints"
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
data-placement="right"
ng-model-onblur ng-change="get_data()"
spellcheck='false'
placeholder="auto">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
shorter legend names
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
series as parameters
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
templating
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
max data points
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</section>
<div class="editor-row">
......
src/app/features/influxdb/partials/query.editor.html
<div class="editor-row">
<div ng-repeat="target in panel.targets"
class="tight-form"
ng-class="{'tight-form-disabled': target.hide}"
ng-controller="InfluxQueryCtrl"
ng-init="init()">
<div class="tight-form-row">
<div ng-repeat="target in panel.targets" ng-controller="InfluxQueryCtrl" ng-init="init()" ng-class="{'tight-form-disabled': target.hide}" class="tight-form-container">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<div class="dropdown">
......@@ -35,41 +30,41 @@
<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
<i class="fa fa-eye"></i>
</a>
</li>
</ul>
</li>
</ul>
<!-- Raw Query mode -->
<ul class="tight-form-list" ng-show="target.rawQuery">
<li>
<input type="text"
class="tight-form-input span10"
ng-model="target.query"
placeholder="select ..."
focus-me="target.rawQuery"
spellcheck='false'
data-min-length=0 data-items=100
ng-model-onblur
ng-blur="get_data()">
class="tight-form-input span10"
ng-model="target.query"
placeholder="select ..."
focus-me="target.rawQuery"
spellcheck='false'
data-min-length=0 data-items=100
ng-model-onblur
ng-blur="get_data()">
</li>
</ul>
<!-- Query editor mode -->
<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<li class="tight-form-item">
series
</li>
<li>
<input type="text"
class="tight-form-input span8"
ng-model="target.series"
spellcheck='false'
bs-typeahead="listSeries"
match-all="true"
min-length="3"
placeholder="series name"
data-min-length=0 data-items=100
ng-blur="seriesBlur()">
</li>
<li>
<input type="text"
class="tight-form-input span8"
ng-model="target.series"
spellcheck='false'
bs-typeahead="listSeries"
match-all="true"
min-length="3"
placeholder="series name"
data-min-length=0 data-items=100
ng-blur="seriesBlur()">
</li>
<li class="tight-form-item">
alias
......@@ -80,41 +75,41 @@
spellcheck='false' placeholder="alias" ng-blur="get_data()">
</li>
</ul>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<div class="tight-form">
<!-- Raw Query mode -->
<ul class="tight-form-list" ng-show="target.rawQuery">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item">
alias
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
alias
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.alias"
spellcheck='false'
placeholder="alias"
ng-blur="get_data()">
</li>
<li class="tight-form-item">
group by time
</li>
<li>
<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
</li>
</ul>
<!-- Query editor mode -->
<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
......@@ -131,7 +126,7 @@
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model="target.condition"
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
</li>
<li class="tight-form-item">
......@@ -139,9 +134,9 @@
</li>
<li>
<input type="text" class="input-mini tight-form-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" >
</li>
<li class="tight-form-item">
......@@ -150,7 +145,7 @@
<li>
<input type="text" class="input-small tight-form-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
</li>
<li class="dropdown">
......@@ -161,65 +156,61 @@
<span ng-show="!target.fill">
no fill
</span>
</a>
</a>
<ul class="dropdown-menu">
<li><a ng-click="target.fill = ''">no fill</a></li>
<li><a ng-click="target.fill = 'null'">fill (null)</a></li>
<li><a ng-click="target.fill = '0'">fill (0)</a></li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<section class="grafana-metric-options">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i>
</li>
<li class="tight-form-item">
group by time
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
spellcheck='false' placeholder="example: >10s">
</li>
<li class="tight-form-item">
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i>
</li>
<li class="tight-form-item">
group by time
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
spellcheck='false' placeholder="example: >10s">
</li>
<li class="tight-form-item">
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
alias patterns
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking &amp; and fill
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
group by time
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
alias patterns
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking &amp; and fill
</a>
</li>
<li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
group by time
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</section>
......
src/app/features/opentsdb/partials/query.editor.html
<div class="editor-row" style="margin-top: 10px;">
<div ng-repeat="target in panel.targets"
class="tight-form"
class="tight-form-container"
ng-class="{'tight-form-disabled': target.hide}"
ng-controller="OpenTSDBQueryCtrl"
ng-init="init()">
<div class="tight-form-row">
<div class="tight-form">
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<div class="dropdown">
......@@ -134,7 +136,7 @@
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
......@@ -209,7 +211,6 @@
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
......
src/app/features/panellinkeditor/module.html
......@@ -3,44 +3,42 @@
<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
<div class="tight-form" ng-repeat="link in panel.links"j>
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
<li class="tight-form-item">title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
<li class="tight-form-item">title</li>
<li>
<input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li>
<li class="tight-form-item">type</li>
<li>
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li>
<li class="tight-form-item">type</li>
<li>
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text"
ng-model="link.dashboard"
bs-typeahead="searchDashboards"
class="input-large tight-form-input">
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text"
ng-model="link.dashboard"
bs-typeahead="searchDashboards"
class="input-large tight-form-input">
</li>
<li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
<li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-large tight-form-input">
</li>
<li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
<li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-large tight-form-input">
</li>
<li class="tight-form-item">params
<tip>Use var-variableName=value to pass templating variables.</tip>
</li>
<li>
<input type="text" ng-model="link.params" class="input-medium tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
<li class="tight-form-item">params
<tip>Use var-variableName=value to pass templating variables.</tip>
</li>
<li>
<input type="text" ng-model="link.params" class="input-medium tight-form-input">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
......
src/app/panels/graph/axisEditor.html
......@@ -2,144 +2,140 @@
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Left Y</strong>
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown" style="width: 130px;"
ng-model="panel.y_formats[0]"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
</li>
<li class="tight-form-item">
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMax"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMin"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Right Y</strong>
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown" style="width: 130px"
ng-model="panel.y_formats[1]"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
</li>
<li class="tight-form-item">
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMax"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMin"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Left Y</strong>
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown" style="width: 130px;"
ng-model="panel.y_formats[0]"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
</li>
<li class="tight-form-item">
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMax"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.leftMin"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Right Y</strong>
</li>
<li class="tight-form-item">
Unit
</li>
<li class="dropdown" style="width: 130px"
ng-model="panel.y_formats[1]"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
</li>
<li class="tight-form-item">
&nbsp;&nbsp; Grid Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMax"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="panel.grid.rightMin"
ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Show Axis</strong>
</li>
<li class="tight-form-item">
X-Axis&nbsp;
<input class="cr1" id="hideXAxis" type="checkbox"
ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
<label for="hideXAxis" class="cr1"></label>
</li>
<li class="tight-form-item last">
Y-Axis&nbsp;
<input class="cr1" id="hideYAxis" type="checkbox"
ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
<label for="hideYAxis" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Thresholds</strong>
</li>
<li class="tight-form-item">
Level 1
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Level 2
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item last">
Line mode&nbsp;
<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
<label for="panel.grid.thresholdLine" class="cr1"></label>
<li class="tight-form-item" style="width: 80px">
<strong>Show Axis</strong>
</li>
<li class="tight-form-item">
X-Axis&nbsp;
<input class="cr1" id="hideXAxis" type="checkbox"
ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
<label for="hideXAxis" class="cr1"></label>
</li>
<li class="tight-form-item last">
Y-Axis&nbsp;
<input class="cr1" id="hideYAxis" type="checkbox"
ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
<label for="hideYAxis" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Thresholds</strong>
</li>
<li class="tight-form-item">
Level 1
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Level 2
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item last">
Line mode&nbsp;
<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
<label for="panel.grid.thresholdLine" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
......@@ -147,80 +143,76 @@
<div class="editor-row">
<div class="section">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Legend</strong>
</li>
<li class="tight-form-item">
Show&nbsp;
<input class="cr1" id="panel.legend.show" type="checkbox"
ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
<label for="panel.legend.show" class="cr1"></label>
</li>
<li class="tight-form-item">
Table&nbsp;
<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
<label for="panel.legend.alignAsTable" class="cr1"></label>
</li>
<li class="tight-form-item">
Right side&nbsp;
<input class="cr1" id="panel.legend.rightSide" type="checkbox"
ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
<label for="panel.legend.rightSide" class="cr1"></label>
</li>
<li class="tight-form-item last">
<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
<label for="panel.legend.hideEmpty" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Legend</strong>
</li>
<li class="tight-form-item">
Show&nbsp;
<input class="cr1" id="panel.legend.show" type="checkbox"
ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
<label for="panel.legend.show" class="cr1"></label>
</li>
<li class="tight-form-item">
Table&nbsp;
<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
<label for="panel.legend.alignAsTable" class="cr1"></label>
</li>
<li class="tight-form-item">
Right side&nbsp;
<input class="cr1" id="panel.legend.rightSide" type="checkbox"
ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
<label for="panel.legend.rightSide" class="cr1"></label>
</li>
<li class="tight-form-item last">
<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
<label for="panel.legend.hideEmpty" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<strong>Legend values</strong>
</li>
<li class="tight-form-item">
Min&nbsp;
<input class="cr1" id="panel.legend.min" type="checkbox"
ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.min" class="cr1"></label>
</li>
<li class="tight-form-item">
Max&nbsp;
<input class="cr1" id="panel.legend.max" type="checkbox"
ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.max" class="cr1"></label>
</li>
<li class="tight-form-item">
Avg&nbsp;
<input class="cr1" id="panel.legend.avg" type="checkbox"
ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.avg" class="cr1"></label>
</li>
<li class="tight-form-item">
Current&nbsp;
<input class="cr1" id="panel.legend.current" type="checkbox"
ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.current" class="cr1"></label>
</li>
<li class="tight-form-item last">
Total&nbsp;
<input class="cr1" id="panel.legend.total" type="checkbox"
ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.total" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<strong>Legend values</strong>
</li>
<li class="tight-form-item">
Min&nbsp;
<input class="cr1" id="panel.legend.min" type="checkbox"
ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.min" class="cr1"></label>
</li>
<li class="tight-form-item">
Max&nbsp;
<input class="cr1" id="panel.legend.max" type="checkbox"
ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.max" class="cr1"></label>
</li>
<li class="tight-form-item">
Avg&nbsp;
<input class="cr1" id="panel.legend.avg" type="checkbox"
ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.avg" class="cr1"></label>
</li>
<li class="tight-form-item">
Current&nbsp;
<input class="cr1" id="panel.legend.current" type="checkbox"
ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.current" class="cr1"></label>
</li>
<li class="tight-form-item last">
Total&nbsp;
<input class="cr1" id="panel.legend.total" type="checkbox"
ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">
<label for="panel.legend.total" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
......
src/app/panels/graph/styleEditor.html
......@@ -67,34 +67,32 @@
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div>
<div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
</li>
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
</li>
<li class="tight-form-item">
alias or regex
</li>
<li>
<input type="text"
ng-model="override.alias"
bs-typeahead="getSeriesNames"
ng-blur="render()"
data-min-length=0 data-items=100
class="input-medium tight-form-input" >
</li>
<li class="tight-form-item" ng-repeat="option in currentOverrides">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
{{option.name}}: {{option.value}}
</li>
<li class="tight-form-item">
alias or regex
</li>
<li>
<input type="text"
ng-model="override.alias"
bs-typeahead="getSeriesNames"
ng-blur="render()"
data-min-length=0 data-items=100
class="input-medium tight-form-input" >
</li>
<li class="tight-form-item" ng-repeat="option in currentOverrides">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
{{option.name}}: {{option.value}}
</li>
<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</li>
<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
</li>
</ul>
<div class="clearfix"></div>
</div>
</ul>
<div class="clearfix"></div>
</div>
</div>
......
src/app/panels/singlestat/editor.html
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Big value</strong>
</li>
<li class="tight-form-item">
Prefix
</li>
<li>
<input type="text" class="input-small tight-form-input"
ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Value
</li>
<li>
<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Postfix
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Font size</strong>
</li>
<li class="tight-form-item">
Prefix
</li>
<li>
<select class="input-small tight-form-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Value
</li>
<li>
<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Postfix
</li>
<li>
<select class="input-small tight-form-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="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" 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>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Big value</strong>
</li>
<li class="tight-form-item">
Prefix
</li>
<li>
<input type="text" class="input-small tight-form-input"
ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
</li>
<li class="tight-form-item">
Value
</li>
<li>
<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Postfix
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Font size</strong>
</li>
<li class="tight-form-item">
Prefix
</li>
<li>
<select class="input-small tight-form-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Value
</li>
<li>
<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li>
<li class="tight-form-item">
Postfix
</li>
<li>
<select class="input-small tight-form-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="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" 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>
......@@ -75,43 +73,41 @@
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Coloring</strong>
</li>
<li class="tight-form-item">
Background&nbsp;
<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="tight-form-item">
Value&nbsp;
<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="tight-form-item">
Thresholds<tip>Comma seperated values</tip>
</li>
<li>
<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
</li>
<li class="tight-form-item">
Colors
</li>
<li class="tight-form-item">
<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="tight-form-item last">
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Coloring</strong>
</li>
<li class="tight-form-item">
Background&nbsp;
<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="tight-form-item">
Value&nbsp;
<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="tight-form-item">
Thresholds<tip>Comma seperated values</tip>
</li>
<li>
<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
</li>
<li class="tight-form-item">
Colors
</li>
<li class="tight-form-item">
<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="tight-form-item last">
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
......@@ -119,38 +115,36 @@
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<div class="tight-form-row">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Spark lines</strong>
</li>
<li class="tight-form-item">
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="tight-form-item">
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="tight-form-item">
Line Color
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Fill Color
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
</li>
</ul>
<div class="clearfix"></div>
</div>
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Spark lines</strong>
</li>
<li class="tight-form-item">
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="tight-form-item">
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="tight-form-item">
Line Color
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Fill Color
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
......@@ -158,33 +152,31 @@
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<div class="tight-form-row">
<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 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 tight-form-input" ng-blur="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="render()">
</li>
<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 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 tight-form-input" ng-blur="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="render()">
</li>
<li>
<a class="pointer tight-form-item" ng-click="addValueMap();">
<i class="fa fa-plus"></i>
</a>
</li>
<li>
<a class="pointer tight-form-item" ng-click="addValueMap();">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
src/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="tight-form">
<div class="tight-form-row" style="border-top: none">
<div class="tight-form" style="border-top: none">
<ul class="tight-form-list">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu">
<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
</ul>
</div>
</li>
</ul>
<ul class="tight-form-list">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu">
<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
</ul>
</div>
</li>
</ul>
<ul class="tight-form-list" ng-if="dashboard.templating.enable">
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable ">
${{variable.name}}:
</span>
</li>
<ul class="tight-form-list" ng-if="dashboard.templating.enable">
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable ">
${{variable.name}}:
</span>
</li>
<li ng-repeat-end template-param-selector>
</li>
</ul>
<li ng-repeat-end template-param-selector>
</li>
</ul>
<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="disableAnnotation(annotation)">
<i class="annotation-color-icon fa fa-bolt"></i>
{{annotation.name}}
</a>
</li>
</ul>
<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="disableAnnotation(annotation)">
<i class="annotation-color-icon fa fa-bolt"></i>
{{annotation.name}}
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
src/css/less/tightform.less
.tight-form {
border-top: 1px solid @grafanaTargetBorder;
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
// old graphite-target
.tight-form:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
.dropdown {
padding: 0; margin: 0;
}
&:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
}
}
// old graphite-target-inner
.tight-form-row {
border-top: 1px solid @grafanaTargetBorder;
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
.tight-form-container {
.tight-form:last-child {
border-bottom: none;
}
&:last-child {
border-bottom: 1px solid @grafanaTargetBorder;
}
}
// old graphite-segment-list
......
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