[app/visualize/editor] display validation state

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

@@ -1,4 +1,4 @@
-<div class="vis-editor-agg">
+<ng-form name="aggForm" class="vis-editor-agg">
 
   <!-- header -->
   <div class="vis-editor-agg-header">
@@ -14,13 +14,14 @@
     <!-- title -->
     <span class="vis-editor-agg-header-title">
       {{ agg.schema.title }}
-      <span ng-if="!editorOpen" class="vis-editor-agg-header-description">{{ makeDescription() }}</span>
+      <span ng-if="!editorOpen && aggForm.$valid" class="vis-editor-agg-header-description">{{ describe() }}</span>
+      <span ng-if="!editorOpen && aggForm.$invalid" class="vis-editor-agg-header-error">{{ describeError() }}</span>
     </span>
 
     <!-- controls !!!actually disabling buttons breaks tooltip¡¡¡ -->
     <div class="vis-editor-agg-header-controls btn-group">
       <button
-        ng-show="group.length > 1"
+        ng-if="group.length > 1"
         ng-class="{ disabled: $first }"
         ng-click="moveUp(agg)"
         tooltip="Increase Priority"
@@ -32,7 +33,7 @@
       </button>
 
       <button
-        ng-show="group.length > 1"
+        ng-if="group.length > 1"
         ng-class="{ disabled: $last }"
         ng-click="moveDown(agg)"
         tooltip="Decrease Priority"
@@ -69,4 +70,4 @@
       </select>
     </div>
   </div>
-</div>
+</ng-form>

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

@@ -44,8 +44,13 @@ define(function (require) {
           }
 
           var $aggParamEditors;
+          var $aggParamEditorsScope;
           $scope.$watch('agg.type', function updateAggParamEditor() {
-            if ($aggParamEditors) $aggParamEditors.remove();
+            if ($aggParamEditors) {
+              $aggParamEditors.remove();
+              $aggParamEditorsScope.$destroy();
+              $aggParamEditors = $aggParamEditorsScope = null;
+            }
 
             var agg = $scope.agg;
             var type = $scope.agg.type;
@@ -70,7 +75,8 @@ define(function (require) {
             }).filter(Boolean);
 
             $aggParamEditors = $(editors).appendTo($editorContainer);
-            $compile($aggParamEditors)($scope);
+            $aggParamEditorsScope = $scope.$new();
+            $compile($aggParamEditors)($aggParamEditorsScope);
           });
 
           // generic child scope creation, for both schema and agg
@@ -93,16 +99,27 @@ define(function (require) {
         }());
 
         /**
-         * [makeDescription description]
+         * Describe the aggregation, for display in the collapsed agg header
          * @return {[type]} [description]
          */
-        $scope.makeDescription = function () {
+        $scope.describe = function () {
           if (!$scope.agg.type.makeLabel) return '';
-
           var label = $scope.agg.type.makeLabel($scope.agg);
           return label ? label : '';
         };
 
+        /**
+         * Describe the errors in this agg
+         * @return {[type]} [description]
+         */
+        $scope.describeError = function () {
+          var count = _.reduce($scope.aggForm.$error, function (count, controls, errorType) {
+            return count + _.size(controls);
+          }, 0);
+
+          return count + ' Error' + (count > 1 ? 's' : '');
+        };
+
         $scope.moveUp = function (agg) {
           var aggs = $scope.vis.aggs;
 

src/kibana/apps/new_visualize/editor/agg_param.js

@@ -10,7 +10,6 @@ define(function (require) {
         aggParam: '=',
         params: '='
       },
-      replace: true,
       template: function ($el, attr) {
         return $el.html();
       }

src/kibana/apps/new_visualize/editor/editor.less

@@ -107,6 +107,12 @@
         font-weight: normal;
       }
 
+      &-error {
+        font-weight: normal;
+        font-style: italic;
+        color: @brand-warning;
+      }
+
       &-controls {
         .flex(0, 0, auto);
       }

src/kibana/styles/main.less

@@ -361,7 +361,8 @@ button[disabled] {
   }
 }
 
-input.ng-invalid {
+input.ng-invalid,
+select.ng-invalid {
   border-color: @state-danger-bg !important;
 }