Merge pull request #8613 from elastic/jasper/backport/8566/5.x

[backport] PR #8566 to 5.x - Support decimals in histogram interval

src/ui/public/agg_types/__tests__/buckets/_histogram.js

@@ -35,12 +35,22 @@ describe('Histogram Agg', function () {
     describe('interval', function () {
       // reads aggConfig.params.interval, writes to dsl.interval
 
-      it('accepts a number', function () {
+      it('accepts a whole number', function () {
         let output = paramWriter.write({ interval: 100 });
         expect(output.params).to.have.property('interval', 100);
       });
 
-      it('accepts a string', function () {
+      it('accepts a decimal number', function () {
+        let output = paramWriter.write({ interval: 0.1 });
+        expect(output.params).to.have.property('interval', 0.1);
+      });
+
+      it('accepts a decimal number string', function () {
+        let output = paramWriter.write({ interval: '0.1' });
+        expect(output.params).to.have.property('interval', 0.1);
+      });
+
+      it('accepts a whole number string', function () {
         let output = paramWriter.write({ interval: '10' });
         expect(output.params).to.have.property('interval', 10);
       });

src/ui/public/agg_types/buckets/_interval_options.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import 'ui/directives/input_whole_number';
+
 export default function IntervalOptionsService(Private) {
 
   // shorthand

src/ui/public/agg_types/buckets/histogram.js

@@ -29,7 +29,7 @@ export default function HistogramAggDefinition(Private) {
         name: 'interval',
         editor: intervalTemplate,
         write: function (aggConfig, output) {
-          output.params.interval = parseInt(aggConfig.params.interval, 10);
+          output.params.interval = parseFloat(aggConfig.params.interval);
         }
       },
 

src/ui/public/agg_types/controls/interval.html

@@ -35,6 +35,6 @@
     class="form-control"
     name="interval"
     min="0"
-    input-whole-number
+    input-number
     >
 </div>

src/ui/public/directives/__tests__/input_whole_number.js → src/ui/public/directives/__tests__/input_number.js

@@ -1,12 +1,12 @@
 import angular from 'angular';
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
-import 'ui/directives/input_whole_number';
+import 'ui/directives/input_number';
 
-describe('Whole number input directive', function () {
+describe('Number input directive', function () {
   let $compile;
   let $rootScope;
-  let html = '<input type="text" ng-model="value" input-whole-number />';
+  let html = '<input type="text" ng-model="value" input-number />';
 
   beforeEach(ngMock.module('kibana'));
 
@@ -22,16 +22,16 @@ describe('Whole number input directive', function () {
     $rootScope.$digest();
     expect(element.hasClass('ng-valid')).to.be.ok();
 
-    $rootScope.value = '1.0';
+    $rootScope.value = '1';
     $rootScope.$digest();
     expect(element.hasClass('ng-valid')).to.be.ok();
 
-    $rootScope.value = '-5.0';
+    $rootScope.value = '-5';
     $rootScope.$digest();
     expect(element.hasClass('ng-valid')).to.be.ok();
   });
 
-  it('should disallow numbers with decimals', function () {
+  it('should allow numbers with decimals', function () {
     let element = $compile(html)($rootScope);
 
     $rootScope.value = '123.0';
@@ -40,10 +40,10 @@ describe('Whole number input directive', function () {
 
     $rootScope.value = '1.2';
     $rootScope.$digest();
-    expect(element.hasClass('ng-invalid')).to.be.ok();
+    expect(element.hasClass('ng-valid')).to.be.ok();
 
     $rootScope.value = '-5.5';
     $rootScope.$digest();
-    expect(element.hasClass('ng-invalid')).to.be.ok();
+    expect(element.hasClass('ng-valid')).to.be.ok();
   });
 });

src/ui/public/directives/input_number.js

@@ -0,0 +1,18 @@
+import uiModules from 'ui/modules';
+let module = uiModules.get('kibana');
+
+module.directive('inputNumber', function () {
+  return {
+    restrict: 'A',
+    require: 'ngModel',
+    link: function ($scope, $elem, attrs, ngModel) {
+      ngModel.$parsers.push(checkNumber);
+      ngModel.$formatters.push(checkNumber);
+
+      function checkNumber(value) {
+        ngModel.$setValidity('number', !isNaN(parseFloat(value)));
+        return value;
+      }
+    }
+  };
+});