IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(timepickerV2): absolute time / calendar picker works, #2761

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-09-18 11:01:37 +02:00
parent a8a94ef87b
commit 69db9e0d45
6 changed files with 48 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/dashboard/dashboardSrv.js
View File

@@ -217,7 +217,7 @@ function (angular, $, kbn, _, moment) {
p.formatDate = function(date, format) {
if (!moment.isMoment(date)) {
date = moment(date)
date = moment(date);
}
format = format || 'YYYY-MM-DD HH:mm:ss';

6
public/app/features/dashboard/timepicker/dropdown.html
View File

@@ -10,7 +10,7 @@
</div>
<div ng-if="openFromPicker">
<datepicker ng-model="absolute.to" class="gf-timepicker-component" show-weeks="false"></datepicker>
<datepicker ng-model="absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
</div>
<label class="small">To:</label>
@@ -21,6 +21,10 @@
</button>
</div>
<div ng-if="openToPicker">
<datepicker ng-model="absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
</div>
<label class="small">Refreshing every:</label>
<select ng-model="refresh.value" class='input-medium' ng-options="f.value as f.text for f in refresh.options">
</select>

43
public/app/features/dashboard/timepicker/input_date.js
View File

@@ -1,7 +1,8 @@
define([
"angular",
"lodash",
"moment",
],function (angular, moment) {
],function (angular, _, moment) {
'use strict';
angular.
@@ -11,22 +12,30 @@ define([
restrict: 'A',
require: 'ngModel',
link: function ($scope, $elem, attrs, ngModel) {
// var format = 'YYYY-MM-DD HH:mm:ss.SSS';
// // $elem.after('<div class="input-datetime-format">' + format + '</div>');
//
// // What should I make with the input from the user?
// var fromUser = function (text) {
// var parsed = moment(text, format);
// return parsed.isValid() ? parsed : undefined;
// };
//
// // How should I present the data back to the user in the input field?
// var toUser = function (datetime) {
// return moment(datetime).format(format);
// };
//
// ngModel.$parsers.push(fromUser);
// ngModel.$formatters.push(toUser);
var format = 'YYYY-MM-DD HH:mm:ss';
// $elem.after('<div class="input-datetime-format">' + format + '</div>');
// What should I make with the input from the user?
var fromUser = function (text) {
console.log('fromUser: ' + text);
return text;
// if (_.isString(text)) {
// }
// var parsed = moment(text, format);
// return parsed.isValid() ? parsed : undefined;
};
// How should I present the data back to the user in the input field?
var toUser = function (currentValue) {
if (moment.isMoment(currentValue)) {
return currentValue.format(format);
} else {
return currentValue;
}
};
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);
}
};
});

10
public/app/features/dashboard/timepicker/timepicker.ts
View File

@@ -54,7 +54,7 @@ export class TimePickerCtrl {
this.$scope.dashboard.formatDate(time.to, format);
}
this.$scope.absoluteJs = {form: time.from.toDate(), to: time.to.toDate()};
this.$scope.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
this.$scope.timeRaw = timeRaw;
this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
@@ -92,6 +92,14 @@ export class TimePickerCtrl {
this.$scope.appEvent('hide-dash-editor');
}
absoluteFromChanged() {
this.$scope.timeRaw.from = moment(this.$scope.absolute.fromJs);
}
absoluteToChanged() {
this.$scope.timeRaw.to = moment(this.$scope.absolute.toJs);
}
setRelativeFilter(timespan) {
this.$scope.panel.now = true;