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

Templating: updated template editor view & form

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-05-05 10:56:39 +02:00
parent c628ac9bbb
commit e458ca7b47
5 changed files with 200 additions and 99 deletions

275
public/app/partials/templating_editor.html
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>
<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>
<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>
</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>
<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>
<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}}
<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="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="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>
<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="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="clearfix"></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">
<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>
</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
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
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
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
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',