feat(elasticsearch): so much work on new editor, its pretty broken right now, but when it is done it is going to be amazing

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

@@ -0,0 +1,23 @@
+define([
+  'angular',
+  'lodash',
+  'jquery',
+],
+function (angular, _, $) {
+  'use strict';
+
+  angular
+    .module('grafana.directives')
+    .directive('tightFormAdvancedOption', function($compile, uiSegmentSrv, $q) {
+      return {
+        templateUrl: 'app/plugins/datasource/elasticsearch/partials/advancedOption.html',
+        restrict: 'E',
+        scope: {
+          model: "=",
+          option: "=",
+        },
+        link: function postLink($scope, elem) {
+        }
+      };
+    });
+});

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

@@ -0,0 +1,83 @@
+define([
+  'angular',
+  'lodash',
+  'jquery',
+],
+function (angular, _, $) {
+  'use strict';
+
+  var module = angular.module('grafana.directives');
+
+    module.controller('ElasticBucketAggCtrl', function($scope, uiSegmentSrv, $q) {
+      var bucketAggs = $scope.target.bucketAggs;
+
+      $scope.agg = bucketAggs[$scope.index];
+
+      $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.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.addBucketAgg = function() {
+        // if last is date histogram add it before
+        var lastBucket = bucketAggs[bucketAggs.length - 1];
+        var addIndex = bucketAggs.length - 1;
+
+        if (lastBucket && lastBucket.type === 'date_histogram') {
+          addIndex - 1;
+        }
+
+        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.onChange();
+      };
+
+      $scope.bucketAggTypeChanged = function() {
+        $scope.agg.type = $scope.typeSegment.value;
+        $scope.onChange();
+      };
+    });
+
+    module.directive('elasticBucketAgg', function() {
+      return {
+        templateUrl: 'app/plugins/datasource/elasticsearch/partials/bucketAgg.html',
+        controller: 'ElasticBucketAggCtrl',
+        restrict: 'E',
+        scope: {
+          target: "=",
+          index: "=",
+          onChange: "&",
+          getFields: "&",
+        },
+        link: function postLink($scope, elem) {
+        }
+      };
+    });
+});

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

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

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

@@ -0,0 +1,65 @@
+<div class="tight-form">
+	<ul class="tight-form-list">
+		<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
+			<span ng-show="isFirst">Group by</span>
+			<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 segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></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" 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">
+			<a class="pointer" ng-click="removeBucketAgg($index)"><i class="fa fa-minus"></i></a>
+		</li>
+	</ul>
+	<div class="clearfix"></div>
+</div>
+
+<div class="tight-form" ng-if="showOptions">
+	<div style="margin: 20px 0 20px 148px;display: inline-block">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 60px">
+					Order
+				</li>
+				<li>
+					<metric-segment segment="orderSegment" get-alt-segments="getOrders()" on-value-changed="orderSegmentChanged()"></metric-segment>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 60px">
+					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()">
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+		<div class="tight-form last">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 60px">
+					Order by
+				</li>
+				<li>
+					<metric-segment segment="timeSegment" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></metric-segment>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+</div>
+
+

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

@@ -47,12 +47,6 @@
 		<li>
 			<input type="text" class="input-xlarge tight-form-input" ng-model="target.query" spellcheck='false' placeholder="Lucence query" ng-blur="get_data()">
 		</li>
-		<li class="tight-form-item query-keyword">
-			Time field
-		</li>
-		<li>
-			<metric-segment segment="timeSegment" get-alt-segments="getFields()" on-value-changed="timeFieldChanged()"></metric-segment>
-		</li>
 	</ul>
 
 	<div class="clearfix"></div>
@@ -73,28 +67,82 @@
 			</li>
 		</ul>
 
-		<div class="clearfix"></div>
-	</div>
-
-	<div class="tight-form" ng-repeat="agg in target.bucketAggs">
-		<ul class="tight-form-list">
-			<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
-				<span ng-show="$first">Group by</span>
-				<span ng-show="!$first">Then by</span>
-			</li>
-			<li>
-				<elastic-query-component model="agg" get-fields="getFields()" on-change="queryUpdated()"></elastic-query-component>
-			</li>
-		</ul>
-
 		<ul class="tight-form-list pull-right">
 			<li class="tight-form-item" ng-if="$index === 0">
-				<a class="pointer" ng-click="addBucketAgg()"><i class="fa fa-plus"></i></a>
+				<a class="pointer" ng-click="addMetric()"><i class="fa fa-plus"></i></a>
 			</li>
 			<li class="tight-form-item" ng-if="!$last">
-				<a class="pointer" ng-click="removeBucketAgg(agg, $index)"><i class="fa fa-minus"></i></a>
+				<a class="pointer" ng-click="removeMetric($index)"><i class="fa fa-minus"></i></a>
 			</li>
 		</ul>
 		<div class="clearfix"></div>
 	</div>
+
+	<div ng-repeat="agg in target.bucketAggs">
+		<elastic-bucket-agg
+			target="target" index="$index"
+			get-fields="getFields()"
+			on-change="queryUpdated()">
+		</elastic-bucket-agg>
+	</div>
+
+	<!-- 	<div class="tight&#45;form"> -->
+	<!-- 	<ul class="tight&#45;form&#45;list"> -->
+	<!-- 		<li class="tight&#45;form&#45;item query&#45;keyword tight&#45;form&#45;align" style="width: 75px;"> -->
+	<!-- 			<span ng&#45;show="$first">Group by</span> -->
+	<!-- 			<span ng&#45;show="!$first">Then by</span> -->
+	<!-- 		</li> -->
+	<!-- 		<li> -->
+	<!-- 			<elastic&#45;query&#45;component model="agg" get&#45;fields="getFields()" on&#45;change="queryUpdated()"></elastic&#45;query&#45;component> -->
+	<!-- 		</li> -->
+	<!-- 	</ul> -->
+  <!--  -->
+	<!-- 	<ul class="tight&#45;form&#45;list pull&#45;right"> -->
+	<!-- 		<li class="tight&#45;form&#45;item" ng&#45;if="$index === 0"> -->
+	<!-- 			<a class="pointer" ng&#45;click="addBucketAgg()"><i class="fa fa&#45;plus"></i></a> -->
+	<!-- 		</li> -->
+	<!-- 		<li class="tight&#45;form&#45;item" ng&#45;if="!$last"> -->
+	<!-- 			<a class="pointer" ng&#45;click="removeBucketAgg($index)"><i class="fa fa&#45;minus"></i></a> -->
+	<!-- 		</li> -->
+	<!-- 	</ul> -->
+	<!-- 	<div class="clearfix"></div> -->
+	<!-- </div> -->
+  <!--  -->
+	<!-- <div class="tight&#45;form" ng&#45;if="agg.showOptions"> -->
+	<!-- 	<div style="margin: 20px 0 20px 148px;display: inline&#45;block"> -->
+	<!-- 		<div class="tight&#45;form"> -->
+	<!-- 			<ul class="tight&#45;form&#45;list"> -->
+	<!-- 				<li class="tight&#45;form&#45;item" style="width: 60px"> -->
+	<!-- 					Order -->
+	<!-- 				</li> -->
+	<!-- 				<li> -->
+	<!-- 					<metric&#45;segment segment="" get&#45;alt&#45;segments="getFields()" on&#45;value&#45;changed="timeFieldChanged()"></metric&#45;segment> -->
+	<!-- 				</li> -->
+	<!-- 			</ul> -->
+	<!-- 			<div class="clearfix"></div> -->
+	<!-- 		</div> -->
+	<!-- 		<div class="tight&#45;form"> -->
+	<!-- 			<ul class="tight&#45;form&#45;list"> -->
+	<!-- 				<li class="tight&#45;form&#45;item" style="width: 60px"> -->
+	<!-- 					Size -->
+	<!-- 				</li> -->
+	<!-- 				<li> -->
+	<!-- 					<input type="text" class="input&#45;mini tight&#45;form&#45;input" ng&#45;model="agg.options.size" spellcheck='false' placeholder="0" ng&#45;blur="get_data()"> -->
+	<!-- 				</li> -->
+	<!-- 			</ul> -->
+	<!-- 			<div class="clearfix"></div> -->
+	<!-- 		</div> -->
+	<!-- 		<div class="tight&#45;form last"> -->
+	<!-- 			<ul class="tight&#45;form&#45;list"> -->
+	<!-- 				<li class="tight&#45;form&#45;item" style="width: 60px"> -->
+	<!-- 					Order by -->
+	<!-- 				</li> -->
+	<!-- 				<li> -->
+	<!-- 					<metric&#45;segment segment="timeSegment" get&#45;alt&#45;segments="getFields()" on&#45;value&#45;changed="timeFieldChanged()"></metric&#45;segment> -->
+	<!-- 				</li> -->
+	<!-- 			</ul> -->
+	<!-- 			<div class="clearfix"></div> -->
+	<!-- 		</div> -->
+	<!-- 	</div> -->
+
 </div>

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

@@ -1,60 +0,0 @@
-define([
-  'angular',
-  'lodash',
-  'jquery',
-],
-function (angular, _, $) {
-  'use strict';
-
-  angular
-    .module('grafana.directives')
-    .directive('elasticQueryComponent', function($compile, uiSegmentSrv, $q) {
-
-      //var linkTemplate = '<a class="tight-form-item tabindex="1" ng-bind-html="textRep"></a>';
-      /* jshint maxlen:false */
-      var template1 = '<metric-segment segment="typeSegment" get-alt-segments="getBucketAggTypes()" on-value-changed="bucketAggTypeChanged()"></metric-segment>';
-      /* jshint maxlen:false */
-      var template2 = '<metric-segment segment="fieldSegment" get-alt-segments="getFields()" on-value-changed="fieldChanged()"></metric-segment>';
-
-      return {
-        restrict: 'E',
-        scope: {
-          model: "=",
-          onChange: "&",
-          getFields: "&",
-        },
-        link: function postLink($scope, elem) {
-
-          $scope.getBucketAggTypes = function() {
-            return $q.when([
-              uiSegmentSrv.newSegment({value: 'terms'}),
-              uiSegmentSrv.newSegment({value: 'date_histogram'}),
-            ]);
-          };
-
-          $scope.fieldChanged = function() {
-            $scope.model.field = $scope.fieldSegment.value;
-            $scope.onChange();
-          };
-
-          $scope.bucketAggTypeChanged = function() {
-            $scope.model.type = $scope.typeSegment.value;
-            $scope.onChange();
-          };
-
-          function addElementsAndCompile() {
-            var $html = $(template1 + template2);
-
-            $scope.fieldSegment = uiSegmentSrv.newSegment($scope.model.field);
-            $scope.typeSegment = uiSegmentSrv.newSegment($scope.model.type);
-
-            $html.appendTo(elem);
-
-            $compile(elem.contents())($scope);
-          }
-
-          addElementsAndCompile();
-        }
-      };
-    });
-});

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

@@ -33,7 +33,6 @@ function (angular, _, ElasticQueryBuilder) {
       $scope.initSelectSegments();
       $scope.removeSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove select --'});
       $scope.resetSelectSegment = uiSegmentSrv.newSegment({fake: true, value: '-- reset --'});
-      $scope.removeGroupBySegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove group by --'});
 
       $scope.queryBuilder = new ElasticQueryBuilder(target);
       $scope.rawQueryOld = angular.toJson($scope.queryBuilder.build($scope.target), true);
@@ -52,8 +51,6 @@ function (angular, _, ElasticQueryBuilder) {
           $scope.selectSegments.push(uiSegmentSrv.newSegment({value: select.field, type: 'field' }));
         }
       });
-
-      $scope.selectSegments.push(uiSegmentSrv.newPlusButton());
     };
 
     $scope.getSelectSegments = function(segment, index) {
@@ -171,23 +168,6 @@ function (angular, _, ElasticQueryBuilder) {
       $scope.queryUpdated();
     };
 
-    $scope.addBucketAgg = function() {
-      // if last is date histogram add it before
-      var lastBucket = $scope.target.bucketAggs[$scope.target.bucketAggs.length - 1];
-      var addIndex = $scope.target.bucketAggs.length - 1;
-
-      if (lastBucket && lastBucket.type === 'date_histogram') {
-        addIndex - 1;
-      }
-
-      $scope.target.bucketAggs.splice(addIndex, 0, {type: "terms", field: "select field" });
-    };
-
-    $scope.removeBucketAgg = function(index) {
-      $scope.target.bucketAggs.splice(index, 1);
-      $scope.queryUpdated();
-    };
-
     $scope.queryUpdated = function() {
       var newJson = angular.toJson($scope.queryBuilder.build($scope.target), true);
       if (newJson !== $scope.oldQueryRaw) {

public/css/less/tightform.less

@@ -4,7 +4,7 @@
   border-right: 1px solid @grafanaTargetBorder;
   background: @grafanaTargetBackground;
 
-  &:last-child, &.last {
+  &.last {
     border-bottom: 1px solid @grafanaTargetBorder;
   }
 
@@ -45,10 +45,6 @@
 
 .tight-form-container {
   border-bottom: 1px solid @grafanaTargetBorder;
-
-  .tight-form:last-child {
-    border-bottom: none;
-  }
 }
 
 .tight-form-btn {