Skip to content

N
nexpie-grafana-theme
Commit 69db9e0d by Torkel Ödegaard
Options

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

parent a8a94ef8
Showing with 48 additions and 22 deletions
public/app/features/dashboard/dashboardSrv.js
...@@ -217,7 +217,7 @@ function (angular, $, kbn, _, moment) { ...@@ -217,7 +217,7 @@ function (angular, $, kbn, _, moment) {
p.formatDate = function(date, format) { p.formatDate = function(date, format) {
if (!moment.isMoment(date)) { if (!moment.isMoment(date)) {
date = moment(date) date = moment(date);
} }
format = format || 'YYYY-MM-DD HH:mm:ss'; format = format || 'YYYY-MM-DD HH:mm:ss';
......
public/app/features/dashboard/timepicker/dropdown.html
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
<div ng-if="openFromPicker"> <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> </div>
<label class="small">To:</label> <label class="small">To:</label>
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
</button> </button>
</div> </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> <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 ng-model="refresh.value" class='input-medium' ng-options="f.value as f.text for f in refresh.options">
</select> </select>
......
public/app/features/dashboard/timepicker/input_date.js
define([ define([
"angular", "angular",
"lodash",
"moment", "moment",
],function (angular, moment) { ],function (angular, _, moment) {
'use strict'; 'use strict';
angular. angular.
...@@ -11,22 +12,30 @@ define([ ...@@ -11,22 +12,30 @@ define([
restrict: 'A', restrict: 'A',
require: 'ngModel', require: 'ngModel',
link: function ($scope, $elem, attrs, ngModel) { link: function ($scope, $elem, attrs, ngModel) {
// var format = 'YYYY-MM-DD HH:mm:ss.SSS'; var format = 'YYYY-MM-DD HH:mm:ss';
// // $elem.after('<div class="input-datetime-format">' + format + '</div>'); // $elem.after('<div class="input-datetime-format">' + format + '</div>');
//
// // What should I make with the input from the user? // What should I make with the input from the user?
// var fromUser = function (text) { var fromUser = function (text) {
// var parsed = moment(text, format); console.log('fromUser: ' + text);
// return parsed.isValid() ? parsed : undefined; return text;
// }; // if (_.isString(text)) {
// // }
// // How should I present the data back to the user in the input field? // var parsed = moment(text, format);
// var toUser = function (datetime) { // return parsed.isValid() ? parsed : undefined;
// return moment(datetime).format(format); };
// };
// // How should I present the data back to the user in the input field?
// ngModel.$parsers.push(fromUser); var toUser = function (currentValue) {
// ngModel.$formatters.push(toUser); if (moment.isMoment(currentValue)) {
return currentValue.format(format);
} else {
return currentValue;
}
};
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);
} }
}; };
}); });
......
public/app/features/dashboard/timepicker/timepicker.ts
...@@ -54,7 +54,7 @@ export class TimePickerCtrl { ...@@ -54,7 +54,7 @@ export class TimePickerCtrl {
this.$scope.dashboard.formatDate(time.to, format); 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.timeRaw = timeRaw;
this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>'; this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>';
this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to); this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to);
...@@ -92,6 +92,14 @@ export class TimePickerCtrl { ...@@ -92,6 +92,14 @@ export class TimePickerCtrl {
this.$scope.appEvent('hide-dash-editor'); 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) { setRelativeFilter(timespan) {
this.$scope.panel.now = true; this.$scope.panel.now = true;
......
public/less/timepicker.less
...@@ -44,13 +44,18 @@ ...@@ -44,13 +44,18 @@
} }
.gf-timepicker-component { .gf-timepicker-component {
margin-bottom: 10px;
button.btn-sm { button.btn-sm {
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
background-image: none; background-image: none;
border: none; border: none;
padding: 6px 9px; padding: 6px 9px;
color: @textColor; color: @textColor;
&.active .text-info { &.active span {
color: @blue;
font-weight: bold;
}
.text-info {
color: @orange; color: @orange;
font-weight: bold; font-weight: bold;
} }
......
public/test/test-main.js
...@@ -19,7 +19,7 @@ require.config({ ...@@ -19,7 +19,7 @@ require.config({
'angular-sanitize': 'vendor/angular-sanitize/angular-sanitize', 'angular-sanitize': 'vendor/angular-sanitize/angular-sanitize',
angularMocks: 'vendor/angular-mocks/angular-mocks', angularMocks: 'vendor/angular-mocks/angular-mocks',
'angular-dragdrop': 'vendor/angular-native-dragdrop/draganddrop', 'angular-dragdrop': 'vendor/angular-native-dragdrop/draganddrop',
'angular-ui': 'vendor/angular-ui/tabs', 'angular-ui': 'vendor/angular-ui/ui-bootstrap-tpls',
'angular-strap': 'vendor/angular-other/angular-strap', 'angular-strap': 'vendor/angular-other/angular-strap',
timepicker: 'vendor/angular-other/timepicker', timepicker: 'vendor/angular-other/timepicker',
datepicker: 'vendor/angular-other/datepicker', datepicker: 'vendor/angular-other/datepicker',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment