mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
* 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
251 lines
6.6 KiB
TypeScript
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);
|