grafana/public/app/features/dashboard/services/TimeSrv.ts
Johannes Schill 406ef962fc Explore & Dashboard: New Refresh picker (#16505)
* Added RefreshButton

* Added RefreshSelect

* Added RefreshSelectButton

* Added RefreshPicker

* Removed the magic string Paused

* Minor style changes and using Off instead of Pause

* Added HeadlessSelect

* Added HeadlessSelect story

* Added SelectButton

* Removed RefreshSelectButton

* Added TimePicker and moved ClickOutsideWrapper to ui/components

* Added TimePickerPopOver

* Added react-calendar

* Missed yarn lock file

* Added inputs to popover

* Added TimePicker and RefreshPicker to DashNav

* Moved TimePicker and RefreshPicker to app/core

* Added react-calendar to app and removed from ui/components

* Fixed PopOver onClick

* Moved everything back to ui components because of typings problems

* Exporing RefreshPicker and TimePicker

* Added Apply and inputs

* Added typings

* Added TimePickerInput and logic

* Fixed parsing of string to Moments

* Fixed range string

* Styling and connecting the calendars and inputs

* Changed Calendar styling

* Added backward forward and zoom

* Fixed responsive styles

* Moved TimePicker and RefreshPicker into app core

* Renamed menuIsOpen to isOpen

* Changed from className={} to className=""

* Moved Popover to TimePickerOptionGroup

* Renamed all PopOver to Popover

* Renamed popOver to popover and some minor refactorings

* Renamed files with git mv

* Added ButtonSelect and refactored RefreshPicker

* Refactored TimePicker to use new ButtonSelect

* Removed HeadlessSelect as suggested

* fix: Fix typings and misc errors after rebase

* wip: Enable time picker on dashboard and add tooltip

* Merge branch 'master' into hugoh/new-timepicker-and-unified-component

# Conflicts:
#	packages/grafana-ui/package.json
#	packages/grafana-ui/src/components/Input/Input.test.tsx
#	packages/grafana-ui/src/components/Input/Input.tsx
#	packages/grafana-ui/src/utils/validate.ts
#	public/app/features/dashboard/panel_editor/QueryOptions.tsx
#	yarn.lock

* fix: Snapshot update

* Move TimePicker default options into the TimePicker as statics, pass the tooltipContent down the line when wanted and wrap the button in a tooltip element

* fix: Override internal state prop if we provide one in a prop

* Updated snapshots

* Let dashnav control refreshPicker state

* feat: Add a stringToMs function

* wip: RefreshPicker

* wip: Move RefreshPicker to @grafana/ui

* wip: Move TimePicker to @grafana/ui

* wip: Remove comments

* wip: Add refreshPicker to explore

* wip: Use default intervals if the prop is missing

* wip: Nicer way of setting defaults

* fix: Control the select component

* wip: Add onMoveForward/onMoveBack

* Remove code related to the new time picker and refresh picker from dashnav

* Fix: Typings after merge

* chore: Minor fix after merge

* chore: Remove _.map usage

* chore: Moved refresh-picker logic out of the refresh picker since it will work a little differently in explore and dashboards until we have replaced the TimeSrv

* feat: Add an Interval component to @grafana/ui

* chore: Remove intervalId from redux state and move setInterval logic from ExploreToolbar to its own Interval component

* feat: Add refreshInterval to Explore's URL state

* feat: Pick up refreshInterval from url on page load

* fix: Set default refreshInterval when no value can be retained from URL

* fix: Update test initial state with refreshInterval

* fix: Handle URLs before RefreshPicker

* fix: Move RefreshInterval to url position 3 since the segments can take multiple positions

* fix: A better way of detecting urls without RefreshInterval in Explore

* chore: Some Explore typings

* fix: Attach refresh picker to interval picker

* chore: Sass fix for refresh button border radius

* fix: Remove refreshInterval from URL

* fix: Intervals now start when previous interval is finished

* fix: Use clearTimeout instead of clearInterval

* fix: Make sure there's a delay set before adding a timeout when we have slow explore queries

* wip: Add refresh picker to dashboard

* feat: Add util for removing keys with empty values

* feat: RefreshPicker in dashboards and tmp rem out old RefreshPicker

* fix: Remove the jumpy:ness in the refreshpicker

* Changed placement and made it hide when your in dashboard settings

* chore: Move logic related to refresh picker out of DashNav to its own component

* feat: Add tooltip to refreshpicker

* fix: Fix bug with refreshpicker not updating when setting to 'off'

* fix: Make it possible to override refresh intervals using the dashboard intervals

* chore: Change name of Interval to SetInterval to align with ecmascripts naming since its basically the same but declarative and async

* fix: Use default intervals when auto refresh is empty in dashboard settings

* fix: Hide time/interval picker when hidden is true on the model, such as on the home dashboard

* fix: Interval picker will have to handle location changes since timeSrv wont

* RefreshPicker: Refactoring refresh picker

* RefreshPicker: minor refactoring
2019-04-16 09:15:23 +02:00

251 lines
6.6 KiB
TypeScript

// Libraries
import moment from 'moment';
import _ from 'lodash';
// Utils
import kbn from 'app/core/utils/kbn';
import coreModule from 'app/core/core_module';
import * as dateMath from 'app/core/utils/datemath';
// Types
import { TimeRange } from '@grafana/ui';
export class TimeSrv {
time: any;
refreshTimer: any;
refresh: boolean;
oldRefresh: boolean;
dashboard: any;
timeAtLoad: any;
private autoRefreshBlocked: boolean;
/** @ngInject */
constructor($rootScope, private $timeout, private $location, private timer, private contextSrv) {
// default time
this.time = { from: '6h', to: 'now' };
$rootScope.$on('zoom-out', this.zoomOut.bind(this));
$rootScope.$on('$routeUpdate', this.routeUpdated.bind(this));
document.addEventListener('visibilitychange', () => {
if (this.autoRefreshBlocked && document.visibilityState === 'visible') {
this.autoRefreshBlocked = false;
this.refreshDashboard();
}
});
}
init(dashboard) {
this.timer.cancelAll();
this.dashboard = dashboard;
this.time = dashboard.time;
this.refresh = dashboard.refresh;
this.initTimeFromUrl();
this.parseTime();
// remember time at load so we can go back to it
this.timeAtLoad = _.cloneDeep(this.time);
if (this.refresh) {
this.setAutoRefresh(this.refresh);
}
}
private parseTime() {
// when absolute time is saved in json it is turned to a string
if (_.isString(this.time.from) && this.time.from.indexOf('Z') >= 0) {
this.time.from = moment(this.time.from).utc();
}
if (_.isString(this.time.to) && this.time.to.indexOf('Z') >= 0) {
this.time.to = moment(this.time.to).utc();
}
}
private parseUrlParam(value) {
if (value.indexOf('now') !== -1) {
return value;
}
if (value.length === 8) {
return moment.utc(value, 'YYYYMMDD');
}
if (value.length === 15) {
return moment.utc(value, 'YYYYMMDDTHHmmss');
}
if (!isNaN(value)) {
const epoch = parseInt(value, 10);
return moment.utc(epoch);
}
return null;
}
private initTimeFromUrl() {
const params = this.$location.search();
if (params.from) {
this.time.from = this.parseUrlParam(params.from) || this.time.from;
}
if (params.to) {
this.time.to = this.parseUrlParam(params.to) || this.time.to;
}
// if absolute ignore refresh option saved to dashboard
if (params.to && params.to.indexOf('now') === -1) {
this.refresh = false;
this.dashboard.refresh = false;
}
// but if refresh explicitly set then use that
if (params.refresh) {
this.refresh = params.refresh || this.refresh;
}
}
private routeUpdated() {
const params = this.$location.search();
const urlRange = this.timeRangeForUrl();
// check if url has time range
if (params.from && params.to) {
// is it different from what our current time range?
if (params.from !== urlRange.from || params.to !== urlRange.to) {
// issue update
this.initTimeFromUrl();
this.setTime(this.time, true);
}
} else if (this.timeHasChangedSinceLoad()) {
this.setTime(this.timeAtLoad, true);
}
}
private timeHasChangedSinceLoad() {
return this.timeAtLoad && (this.timeAtLoad.from !== this.time.from || this.timeAtLoad.to !== this.time.to);
}
setAutoRefresh(interval) {
this.dashboard.refresh = interval;
this.cancelNextRefresh();
if (interval) {
const intervalMs = kbn.interval_to_ms(interval);
this.refreshTimer = this.timer.register(
this.$timeout(() => {
this.startNextRefreshTimer(intervalMs);
this.refreshDashboard();
}, intervalMs)
);
}
// update url inside timeout to so that a digest happens after (called from react)
this.$timeout(() => {
const params = this.$location.search();
if (interval) {
params.refresh = interval;
this.$location.search(params);
} else if (params.refresh) {
delete params.refresh;
this.$location.search(params);
}
});
}
refreshDashboard() {
this.dashboard.timeRangeUpdated(this.timeRange());
}
private startNextRefreshTimer(afterMs) {
this.cancelNextRefresh();
this.refreshTimer = this.timer.register(
this.$timeout(() => {
this.startNextRefreshTimer(afterMs);
if (this.contextSrv.isGrafanaVisible()) {
this.refreshDashboard();
} else {
this.autoRefreshBlocked = true;
}
}, afterMs)
);
}
private cancelNextRefresh() {
this.timer.cancel(this.refreshTimer);
}
setTime(time, fromRouteUpdate?) {
_.extend(this.time, time);
// disable refresh if zoom in or zoom out
if (moment.isMoment(time.to)) {
this.oldRefresh = this.dashboard.refresh || this.oldRefresh;
this.setAutoRefresh(false);
} else if (this.oldRefresh && this.oldRefresh !== this.dashboard.refresh) {
this.setAutoRefresh(this.oldRefresh);
this.oldRefresh = null;
}
// update url
if (fromRouteUpdate !== true) {
const urlRange = this.timeRangeForUrl();
const urlParams = this.$location.search();
urlParams.from = urlRange.from;
urlParams.to = urlRange.to;
this.$location.search(urlParams);
}
this.$timeout(this.refreshDashboard.bind(this), 0);
}
timeRangeForUrl() {
const range = this.timeRange().raw;
if (moment.isMoment(range.from)) {
range.from = range.from.valueOf().toString();
}
if (moment.isMoment(range.to)) {
range.to = range.to.valueOf().toString();
}
return range;
}
timeRange(): TimeRange {
// make copies if they are moment (do not want to return out internal moment, because they are mutable!)
const raw = {
from: moment.isMoment(this.time.from) ? moment(this.time.from) : this.time.from,
to: moment.isMoment(this.time.to) ? moment(this.time.to) : this.time.to,
};
const timezone = this.dashboard && this.dashboard.getTimezone();
return {
from: dateMath.parse(raw.from, false, timezone),
to: dateMath.parse(raw.to, true, timezone),
raw: raw,
};
}
zoomOut(e, factor) {
const range = this.timeRange();
const timespan = range.to.valueOf() - range.from.valueOf();
const center = range.to.valueOf() - timespan / 2;
const to = center + (timespan * factor) / 2;
const from = center - (timespan * factor) / 2;
this.setTime({ from: moment.utc(from), to: moment.utc(to) });
}
}
let singleton;
export function setTimeSrv(srv: TimeSrv) {
singleton = srv;
}
export function getTimeSrv(): TimeSrv {
return singleton;
}
coreModule.service('timeSrv', TimeSrv);