github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
This commit is contained in:
Lukas Olson 2017-03-28 16:51:12 -07:00
parent c411c27c26
commit cd6a703352
4 changed files with 24 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/core_plugins/kibana/public/discover/controllers/discover.js
View file

@ -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();
}
});

19
src/core_plugins/kibana/public/discover/index.html
View file

@ -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>

8
test/functional/apps/discover/_discover.js
View file

@ -83,10 +83,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);
});
@ -156,8 +156,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);

33
test/support/page_objects/discover_page.js
View file

@ -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();
});