Merge pull request #3811 from lukasolson/issues/3801

Fix issues with range agg controls

src/kibana/components/agg_types/controls/date_ranges.html

@@ -1,7 +1,5 @@
 <div>
-  <small><a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping-date-format.html#date-math">Accepted Date Formats <i class="fa-link fa"></i></a></small>
-
-    <table class="vis-editor-agg-editor-ranges form-group">
+    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
       <tr>
         <th>
           <label>From</label>
@@ -37,8 +35,23 @@
           </button>
         </td>
       </tr>
+      <tr>
+        <td colspan="3">
+          <small>
+            <a target="_window" href="http://www.elastic.co/guide/en/elasticsearch/reference/current/mapping-date-format.html#date-math">Accepted Date Formats <i class="fa-link fa"></i></a>
+          </small>
+        </td>
+      </tr>
     </table>
 
+    <input ng-model="agg.params.ranges.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
+    <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
+      <p>
+        <i class="fa fa-danger text-danger"></i>
+        <strong>Required:</strong> You must specify at least one date range.
+      </p>
+    </div>
+
     <div
       ng-click="agg.params.ranges.push({})"
       class="sidebar-item-button primary">

src/kibana/components/agg_types/controls/filters.html

@@ -18,11 +18,11 @@
   </div>
 </div>
 
-<input ng-model="agg.params.filters.length" name="filterLength" required min="1" type="number" class="ng-hide">
+<input ng-model="agg.params.filters.length" name="filterLength" required min="1" type="number" class="ng-hide" />
 <div class="hintbox" ng-show="aggForm.filterLength.$invalid">
   <p>
     <i class="fa fa-danger text-danger"></i>
-    <strong>Required:</strong> You must specify at least one filter
+    <strong>Required:</strong> You must specify at least one filter.
   </p>
 </div>
 

src/kibana/components/agg_types/controls/ip_ranges.html

@@ -5,7 +5,7 @@
   </p>
 
   <div ng-show="agg.params.ipRangeType != 'mask'">
-    <table class="vis-editor-agg-editor-ranges form-group">
+    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.fromTo.length">
       <tr>
         <th>
           <label>From</label>
@@ -43,6 +43,14 @@
       </tr>
     </table>
 
+    <input ng-if="agg.params.ipRangeType != 'mask'" ng-model="agg.params.ranges.fromTo.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
+    <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
+      <p>
+        <i class="fa fa-danger text-danger"></i>
+        <strong>Required:</strong> You must specify at least one IP range.
+      </p>
+    </div>
+
     <div
       ng-click="agg.params.ranges.fromTo.push({})"
       class="sidebar-item-button primary">
@@ -51,7 +59,7 @@
   </div>
 
   <div ng-show="agg.params.ipRangeType == 'mask'">
-    <table class="vis-editor-agg-editor-ranges form-group">
+    <table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.mask.length">
       <tr>
         <th>
           <label>Mask</label>
@@ -79,6 +87,14 @@
       </tr>
     </table>
 
+    <input ng-if="agg.params.ipRangeType == 'mask'" ng-model="agg.params.ranges.mask.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
+    <div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
+      <p>
+        <i class="fa fa-danger text-danger"></i>
+        <strong>Required:</strong> You must specify at least one IP range.
+      </p>
+    </div>
+
     <div
       ng-click="agg.params.ranges.mask.push({})"
       class="sidebar-item-button primary">

src/kibana/components/agg_types/controls/ranges.html

@@ -1,4 +1,4 @@
-<table class="vis-editor-agg-editor-ranges form-group">
+<table class="vis-editor-agg-editor-ranges form-group" ng-show="agg.params.ranges.length">
   <tr>
     <th>
       <label>From</label>
@@ -37,8 +37,16 @@
   </tr>
 </table>
 
+<input ng-model="agg.params.ranges.length" name="rangeLength" required min="1" type="number" class="ng-hide" />
+<div class="hintbox" ng-show="aggForm.rangeLength.$invalid">
+  <p>
+    <i class="fa fa-danger text-danger"></i>
+    <strong>Required:</strong> You must specify at least one range.
+  </p>
+</div>
+
 <div
   ng-click="agg.params.ranges.push({})"
   class="sidebar-item-button primary">
   Add Range
-</div>
+</div>

src/kibana/directives/validate_cidr_mask.js

@@ -14,6 +14,11 @@ define(function (require) {
         ngModel.$formatters.unshift(validateCidrMask);
 
         function validateCidrMask(mask) {
+          if (mask == null || mask === '') {
+            ngModel.$setValidity('cidrMaskInput', true);
+            return null;
+          }
+
           try {
             mask = new CidrMask(mask);
             ngModel.$setValidity('cidrMaskInput', true);

src/kibana/directives/validate_ip.js

@@ -13,6 +13,11 @@ define(function (require) {
         },
         link: function ($scope, elem, attr, ngModel) {
           function validateIp(ipAddress) {
+            if (ipAddress == null || ipAddress === '') {
+              ngModel.$setValidity('ipInput', true);
+              return null;
+            }
+
             try {
               ipAddress = new Ipv4Address(ipAddress);
               ngModel.$setValidity('ipInput', true);

src/kibana/plugins/visualize/editor/sidebar.html

@@ -1,7 +1,8 @@
 <div class="sidebar-container">
   <form class="sidebar-list"
         ng-submit="visualizeEditor.$invalid ? dontApply() : stageEditableVis()"
-        name="visualizeEditor">
+        name="visualizeEditor"
+        novalidate><!-- see http://goo.gl/9kgz5w -->
 
     <div css-truncate title="{{indexPattern.id}}" ng-if="vis.type.requiresSearch" class="index-pattern">
       {{ indexPattern.id }}

test/unit/specs/directives/validate_cidr_mask.js

@@ -13,6 +13,22 @@ define(function (require) {
       $rootScope = _$rootScope_;
     }));
 
+    it('should allow empty input', function () {
+      var element = $compile(html)($rootScope);
+
+      $rootScope.value = '';
+      $rootScope.$digest();
+      expect(element.hasClass('ng-valid')).to.be.ok();
+
+      $rootScope.value = null;
+      $rootScope.$digest();
+      expect(element.hasClass('ng-valid')).to.be.ok();
+
+      $rootScope.value = undefined;
+      $rootScope.$digest();
+      expect(element.hasClass('ng-valid')).to.be.ok();
+    });
+
     it('should allow valid CIDR masks', function () {
       var element = $compile(html)($rootScope);
 
@@ -36,10 +52,6 @@ define(function (require) {
     it('should disallow invalid CIDR masks', function () {
       var element = $compile(html)($rootScope);
 
-      $rootScope.value = '';
-      $rootScope.$digest();
-      expect(element.hasClass('ng-invalid')).to.be.ok();
-
       $rootScope.value = 'hello, world';
       $rootScope.$digest();
       expect(element.hasClass('ng-invalid')).to.be.ok();

test/unit/specs/directives/validate_ip.js

@@ -13,6 +13,22 @@ define(function (require) {
       $rootScope = _$rootScope_;
     }));
 
+    it('should allow empty input', function () {
+      var element = $compile(html)($rootScope);
+
+      $rootScope.value = '';
+      $rootScope.$digest();
+      expect(element.hasClass('ng-valid')).to.be.ok();
+
+      $rootScope.value = null;
+      $rootScope.$digest();
+      expect(element.hasClass('ng-valid')).to.be.ok();
+
+      $rootScope.value = undefined;
+      $rootScope.$digest();
+      expect(element.hasClass('ng-valid')).to.be.ok();
+    });
+
     it('should allow valid IP addresses', function () {
       var element = $compile(html)($rootScope);
 
@@ -36,10 +52,6 @@ define(function (require) {
     it('should disallow invalid IP addresses', function () {
       var element = $compile(html)($rootScope);
 
-      $rootScope.value = '';
-      $rootScope.$digest();
-      expect(element.hasClass('ng-invalid')).to.be.ok();
-
       $rootScope.value = 'hello, world';
       $rootScope.$digest();
       expect(element.hasClass('ng-invalid')).to.be.ok();
@@ -56,7 +68,7 @@ define(function (require) {
       $rootScope.$digest();
       expect(element.hasClass('ng-invalid')).to.be.ok();
 
-      $rootScope.value = Number.MAX_SAFE_INTEGER;
+      $rootScope.value = Number.MAX_VALUE;
       $rootScope.$digest();
       expect(element.hasClass('ng-invalid')).to.be.ok();
     });