feat(influxdb): minor progress on #2802

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

@@ -73,13 +73,7 @@
 				<li ng-repeat="part in parts">
 					<influx-query-part-editor part="part" class="tight-form-item tight-form-func"></influx-query-part-editor>
 				</li>
-			</ul>
-			<ul class="tight-form-list pull-right">
-				<li class="tight-form-item last" ng-show="$index === 0">
-					<a class="pointer" ng-click="addSelect()"><i class="fa fa-plus"></i></a>
-				</li>
-				<li class="tight-form-item last" ng-show="target.select.length > 1">
-					<a class="pointer" ng-click="removeSelect($index)"><i class="fa fa-minus"></i></a>
+				<li class="dropdown" dropdown-typeahead="selectMenu" dropdown-typeahead-on-select="selectMenuAction(parts, $item, $subItem)">
 				</li>
 			</ul>
 			<div class="clearfix"></div>

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

@@ -3,9 +3,10 @@ define([
   'lodash',
   './query_builder',
   './influx_query',
+  './query_part',
   './query_part_editor',
 ],
-function (angular, _, InfluxQueryBuilder, InfluxQuery) {
+function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
@@ -45,9 +46,26 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery) {
       });
 
       $scope.fixTagSegments();
+      $scope.buildSelectMenu();
       $scope.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove tag filter --'});
     };
 
+    $scope.buildSelectMenu = function() {
+      var categories = queryPart.getCategories();
+      $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};
+        });
+        memo.push(menu);
+        return memo;
+      }, []);
+    };
+
+    $scope.selectMenuAction = function(selectParts, cat, subitem) {
+      selectParts.push(queryPart.create({name: subitem.value }));
+    };
+
     $scope.fixTagSegments = function() {
       var count = $scope.tagSegments.length;
       var lastSegment = $scope.tagSegments[Math.max(count-1, 0)];

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

@@ -4,11 +4,10 @@ import _ = require('lodash');
 
 var index = [];
 var categories = {
-  Combine: [],
-  Transform: [],
-  Calculate: [],
-  Filter: [],
-  Special: []
+  Aggregations: [],
+  Transformations: [],
+  Math: [],
+  Aliasing: [],
 };
 
 class QueryPartDef {
@@ -26,6 +25,7 @@ class QueryPartDef {
 
   static register(options: any) {
     index[options.name] = new QueryPartDef(options);
+    options.category.push(index[options.name]);
   }
 }
 
@@ -66,7 +66,15 @@ function quotedIdentityRenderer(part, innerExpr) {
 
 QueryPartDef.register({
   name: 'mean',
-  category: categories.Transform,
+  category: categories.Aggregations,
+  params: [{type: 'field', quote: 'double'}],
+  defaultParams: ['value'],
+  renderer: functionRenderer,
+});
+
+QueryPartDef.register({
+  name: 'sum',
+  category: categories.Aggregations,
   params: [{type: 'field', quote: 'double'}],
   defaultParams: ['value'],
   renderer: functionRenderer,
@@ -74,7 +82,7 @@ QueryPartDef.register({
 
 QueryPartDef.register({
   name: 'derivative',
-  category: categories.Transform,
+  category: categories.Transformations,
   params: [{ name: "duration", type: "interval", options: ['1s', '10s', '1m', '5min', '10m', '15m', '1h']}],
   defaultParams: ['10s'],
   renderer: functionRenderer,
@@ -82,7 +90,7 @@ QueryPartDef.register({
 
 QueryPartDef.register({
   name: 'time',
-  category: categories.Transform,
+  category: categories.Transformations,
   params: [{ name: "rate", type: "interval", options: ['$interval', '1s', '10s', '1m', '5min', '10m', '15m', '1h'] }],
   defaultParams: ['$interval'],
   renderer: functionRenderer,
@@ -90,7 +98,7 @@ QueryPartDef.register({
 
 QueryPartDef.register({
   name: 'math',
-  category: categories.Transform,
+  category: categories.Math,
   params: [{ name: "expr", type: "string"}],
   defaultParams: [' / 100'],
   renderer: suffixRenderer,
@@ -98,7 +106,7 @@ QueryPartDef.register({
 
 QueryPartDef.register({
   name: 'alias',
-  category: categories.Transform,
+  category: categories.Aliasing,
   params: [{ name: "name", type: "string", quote: 'double'}],
   defaultParams: ['alias'],
   renderMode: 'suffix',

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

@@ -16,7 +16,8 @@ function (angular, _, $) {
         restrict: 'E',
         templateUrl: 'app/plugins/datasource/influxdb/partials/query_part.html',
         scope: {
-          part: "="
+          part: "=",
+          deleteAction: "&",
         },
         link: function postLink($scope, elem) {
           var part = $scope.part;