Skip to content

N
nexpie-grafana-theme
Commit 9db6f826 by Torkel Ödegaard
Options

refactor: finished timepicker to typescript and directive refactor

parent d96a6a59
Showing with 204 additions and 157 deletions
public/app/directives/all.js
define([ define([
'./dashUpload', './dashUpload',
'./grafanaSimplePanel',
'./dashEditLink', './dashEditLink',
'./ngModelOnBlur', './ngModelOnBlur',
'./misc', './misc',
......
public/app/features/dashboard/dashboardSrv.js
...@@ -31,8 +31,8 @@ function (angular, $, kbn, _, moment) { ...@@ -31,8 +31,8 @@ function (angular, $, kbn, _, moment) {
this.hideControls = data.hideControls || false; this.hideControls = data.hideControls || false;
this.sharedCrosshair = data.sharedCrosshair || false; this.sharedCrosshair = data.sharedCrosshair || false;
this.rows = data.rows || []; this.rows = data.rows || [];
this.timepicker = data.timepicker || {};
this.time = data.time || { from: 'now-6h', to: 'now' }; this.time = data.time || { from: 'now-6h', to: 'now' };
this.timepicker = data.timepicker || {};
this.templating = this._ensureListExist(data.templating); this.templating = this._ensureListExist(data.templating);
this.annotations = this._ensureListExist(data.annotations); this.annotations = this._ensureListExist(data.annotations);
this.refresh = data.refresh; this.refresh = data.refresh;
......
public/app/features/dashboard/timepicker/custom.html 0 → 100644
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-clock-o"></i>
Custom time range
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="gf-box-body">
<style>
.timepicker-to-column {
margin-top: 10px;
}
.timepicker-input input {
outline: 0 !important;
border: 0px !important;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
position: relative;
}
.timepicker-input input::-webkit-outer-spin-button,
.timepicker-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.timepicker-date {
width: 90px;
}
input.timepicker-hms {
width: 20px;
}
input.timepicker-ms {
width: 25px;
}
div.timepicker-now {
float: right;
}
</style>
<div class="timepicker form-horizontal">
<form name="timeForm" style="margin-bottom: 0">
<div class="timepicker-from-column">
<label class="small">From</label>
<div class="fake-input timepicker-input">
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
</div>
</div>
<div class="timepicker-to-column">
<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="ctrl.setNow();temptime.now=true">set now</a>)</label>
<div class="fake-input timepicker-input">
<div ng-hide="temptime.now">
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
</div>
<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">&nbsp <i class="pointer fa fa-remove" ng-click="ctrl.setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
</div>
</div>
<br>
<button ng-click="ctrl.setAbsoluteTimeFilter(ctrl.validate(temptime));dismiss();" ng-disabled="!timeForm.$valid" class="btn btn-success">Apply</button>
<span class="" ng-hide="input.$valid">Invalid date or range</span>
</form>
</div>
</div>
public/app/features/dashboard/timepicker/timepicker.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="loadTimeOptions();"> <a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="ctrl.loadTimeOptions();">
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o"></i>
<span ng-bind="time.rangeString"></span> <span ng-bind="time.rangeString"></span>
<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span> <span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<!-- lacy load this --> <!-- lacy load this -->
<ul class="dropdown-menu" ng-if="time_options" > <ul class="dropdown-menu" ng-if="time_options" >
<li bindonce ng-repeat='option in time_options'> <li bindonce ng-repeat='option in time_options'>
<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a> <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.text"></a>
</li> </li>
<!-- Auto refresh submenu --> <!-- Auto refresh submenu -->
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li><a ng-click="customTime()">Custom</a></li> <li><a ng-click="ctrl.customTime()">Custom</a></li>
</ul> </ul>
</li> </li>
......
public/app/features/dashboard/timepicker/timepicker.ts
...@@ -7,21 +7,13 @@ import kbn = require('kbn'); ...@@ -7,21 +7,13 @@ import kbn = require('kbn');
export class TimePickerCtrl { export class TimePickerCtrl {
constructor($scope : any, $rootScope, timeSrv) { static defaults = {
$scope.panelMeta = {
status : "Stable", status : "Stable",
description : "" time_options : ['5m','15m','1h','6h','12h','24h','today', '2d','7d','30d'],
};
// 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'], refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
}; };
// ng-pattern regexs static patterns = {
$scope.patterns = {
date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/, date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
hour: /^([01]?[0-9]|2[0-3])$/, hour: /^([01]?[0-9]|2[0-3])$/,
minute: /^[0-5][0-9]$/, minute: /^[0-5][0-9]$/,
...@@ -29,90 +21,123 @@ export class TimePickerCtrl { ...@@ -29,90 +21,123 @@ export class TimePickerCtrl {
millisecond: /^[0-9]*$/ millisecond: /^[0-9]*$/
}; };
constructor(private $scope : any, private $rootScope, private timeSrv) {
$scope.patterns = TimePickerCtrl.patterns;
$scope.timeSrv = timeSrv; $scope.timeSrv = timeSrv;
$scope.ctrl = this;
$scope.$on('refresh', function() { $scope.$on('refresh', () => this.init());
$scope.init();
});
$scope.init = function() { this.init();
$scope.panel = $scope.dashboard.timepicker; }
init() {
this.$scope.panel = this.$scope.dashboard.timepicker;
_.defaults($scope.panel, _d); _.defaults(this.$scope.panel, TimePickerCtrl.defaults);
var time = timeSrv.timeRange(true); var time = this.timeSrv.timeRange(true);
$scope.panel.now = false; this.$scope.panel.now = false;
var unparsed = timeSrv.timeRange(false); var unparsed = this.timeSrv.timeRange(false);
if (_.isString(unparsed.to) && unparsed.to.indexOf('now') === 0) { if (_.isString(unparsed.to) && unparsed.to.indexOf('now') === 0) {
$scope.panel.now = true; this.$scope.panel.now = true;
} }
$scope.time = getScopeTimeObj(time.from, time.to); this.$scope.time = this.getScopeTimeObj(time.from, time.to);
$scope.onAppEvent('zoom-out', function() { this.$scope.onAppEvent('zoom-out', function() {
$scope.zoom(2); this.$scope.zoom(2);
}); });
}; }
$scope.loadTimeOptions = function() { pad(n: number, width: number, z = 0): string {
$scope.time_options = _.map($scope.panel.time_options, function(str) { var str = n.toString();
return kbn.getRelativeTimeInfo(str); return str.length >= width ? str : new Array(width - str.length + 1).join(z.toString()) + str;
}); }
$scope.refreshMenuLeftSide = $scope.time.rangeString.length < 10; 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)
};
}; };
$scope.customTime = function() { getScopeTimeObj(from, to) {
// Assume the form is valid since we're setting it to something valid var model : any = {from: this.getTimeObj(from), to: this.getTimeObj(to)};
$scope.input.$setValidity("dummy", true);
$scope.temptime = cloneTime($scope.time);
$scope.temptime.now = $scope.panel.now;
$scope.temptime.from.date.setHours(0, 0, 0, 0);
$scope.temptime.to.date.setHours(0, 0, 0, 0);
// Date picker needs the date to be at the start of the day if (model.from.date) {
if (new Date().getTimezoneOffset() < 0) { model.tooltip = this.$scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
$scope.temptime.from.date = moment($scope.temptime.from.date).add(1, 'days').toDate(); model.tooltip += this.$scope.dashboard.formatDate(model.to.date);
$scope.temptime.to.date = moment($scope.temptime.to.date).add(1, 'days').toDate(); }
else {
model.tooltip = 'Click to set time filter';
} }
$scope.appEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope }); 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 {
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');
}
}
// Constantly validate the input of the fields. This function does not change any date variables return model;
// 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), loadTimeOptions() {
_to = datepickerToLocal(time.to.date), this.$scope.time_options = _.map(this.$scope.panel.time_options, function(str) {
_t = time; return kbn.getRelativeTimeInfo(str);
});
if ($scope.input.$valid) { this.$scope.refreshMenuLeftSide = this.$scope.time.rangeString.length < 10;
}
_from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond); cloneTime(time) {
_to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond); var _n = { from: _.clone(time.from), to: _.clone(time.to) };
// Check that the objects are valid and to is after from // Create new dates as _.clone is shallow.
if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) { _n.from.date = new Date(_n.from.date);
$scope.input.$setValidity("dummy", false); _n.to.date = new Date(_n.to.date);
return false; return _n;
} }
} else {
return false; 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;
this.$scope.temptime.from.date.setHours(0, 0, 0, 0);
this.$scope.temptime.to.date.setHours(0, 0, 0, 0);
// 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();
} }
return { from: _from, to: _to, now: time.now }; this.$scope.appEvent('show-dash-editor', {
}; src: 'app/features/dashboard/timepicker/custom.html',
scope: this.$scope
});
}
$scope.setNow = function() { setNow() {
$scope.time.to = getTimeObj(new Date()); this.$scope.time.to = this.getTimeObj(new Date());
}; }
$scope.setAbsoluteTimeFilter = function (time) { setAbsoluteTimeFilter(time) {
// Create filter object // Create filter object
var _filter = _.clone(time); var _filter = _.clone(time);
...@@ -121,110 +146,53 @@ export class TimePickerCtrl { ...@@ -121,110 +146,53 @@ export class TimePickerCtrl {
} }
// Update our representation // Update our representation
$scope.time = getScopeTimeObj(time.from, time.to); this.$scope.time = this.getScopeTimeObj(time.from, time.to);
this.timeSrv.setTime(_filter);
timeSrv.setTime(_filter); }
};
$scope.setRelativeFilter = function(timespan) { setRelativeFilter(timespan) {
$scope.panel.now = true; this.$scope.panel.now = true;
var range = {from: timespan.from, to: timespan.to}; var range = {from: timespan.from, to: timespan.to};
if ($scope.panel.nowDelay) { if (this.$scope.panel.nowDelay) {
range.to = 'now-' + $scope.panel.nowDelay; range.to = 'now-' + this.$scope.panel.nowDelay;
} }
timeSrv.setTime(range); this.timeSrv.setTime(range);
$scope.time = getScopeTimeObj(kbn.parseDate(range.from), new Date()); this.$scope.time = this.getScopeTimeObj(kbn.parseDate(range.from), new Date());
}; }
var pad : any = function(n, width, z) { validate(time): any {
z = z || '0'; // Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
n = n.toString(); this.$scope.input.$setValidity("dummy", true);
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
};
var cloneTime = function(time) { var _from = this.datepickerToLocal(time.from.date);
var _n = { var _to = this.datepickerToLocal(time.to.date);
from: _.clone(time.from), var _t = time;
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;
};
var getScopeTimeObj = function(from, to) { if (this.$scope.input.$valid) {
var model : any = {from: getTimeObj(from), to: 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) { // Check that the objects are valid and to is after from
model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>'; if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
model.tooltip += $scope.dashboard.formatDate(model.to.date); this.$scope.input.$setValidity("dummy", false);
} return false;
else {
model.tooltip = 'Click to set time filter';
} }
if (timeSrv.time) {
if ($scope.panel.now) {
if (timeSrv.time.from === 'today') {
model.rangeString = 'Today';
} else { } else {
model.rangeString = moment(model.from.date).fromNow() + ' to ' + return false;
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');
}
} }
return model; return { from: _from, to: _to, now: time.now };
}; }
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)
};
};
// Do not use the results of this function unless you plan to use setHour/Minutes/etc on the result datepickerToLocal(date) {
var datepickerToLocal = function(date) {
date = moment(date).clone().toDate(); date = moment(date).clone().toDate();
return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate(); return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate();
};
$scope.zoom = function(factor) {
var range = timeSrv.timeRange();
var timespan = (range.to.valueOf() - range.from.valueOf());
var center = range.to.valueOf() - timespan/2;
var to = (center + (timespan*factor)/2);
var from = (center - (timespan*factor)/2);
if (to > Date.now() && range.to <= Date.now()) {
var offset = to - Date.now();
from = from - offset;
to = Date.now();
} }
timeSrv.setTime({
from: moment.utc(from).toDate(),
to: moment.utc(to).toDate(),
});
};
$scope.init();
}
} }
export function settingsDirective() { export function settingsDirective() {
......
public/test/specs/dashboardSrv-specs.js
...@@ -31,7 +31,6 @@ define([ ...@@ -31,7 +31,6 @@ define([
it('should have default properties', function() { it('should have default properties', function() {
expect(model.rows.length).to.be(0); expect(model.rows.length).to.be(0);
}); });
}); });
describe('when getting next panel id', function() { describe('when getting next panel id', function() {
......
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