feat(influxdb): began work on changing the influxdb editor to support better aliasing and interval options, #2647, #2599

public/app/plugins/datasource/influxdb/directives.js

@@ -7,7 +7,7 @@ function (angular) {
   var module = angular.module('grafana.directives');
 
   module.directive('metricQueryEditorInfluxdb', function() {
-    return {controller: 'InfluxQueryCtrl', templateUrl: 'app/plugins/datasource/influxdb/partials/query.editor.html'};
+    return {controller: 'InfluxQueryCtrl', templateUrl: 'app/plugins/datasource/influxdb/partials/query.editor2.html'};
   });
 
   module.directive('metricQueryOptionsInfluxdb', function() {

public/app/plugins/datasource/influxdb/partials/query.editor2.html

@@ -0,0 +1,113 @@
+<div class="tight-form-container-no-item-borders">
+	<div  class="tight-form">
+		<ul class="tight-form-list pull-right">
+			<li ng-show="parserError" class="tight-form-item">
+				<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
+					<i class="fa fa-warning"></i>
+				</a>
+			</li>
+			<li class="tight-form-item small" ng-show="target.datasource">
+				<em>{{target.datasource}}</em>
+			</li>
+			<li class="tight-form-item">
+				<div class="dropdown">
+					<a  class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
+						<i class="fa fa-bars"></i>
+					</a>
+					<ul class="dropdown-menu pull-right" role="menu">
+						<li role="menuitem"><a tabindex="1" ng-click="toggleQueryMode()">Switch editor mode</a></li>
+						<li role="menuitem"><a tabindex="1" ng-click="duplicateDataQuery(target)">Duplicate</a></li>
+						<li role="menuitem"><a tabindex="1" ng-click="moveDataQuery($index, $index-1)">Move up</a></li>
+						<li role="menuitem"><a tabindex="1" ng-click="moveDataQuery($index, $index+1)">Move down</a></li>
+					</ul>
+				</div>
+			</li>
+
+			<li class="tight-form-item last">
+				<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+					<i class="fa fa-remove"></i>
+				</a>
+			</li>
+		</ul>
+
+		<ul class="tight-form-list">
+			<li class="tight-form-item" style="min-width: 15px; text-align: center">
+				{{target.refId}}
+			</li>
+			<li>
+				<a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
+					<i class="fa fa-eye"></i>
+				</a>
+			</li>
+		</ul>
+
+		<ul class="tight-form-list" ng-hide="target.rawQuery">
+			<li class="tight-form-item query-keyword" style="width: 75px">
+				FROM
+			</li>
+			<li>
+				<metric-segment segment="measurementSegment" get-options="getMeasurements()" on-change="measurementChanged()"></metric-segment>
+			</li>
+		</ul>
+		<div class="clearfix"></div>
+
+		<div style="padding: 10px" ng-if="target.rawQuery">
+			<textarea ng-model="target.query" rows="8" spellcheck="false" style="width: 100%; box-sizing: border-box;" ng-blur="get_data()"></textarea>
+		</div>
+	</div>
+
+	<div ng-hide="target.rawQuery">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+					WHERE
+				</li>
+				<li ng-repeat="segment in tagSegments">
+					<metric-segment segment="segment" get-options="getTagsOrValues(segment, $index)" on-change="tagSegmentUpdated(segment, $index)"></metric-segment>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+
+		<div class="tight-form" ng-repeat="tag in target.groupBy">
+			<ul class="tight-form-list">
+				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+					<span ng-show="$index === 0">GROUP BY</span>
+				</li>
+				<li class="tight-form-item" ng-if="tag.type === 'time'">
+					time($interval)
+				</li>
+				<li ng-if="tag.type === 'tag'">
+					<metric-segment-model property="tag.key" get-options="getTagOptions()" on-change="get_data()"></metric-segment>
+				</li>
+			</ul>
+
+			<ul class="tight-form-list pull-right">
+				<li class="tight-form-item last" ng-show="$index === 0">
+					<a class="pointer" ng-click="addGroupBy()"><i class="fa fa-plus"></i></a>
+				</li>
+				<li class="tight-form-item last" ng-show="$index > 0">
+					<a class="pointer" ng-click="removeGroupBy($index)"><i class="fa fa-minus"></i></a>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+					SELECT
+				</li>
+				<li class="dropdown" ng-repeat="field in target.fields">
+					<span influxdb-func-editor field="field" get-fields="getFields()" on-change="fieldChanged(field)" class="tight-form-item">
+					</span>
+				</li>
+				<li>
+					<metric-segment segment="addFieldSegment" get-options="getFieldSegments()" on-change="addField()"></metric-segment>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+
+	</div>
+</div>

public/app/plugins/datasource/influxdb/queryBuilder.js

@@ -118,9 +118,14 @@ function (_) {
     query += conditions.join(' ');
     query += (conditions.length > 0 ? ' AND ' : '') + '$timeFilter';
 
-    query += ' GROUP BY time($interval)';
-    if  (target.groupByTags && target.groupByTags.length > 0) {
-      query += ', "' + target.groupByTags.join('", "') + '"';
+    query += ' GROUP BY';
+    for (i = 0; i < target.groupBy.length; i++) {
+      var group = target.groupBy[i];
+      if (group.type === 'time') {
+        query += ' time(10s)';
+      } else {
+        query += ', ' + group.key;
+      }
     }
 
     if (target.fill) {

public/app/plugins/datasource/influxdb/queryCtrl.js

@@ -15,7 +15,7 @@ function (angular, _, InfluxQueryBuilder) {
 
       var target = $scope.target;
       target.tags = target.tags || [];
-      target.groupByTags = target.groupByTags || [];
+      target.groupBy = target.groupBy || [{type: 'time', interval: 'auto'}];
       target.fields = target.fields || [{
         name: 'value',
         func: target.function || 'mean'
@@ -52,15 +52,7 @@ function (angular, _, InfluxQueryBuilder) {
 
       $scope.fixTagSegments();
 
-      $scope.groupBySegments = [];
-      _.each(target.groupByTags, function(tag) {
-        $scope.groupBySegments.push(uiSegmentSrv.newSegment(tag));
-      });
-
-      $scope.groupBySegments.push(uiSegmentSrv.newPlusButton());
-
       $scope.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove tag filter --'});
-      $scope.removeGroupBySegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove group by --'});
     };
 
     $scope.fixTagSegments = function() {
@@ -72,6 +64,15 @@ function (angular, _, InfluxQueryBuilder) {
       }
     };
 
+    $scope.addGroupBy = function() {
+      $scope.target.groupBy.push({type: 'tag', key: "select tag"});
+    };
+
+    $scope.removeGroupBy = function(index) {
+      $scope.target.groupBy.splice(index, 1);
+      $scope.get_data();
+    };
+
     $scope.groupByTagUpdated = function(segment, index) {
       if (segment.value === $scope.removeGroupBySegment.value) {
         $scope.target.groupByTags.splice(index, 1);
@@ -197,17 +198,11 @@ function (angular, _, InfluxQueryBuilder) {
       $scope.get_data();
     };
 
-    $scope.getGroupByTagSegments = function(segment) {
+    $scope.getTagOptions = function() {
       var query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS');
 
       return $scope.datasource.metricFindQuery(query)
       .then($scope.transformToSegments(false))
-      .then(function(results) {
-        if (segment.type !== 'plus-button') {
-          results.splice(0, 0, angular.copy($scope.removeGroupBySegment));
-        }
-        return results;
-      })
       .then(null, $scope.handleQueryError);
     };