feat(editor): thing are starting to work again

public/app/directives/metric.segment.js

@@ -20,9 +20,9 @@ function (angular, app, _, $) {
       return {
         scope: {
           segment: "=",
-          disableCustom: "=",
+          noCustom: "=",
-          getAltSegments: "&",
+          getOptions: "&",
-          onValueChanged: "&",
+          onChange: "&",
         },
 
         link: function($scope, elem) {
@@ -48,14 +48,14 @@ function (angular, app, _, $) {
                 segment.fake = false;
                 segment.expandable = selected.expandable;
               }
-              else if ($scope.disableCustom === false) {
+              else if ($scope.noCustom === false) {
                 segment.value = value;
                 segment.html = $sce.trustAsHtml(value);
                 segment.expandable = true;
                 segment.fake = false;
               }
 
-              $scope.onValueChanged();
+              $scope.onChange();
             });
           };
 
@@ -78,12 +78,12 @@ function (angular, app, _, $) {
             if (options) { return options; }
 
             $scope.$apply(function() {
-              $scope.getAltSegments().then(function(altSegments) {
+              $scope.getOptions().then(function(altSegments) {
                 $scope.altSegments = altSegments;
                 options = _.map($scope.altSegments, function(alt) { return alt.value; });
 
                 // add custom values
-                if ($scope.disableCustom === false) {
+                if ($scope.noCustom === false) {
                   if (!segment.fake && _.indexOf(options, segment.value) === -1) {
                     options.unshift(segment.value);
                   }
@@ -161,11 +161,12 @@ function (angular, app, _, $) {
     .module('grafana.directives')
     .directive('metricSegmentModel', function(uiSegmentSrv, $q) {
       return {
-        template: '<metric-segment segment="segment" get-alt-segments="getOptions()" on-value-changed="onSegmentChange()" disable-custom="true"></metric-segment>',
+        template: '<metric-segment segment="segment" get-options="getOptionsInternal()" on-change="onSegmentChange()" no-custom="true"></metric-segment>',
         restrict: 'E',
         scope: {
           property: "=",
           options: "=",
+          getOptions: "&",
           onChange: "&",
         },
         link: {
@@ -180,17 +181,26 @@ function (angular, app, _, $) {
               }
             };
 
-            $scope.getOptions = function() {
+            $scope.getOptionsInternal = function() {
-              var optionSegments = _.map($scope.options, function(option) {
+              if ($scope.options) {
-                return uiSegmentSrv.newSegment({value: option.text});
+                var optionSegments = _.map($scope.options, function(option) {
-              });
+                  return uiSegmentSrv.newSegment({value: option.text});
-              return $q.when(optionSegments);
+                });
+                return $q.when(optionSegments);
+              } else {
+                return $scope.getOptions();
+              }
             };
 
             $scope.onSegmentChange = function() {
-              var option = _.findWhere($scope.options, {text: $scope.segment.value});
+              if ($scope.options) {
-              if (option && option.value !== $scope.property) {
+                var option = _.findWhere($scope.options, {text: $scope.segment.value});
-                $scope.property = option.value;
+                if (option && option.value !== $scope.property) {
+                  $scope.property = option.value;
+                  $scope.onChange();
+                }
+              } else {
+                $scope.property = $scope.segment.value;
                 $scope.onChange();
               }
             };

public/app/plugins/datasource/elasticsearch/datasource.js

@@ -191,7 +191,7 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) {
             seriesName = parentName;
 
             if (metric.field) {
-              seriesName += ' ' + metric.field + ' ' + metric.agg;
+              seriesName += ' ' + metric.field + ' ' + metric.type;
               value = bucket['m' + y.toString()].value;
             } else {
               seriesName += ' count';

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

@@ -1,6 +1,7 @@
 define([
   'angular',
   './bucketAgg',
+  './metricAgg',
 ],
 function (angular) {
   'use strict';

public/app/plugins/datasource/elasticsearch/metricAgg.js

@@ -0,0 +1,69 @@
+define([
+  'angular',
+  'lodash',
+  'jquery',
+],
+function (angular, _, $) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+    module.controller('ElasticMetricAggCtrl', function($scope, uiSegmentSrv, $q) {
+      var metricAggs = $scope.target.metrics;
+
+      $scope.metricAggTypes = [
+        {text: "Count",           value: 'count' },
+        {text: "Average of",  value: 'avg' },
+        {text: "Sum of",  value: 'sum' },
+        {text: "Max of",  value: 'max' },
+        {text: "Min of",  value: 'min' },
+        {text: "Standard Deviations",  value: 'std_dev' },
+      ];
+
+      $scope.init = function() {
+        $scope.agg = metricAggs[$scope.index];
+        if (!$scope.agg.field) {
+          $scope.agg.field = 'select field';
+        }
+      }
+
+      $scope.$watchCollection("target.metrics", function() {
+        $scope.isFirst = $scope.index === 0;
+        $scope.isLast = $scope.index === metricAggs.length - 1;
+        $scope.isSingle = metricAggs.length === 1;
+      });
+
+      $scope.toggleOptions = function() {
+        $scope.showOptions = !$scope.showOptions;
+      }
+
+      $scope.addMetricAgg = function() {
+        var addIndex = metricAggs.length;
+        metricAggs.splice(addIndex, 0, {type: "count", field: "select field" });
+      };
+
+      $scope.removeMetricAgg = function(index) {
+        metricAggs.splice(index, 1);
+        $scope.onChange();
+      };
+
+      $scope.init();
+
+    });
+
+    module.directive('elasticMetricAgg', function() {
+      return {
+        templateUrl: 'app/plugins/datasource/elasticsearch/partials/metricAgg.html',
+        controller: 'ElasticMetricAggCtrl',
+        restrict: 'E',
+        scope: {
+          target: "=",
+          index: "=",
+          onChange: "&",
+          getFields: "&",
+        },
+        link: function postLink($scope, elem) {
+        }
+      };
+    });
+});

public/app/plugins/datasource/elasticsearch/partials/bucketAgg.html

@@ -14,10 +14,10 @@
 	</ul>
 
 	<ul class="tight-form-list pull-right">
-		<li class="tight-form-item" ng-if="isFirst">
+		<li class="tight-form-item last" ng-if="isFirst">
 			<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
 		</li>
-		<li class="tight-form-item" ng-if="!isLast">
+		<li class="tight-form-item last" ng-if="!isLast">
 			<a class="pointer" ng-click="removeBucketAgg($index)"><i class="fa fa-minus"></i></a>
 		</li>
 	</ul>

public/app/plugins/datasource/elasticsearch/partials/metricAgg.html

@@ -0,0 +1,28 @@
+<div class="tight-form">
+	<ul class="tight-form-list">
+		<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+			Metric
+		</li>
+		<li>
+			<metric-segment-model property="agg.type" options="metricAggTypes" on-change="onChange()"></metric-segment-model>
+		</li>
+		<li ng-if="agg.type !== 'count'">
+			<metric-segment-model property="agg.field" get-options="getFields()" on-change="onChange()"></metric-segment>
+		</li>
+		<li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
+			<a ng-click="toggleOptions()">{{aggOptionsString}}</a>
+		</li>
+	</ul>
+
+	<ul class="tight-form-list pull-right">
+		<li class="tight-form-item last" ng-if="isFirst">
+			<a class="pointer" ng-click="addMetricAgg()"><i class="fa fa-plus"></i></a>
+		</li>
+		<li class="tight-form-item last" ng-if="!isSingle">
+			<a class="pointer" ng-click="removeMetricAgg($index)"><i class="fa fa-minus"></i></a>
+		</li>
+	</ul>
+	<div class="clearfix"></div>
+</div>
+
+

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

@@ -57,25 +57,13 @@
 </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;">
-				Metrics
-			</li>
-			<li ng-repeat="segment in selectSegments">
-				<metric-segment segment="segment" get-alt-segments="getSelectSegments(segment, $index)"  on-value-changed="selectChanged(segment, $index)"></metric-segment>
-			</li>
-		</ul>
 
-		<ul class="tight-form-list pull-right">
+	<div ng-repeat="agg in target.metrics">
-			<li class="tight-form-item" ng-if="$index === 0">
+		<elastic-metric-agg
-				<a class="pointer" ng-click="addMetric()"><i class="fa fa-plus"></i></a>
+			target="target" index="$index"
-			</li>
+			get-fields="getFields()"
-			<li class="tight-form-item" ng-if="!$last">
+			on-change="queryUpdated()">
-				<a class="pointer" ng-click="removeMetric($index)"><i class="fa fa-minus"></i></a>
+		</elastic-metric-agg>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
 	</div>
 
 	<div ng-repeat="agg in target.bucketAggs">

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

@@ -70,7 +70,7 @@ function (angular) {
       var metric = target.metrics[i];
       if (metric.field) {
         var aggField = {};
-        aggField[metric.agg] = {field: metric.field};
+        aggField[metric.type] = {field: metric.field};
 
         nestedAggs.aggs['m' + i] = aggField;
       }

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

@@ -10,18 +10,12 @@ function (angular, _, ElasticQueryBuilder) {
 
   module.controller('ElasticQueryCtrl', function($scope, $timeout, uiSegmentSrv, templateSrv, $q) {
 
-    $scope.metricAggregations = {
-      "Count": { value: 'count' },
-      "Average of": { value: 'avg' },
-      "Max of": { value: 'max' },
-    };
-
     $scope.init = function() {
       var target = $scope.target;
       if (!target) { return; }
 
       target.timeField = target.timeField || '@timestamp';
-      target.metrics = target.metrics || [{ agg: 'count' }];
+      target.metrics = target.metrics || [{ type: 'count' }];
       target.bucketAggs = target.bucketAggs || [];
       target.bucketAggs = [
         {

public/test/specs/elasticsearch-querybuilder-specs.js

@@ -9,7 +9,7 @@ define([
       var builder = new ElasticQueryBuilder();
 
       var query = builder.build({
-        metrics: [{agg: 'Count'}],
+        metrics: [{type: 'Count'}],
         timeField: '@timestamp',
         bucketAggs: [{type: 'date_histogram', field: '@timestamp'}],
       });
@@ -22,7 +22,7 @@ define([
       var builder = new ElasticQueryBuilder();
 
       var query = builder.build({
-        metrics: [{agg: 'Count'}],
+        metrics: [{type: 'Count'}],
         timeField: '@timestamp',
         bucketAggs: [
           {type: 'terms', field: '@host'},
@@ -39,7 +39,7 @@ define([
       var builder = new ElasticQueryBuilder();
 
       var query = builder.build({
-        metrics: [{agg: 'avg', field: '@value'}],
+        metrics: [{type: 'avg', field: '@value'}],
         bucketAggs: [{type: 'date_histogram', field: '@timestamp'}],
       }, 100, 1000);