feat(editor): more work on editor components, extracing things and making reusable directives

public/app/directives/metric.segment.js

@@ -197,12 +197,16 @@ function (angular, app, _, $) {
                 var option = _.findWhere($scope.options, {text: $scope.segment.value});
                 if (option && option.value !== $scope.property) {
                   $scope.property = option.value;
-                  $scope.onChange();
                 }
               } else {
                 $scope.property = $scope.segment.value;
-                $scope.onChange();
               }
+
+              // needs to call this after digest so
+              // property is synced with outerscope
+              $scope.$$postDigest(function() {
+                $scope.onChange();
+              });
             };
 
             $scope.segment = $scope.valueToSegment($scope.property);

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

@@ -27,8 +27,6 @@ function (angular, _, $) {
         $scope.aggOptionsString = "Top 5, Order by: sum @value";
       }
 
-      $scope.fieldSegment = uiSegmentSrv.newSegment($scope.agg.field);
-
       $scope.toggleOptions = function() {
         $scope.showOptions = !$scope.showOptions;
       }
@@ -45,21 +43,11 @@ function (angular, _, $) {
         bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" });
       };
 
-      $scope.removeBucketAgg = function(index) {
-        bucketAggs.splice(index, 1);
-        $scope.onChange();
-      };
-
-      $scope.fieldChanged = function() {
-        $scope.agg.showOptions = true;
-        $scope.agg.field = $scope.fieldSegment.value;
+      $scope.removeBucketAgg = function() {
+        bucketAggs.splice($scope.index, 1);
         $scope.onChange();
       };
 
-      $scope.bucketAggTypeChanged = function() {
-        $scope.agg.type = $scope.typeSegment.value;
-        $scope.onChange();
-      };
     });
 
     module.directive('elasticBucketAgg', function() {

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

@@ -190,12 +190,12 @@ function (angular, _, config, kbn, moment, ElasticQueryBuilder) {
             metric = target.metrics[y];
             seriesName = parentName;
 
-            if (metric.field) {
-              seriesName += ' ' + metric.field + ' ' + metric.type;
-              value = bucket['m' + y.toString()].value;
-            } else {
+            if (metric.type === 'count') {
               seriesName += ' count';
               value = bucket.doc_count;
+            } else {
+              seriesName += ' ' + metric.field + ' ' + metric.type;
+              value = bucket['m' + y.toString()].value;
             }
 
             var serie = series[seriesName] = series[seriesName] || {target: seriesName, datapoints: []};

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

@@ -42,8 +42,8 @@ function (angular, _, $) {
         metricAggs.splice(addIndex, 0, {type: "count", field: "select field" });
       };
 
-      $scope.removeMetricAgg = function(index) {
-        metricAggs.splice(index, 1);
+      $scope.removeMetricAgg = function() {
+        metricAggs.splice($scope.index, 1);
         $scope.onChange();
       };
 

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="typeChanged()"></metric-segment-model>
-      <metric-segment segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></metric-segment>
+			<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>
 		</li>
 		<li class="tight-form-item tight-form-align" ng-if="aggOptionsString">
 			<a ng-click="toggleOptions()">{{aggOptionsString}}</a>
@@ -18,7 +18,7 @@
 			<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
 		</li>
 		<li class="tight-form-item last" ng-if="!isLast">
-			<a class="pointer" ng-click="removeBucketAgg($index)"><i class="fa fa-minus"></i></a>
+			<a class="pointer" ng-click="removeBucketAgg()"><i class="fa fa-minus"></i></a>
 		</li>
 	</ul>
 	<div class="clearfix"></div>

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

@@ -19,7 +19,7 @@
 			<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>
+			<a class="pointer" ng-click="removeMetricAgg()"><i class="fa fa-minus"></i></a>
 		</li>
 	</ul>
 	<div class="clearfix"></div>

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

@@ -68,12 +68,13 @@ function (angular) {
 
     for (i = 0; i < target.metrics.length; i++) {
       var metric = target.metrics[i];
-      if (metric.field) {
-        var aggField = {};
-        aggField[metric.type] = {field: metric.field};
-
-        nestedAggs.aggs['m' + i] = aggField;
+      if (metric.type === 'count') {
+        continue;
       }
+
+      var aggField = {};
+      aggField[metric.type] = {field: metric.field};
+      nestedAggs.aggs['m' + i] = aggField;
     }
 
     return query;

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

@@ -30,7 +30,6 @@ function (angular, _, ElasticQueryBuilder) {
 
       $scope.timeSegment = uiSegmentSrv.newSegment(target.timeField);
 
-      $scope.initSelectSegments();
       $scope.removeSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove select --'});
       $scope.resetSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- reset --'});
 
@@ -38,137 +37,14 @@ function (angular, _, ElasticQueryBuilder) {
       $scope.rawQueryOld = angular.toJson($scope.queryBuilder.build($scope.target), true);
     };
 
-    $scope.initSelectSegments = function() {
-      $scope.selectSegments = [];
-      _.each($scope.target.metrics, function(select) {
-        if ($scope.selectSegments.length > 0) {
-          $scope.selectSegments.push(uiSegmentSrv.newCondition(" and "));
-        }
-        if (select.agg === 'count') {
-          $scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.agg, type: 'agg'}));
-        } else {
-          $scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.agg, type: 'agg'}));
-          $scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.field, type: 'field' }));
-        }
-      });
-    };
-
-    $scope.getSelectSegments = function(segment, index) {
-      if (segment.type === 'agg' || segment.type === 'plus-button') {
-        var options = [
-          uiSegmentSrv.newSegment({value: 'count', type: 'agg'}),
-          uiSegmentSrv.newSegment({value: 'avg',   type: 'agg', reqField: true}),
-          uiSegmentSrv.newSegment({value: 'sum',   type: 'agg', reqField: true}),
-          uiSegmentSrv.newSegment({value: 'min',   type: 'agg', reqField: true}),
-          uiSegmentSrv.newSegment({value: 'max',   type: 'agg', reqField: true}),
-        ];
-        // if we have other selects and this is not a plus button add remove option
-        if (segment.type !== 'plus-button' && $scope.selectSegments.length > 3) {
-          options.splice(0, 0, angular.copy($scope.removeSelectSegment));
-        }
-        // revert option is to reset the selectSegments if they become fucked
-        if (index === 0 && $scope.selectSegments.length > 2) {
-          options.splice(0, 0, angular.copy($scope.resetSelectSegment));
-        }
-        return $q.when(options);
-      }
-
-      return $scope.datasource.metricFindQuery('fields()')
-      .then($scope.transformToSegments(false))
-      .then(null, $scope.handleQueryError);
-    };
-
-    $scope.selectChanged = function(segment, index) {
-      // reset
-      if (segment.value === $scope.resetSelectSegment.value) {
-        $scope.target.metrics = [{ agg: 'count' }];
-        $scope.initSelectSegments();
-        $scope.queryUpdated();
-        return;
-      }
-
-      var nextSegment, removeCount;
-
-      // remove this select field
-      if (segment.value === $scope.removeSelectSegment.value) {
-        nextSegment = $scope.selectSegments[index + 1];
-        removeCount = 2;
-        if (nextSegment && nextSegment.type === 'field') {
-          removeCount += 1;
-        }
-        $scope.selectSegments.splice(Math.max(index-1, 0), removeCount);
-        $scope.rebuildTargetSelects();
-        $scope.queryUpdated();
-        return;
-      }
-
-      // add new
-      if (segment.type === 'plus-button' && index > 0) {
-        $scope.selectSegments.splice(index, 0, uiSegmentSrv.newCondition(' And '));
-        segment.type = 'agg';
-        index += 1;
-      }
-
-      if (segment.type === 'agg')  {
-        nextSegment = $scope.selectSegments[index + 1];
-
-        if (segment.value === 'count' && nextSegment && nextSegment.type === 'field') {
-          $scope.selectSegments.splice(index + 1, 1);
-        } else if (!nextSegment || nextSegment.type !== 'field') {
-          $scope.selectSegments.splice(index + 1, 0, uiSegmentSrv.newSegment({value: 'select field', fake: true, type: 'field'}));
-        }
-      }
-
-      if ((index+1) === $scope.selectSegments.length) {
-        $scope.selectSegments.push(uiSegmentSrv.newPlusButton());
-      }
-
-      $scope.rebuildTargetSelects();
-      $scope.queryUpdated();
-    };
-
-    $scope.rebuildTargetSelects = function() {
-      $scope.target.metrics = [];
-      for (var i = 0; i < $scope.selectSegments.length; i++) {
-        var segment = $scope.selectSegments[i];
-        var select = {agg: segment.value };
-
-        if (segment.type === 'agg' && segment.value !== 'count') {
-          select.field = $scope.selectSegments[i+1].value;
-          i += 2;
-        } else {
-          i += 1;
-        }
-
-        if (select.field === 'select field') { continue; }
-        $scope.target.metrics.push(select);
-      }
-    };
-
-    $scope.getGroupByFields = function(segment) {
-      return $scope.datasource.metricFindQuery('fields()')
-      .then($scope.transformToSegments(false))
-      .then(function(results) {
-        if (segment.type !== 'plus-button') {
-          results.splice(0, 0, angular.copy($scope.removeGroupBySegment));
-        }
-        return results;
-      })
-      .then(null, $scope.handleQueryError);
-    };
-
     $scope.getFields = function() {
       return $scope.datasource.metricFindQuery('fields()')
       .then($scope.transformToSegments(false))
       .then(null, $scope.handleQueryError);
     };
 
-    $scope.timeFieldChanged = function() {
-      $scope.target.timeField = $scope.timeSegment.value;
-      $scope.queryUpdated();
-    };
-
     $scope.queryUpdated = function() {
+      console.log('qery updated');
       var newJson = angular.toJson($scope.queryBuilder.build($scope.target), true);
       if (newJson !== $scope.oldQueryRaw) {
         $scope.rawQueryOld = newJson;