|
|
@@ -7,224 +7,192 @@ import kbn = require('kbn');
|
|
|
|
|
|
export class TimePickerCtrl {
|
|
|
|
|
|
- constructor($scope : any, $rootScope, timeSrv) {
|
|
|
- $scope.panelMeta = {
|
|
|
- status : "Stable",
|
|
|
- description : ""
|
|
|
- };
|
|
|
-
|
|
|
- // Set and populate defaults
|
|
|
- var _d = {
|
|
|
- status : "Stable",
|
|
|
- time_options : ['5m','15m','1h','6h','12h','24h','2d','7d','30d'],
|
|
|
- refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
|
|
|
- };
|
|
|
+ static defaults = {
|
|
|
+ status : "Stable",
|
|
|
+ time_options : ['5m','15m','1h','6h','12h','24h','today', '2d','7d','30d'],
|
|
|
+ refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
|
|
|
+ };
|
|
|
|
|
|
- // ng-pattern regexs
|
|
|
- $scope.patterns = {
|
|
|
+ static patterns = {
|
|
|
date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
|
|
|
hour: /^([01]?[0-9]|2[0-3])$/,
|
|
|
minute: /^[0-5][0-9]$/,
|
|
|
second: /^[0-5][0-9]$/,
|
|
|
millisecond: /^[0-9]*$/
|
|
|
- };
|
|
|
+ };
|
|
|
|
|
|
+ constructor(private $scope : any, private $rootScope, private timeSrv) {
|
|
|
+ $scope.patterns = TimePickerCtrl.patterns;
|
|
|
$scope.timeSrv = timeSrv;
|
|
|
+ $scope.ctrl = this;
|
|
|
|
|
|
- $scope.$on('refresh', function() {
|
|
|
- $scope.init();
|
|
|
- });
|
|
|
-
|
|
|
- $scope.init = function() {
|
|
|
- $scope.panel = $scope.dashboard.timepicker;
|
|
|
+ $scope.$on('refresh', () => this.init());
|
|
|
|
|
|
- _.defaults($scope.panel, _d);
|
|
|
-
|
|
|
- var time = timeSrv.timeRange(true);
|
|
|
- $scope.panel.now = false;
|
|
|
-
|
|
|
- var unparsed = timeSrv.timeRange(false);
|
|
|
- if (_.isString(unparsed.to) && unparsed.to.indexOf('now') === 0) {
|
|
|
- $scope.panel.now = true;
|
|
|
- }
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
|
|
|
- $scope.time = getScopeTimeObj(time.from, time.to);
|
|
|
+ init() {
|
|
|
+ this.$scope.panel = this.$scope.dashboard.timepicker;
|
|
|
|
|
|
- $scope.onAppEvent('zoom-out', function() {
|
|
|
- $scope.zoom(2);
|
|
|
- });
|
|
|
- };
|
|
|
+ _.defaults(this.$scope.panel, TimePickerCtrl.defaults);
|
|
|
|
|
|
- $scope.loadTimeOptions = function() {
|
|
|
- $scope.time_options = _.map($scope.panel.time_options, function(str) {
|
|
|
- return kbn.getRelativeTimeInfo(str);
|
|
|
- });
|
|
|
+ var time = this.timeSrv.timeRange(true);
|
|
|
+ this.$scope.panel.now = false;
|
|
|
|
|
|
- $scope.refreshMenuLeftSide = $scope.time.rangeString.length < 10;
|
|
|
- };
|
|
|
+ var unparsed = this.timeSrv.timeRange(false);
|
|
|
+ if (_.isString(unparsed.to) && unparsed.to.indexOf('now') === 0) {
|
|
|
+ this.$scope.panel.now = true;
|
|
|
+ }
|
|
|
|
|
|
- $scope.customTime = function() {
|
|
|
- // Assume the form is valid since we're setting it to something valid
|
|
|
- $scope.input.$setValidity("dummy", true);
|
|
|
- $scope.temptime = cloneTime($scope.time);
|
|
|
- $scope.temptime.now = $scope.panel.now;
|
|
|
+ this.$scope.time = this.getScopeTimeObj(time.from, time.to);
|
|
|
|
|
|
- $scope.temptime.from.date.setHours(0, 0, 0, 0);
|
|
|
- $scope.temptime.to.date.setHours(0, 0, 0, 0);
|
|
|
+ this.$scope.onAppEvent('zoom-out', function() {
|
|
|
+ this.$scope.zoom(2);
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- // Date picker needs the date to be at the start of the day
|
|
|
- if (new Date().getTimezoneOffset() < 0) {
|
|
|
- $scope.temptime.from.date = moment($scope.temptime.from.date).add(1, 'days').toDate();
|
|
|
- $scope.temptime.to.date = moment($scope.temptime.to.date).add(1, 'days').toDate();
|
|
|
- }
|
|
|
+ pad(n: number, width: number, z = 0): string {
|
|
|
+ var str = n.toString();
|
|
|
+ return str.length >= width ? str : new Array(width - str.length + 1).join(z.toString()) + str;
|
|
|
+ }
|
|
|
|
|
|
- $scope.appEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope });
|
|
|
+ getTimeObj(date): any {
|
|
|
+ return {
|
|
|
+ date: new Date(date),
|
|
|
+ hour: this.pad(date.getHours(), 2),
|
|
|
+ minute: this.pad(date.getMinutes(), 2),
|
|
|
+ second: this.pad(date.getSeconds(), 2),
|
|
|
+ millisecond: this.pad(date.getMilliseconds(), 3)
|
|
|
};
|
|
|
+ };
|
|
|
|
|
|
- // Constantly validate the input of the fields. This function does not change any date variables
|
|
|
- // outside of its own scope
|
|
|
- $scope.validate = function(time) : any {
|
|
|
- // Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
|
|
|
- $scope.input.$setValidity("dummy", true);
|
|
|
-
|
|
|
- var _from = datepickerToLocal(time.from.date),
|
|
|
- _to = datepickerToLocal(time.to.date),
|
|
|
- _t = time;
|
|
|
-
|
|
|
- if ($scope.input.$valid) {
|
|
|
+ getScopeTimeObj(from, to) {
|
|
|
+ var model : any = {from: this.getTimeObj(from), to: this.getTimeObj(to)};
|
|
|
|
|
|
- _from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond);
|
|
|
- _to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond);
|
|
|
+ if (model.from.date) {
|
|
|
+ model.tooltip = this.$scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
|
|
|
+ model.tooltip += this.$scope.dashboard.formatDate(model.to.date);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ model.tooltip = 'Click to set time filter';
|
|
|
+ }
|
|
|
|
|
|
- // Check that the objects are valid and to is after from
|
|
|
- if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
|
|
|
- $scope.input.$setValidity("dummy", false);
|
|
|
- return false;
|
|
|
+ if (this.timeSrv.time) {
|
|
|
+ if (this.$scope.panel.now) {
|
|
|
+ if (this.timeSrv.time.from === 'today') {
|
|
|
+ model.rangeString = 'Today';
|
|
|
+ } else {
|
|
|
+ model.rangeString = moment(model.from.date).fromNow() + ' to ' +
|
|
|
+ moment(model.to.date).fromNow();
|
|
|
}
|
|
|
- } else {
|
|
|
- return false;
|
|
|
}
|
|
|
+ else {
|
|
|
+ model.rangeString = this.$scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY HH:mm:ss') + ' to ' +
|
|
|
+ this.$scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY HH:mm:ss');
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- return { from: _from, to: _to, now: time.now };
|
|
|
- };
|
|
|
-
|
|
|
- $scope.setNow = function() {
|
|
|
- $scope.time.to = getTimeObj(new Date());
|
|
|
- };
|
|
|
+ return model;
|
|
|
+ }
|
|
|
|
|
|
- $scope.setAbsoluteTimeFilter = function (time) {
|
|
|
- // Create filter object
|
|
|
- var _filter = _.clone(time);
|
|
|
+ loadTimeOptions() {
|
|
|
+ this.$scope.time_options = _.map(this.$scope.panel.time_options, function(str) {
|
|
|
+ return kbn.getRelativeTimeInfo(str);
|
|
|
+ });
|
|
|
|
|
|
- if (time.now) {
|
|
|
- _filter.to = "now";
|
|
|
- }
|
|
|
+ this.$scope.refreshMenuLeftSide = this.$scope.time.rangeString.length < 10;
|
|
|
+ }
|
|
|
|
|
|
- // Update our representation
|
|
|
- $scope.time = getScopeTimeObj(time.from, time.to);
|
|
|
+ cloneTime(time) {
|
|
|
+ var _n = { from: _.clone(time.from), to: _.clone(time.to) };
|
|
|
|
|
|
- timeSrv.setTime(_filter);
|
|
|
- };
|
|
|
+ // Create new dates as _.clone is shallow.
|
|
|
+ _n.from.date = new Date(_n.from.date);
|
|
|
+ _n.to.date = new Date(_n.to.date);
|
|
|
+ return _n;
|
|
|
+ }
|
|
|
|
|
|
- $scope.setRelativeFilter = function(timespan) {
|
|
|
- $scope.panel.now = true;
|
|
|
+ customTime() {
|
|
|
+ // Assume the form is valid since we're setting it to something valid
|
|
|
+ this.$scope.input.$setValidity("dummy", true);
|
|
|
+ this.$scope.temptime = this.cloneTime(this.$scope.time);
|
|
|
+ this.$scope.temptime.now = this.$scope.panel.now;
|
|
|
|
|
|
- var range = {from: timespan.from, to: timespan.to};
|
|
|
+ this.$scope.temptime.from.date.setHours(0, 0, 0, 0);
|
|
|
+ this.$scope.temptime.to.date.setHours(0, 0, 0, 0);
|
|
|
|
|
|
- if ($scope.panel.nowDelay) {
|
|
|
- range.to = 'now-' + $scope.panel.nowDelay;
|
|
|
- }
|
|
|
+ // Date picker needs the date to be at the start of the day
|
|
|
+ if (new Date().getTimezoneOffset() < 0) {
|
|
|
+ this.$scope.temptime.from.date = moment(this.$scope.temptime.from.date).add(1, 'days').toDate();
|
|
|
+ this.$scope.temptime.to.date = moment(this.$scope.temptime.to.date).add(1, 'days').toDate();
|
|
|
+ }
|
|
|
|
|
|
- timeSrv.setTime(range);
|
|
|
+ this.$scope.appEvent('show-dash-editor', {
|
|
|
+ src: 'app/features/dashboard/timepicker/custom.html',
|
|
|
+ scope: this.$scope
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- $scope.time = getScopeTimeObj(kbn.parseDate(range.from), new Date());
|
|
|
- };
|
|
|
+ setNow() {
|
|
|
+ this.$scope.time.to = this.getTimeObj(new Date());
|
|
|
+ }
|
|
|
|
|
|
- var pad : any = function(n, width, z) {
|
|
|
- z = z || '0';
|
|
|
- n = n.toString();
|
|
|
- return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
|
|
|
- };
|
|
|
+ setAbsoluteTimeFilter(time) {
|
|
|
+ // Create filter object
|
|
|
+ var _filter = _.clone(time);
|
|
|
|
|
|
- var cloneTime = function(time) {
|
|
|
- var _n = {
|
|
|
- from: _.clone(time.from),
|
|
|
- to: _.clone(time.to)
|
|
|
- };
|
|
|
- // Create new dates as _.clone is shallow.
|
|
|
- _n.from.date = new Date(_n.from.date);
|
|
|
- _n.to.date = new Date(_n.to.date);
|
|
|
- return _n;
|
|
|
- };
|
|
|
+ if (time.now) {
|
|
|
+ _filter.to = "now";
|
|
|
+ }
|
|
|
|
|
|
- var getScopeTimeObj = function(from, to) {
|
|
|
- var model : any = {from: getTimeObj(from), to: getTimeObj(to)};
|
|
|
+ // Update our representation
|
|
|
+ this.$scope.time = this.getScopeTimeObj(time.from, time.to);
|
|
|
+ this.timeSrv.setTime(_filter);
|
|
|
+ }
|
|
|
|
|
|
- if (model.from.date) {
|
|
|
- model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
|
|
|
- model.tooltip += $scope.dashboard.formatDate(model.to.date);
|
|
|
- }
|
|
|
- else {
|
|
|
- model.tooltip = 'Click to set time filter';
|
|
|
- }
|
|
|
+ setRelativeFilter(timespan) {
|
|
|
+ this.$scope.panel.now = true;
|
|
|
|
|
|
- if (timeSrv.time) {
|
|
|
- if ($scope.panel.now) {
|
|
|
- if (timeSrv.time.from === 'today') {
|
|
|
- model.rangeString = 'Today';
|
|
|
- } else {
|
|
|
- model.rangeString = moment(model.from.date).fromNow() + ' to ' +
|
|
|
- moment(model.to.date).fromNow();
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- model.rangeString = $scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY HH:mm:ss') + ' to ' +
|
|
|
- $scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY HH:mm:ss');
|
|
|
- }
|
|
|
- }
|
|
|
+ var range = {from: timespan.from, to: timespan.to};
|
|
|
|
|
|
- return model;
|
|
|
- };
|
|
|
+ if (this.$scope.panel.nowDelay) {
|
|
|
+ range.to = 'now-' + this.$scope.panel.nowDelay;
|
|
|
+ }
|
|
|
|
|
|
- var getTimeObj = function(date) {
|
|
|
- return {
|
|
|
- date: new Date(date),
|
|
|
- hour: pad(date.getHours(), 2),
|
|
|
- minute: pad(date.getMinutes(), 2),
|
|
|
- second: pad(date.getSeconds(), 2),
|
|
|
- millisecond: pad(date.getMilliseconds(), 3)
|
|
|
- };
|
|
|
- };
|
|
|
+ this.timeSrv.setTime(range);
|
|
|
|
|
|
- // Do not use the results of this function unless you plan to use setHour/Minutes/etc on the result
|
|
|
- var datepickerToLocal = function(date) {
|
|
|
- date = moment(date).clone().toDate();
|
|
|
- return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate();
|
|
|
- };
|
|
|
+ this.$scope.time = this.getScopeTimeObj(kbn.parseDate(range.from), new Date());
|
|
|
+ }
|
|
|
|
|
|
- $scope.zoom = function(factor) {
|
|
|
- var range = timeSrv.timeRange();
|
|
|
+ validate(time): any {
|
|
|
+ // Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
|
|
|
+ this.$scope.input.$setValidity("dummy", true);
|
|
|
|
|
|
- var timespan = (range.to.valueOf() - range.from.valueOf());
|
|
|
- var center = range.to.valueOf() - timespan/2;
|
|
|
+ var _from = this.datepickerToLocal(time.from.date);
|
|
|
+ var _to = this.datepickerToLocal(time.to.date);
|
|
|
+ var _t = time;
|
|
|
|
|
|
- var to = (center + (timespan*factor)/2);
|
|
|
- var from = (center - (timespan*factor)/2);
|
|
|
+ if (this.$scope.input.$valid) {
|
|
|
+ _from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond);
|
|
|
+ _to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond);
|
|
|
|
|
|
- if (to > Date.now() && range.to <= Date.now()) {
|
|
|
- var offset = to - Date.now();
|
|
|
- from = from - offset;
|
|
|
- to = Date.now();
|
|
|
+ // Check that the objects are valid and to is after from
|
|
|
+ if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
|
|
|
+ this.$scope.input.$setValidity("dummy", false);
|
|
|
+ return false;
|
|
|
}
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
|
|
|
- timeSrv.setTime({
|
|
|
- from: moment.utc(from).toDate(),
|
|
|
- to: moment.utc(to).toDate(),
|
|
|
- });
|
|
|
- };
|
|
|
+ return { from: _from, to: _to, now: time.now };
|
|
|
+ }
|
|
|
|
|
|
- $scope.init();
|
|
|
+ datepickerToLocal(date) {
|
|
|
+ date = moment(date).clone().toDate();
|
|
|
+ return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate();
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
export function settingsDirective() {
|
Torkel Ödegaard