feat(templating): updates to template variable forms

public/app/features/templating/partials/editor.html

@@ -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>
-					</div>
+					<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">
-					<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 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>
 
 			<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>
 

public/app/features/templating/templateSrv.js

@@ -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) {

public/app/plugins/datasource/opentsdb/datasource.js

@@ -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 === "*";
             });
           }

public/test/specs/templateSrv-specs.js

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