feat(influxdb): more work on query editor

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

@@ -18,13 +18,13 @@ class InfluxQuery {
     target.tags = target.tags || [];
     target.groupBy = target.groupBy || [{type: 'time', interval: 'auto'}];
     target.select = target.select || [[
-      {name: 'field', params: ['value']},
-      {name: 'mean', params: []},
+      {type: 'field', params: ['value']},
+      {type: 'mean', params: []},
     ]];
 
     this.updateSelectParts();
     this.groupByParts = [
-      queryPart.create({name: 'time', params: ['$interval']})
+      queryPart.create({type: 'time', params: ['$interval']})
     ];
   }
 
@@ -37,7 +37,7 @@ class InfluxQuery {
   updatePersistedParts() {
     this.target.select = _.map(this.selectModels, function(selectParts) {
       return _.map(selectParts, function(part: any) {
-        return {name: part.def.name, params: part.params};
+        return {type: part.def.type, params: part.params};
       });
     });
   }
@@ -48,22 +48,24 @@ class InfluxQuery {
   }
 
   removeSelectPart(selectParts, part) {
+    // if we remove the field remove the whole statement
+    if (part.def.type === 'field') {
+      if (this.selectModels.length > 1) {
+        var modelsIndex = _.indexOf(this.selectModels, selectParts);
+        this.selectModels.splice(modelsIndex, 1);
+      }
+    } else {
       var partIndex = _.indexOf(selectParts, part);
       selectParts.splice(partIndex, 1);
-    this.updatePersistedParts();
     }
 
-  addSelectPart(selectParts, name) {
-    var partModel = queryPart.create({name: name});
-    partModel.def.addStrategy(selectParts, partModel);
     this.updatePersistedParts();
   }
 
-  addSelect() {
-    this.target.select.push([
-      {name: 'mean', params: ['value']},
-    ]);
-    this.updateSelectParts();
+  addSelectPart(selectParts, type) {
+    var partModel = queryPart.create({type: type});
+    partModel.def.addStrategy(selectParts, partModel, this);
+    this.updatePersistedParts();
   }
 
   private renderTagCondition(tag, index) {
@@ -100,12 +102,12 @@ class InfluxQuery {
   render() {
     var target = this.target;
 
-    if (!target.measurement) {
-      throw "Metric measurement is missing";
+    if (target.rawQuery) {
+      return target.query;
     }
 
-    if (!target.fields) {
-      target.fields = [{name: 'value', func: target.function || 'mean'}];
+    if (!target.measurement) {
+      throw "Metric measurement is missing";
     }
 
     var query = 'SELECT ';

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

@@ -73,6 +73,9 @@
 				<li ng-repeat="part in selectParts">
 					<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeSelectPart(selectParts, part)" part-updated="selectPartUpdated(selectParts, part)"></influx-query-part-editor>
 				</li>
+				<li>
+					<metric-segment segment="selectPlusButton" get-options="getSelectOptions(selectParts)" on-change="selectAction(selectParts, $index)"></metric-segment>
+				</li>
 				<li class="dropdown" dropdown-typeahead="selectMenu" dropdown-typeahead-on-select="addSelectPart(selectParts, $item, $subItem)">
 				</li>
 			</ul>

public/app/plugins/datasource/influxdb/partials/query_part.html

@@ -2,4 +2,4 @@
 	<span class="pointer fa fa-remove" ng-click="removeActionInternal()" ></span>
 </div>
 
-<a ng-click="toggleControls()">{{part.def.name}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>
+<a ng-click="toggleControls()">{{part.def.type}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>

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

@@ -55,11 +55,21 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
       $scope.selectMenu = _.reduce(categories, function(memo, cat, key) {
         var menu = {text: key};
         menu.submenu = _.map(cat, function(item) {
-          return {text: item.name, value: item.name};
+          return {text: item.type, value: item.type};
         });
         memo.push(menu);
         return memo;
       }, []);
+
+      $scope.groupByMenu = _.reduce(categories, function(memo, cat, key) {
+        var menu = {text: key};
+        menu.submenu = _.map(cat, function(item) {
+          return {text: item.type, value: item.type};
+        });
+        memo.push(menu);
+        return memo;
+      }, []);
+
     };
 
     $scope.addSelectPart = function(selectParts, cat, subitem) {

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

@@ -14,7 +14,7 @@ var categories = {
 var groupByTimeFunctions = [];
 
 class QueryPartDef {
-  name: string;
+  type: string;
   params: any[];
   defaultParams: any[];
   renderer: any;
@@ -22,7 +22,7 @@ class QueryPartDef {
   addStrategy: any;
 
   constructor(options: any) {
-    this.name = options.name;
+    this.type = options.type;
     this.params = options.params;
     this.defaultParams = options.defaultParams;
     this.renderer = options.renderer;
@@ -31,13 +31,13 @@ class QueryPartDef {
   }
 
   static register(options: any) {
-    index[options.name] = new QueryPartDef(options);
-    options.category.push(index[options.name]);
+    index[options.type] = new QueryPartDef(options);
+    options.category.push(index[options.type]);
   }
 }
 
 function functionRenderer(part, innerExpr) {
-  var str = part.def.name + '(';
+  var str = part.def.type + '(';
   var parameters = _.map(part.params, (value, index) => {
     var paramType = part.def.params[index];
     if (paramType.quote === 'single') {
@@ -101,17 +101,17 @@ function addMathStrategy(selectParts, partModel) {
   var partCount = selectParts.length;
   if (partCount > 0) {
     // if last is math, replace it
-    if (selectParts[partCount-1].def.name === 'math') {
+    if (selectParts[partCount-1].def.type === 'math') {
       selectParts[partCount-1] = partModel;
       return;
     }
     // if next to last is math, replace it
-    if (selectParts[partCount-2].def.name === 'math') {
+    if (selectParts[partCount-2].def.type === 'math') {
       selectParts[partCount-2] = partModel;
       return;
     }
     // if last is alias add it before
-    else if (selectParts[partCount-1].def.name === 'alias') {
+    else if (selectParts[partCount-1].def.type === 'alias') {
       selectParts.splice(partCount-1, 0, partModel);
       return;
     }
@@ -123,7 +123,7 @@ function addAliasStrategy(selectParts, partModel) {
   var partCount = selectParts.length;
   if (partCount > 0) {
     // if last is alias, replace it
-    if (selectParts[partCount-1].def.name === 'alias') {
+    if (selectParts[partCount-1].def.type === 'alias') {
       selectParts[partCount-1] = partModel;
       return;
     }
@@ -131,9 +131,18 @@ function addAliasStrategy(selectParts, partModel) {
   selectParts.push(partModel);
 }
 
+function addFieldStrategy(selectParts, partModel, query) {
+  // copy all parts
+  var parts = _.map(selectParts, function(part: any) {
+    return new QueryPart({type: part.def.type, params: _.clone(part.params)});
+  });
+
+  query.selectModels.push(parts);
+}
 
 QueryPartDef.register({
-  name: 'field',
+  type: 'field',
+  addStrategy: addFieldStrategy,
   category: categories.Fields,
   params: [{type: 'field'}],
   defaultParams: ['value'],
@@ -141,7 +150,7 @@ QueryPartDef.register({
 });
 
 QueryPartDef.register({
-  name: 'mean',
+  type: 'mean',
   addStrategy: replaceAggregationAddStrategy,
   category: categories.Aggregations,
   params: [],
@@ -150,7 +159,7 @@ QueryPartDef.register({
 });
 
 QueryPartDef.register({
-  name: 'sum',
+  type: 'sum',
   addStrategy: replaceAggregationAddStrategy,
   category: categories.Aggregations,
   params: [],
@@ -159,7 +168,7 @@ QueryPartDef.register({
 });
 
 QueryPartDef.register({
-  name: 'derivative',
+  type: 'derivative',
   addStrategy: addTransformationStrategy,
   category: categories.Transformations,
   params: [{ name: "duration", type: "interval", options: ['1s', '10s', '1m', '5min', '10m', '15m', '1h']}],
@@ -168,7 +177,7 @@ QueryPartDef.register({
 });
 
 QueryPartDef.register({
-  name: 'time',
+  type: 'time',
   category: groupByTimeFunctions,
   params: [{ name: "rate", type: "interval", options: ['$interval', '1s', '10s', '1m', '5min', '10m', '15m', '1h'] }],
   defaultParams: ['$interval'],
@@ -176,7 +185,7 @@ QueryPartDef.register({
 });
 
 QueryPartDef.register({
-  name: 'math',
+  type: 'math',
   addStrategy: addMathStrategy,
   category: categories.Math,
   params: [{ name: "expr", type: "string"}],
@@ -185,7 +194,7 @@ QueryPartDef.register({
 });
 
 QueryPartDef.register({
-  name: 'alias',
+  type: 'alias',
   addStrategy: addAliasStrategy,
   category: categories.Aliasing,
   params: [{ name: "name", type: "string", quote: 'double'}],
@@ -202,9 +211,9 @@ class QueryPart {
 
   constructor(part: any) {
     this.part = part;
-    this.def = index[part.name];
+    this.def = index[part.type];
     if (!this.def) {
-      throw {message: 'Could not find query part ' + part.name};
+      throw {message: 'Could not find query part ' + part.type};
     }
 
     part.params = part.params || _.clone(this.def.defaultParams);
@@ -247,11 +256,11 @@ class QueryPart {
 
   updateText() {
     if (this.params.length === 0) {
-      this.text = this.def.name + '()';
+      this.text = this.def.type + '()';
       return;
     }
 
-    var text = this.def.name + '(';
+    var text = this.def.type + '(';
     text += this.params.join(', ');
     text += ')';
     this.text = text;
@@ -263,10 +272,6 @@ export = {
     return new QueryPart(part);
   },
 
-  getFuncDef: function(name) {
-    return index[name];
-  },
-
   getCategories: function() {
     return categories;
   }