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
This commit is contained in:
parent
753327cfac
commit
b11bbc44a4
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue