feat(templating): progress on templating rethink

public/app/core/directives/value_select_dropdown.js

@@ -179,6 +179,10 @@ function (angular, _, coreModule) {
       vm.variable.current.text = _.pluck(vm.selectedValues, 'text').join(' + ');
       vm.variable.current.text = _.pluck(vm.selectedValues, 'text').join(' + ');
       vm.variable.current.tags = vm.selectedTags;
       vm.variable.current.tags = vm.selectedTags;
 
 
+      if (!vm.variable.multi) {
+        vm.variable.current.value = vm.selectedValues[0].value;
+      }
+
       if (commitChange) {
       if (commitChange) {
         vm.commitChanges();
         vm.commitChanges();
       }
       }

public/app/features/dashboard/partials/import.html

@@ -15,26 +15,24 @@
 			</form>
 			</form>
 	</div>
 	</div>
 
 
-	<h5 class="page-heading">
+	<h5 class="section-heading">
 		Migrate dashboards
 		Migrate dashboards
 		<em style="font-size: 14px;padding-left: 10px;"><i class="fa fa-info-circle"></i> Import dashboards from Elasticsearch or InfluxDB</em>
 		<em style="font-size: 14px;padding-left: 10px;"><i class="fa fa-info-circle"></i> Import dashboards from Elasticsearch or InfluxDB</em>
 	</h5>
 	</h5>
 
 
-	<div class="gf-form-group last">
+	<div class="gf-form-inline gf-form-group">
 		<div class="gf-form">
 		<div class="gf-form">
 			<div class="gf-form-label">Dashboard source</div>
 			<div class="gf-form-label">Dashboard source</div>
-			<div>
 			<div class="gf-form-select-wrapper">
 			<div class="gf-form-select-wrapper">
 				<select class="gf-form-input gf-size-auto" ng-model="sourceName" ng-options="f for f in datasources"></select>
 				<select class="gf-form-input gf-size-auto" ng-model="sourceName" ng-options="f for f in datasources"></select>
 			</div>
 			</div>
 		</div>
 		</div>
-			<div class="gf-form-btn">
-				<button class="btn btn-success" ng-click="startImport()">Import</button>
-			</div>
+		<div class="gf-form">
+			<button class="btn btn-success gf-form-btn" ng-click="startImport()">Import</button>
 		</div>
 		</div>
 	</div>
 	</div>
 
 
-	<h5 class="page-heading" ng-if="importing">{{infoText}}</h5>
+	<h5 class="section-heading" ng-if="importing">{{infoText}}</h5>
 	<div class="editor-row" ng-if="importing">
 	<div class="editor-row" ng-if="importing">
 		<div class="editor-row row">
 		<div class="editor-row row">
 			<table class="grafana-options-table span5">
 			<table class="grafana-options-table span5">

public/app/features/templating/templateSrv.js

@@ -31,13 +31,18 @@ function (angular, _) {
        }, this);
        }, this);
     };
     };
 
 
+    this.regexEscape = function(value) {
+      return value.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
+    };
+
     this.formatValue = function(value, format) {
     this.formatValue = function(value, format) {
       if (_.isString(value)) {
       if (_.isString(value)) {
         return value;
         return value;
       } else {
       } else {
         switch(format) {
         switch(format) {
-          case "regex values": {
-            return '(' + value.join('|') + ')';
+          case "regex": {
+            var escapedValues = _.map(value, this.regexEscape);
+            return '(' + escapedValues.join('|') + ')';
           }
           }
           case "lucene": {
           case "lucene": {
             var quotedValues = _.map(value, function(val) {
             var quotedValues = _.map(value, function(val) {

public/app/features/templating/templateValuesSrv.js

@@ -226,22 +226,19 @@ function (angular, _, kbn) {
       return _.map(_.keys(options).sort(), function(key) {
       return _.map(_.keys(options).sort(), function(key) {
         var option = { text: key, value: key };
         var option = { text: key, value: key };
 
 
-        // check if values need to be regex escaped
-        if (self.shouldRegexEscape(variable)) {
-          option.value = self.regexEscape(option.value);
-        }
+        // // check if values need to be regex escaped
+        // if (self.shouldRegexEscape(variable)) {
+        //   option.value = self.regexEscape(option.value);
+        // }
 
 
         return option;
         return option;
       });
       });
     };
     };
 
 
-    this.shouldRegexEscape = function(variable) {
-      return (variable.includeAll || variable.multi) && variable.allFormat.indexOf('regex') !== -1;
-    };
-
-    this.regexEscape = function(value) {
-      return value.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&');
-    };
+    // this.shouldRegexEscape = function(variable) {
+    //   return (variable.includeAll || variable.multi) && variable.allFormat.indexOf('regex') !== -1;
+    // };
+    //
 
 
     this.addAllOption = function(variable) {
     this.addAllOption = function(variable) {
       // var allValue = '';
       // var allValue = '';

public/app/plugins/datasource/influxdb/datasource.ts

@@ -45,7 +45,7 @@ export function InfluxDatasource(instanceSettings, $q, backendSrv, templateSrv)
     allQueries = allQueries.replace(/\$timeFilter/g, timeFilter);
     allQueries = allQueries.replace(/\$timeFilter/g, timeFilter);
 
 
     // replace templated variables
     // replace templated variables
-    allQueries = templateSrv.replace(allQueries, options.scopedVars);
+    allQueries = templateSrv.replace(allQueries, options.scopedVars, 'regex');
 
 
     return this._seriesQuery(allQueries).then(function(data): any {
     return this._seriesQuery(allQueries).then(function(data): any {
       if (!data || !data.results) {
       if (!data || !data.results) {