Fix interval drop-down for date histogram in discover (#10384)

* Hide the time interval select on blur

* Show scale warning on discover and keep drop-down

* Show scale without need to hover over info icon

* Remove unused variables

* Fix discover page object tests

* Fix getChartInterval in functional test

src/core_plugins/kibana/public/discover/controllers/discover.js

@@ -108,9 +108,6 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
     return interval.val !== 'custom';
   };
 
-  $scope.toggleInterval = function () {
-    $scope.showInterval = !$scope.showInterval;
-  };
   $scope.topNavMenu = [{
     key: 'new',
     description: 'New Search',
@@ -236,10 +233,7 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
         timefilter.enabled = !!timefield;
       });
 
-      $scope.$watch('state.interval', function (interval, oldInterval) {
-        if (interval !== oldInterval && interval === 'auto') {
-          $scope.showInterval = false;
-        }
+      $scope.$watch('state.interval', function () {
         $scope.fetch();
       });
 
@@ -250,9 +244,7 @@ function discoverController($scope, config, courier, $route, $window, Notifier,
         const buckets = $scope.vis.aggs.bySchemaGroup.buckets;
 
         if (buckets && buckets.length === 1) {
-          $scope.intervalName = 'by ' + buckets[0].buckets.getInterval().description;
-        } else {
-          $scope.intervalName = 'auto';
+          $scope.bucketInterval = buckets[0].buckets.getInterval();
         }
       });
 

src/core_plugins/kibana/public/discover/index.html

@@ -90,20 +90,23 @@
 
                   —
 
-                  <span class="results-interval" ng-hide="showInterval">
-                    <a
-                      ng-click="toggleInterval()">
-                      {{ intervalName }}
-                    </a>
-                  </span>
-
-                  <span ng-show="showInterval" class="results-interval form-inline">
+                  <span class="results-interval form-inline">
                     <select
                       class="form-control"
                       ng-model="state.interval"
                       ng-options="interval.val as interval.display for interval in intervalOptions | filter: intervalEnabled"
+                      ng-blur="toggleInterval()"
+                      data-test-subj="discoverIntervalSelect"
                       >
                     </select>
+                    <span ng-show="bucketInterval.scaled">
+                      <kbn-info
+                        placement="right"
+                        class="kuiIcon--info"
+                        info="This interval creates {{ bucketInterval.scale > 1 ? 'buckets that are too large' : 'too many buckets' }} to show in the selected time range, so it has been scaled to {{ bucketInterval.description }}">
+                      </kbn-info>
+                      Scaled to {{ bucketInterval.description }}
+                    </span>
                   </span>
                 </center>
 

test/functional/apps/discover/_discover.js

@@ -82,10 +82,10 @@ bdd.describe('discover app', function describeIndexTests() {
       expect(actualTimeString).to.be(expectedTimeString);
     });
 
-    bdd.it('should show correct initial chart interval of 3 hours', async function () {
+    bdd.it('should show correct initial chart interval of Auto', async function () {
       const actualInterval = await PageObjects.discover.getChartInterval();
 
-      const expectedInterval = 'by 3 hours';
+      const expectedInterval = 'Auto';
       expect(actualInterval).to.be(expectedInterval);
     });
 
@@ -155,8 +155,8 @@ bdd.describe('discover app', function describeIndexTests() {
       await verifyChartData(expectedBarChartData);
     });
 
-    bdd.it('should show Auto chart interval of 3 hours', async function () {
-      const expectedChartInterval = 'by 3 hours';
+    bdd.it('should show Auto chart interval', async function () {
+      const expectedChartInterval = 'Auto';
 
       const actualInterval = await PageObjects.discover.getChartInterval();
       expect(actualInterval).to.be(expectedChartInterval);

test/support/page_objects/discover_page.js

@@ -131,38 +131,19 @@ export default class DiscoverPage {
   }
 
   getChartInterval() {
-    return this.findTimeout
-    .findByCssSelector('a[ng-click="toggleInterval()"]')
-    .getVisibleText()
-    .then(intervalText => {
-      if (intervalText.length > 0) {
-        return intervalText;
-      } else {
-        return this.findTimeout
-        .findByCssSelector('select[ng-model="state.interval"]')
-        .getProperty('value') // this gets 'string:d' for Daily
-        .then(selectedValue => {
-          return this.findTimeout
-          .findByCssSelector('option[value="' + selectedValue + '"]')
-          .getVisibleText();
-        });
-      }
+    return PageObjects.common.findTestSubject('discoverIntervalSelect')
+    .getProperty('value')
+    .then(selectedValue => {
+      return this.findTimeout
+      .findByCssSelector('option[value="' + selectedValue + '"]')
+      .getVisibleText();
     });
   }
 
   setChartInterval(interval) {
     return this.remote.setFindTimeout(5000)
-    .findByCssSelector('a[ng-click="toggleInterval()"]')
+    .findByCssSelector('option[label="' + interval + '"]')
     .click()
-    .catch(() => {
-      // in some cases we have the link above, but after we've made a
-      // selection we just have a select list.
-    })
-    .then(() => {
-      return this.findTimeout
-      .findByCssSelector('option[label="' + interval + '"]')
-      .click();
-    })
     .then(() => {
       return PageObjects.header.waitUntilLoadingHasFinished();
     });