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

Templating: updated template editor view & form

Browse Source
pull/1946/head
Torkel Ödegaard 10 years ago
parent c628ac9bbb
commit e458ca7b47
5 changed files with 192 additions and 91 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. 259
      public/app/partials/templating_editor.html
  2. 6
      public/css/less/forms.less
  3. 14
      public/css/less/tightform.less
  4. 2
      public/css/less/variables.dark.less
  5. 2
      public/test/test-main.js

259
public/app/partials/templating_editor.html
Unescape View File

@ -57,118 +57,207 @@
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="section">
<h5>General</h5>
<div class="editor-row">
<div class="editor-option">
<label class="small">Variable name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-small" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.type === 'query'">
<label class="small">Datasource</label>
<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<div class="tight-form-section">
<h5>Variable</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Name
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" placeholder="name" ng-model='current.name'></input>
</li>
<li class="tight-form-item">
Type
</li>
<li>
<select class="input-small tight-form-input" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</li>
<li class="tight-form-item" ng-show="current.type === 'query'">
Data source
</li>
<li ng-show="current.type === 'query'">
<select class="input input-medium tight-form-input last" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section">
<h5>Value Options</h5>
<div ng-show="current.type === 'interval'">
<div class="editor-row">
<div class="editor-option">
<label class="small">Values</label>
<input type="text" class="input-large" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
</div>
<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.auto">
<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
Values
</li>
<li>
<input type="text" style="width: 345px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
Include auto interval &nbsp;
<input class="cr1" id="current.auto" type="checkbox" ng-model="current.auto" ng-checked="current.auto" ng-change="runQuery()">
<label for="current.auto" class="cr1"></label>
</li>
<li class="tight-form-item" ng-show="current.auto">
Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip>
</li>
<li>
<select class="input-mini tight-form-input last" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div ng-show="current.type === 'custom'">
<div class="editor-row">
<div class="editor-option">
<label class="small">Values seperated by comma</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 180px">
Values seperated by comma
</li>
<li>
<input type="text" class="input tight-form-input last" style="width: 325px;" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div ng-show="current.type === 'query'">
<h5>Values Query</h5>
<div class="editor-row">
<div class="editor-option form-inline">
<label class="small">Variable values query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Query
</li>
<li>
<input type="text" style="width: 646px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="apps.servers.*" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Regex
<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
</li>
<li>
<input type="text" style="width: 646px" class="input tight-form-input last" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="editor-row" style="margin: 15px 0">
<div class="editor-option form-inline">
<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
All value &nbsp;
<input class="cr1" id="current.includeAll" type="checkbox" ng-model="current.includeAll" ng-checked="current.includeAll" ng-change="runQuery()">
<label for="current.includeAll" class="cr1"></label>
</li>
<li ng-show="current.includeAll">
<input type="text" class="input-xlarge tight-form-input" style="width:422px" ng-model='current.options[0].value'></input>
</li>
<li class="tight-form-item" ng-show="current.includeAll">
All format
</li>
<li ng-show="current.includeAll">
<select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="editor-row" style="margin: 15px 0">
<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
model="current.refresh"></editor-opt-bool>
<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All format</label>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All value</label>
<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Refresh on load
</li>
<li class="tight-form-item">
<input class="cr1" id="current.refresh" type="checkbox" ng-model="current.refresh" ng-checked="current.refresh">
<label for="current.refresh" class="cr1"></label>
<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section">
<h5>Display options</h5>
<div class="editor-option">
<label class="small">Variable label</label>
<input type="text" class="input-medium" ng-model='current.label' placeholder=""></input>
</div>
<editor-opt-bool text="Hide Label" model="current.hideLabel"></editor-opt-bool>
<div class="editor-row">
<div class="tight-form-section" ng-hide="current.type === 'interval'">
<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item last" style="width: 100px;">
Enable &nbsp;
<input class="cr1" id="current.multi" type="checkbox" ng-model="current.multi" ng-checked="current.multi" ng-change="runQuery()">
<label for="current.multi" class="cr1"></label>
</li>
<li class="tight-form-item" ng-show="current.multi">
Multi format
</li>
<li ng-show="current.multi">
<select class="input-small tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="section">
<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<editor-opt-bool text="Enable" model="current.multi"></editor-opt-bool>
<div class="editor-option" ng-show="current.multi">
<label class="small">Multi value format</label>
<select class="input-medium" ng-model="current.multiFormat" ng-options="f for f in ['glob', 'regex values']"></select>
</div>
<div class="tight-form-section">
<h5>Display options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Variable Label
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model='current.label' placeholder=""></input>
</li>
<li class="tight-form-item last">
Hide label &nbsp;
<input class="cr1" id="current.hideLabel" type="checkbox" ng-model="current.hideLabel" ng-checked="current.hideLabel" change="runQuery()">
<label for="current.hideLabel" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<div class="editor-option" >
<label class="small">Variable values (shows max 20)</label>
<ul class="grafana-options-list">
<li ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
</div>
<div class="editor-row">
<div class="tight-form-section">
<h5>Preview of values (shows max 20)</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success pull-right" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-right" ng-show="editor.index === 1" ng-click="add();">Add</button>
<div class="clearfix"></div>
<div class="editor-row" style="margin-top: 20px">
<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
</div>
</div>
</div>

6
public/css/less/forms.less
Unescape View File

@ -18,10 +18,12 @@ input[type="checkbox"].cr1 {
label.cr1 {
display: inline-block;
height: 19px;
height: 18px;
position: relative;
top: -2px;
clear: none;
text-indent: 2px;
margin: 0 0 1px 0;
margin: 0 0 0px 0;
padding: 0 0 0 20px;
vertical-align:middle;
background: url(@checkboxImageUrl) left top no-repeat;

14
public/css/less/tightform.less
Unescape View File

@ -3,7 +3,6 @@
border-left: 1px solid @grafanaTargetBorder;
border-right: 1px solid @grafanaTargetBorder;
background: @grafanaTargetBackground;
width: 100%;
&:last-child, &.last {
border-bottom: 1px solid @grafanaTargetBorder;
@ -44,7 +43,7 @@
}
.tight-form-btn {
padding: 8px 12px;
padding: 7px 12px;
}
.tight-form-list {
@ -206,3 +205,14 @@ select.tight-form-input {
display: inline;
}
}
.tight-form-section {
margin-bottom: 20px;
margin-right: 40px;
vertical-align: top;
display: inline-block;
.tight-form {
margin-left: 20px;
}
}

2
public/css/less/variables.dark.less
Unescape View File

@ -70,7 +70,7 @@
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: @white; // empty to use BS default, @textColor
@headingsColor: @textColor; // empty to use BS default, @textColor
@inputText: @black;

2
public/test/test-main.js
Unescape View File

@ -29,7 +29,7 @@ require.config({
crypto: '../vendor/crypto.min',
spectrum: '../vendor/spectrum',
jquery: '../vendor/jquery/jquery-2.1.1.min',
jquery: '../vendor/jquery/jquery-2.1.3',
bootstrap: '../vendor/bootstrap/bootstrap',
'bootstrap-tagsinput': '../vendor/tagsinput/bootstrap-tagsinput',

Write Preview
Loading…
Cancel
Save