new template system is starting to work 100%, not all features are in, like regex selection, influxdb support, and other stuff

src/app/controllers/templateEditorCtrl.js

@@ -15,6 +15,8 @@ function (angular, _) {
       refresh_on_load: false,
       name: '',
       options: [],
+      includeAll: false,
+      allFormat: 'Glob',
     };
 
     $scope.init = function() {
@@ -23,13 +25,6 @@ function (angular, _) {
       $scope.variables = templateSrv.variables;
       $scope.reset();
 
-      _.each($scope.variables, function(variable) {
-        if (variable.datasource === void 0) {
-          variable.datasource = null;
-          variable.type = 'query';
-        }
-      });
-
       $scope.$watch('editor.index', function(index) {
         if ($scope.currentIsNew === false && index === 1) {
           $scope.reset();
@@ -50,6 +45,12 @@ function (angular, _) {
       $scope.current = variable;
       $scope.currentIsNew = false;
       $scope.editor.index = 2;
+
+      if ($scope.current.datasource === void 0) {
+        $scope.current.datasource = null;
+        $scope.current.type = 'query';
+        $scope.current.allFormat = 'Glob';
+      }
     };
 
     $scope.update = function() {

src/app/partials/templating_editor.html

@@ -49,57 +49,77 @@
 		</div>
 
 		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
-			<div class="editor-row">
+			<div class="row">
 				<div class="editor-option">
-					<label class="small">Variable name</label>
-					<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
-				</div>
-				<div class="editor-option">
-					<label class="small">Type</label>
-					<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" ng-change="typeChanged()"></select>
-				</div>
-				<div class="editor-option" ng-show="current.type === 'query'">
-					<label class="small">Datasource</label>
-					<select ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
-				</div>
-				<div class="editor-option text-center" ng-show="current.type === 'query'">
-					<label class="small">Refresh on load <tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time.</tip></label>
-					<input type="checkbox" ng-model="current.refresh" ng-checked="refresh">
-				</div>
-			</div>
-
-			<div ng-show="current.type === 'time period'">
-				<div class="editor-option">
-					<label class="small">Values</label>
-					<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
-				</div>
-			</div>
+					<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"></input>
+						</div>
+						<div class="editor-option">
+							<label class="small">Type</label>
+							<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" 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="editor-option text-center" ng-show="current.type === 'query'">
+							<label class="small">Refresh on load <tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time.</tip></label>
+							<input type="checkbox" ng-model="current.refresh" ng-checked="current.refresh">
+						</div>
+					</div>
 
-			<div ng-show="current.type === 'query'">
-				<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="icon-play"></i></button>
+					<div ng-show="current.type === 'time period'">
+						<div class="editor-option">
+							<label class="small">Values</label>
+							<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
+						</div>
 					</div>
-				</div>
 
-				<div class="editor-row" style="margin-top: 10px;">
-					<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="icon-play"></i></button>
+					<div ng-show="current.type === 'query'">
+						<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="icon-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="icon-play"></i></button>
+							</div>
+						</div>
+
+						<div class="editor-row" style="margin: 15px 0">
+							<div class="editor-option text-center">
+								<label class="small">All option</label>
+								<input type="checkbox" ng-model="current.includeAll" ng-checked="current.includeAll" ng-change="runQuery()">
+							</div>
+							<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 all values', 'comma list', 'custom']" ng-change="typeChanged()"></select>
+							</div>
+							<div class="editor-option" ng-show="current.includeAll">
+								<label class="small">All value</label>
+								<input type="text" class="input-xlarge" ng-disabled="true" ng-model='current.options[0].value'></input>
+							</div>
+						</div>
 					</div>
 				</div>
-
-				<div class="editor-row" style="margin-top: 10px;">
-					<div class="editor-option form-inline">
-						<label class="small">Variable values</label>
-						<ul>
-							<li ng-repeat="option in current.options">
-								{{option.text}}
-							</li>
-						</ul>
+				<div class="editor-option">
+					<div class="editor-row">
+						<div class="editor-option" >
+							<label class="small">Variable values (first 20)</label>
+							<ul class="grafana-options-list">
+								<li ng-repeat="option in current.options | limitTo: 20">
+									{{option.text}}
+								</li>
+							</ul>
+					 	</div>
 					</div>
 				</div>
 			</div>

src/app/services/dashboard/dashboardSrv.js

@@ -116,11 +116,12 @@ function (angular, $, kbn, _, moment) {
     };
 
     p.updateSchema = function(old) {
+      var i, j, k;
       var oldVersion = this.version;
       var panelUpgrades = [];
-      this.version = 5;
+      this.version = 6;
 
-      if (oldVersion === 5) {
+      if (oldVersion === 6) {
         return;
       }
 
@@ -195,7 +196,7 @@ function (angular, $, kbn, _, moment) {
         });
       }
 
-      if (oldVersion < 5) {
+      if (oldVersion < 6) {
         // move pulldowns to new schema
         var filtering = _.findWhere(old.pulldowns, { type: 'filtering' });
         var annotations = _.findWhere(old.pulldowns, { type: 'annotations' });
@@ -208,16 +209,24 @@ function (angular, $, kbn, _, moment) {
             enable: annotations.enable
           };
         }
+
+        // update template variables
+        for (i = 0 ; i < this.templating.list.length; i++) {
+          var variable = this.templating.list[i];
+          if (variable.datasource === void 0) { variable.datasource = null; }
+          if (variable.type === void 0) { variable.type = 'query'; }
+          if (variable.allFormat === void 0) { variable.allFormat = 'Glob'; }
+        }
       }
 
       if (panelUpgrades.length === 0) {
         return;
       }
 
-      for (var i = 0; i < this.rows.length; i++) {
+      for (i = 0; i < this.rows.length; i++) {
         var row = this.rows[i];
-        for (var j = 0; j < row.panels.length; j++) {
-          for (var k = 0; k < panelUpgrades.length; k++) {
+        for (j = 0; j < row.panels.length; j++) {
+          for (k = 0; k < panelUpgrades.length; k++) {
             panelUpgrades[k](row.panels[j]);
           }
         }

src/app/services/templateValuesSrv.js

@@ -68,12 +68,7 @@ function (angular, _) {
           });
 
           if (variable.includeAll) {
-            var allExpr = '{';
-            _.each(variable.options, function(option) {
-              allExpr += option.text + ',';
-            });
-            allExpr = allExpr.substring(0, allExpr.length - 1) + '}';
-            variable.options.unshift({text: 'All', value: allExpr});
+            self.addAllOption(variable);
           }
 
           // if parameter has current value
@@ -89,6 +84,26 @@ function (angular, _) {
         });
     };
 
+    this.addAllOption = function(variable) {
+      var allValue = '';
+      switch(variable.allFormat) {
+      case 'wildcard':
+        allValue = '*';
+        break;
+      case 'regex wildcard':
+        allValue = '.*';
+        break;
+      default:
+        allValue = '{';
+        _.each(variable.options, function(option) {
+          allValue += option.text + ',';
+        });
+        allValue = allValue.substring(0, allValue.length - 1) + '}';
+      }
+
+      variable.options.unshift({text: 'All', value: allValue});
+    };
+
   });
 
 });

src/css/less/tables_lists.less

@@ -24,11 +24,32 @@
   td:last-child {
     border-right: 1px solid @grafanaListBorderBottom;
   }
+}
 
-  .max-width {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-    white-space: nowrap;
+.max-width {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.grafana-options-list {
+  list-style: none;
+  margin: 0;
+  max-width: 450px;
+
+  li:nth-child(odd) {
+    background-color: lighten(@grayDarker, 2%);
+  }
+
+  li {
+    float: left;
+    margin: 2px;
+    padding: 5px 10px;
+    border: 1px solid @grafanaListBorderBottom;
+    border: 1px solid @grafanaListBorderBottom;
+  }
+  li:first-child {
+    border: 1px solid @grafanaListBorderBottom;
   }
 }

src/test/specs/dashboardSrv-specs.js

@@ -156,9 +156,8 @@ define([
       expect(model.annotations.list[0].name).to.be('old');
     });
 
-
     it('dashboard schema version should be set to latest', function() {
-      expect(model.version).to.be(5);
+      expect(model.version).to.be(6);
     });
 
   });