github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Enable query bar datepicker in core apps where appropriate (#30171)

Browse source 
Updates discover, visualize, and dashboard to use the date picker added to the query bar in #29130. There are still some areas where we use the top nav date picker, like Timelion and TSVB which don't have a query bar.
This commit is contained in:
Matt Bargar 2019-02-08 17:02:53 -05:00 • committed by GitHub
parent 476c4cd099
commit 247502083b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 119 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.html
View file

@ -16,6 +16,12 @@
filters="model.filters"
on-filters-updated="onFiltersUpdated"
show-filter-bar="showFilterBar()"
show-date-picker="true"
date-range-from="model.timeRange.from"
date-range-to="model.timeRange.to"
is-refresh-paused="model.refreshInterval.pause"
refresh-interval="model.refreshInterval.value"
on-refresh-change="onRefreshChange"
watch-depth="reference"
></search-bar>
</div>

19
src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js
View file

@ -137,6 +137,8 @@ app.directive('dashboardApp', function ($injector) {
timeRestore: dashboardStateManager.getTimeRestore(),
title: dashboardStateManager.getTitle(),
description: dashboardStateManager.getDescription(),
timeRange: timefilter.getTime(),
refreshInterval: timefilter.getRefreshInterval(),
};
$scope.panels = dashboardStateManager.getPanels();
@ -171,8 +173,8 @@ app.directive('dashboardApp', function ($injector) {
queryFilter.getFilters()
);
timefilter.enableAutoRefreshSelector();
timefilter.enableTimeRangeSelector();
timefilter.disableTimeRangeSelector();
timefilter.disableAutoRefreshSelector();
updateState();
@ -229,7 +231,9 @@ app.directive('dashboardApp', function ($injector) {
dashboardStateManager.getPanels().find((panel) => panel.panelIndex === panelIndex);
};
$scope.updateQueryAndFetch = function ({ query }) {
$scope.updateQueryAndFetch = function ({ query, dateRange }) {
timefilter.setTime(dateRange);
const oldQuery = $scope.model.query;
if (_.isEqual(oldQuery, query)) {
// The user can still request a reload in the query bar, even if the
@ -243,6 +247,13 @@ app.directive('dashboardApp', function ($injector) {
$scope.refresh();
};
$scope.onRefreshChange = function ({ isPaused, refreshInterval }) {
timefilter.setRefreshInterval({
pause: isPaused,
value: refreshInterval ? refreshInterval : $scope.model.refreshInterval.value
});
};
$scope.onFiltersUpdated = filters => {
// The filters will automatically be set when the queryFilter emits an update event (see below)
queryFilter.setFilters(filters);
@ -280,6 +291,8 @@ app.directive('dashboardApp', function ($injector) {
// directly passed down time filter. Then we can get rid of this reliance on scope broadcasts.
$scope.refresh();
});
$scope.$listenAndDigestAsync(timefilter, 'refreshIntervalUpdate', updateState);
$scope.$listenAndDigestAsync(timefilter, 'timeUpdate', updateState);
function updateViewMode(newMode) {
$scope.topNavMenu = getTopNavConfig(newMode, navActions, dashboardConfig.getHideWriteControls()); // eslint-disable-line no-use-before-define

31
src/legacy/core_plugins/kibana/public/discover/controllers/discover.js
View file

@ -183,6 +183,9 @@ function discoverController(
requests: new RequestAdapter()
};
timefilter.disableTimeRangeSelector();
timefilter.disableAutoRefreshSelector();
$scope.getDocLink = getDocLink;
$scope.intervalOptions = intervalOptions;
$scope.showInterval = false;
@ -491,6 +494,12 @@ function discoverController(
$scope.$listen(timefilter, 'fetch', function () {
$scope.fetch();
});
$scope.$listen(timefilter, 'refreshIntervalUpdate', () => {
$scope.updateRefreshInterval();
});
$scope.$listen(timefilter, 'timeUpdate', () => {
$scope.updateTime();
});
$scope.$watchCollection('state.sort', function (sort) {
if (!sort) return;
@ -518,13 +527,8 @@ function discoverController(
// fetch data when filters fire fetch event
$scope.$listen(queryFilter, 'fetch', $scope.fetch);
timefilter.enableAutoRefreshSelector();
$scope.$watch('opts.timefield', function (timefield) {
if (!!timefield) {
timefilter.enableTimeRangeSelector();
} else {
timefilter.disableTimeRangeSelector();
}
$scope.enableTimeRangeSelector = !!timefield;
});
$scope.$watch('state.interval', function () {
@ -662,7 +666,8 @@ function discoverController(
.catch(notify.error);
};
$scope.updateQueryAndFetch = function ({ query }) {
$scope.updateQueryAndFetch = function ({ query, dateRange }) {
timefilter.setTime(dateRange);
$state.query = migrateLegacyQuery(query);
$scope.fetch();
};
@ -856,6 +861,18 @@ function discoverController(
from: dateMath.parse(timefilter.getTime().from),
to: dateMath.parse(timefilter.getTime().to, { roundUp: true })
};
$scope.time = timefilter.getTime();
};
$scope.updateRefreshInterval = function () {
$scope.refreshInterval = timefilter.getRefreshInterval();
};
$scope.onRefreshChange = function ({ isPaused, refreshInterval }) {
timefilter.setRefreshInterval({
pause: isPaused,
value: refreshInterval ? refreshInterval : $scope.refreshInterval.value
});
};
$scope.resetQuery = function () {

6
src/legacy/core_plugins/kibana/public/discover/index.html
View file

@ -38,6 +38,12 @@
index-patterns="[indexPattern]"
filters="filters"
on-filters-updated="onFiltersUpdated"
show-date-picker="enableTimeRangeSelector"
date-range-from="time.from"
date-range-to="time.to"
is-refresh-paused="refreshInterval.pause"
refresh-interval="refreshInterval.value"
on-refresh-change="onRefreshChange"
watch-depth="reference"
></search-bar>
</div>

9
src/legacy/core_plugins/kibana/public/visualize/editor/editor.html
View file

@ -35,8 +35,15 @@
index-patterns="[indexPattern]"
filters="filters"
on-filters-updated="onFiltersUpdated"
show-query-bar="vis.type.requiresSearch && vis.type.options.showQueryBar"
show-query-bar="showQueryBar()"
show-filter-bar="vis.type.options.showFilterBar && chrome.getVisible()"
show-date-picker="enableQueryBarTimeRangeSelector"
date-range-from="timeRange.from"
date-range-to="timeRange.to"
is-refresh-paused="refreshInterval.pause"
refresh-interval="refreshInterval.value"
show-auto-refresh-only="showAutoRefreshOnlyInQueryBar"
on-refresh-change="onRefreshChange"
watch-depth="reference"
></search-bar>
</div>

42
src/legacy/core_plugins/kibana/public/visualize/editor/editor.js
View file

@ -326,6 +326,10 @@ function VisEditor(
$scope.isAddToDashMode = () => addToDashMode;
$scope.showQueryBar = () => {
return vis.type.requiresSearch && vis.type.options.showQueryBar;
};
$scope.timeRange = timefilter.getTime();
$scope.opts = _.pick($scope, 'savedVis', 'isAddToDashMode');
@ -343,13 +347,27 @@ function VisEditor(
$scope.$watchMulti([
'searchSource.getField("index")',
'vis.type.options.showTimePicker',
], function ([index, requiresTimePicker]) {
$scope.showQueryBar,
], function ([index, requiresTimePicker, showQueryBar]) {
const showTimeFilter = Boolean((!index || index.timeFieldName) && requiresTimePicker);
if (showTimeFilter) {
timefilter.enableTimeRangeSelector();
} else {
if (showQueryBar) {
timefilter.disableTimeRangeSelector();
timefilter.disableAutoRefreshSelector();
$scope.enableQueryBarTimeRangeSelector = true;
$scope.showAutoRefreshOnlyInQueryBar = !showTimeFilter;
}
else if (showTimeFilter) {
timefilter.enableTimeRangeSelector();
timefilter.enableAutoRefreshSelector();
$scope.enableQueryBarTimeRangeSelector = false;
$scope.showAutoRefreshOnlyInQueryBar = false;
}
else {
timefilter.disableTimeRangeSelector();
timefilter.enableAutoRefreshSelector();
$scope.enableQueryBarTimeRangeSelector = false;
$scope.showAutoRefreshOnlyInQueryBar = false;
}
});
@ -364,8 +382,12 @@ function VisEditor(
}
};
timefilter.enableAutoRefreshSelector();
const updateRefreshInterval = () => {
$scope.refreshInterval = timefilter.getRefreshInterval();
};
$scope.$listenAndDigestAsync(timefilter, 'timeUpdate', updateTimeRange);
$scope.$listenAndDigestAsync(timefilter, 'refreshIntervalUpdate', updateRefreshInterval);
// update the searchSource when filters update
$scope.$listen(queryFilter, 'update', function () {
@ -402,11 +424,19 @@ function VisEditor(
}
}
$scope.updateQueryAndFetch = function ({ query }) {
$scope.updateQueryAndFetch = function ({ query, dateRange }) {
timefilter.setTime(dateRange);
$state.query = migrateLegacyQuery(query);
$scope.fetch();
};
$scope.onRefreshChange = function ({ isPaused, refreshInterval }) {
timefilter.setRefreshInterval({
pause: isPaused,
value: refreshInterval ? refreshInterval : $scope.refreshInterval.value
});
};
/**
* Called when the user clicks "Save" button.
*/

2
src/ui/public/query_bar/components/query_bar.tsx
View file

@ -84,6 +84,7 @@ interface Props {
dateRangeTo?: string;
isRefreshPaused?: boolean;
refreshInterval?: number;
showAutoRefreshOnly?: boolean;
onRefreshChange?: (isPaused: boolean, refreshInterval: number) => void;
}
@ -679,6 +680,7 @@ export class QueryBarUI extends Component<Props, State> {
recentlyUsedRanges={recentlyUsedRanges}
commonlyUsedRanges={commonlyUsedRanges}
dateFormat={config.get('dateFormat')}
isAutoRefreshOnly={this.props.showAutoRefreshOnly}
/>
</EuiFlexItem>
);

14
src/ui/public/search_bar/components/search_bar.tsx
View file

@ -54,6 +54,13 @@ interface Props {
showQueryBar: boolean;
showFilterBar: boolean;
intl: InjectedIntl;
showDatePicker?: boolean;
dateRangeFrom?: string;
dateRangeTo?: string;
isRefreshPaused?: boolean;
refreshInterval?: number;
showAutoRefreshOnly?: boolean;
onRefreshChange?: (isPaused: boolean, refreshInterval: number) => void;
}
interface State {
@ -151,6 +158,13 @@ class SearchBarUI extends Component<Props, State> {
indexPatterns={this.props.indexPatterns}
store={this.props.store}
prepend={this.props.showFilterBar ? filterTriggerButton : ''}
showDatePicker={this.props.showDatePicker}
dateRangeFrom={this.props.dateRangeFrom}
dateRangeTo={this.props.dateRangeTo}
isRefreshPaused={this.props.isRefreshPaused}
refreshInterval={this.props.refreshInterval}
showAutoRefreshOnly={this.props.showAutoRefreshOnly}
onRefreshChange={this.props.onRefreshChange}
/>
) : (
''

1
test/functional/apps/dashboard/_embeddable_rendering.js
View file

@ -90,6 +90,7 @@ export default function ({ getService, getPageObjects }) {
await dashboardExpect.vegaTextsDoNotExist(['5,000']);
};
// FLAKY: https://github.com/elastic/kibana/issues/28818
describe.skip('dashboard embeddable rendering', function describeIndexTests() {
before(async () => {

4
test/functional/page_objects/time_picker.js
View file

@ -28,6 +28,10 @@ export function TimePickerPageProvider({ getService, getPageObjects }) {
class TimePickerPage {
async timePickerExists() {
return await testSubjects.exists('superDatePickerToggleQuickMenuButton');
}
formatDateToAbsoluteTimeString(date) {
// toISOString returns dates in format 'YYYY-MM-DDTHH:mm:ss.sssZ'
// Need to replace T with space and remove timezone

3
x-pack/test/functional/apps/dashboard_mode/dashboard_view_mode.js
View file

@ -24,6 +24,7 @@ export default function ({ getService, getPageObjects }) {
'dashboard',
'header',
'settings',
'timePicker',
]);
const dashboardName = 'Dashboard View Mode Test Dashboard';
const savedSearchName = 'Saved search for dashboard';
@ -174,7 +175,7 @@ export default function ({ getService, getPageObjects }) {
});
it('shows the timepicker', async () => {
const timePickerExists = await testSubjects.exists('superDatePickerApplyTimeButton');
const timePickerExists = await PageObjects.timePicker.timePickerExists();
expect(timePickerExists).to.be(true);
});