IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 04:04:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(templating): updates to template variable forms

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-03-01 19:12:54 +01:00
parent 56bef637bd
commit 57315f1e27
4 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
public/app/features/templating/partials/editor.html
View File

@ -12,7 +12,7 @@
</li>
<li class="gf-tabs-item" ng-show="mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
{{current.name}}
Edit
</a>
</li>
<li class="gf-tabs-item" ng-show="mode === 'new'">
@ -108,35 +108,35 @@
<h5 class="section-heading">Value Options</h5>
<div ng-show="current.type === 'interval'" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-7">Values</span>
<input type="text" class="gf-form-input max-width-28" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
<span class="gf-form-label width-9">Values</span>
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
</div>
<div class="gf-form">
<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
<span class="gf-form-label" ng-show="current.auto">
Auto interval steps <tip>How many times should the current time range be divided to calculate the value</tip>
</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.auto">
<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select>
<span class="gf-form-label width-9">Auto option</span>
<editor-checkbox text="Enable" model="current.auto" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9" ng-show="current.auto">
Auto steps <tip>How many times should the current time range be divided to calculate the value</tip>
</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.auto">
<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label" ng-show="current.auto">
Min interval <tip>The calculated value will not go below this threshold</tip>
</span>
<input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label" ng-show="current.auto">
Auto interval min value <tip>The calculated value will not go below this threshold</tip>
</span>
<input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()"></input>
</div>
</div>
<div ng-show="current.type === 'custom'" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-13">Values seperated by comma</span>
<input type="text" class="gf-form-input max-width-22" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
<div class="gf-form ">
<span class="gf-form-label width-13">Include All option</span>
<input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.customAllValue' placeholder="auto"></input>
<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
</div>
@ -152,11 +152,6 @@
</span>
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">All value</span>
<input type="text" class="gf-form-input max-width-15" ng-show="current.includeAll" ng-model='current.customAllValue' placeholder="auto"></input>
<editor-checkbox class="width-13" text="Enable" model="current.includeAll" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Update</span>
<editor-checkbox text="On Dashboard Load" model="current.refresh"></editor-checkbox>
@ -165,13 +160,19 @@
</div>
<div class="gf-form-group" >
<h5 class="section-heading">Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<h5 class="section-heading">Selection Options</h5>
<div class="gf-form">
<span class="gf-form-label width-10">Multi-value</span>
<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
<span class="gf-form-label" ng-show="current.multi">Multi format</span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
</div>
<tip>Enables multiple values to be selected at the same time</tip>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Include All option</span>
<editor-checkbox class="width-13" text="Enable" model="current.includeAll" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form" ng-if="current.includeAll">
<span class="gf-form-label width-10">Custom all value</span>
<input type="text" class="gf-form-input max-width-15" g-model='current.allValue' placeholder="blank = auto"></input>
</div>
</div>

6
public/app/features/templating/templateSrv.js
View File

@ -107,7 +107,11 @@ function (angular, _) {
if (variable.allValue) {
return variable.allValue;
}
return _.pluck(variable.options, 'value');
var values = [];
for (var i = 1; i < variable.options.length; i++) {
values.push(variable.options[i].value);
}
return values;
};
this.replace = function(target, scopedVars, format) {

4
public/app/plugins/datasource/opentsdb/datasource.js
View File

@ -335,7 +335,7 @@ function (angular, _, dateMath) {
query.tags = angular.copy(target.tags);
if(query.tags){
for(var key in query.tags){
query.tags[key] = templateSrv.replace(query.tags[key], options.scopedVars);
query.tags[key] = templateSrv.replace(query.tags[key], options.scopedVars, 'pipe');
}
}
}
@ -355,7 +355,7 @@ function (angular, _, dateMath) {
} else {
return target.metric === metricData.metric &&
_.all(target.tags, function(tagV, tagK) {
interpolatedTagValue = templateSrv.replace(tagV, options.scopedVars);
interpolatedTagValue = templateSrv.replace(tagV, options.scopedVars, 'pipe');
return metricData.tags[tagK] === interpolatedTagValue || interpolatedTagValue === "*";
});
}

2
public/test/specs/templateSrv-specs.js
View File

@ -72,7 +72,7 @@ define([
name: 'test',
current: {value: '$__all' },
options: [
{value: 'value1'}, {value: 'value2'}
{value: '$__all'}, {value: 'value1'}, {value: 'value2'}
]
}]);
});