feat(editor): refactoring and making new editor abstractions

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

@@ -13,6 +13,11 @@ function (angular, _, $) {
 
       $scope.agg = bucketAggs[$scope.index];
 
+      $scope.bucketAggTypes = [
+        {text: "Terms",           value: 'terms' },
+        {text: "Date Histogram",  value: 'date_histogram' },
+      ];
+
       $scope.$watch("index", function() {
         $scope.isFirst = $scope.index === 0;
         $scope.isLast = $scope.index === bucketAggs.length - 1;
@@ -22,18 +27,10 @@ function (angular, _, $) {
         $scope.aggOptionsString = "Top 5, Order by: sum @value";
       }
 
-      $scope.typeSegment = uiSegmentSrv.newSegment($scope.agg.type);
       $scope.fieldSegment = uiSegmentSrv.newSegment($scope.agg.field);
 
-      $scope.getBucketAggTypes = function() {
-        return $q.when([
-          uiSegmentSrv.newSegment({value: 'terms'}),
-          uiSegmentSrv.newSegment({value: 'date_histogram'}),
-        ]);
-      };
-
       $scope.toggleOptions = function() {
-        $scope.showOptions = $scope.showOptions;
+        $scope.showOptions = !$scope.showOptions;
       }
 
       $scope.addBucketAgg = function() {

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

@@ -5,7 +5,7 @@
 			<span ng-hide="isFirst">Then by</span>
 		</li>
 		<li>
-      <metric-segment segment="typeSegment" get-alt-segments="getBucketAggTypes()" on-value-changed="bucketAggTypeChanged()"></metric-segment>
+			<metric-segment-model property="agg.type" options="bucketAggTypes" on-change="typeChanged()"></metric-segment-model>
       <metric-segment segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></metric-segment>
 		</li>
 		<li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
@@ -32,7 +32,7 @@
 					Order
 				</li>
 				<li>
-					<metric-segment segment="orderSegment" get-alt-segments="getOrders()" on-value-changed="orderSegmentChanged()"></metric-segment>
+					<metric-segment-model property="agg.order" options="['Top', 'Bottom']"></metric-segment-model>
 				</li>
 			</ul>
 			<div class="clearfix"></div>

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

@@ -10,6 +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; }