feat(elasticsearch): close to getting group by term options ui working

public/app/directives/metric.segment.js

@@ -170,14 +170,14 @@ function (angular, app, _, $) {
           onChange: "&",
         },
         link: {
-          pre: function postLink($scope, elem) {
+          pre: function postLink($scope, elem, attrs) {
 
             $scope.valueToSegment = function(value) {
               var option = _.findWhere($scope.options, {value: value});
               if (option) {
-                return uiSegmentSrv.newSegment({value: option.text});
+                return uiSegmentSrv.newSegment({value: option.text, cssClass: attrs.cssClass});
               } else {
-                return uiSegmentSrv.newSegment({value: value});
+                return uiSegmentSrv.newSegment({value: value, cssClass: attrs.cssClass});
               }
             };
 

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

@@ -11,24 +11,62 @@ function (angular, _, $) {
     module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q) {
       var bucketAggs = $scope.target.bucketAggs;
 
-      $scope.agg = bucketAggs[$scope.index];
-
       $scope.bucketAggTypes = [
         {text: "Terms",           value: 'terms' },
         {text: "Date Histogram",  value: 'date_histogram' },
       ];
 
+      $scope.orderOptions = [
+        {text: "Top",     value: 'desc' },
+        {text: "Bottom",  value: 'asc' },
+      ];
+
+      $scope.sizeOptions = [
+        {text: "No limit", value: '0' },
+        {text: "1", value: '1' },
+        {text: "2", value: '2' },
+        {text: "3", value: '4' },
+        {text: "5", value: '5' },
+        {text: "10", value: '10' },
+        {text: "15", value: '15' },
+        {text: "20", value: '20' },
+      ];
+
       $scope.$watch("index", function() {
         $scope.isFirst = $scope.index === 0;
         $scope.isLast = $scope.index === bucketAggs.length - 1;
       });
 
-      if ($scope.agg.type === "terms") {
-        $scope.aggOptionsString = "Top 5, Order by: sum @value";
-      }
+      $scope.init = function() {
+        $scope.agg = bucketAggs[$scope.index];
+        $scope.modelIsValid();
+      };
+
+      $scope.onChangeInternal = function() {
+        if ($scope.modelIsValid()) {
+          $scope.onChange();
+        }
+      };
+
+      $scope.modelIsValid = function() {
+        if ($scope.agg.type === "terms") {
+          $scope.aggOptionsString = "Top 5, Order by: sum @value";
+
+          $scope.agg.order = $scope.agg.order || "desc";
+          $scope.agg.size = $scope.agg.size || "0";
+          $scope.agg.orderBy = $scope.agg.orderBy || "_count";
+        }
+        return true;
+      };
 
       $scope.toggleOptions = function() {
         $scope.showOptions = !$scope.showOptions;
+
+        $scope.orderByOptions = [
+          {text: "Doc Count", value: '_count' },
+          {text: "Term name", value: '_term' },
+          {text: "Average of @value", value: '0' },
+        ];
       }
 
       $scope.addBucketAgg = function() {
@@ -48,6 +86,8 @@ function (angular, _, $) {
         $scope.onChange();
       };
 
+      $scope.init();
+
     });
 
     module.directive('elasticBucketAgg', function() {

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

@@ -5,8 +5,8 @@
 			<span ng-hide="isFirst">Then by</span>
 		</li>
 		<li>
-			<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onChange()"></metric-segment-model>
-			<metric-segment-model property="agg.field" get-options="getFields()" on-change="onChange()"></metric-segment>
+			<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="onChangeInternal()"></metric-segment-model>
+			<metric-segment-model property="agg.field" get-options="getFields()" on-change="onChangeInternal()"></metric-segment>
 		</li>
 		<li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
 			<a ng-click="toggleOptions()">{{aggOptionsString}}</a>
@@ -32,7 +32,7 @@
 					Order
 				</li>
 				<li>
-					<metric-segment-model property="agg.order" options="['Top', 'Bottom']"></metric-segment-model>
+					<metric-segment-model property="agg.order" options="orderOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -43,7 +43,7 @@
 					Size
 				</li>
 				<li>
-					<input type="text" class="input-mini tight-form-input" ng-model="agg.options.size" spellcheck='false' placeholder="0" ng-blur="get_data()">
+					<metric-segment-model property="agg.size" options="sizeOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
 				</li>
 			</ul>
 			<div class="clearfix"></div>
@@ -51,10 +51,10 @@
 		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 60px">
-					Order by
+					By
 				</li>
 				<li>
-					<metric-segment segment="timeSegment" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></metric-segment>
+					<metric-segment-model property="agg.orderBy" options="orderByOptions" on-change="onChangeInternal()" css-class="last"></metric-segment-model>
 				</li>
 			</ul>
 			<div class="clearfix"></div>