feat(editor): refactoring and making new editor abstractions

public/app/directives/metric.segment.js

@@ -20,8 +20,9 @@ function (angular, app, _, $) {
       return {
         scope: {
           segment: "=",
+          disableCustom: "=",
           getAltSegments: "&",
-          onValueChanged: "&"
+          onValueChanged: "&",
         },
 
         link: function($scope, elem) {
@@ -47,12 +48,13 @@ function (angular, app, _, $) {
                 segment.fake = false;
                 segment.expandable = selected.expandable;
               }
-              else {
+              else if ($scope.disableCustom === false) {
                 segment.value = value;
                 segment.html = $sce.trustAsHtml(value);
                 segment.expandable = true;
                 segment.fake = false;
               }
+
               $scope.onValueChanged();
             });
           };
@@ -81,8 +83,10 @@ function (angular, app, _, $) {
                 options = _.map($scope.altSegments, function(alt) { return alt.value; });
 
                 // add custom values
-                if (!segment.fake && _.indexOf(options, segment.value) === -1) {
-                  options.unshift(segment.value);
+                if ($scope.disableCustom === false) {
+                  if (!segment.fake && _.indexOf(options, segment.value) === -1) {
+                    options.unshift(segment.value);
+                  }
                 }
 
                 callback(options);
@@ -92,7 +96,6 @@ function (angular, app, _, $) {
 
           $scope.updater = function(value) {
             if (value === segment.value) {
-              console.log('cancel blur');
               clearTimeout(cancelBlur);
               $input.focus();
               return value;
@@ -153,4 +156,48 @@ function (angular, app, _, $) {
         }
       };
     });
+
+  angular
+    .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>',
+        restrict: 'E',
+        scope: {
+          property: "=",
+          options: "=",
+          onChange: "&",
+        },
+        link: {
+          pre: function postLink($scope, elem) {
+
+            $scope.valueToSegment = function(value) {
+              var option = _.findWhere($scope.options, {value: value});
+              if (option) {
+                return uiSegmentSrv.newSegment({value: option.text});
+              } else {
+                return uiSegmentSrv.newSegment({value: value});
+              }
+            };
+
+            $scope.getOptions = function() {
+              var optionSegments = _.map($scope.options, function(option) {
+                return uiSegmentSrv.newSegment({value: option.text});
+              });
+              return $q.when(optionSegments);
+            };
+
+            $scope.onSegmentChange = function() {
+              var option = _.findWhere($scope.options, {text: $scope.segment.value});
+              if (option && option.value !== $scope.property) {
+                $scope.property = option.value;
+                $scope.onChange();
+              }
+            };
+
+            $scope.segment = $scope.valueToSegment($scope.property);
+          }
+        }
+      };
+    });
 });

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; }