Merge pull request #461 from spenceralger/splits_first_please

Splits first please

src/kibana/apps/visualize/editor/agg.html

@@ -66,18 +66,18 @@
   </div>
 
   <div class="vis-editor-agg-editor" ng-show="editorOpen">
-    <!-- schema editors go here -->
-
-    <div class="form-group">
-      <label ng-if="$index < 1">Aggregation</label>
-      <label ng-if="$index >= 1">Sub Aggregation</label>
-      <select
-        name="agg"
-        class="form-control"
-        ng-model="agg.type"
-        required
-        ng-options="agg as agg.title for agg in aggTypeOptions | aggFilter:agg.schema.aggFilter">
-      </select>
+    <div ng-if="aggIsTooLow" class="form-group">
+      <p class="vis-editor-agg-error">
+        "{{ agg.schema.title }}" aggs must run before all other buckets!
+      </p>
+      <input
+        type="number"
+        name="order"
+        ng-model="$index"
+        max="{{aggIsTooLow ? $index - 1 : $index}}"
+        style="display: none;">
     </div>
+
+    <!-- schema editors get added down here: aggSelect.html, agg_types/controls/*.html -->
   </div>
 </ng-form>

src/kibana/apps/visualize/editor/agg.js

@@ -5,6 +5,7 @@ define(function (require) {
     var _ = require('lodash');
     var $ = require('jquery');
     var aggTypes = Private(require('components/agg_types/index'));
+    var aggSelectHtml = require('text!apps/visualize/editor/agg_select.html');
 
     require('apps/visualize/editor/agg_param');
 
@@ -35,24 +36,36 @@ define(function (require) {
           var i = $scope.$index;
           $scope.$first = i === 0;
           $scope.$last = i === $scope.group.length - 1;
+          $scope.aggIsTooLow = calcAggIsTooLow();
         });
 
         (function setupControlManagement() {
           var $editorContainer = $el.find('.vis-editor-agg-editor');
 
+          // this will contain the controls for the schema (rows or columns?), which are unrelated to
+          // controls for the agg, which is why they are first
+          var $schemaEditor = $('<div>').addClass('schemaEditors').appendTo($editorContainer);
           if ($scope.agg.schema.editor) {
-            var $schemaEditor = $('<div>').prependTo($editorContainer);
             $schemaEditor.append($scope.agg.schema.editor);
             $compile($schemaEditor)(editorScope());
           }
 
+          // allow selection of an aggregation
+          var $aggSelect = $(aggSelectHtml).appendTo($editorContainer);
+          $compile($aggSelect)($scope);
+
+          // params for the selected agg, these are rebuilt every time the agg changes
           var $aggParamEditors;
           var $aggParamEditorsScope;
           $scope.$watch('agg.type', function updateAggParamEditor(newType, oldType) {
             if ($aggParamEditors) {
               $aggParamEditors.remove();
+              $aggParamEditors = null;
+            }
+
+            if ($aggParamEditorsScope) {
               $aggParamEditorsScope.$destroy();
-              $aggParamEditors = $aggParamEditorsScope = null;
+              $aggParamEditorsScope = null;
             }
 
             var agg = $scope.agg;
@@ -166,6 +179,22 @@ define(function (require) {
 
           aggs.splice(index, 1);
         };
+
+        function calcAggIsTooLow() {
+          if (!$scope.agg.schema.mustBeFirst) {
+            return false;
+          }
+
+          var firstDifferentSchema = _.findIndex($scope.group, function (agg) {
+            return agg.schema !== $scope.agg.schema;
+          });
+
+          if (firstDifferentSchema === -1) {
+            return false;
+          }
+
+          return $scope.$index > firstDifferentSchema;
+        }
       }
     };
   });

src/kibana/apps/visualize/editor/agg_select.html

@@ -0,0 +1,11 @@
+<div class="form-group">
+  <label ng-if="$index < 1">Aggregation</label>
+  <label ng-if="$index >= 1">Sub Aggregation</label>
+  <select
+    name="agg"
+    class="form-control"
+    ng-model="agg.type"
+    required
+    ng-options="agg as agg.title for agg in aggTypeOptions | aggFilter:agg.schema.aggFilter">
+  </select>
+</div>

src/kibana/apps/visualize/editor/editor.less → src/kibana/apps/visualize/editor/styles/editor.less

@@ -138,6 +138,14 @@
       }
     }
 
+    &-error {
+      margin: @vis-editor-agg-editor-spacing 0;
+      padding: @vis-editor-agg-editor-spacing;
+      text-align: center;
+      background: @btn-danger-bg;
+      color: @btn-danger-color;
+    }
+
     &-editor {
       margin-top: @vis-editor-agg-editor-spacing;
 

src/kibana/apps/visualize/styles/main.less

@@ -19,4 +19,4 @@
   font-size: 1.2em;
 }
 
-@import "../editor/editor.less";
+@import "../editor/styles/editor.less";

src/kibana/components/vis_types/pie.js

@@ -39,6 +39,7 @@ define(function (require) {
           name: 'split',
           icon: 'fa fa-th',
           title: 'Split Chart',
+          mustBeFirst: true,
           min: 0,
           max: 1
         }