More work InfluxDB templated queries and required changes to editor and datasource

src/app/controllers/templateEditorCtrl.js

@@ -16,7 +16,7 @@ function (angular, _) {
       name: '',
       name: '',
       options: [],
       options: [],
       includeAll: false,
       includeAll: false,
-      allFormat: 'Glob',
+      allFormat: 'glob',
     };
     };
 
 
     $scope.init = function() {
     $scope.init = function() {

src/app/panels/graph/styleEditor.html

@@ -93,7 +93,7 @@
 							{{option.name}}: {{option.value}}
 							{{option.name}}: {{option.value}}
 						</li>
 						</li>
 						<li class="dropdown">
 						<li class="dropdown">
-							<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown" gf-dropdown="overrideMenu" bs-tooltip="'set option to override'">
+							<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown" gf-dropdown="overrideMenu" bs-tooltip="'set option to override'" data-placement="right">
 								<i class="icon-plus"></i>
 								<i class="icon-plus"></i>
 							</a>
 							</a>
 						</li>
 						</li>

src/app/partials/influxdb/editor.html

@@ -108,73 +108,42 @@
 					</li>
 					</li>
 
 
 					<li>
 					<li>
-						<input type="text"
-						class="input-medium grafana-target-segment-input"
-						ng-model="target.alias"
-						spellcheck='false'
-						placeholder="alias"
-						ng-blur="get_data()">
+						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
+									 spellcheck='false' placeholder="alias" ng-blur="get_data()">
 					</li>
 					</li>
+
 					<li>
 					<li>
-						<a class="grafana-target-segment"
-							ng-click="target.condition_filter = !target.condition_filter; get_data();"
-							bs-tooltip="'Add a where clause'"
-							role="menuitem">
+						<a class="grafana-target-segment" ng-click="target.condition_filter = !target.condition_filter; get_data();"
+								bs-tooltip="'Add a where clause'" role="menuitem" data-placement="right">
 							<i class="icon-filter"></i>
 							<i class="icon-filter"></i>
 						</a>
 						</a>
 					</li>
 					</li>
+
 					<li ng-show="target.condition_filter">
 					<li ng-show="target.condition_filter">
-						<input type="text"
-						class="input-small grafana-target-segment-input"
-						ng-model="target.condition_key"
-						placeholder="key"
-						spellcheck='false'
-						bs-typeahead="listColumns"
-						data-min-length=0
-						ng-blur="get_data()">
-						<select class="input-mini grafana-target-segment-input"
-							ng-change="get_data()"
-							ng-model="target.condition_op"
-							ng-options="f for f in operators" ></select>
-						<input type="text"
-						class="input-small grafana-target-segment-input"
-						ng-model="target.condition_value"
-						placeholder="value"
-						spellcheck='false'
-						data-min-length=0
-						ng-blur="get_data()">
+						<input type="text" class="input-large grafana-target-text-input" ng-model="target.condition_expression"
+									 spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
 					</li>
 					</li>
+
 					<li class="grafana-target-segment">
 					<li class="grafana-target-segment">
 						group by time
 						group by time
 					</li>
 					</li>
 
 
 					<li>
 					<li>
-						<input type="text"
-						class="input-mini grafana-target-segment-input"
-						ng-model="target.interval"
-						placeholder="{{interval}}"
-						bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
-						spellcheck='false'
-						ng-model-onblur ng-change="get_data()" >
+						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
+									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
+									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
+									 ng-model-onblur ng-change="get_data()" >
 					</li>
 					</li>
 					<li>
 					<li>
-						<a class="grafana-target-segment"
-							ng-click="target.groupby_field_add = !target.groupby_field_add; get_data();"
-							bs-tooltip="'Add a group by column'"
-							role="menuitem">
+						<a class="grafana-target-segment" ng-click="target.groupby_field_add = !target.groupby_field_add; get_data();"
+							 bs-tooltip="'Add a group by column'" role="menuitem" data-placement="right">
 							<i class="icon-plus"></i>
 							<i class="icon-plus"></i>
 						</a>
 						</a>
 					</li>
 					</li>
 
 
 					<li ng-show="target.groupby_field_add">
 					<li ng-show="target.groupby_field_add">
-						<input type="text"
-						class="input-small grafana-target-segment-input"
-						ng-model="target.groupby_field"
-						placeholder="column"
-						spellcheck="false"
-						bs-typeahead="listColumns"
-						data-min-length=0
-						ng-blur="get_data()">
+						<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field"
+									 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
 					</li>
 					</li>
 
 
         </ul>
         </ul>

src/app/services/dashboard/dashboardSrv.js

@@ -216,7 +216,7 @@ function (angular, $, kbn, _, moment) {
           if (variable.datasource === void 0) { variable.datasource = null; }
           if (variable.datasource === void 0) { variable.datasource = null; }
           if (variable.type === 'filter') { variable.type = 'query'; }
           if (variable.type === 'filter') { variable.type = 'query'; }
           if (variable.type === void 0) { variable.type = 'query'; }
           if (variable.type === void 0) { variable.type = 'query'; }
-          if (variable.allFormat === void 0) { variable.allFormat = 'Glob'; }
+          if (variable.allFormat === void 0) { variable.allFormat = 'glob'; }
         }
         }
       }
       }
 
 

src/app/services/influxdb/influxdbDatasource.js

@@ -76,30 +76,32 @@ function (angular, _, kbn, InfluxSeries) {
           query = templateSrv.replace(query);
           query = templateSrv.replace(query);
         }
         }
         else {
         else {
+          query = 'select ';
+          var seriesName = target.series;
 
 
-          var template = "select [[group]][[group_comma]] [[func]]([[column]]) from [[series]] " +
-                         "where  [[timeFilter]] [[condition_add]] [[condition_key]] [[condition_op]] [[condition_value]] " +
-                         "group by time([[interval]])[[group_comma]] [[group]] order asc";
-
-          var templateData = {
-            series: target.series,
-            column: target.column,
-            func: target.function,
-            timeFilter: timeFilter,
-            interval: target.interval || options.interval,
-            condition_add: target.condition_filter ? 'and' : '',
-            condition_key: target.condition_filter ? target.condition_key : '',
-            condition_op: target.condition_filter ? target.condition_op : '',
-            condition_value: target.condition_filter ? target.condition_value : '',
-            group_comma: target.groupby_field_add && target.groupby_field ? ',' : '',
-            group: target.groupby_field_add ? target.groupby_field : '',
-          };
+          if(!seriesName.match('^/.*/')) {
+            seriesName = '"' + seriesName+ '"';
+          }
+
+          if (target.groupby_field_add) {
+            query += target.groupby_field + ', ';
+          }
+
+          query +=  target.function + '(' + target.column + ')';
+          query += ' from ' + seriesName + ' where ' + timeFilter;
 
 
-          if(!templateData.series.match('^/.*/')) {
-            templateData.series = '"' + templateData.series + '"';
+          if (target.condition_filter) {
+            query += ' and ' + target.condition_expression;
           }
           }
 
 
-          query = _.template(template, templateData, this.templateSettings);
+          query += ' group by time(' + (target.interval || options.interval) + ')';
+
+          if (target.groupby_field_add) {
+            query += ',' + target.groupby_field;
+          }
+
+          query += " order asc";
+
           query = templateSrv.replace(query);
           query = templateSrv.replace(query);
 
 
           if (target.groupby_field_add) {
           if (target.groupby_field_add) {

src/css/less/grafana.less

@@ -255,6 +255,7 @@ input[type=text].grafana-target-text-input {
   float: left;
   float: left;
   color: @grafanaTargetColor;
   color: @grafanaTargetColor;
   border-radius: 0;
   border-radius: 0;
+  border-right: 1px solid @grafanaTargetSegmentBorder;
 }
 }
 
 
 input[type=text].grafana-target-segment-input {
 input[type=text].grafana-target-segment-input {

src/test/specs/influxdb-datasource-specs.js

@@ -12,11 +12,12 @@ define([
 
 
     describe('When querying influxdb with one target using query editor target spec', function() {
     describe('When querying influxdb with one target using query editor target spec', function() {
       var results;
       var results;
-      var urlExpected = "/series?p=mupp&q=select++mean(value)+from+%22test%22"+
-                        "+where++time+%3E+now()+-+1h+++++group+by+time()++order+asc&time_precision=s";
+      var urlExpected = "/series?p=mupp&q=select+mean(value)+from+%22test%22"+
+                        "+where+time+%3E+now()+-+1h+group+by+time(1s)+order+asc&time_precision=s";
       var query = {
       var query = {
         range: { from: 'now-1h', to: 'now' },
         range: { from: 'now-1h', to: 'now' },
-        targets: [{ series: 'test', column: 'value', function: 'mean' }]
+        targets: [{ series: 'test', column: 'value', function: 'mean' }],
+        interval: '1s'
       };
       };
 
 
       var response = [{
       var response = [{