IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-27 03:11:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(timepicker2): moved to controllerAs and bindToController for timepicker component

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-09-18 12:41:32 +02:00
parent 3d85e85f29
commit cea13b1823
4 changed files with 54 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/dashboard/partials/dashboardTopNav.html
View File

@ -62,7 +62,7 @@
</a>
</li>
<li ng-if="dashboard">
<gf-time-picker></gf-time-picker>
<gf-time-picker dashboard="dashboard"></gf-time-picker>
</li>
</ul>
</div>

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

@ -3,30 +3,30 @@
<h3>Time range</h3>
<label class="small">From:</label>
<div class="input-prepend">
<input type="text" class="input-large" ng-model="timeRaw.from" input-datetime>
<input type="text" class="input-large" ng-model="ctrl.timeRaw.from" input-datetime>
<button class="btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
<i class="fa fa-calendar"></i>
</button>
</div>
<div ng-if="openFromPicker">
<datepicker ng-model="absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
</div>
<label class="small">To:</label>
<div class="input-prepend">
<input type="text" class="input-large" ng-model="timeRaw.to" input-datetime>
<input type="text" class="input-large" ng-model="ctrl.timeRaw.to" input-datetime>
<button class="btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
<i class="fa fa-calendar"></i>
</button>
</div>
<div ng-if="openToPicker">
<datepicker ng-model="absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
<datepicker ng-model="ctrl.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 ng-model="ctrl.refresh.value" class='input-medium' ng-options="f.value as f.text for f in ctrl.refresh.options">
</select>
<button class="btn btn-inverse gf-timepicker-btn-apply" type="button" ng-click="ctrl.applyCustom()">
@ -36,7 +36,7 @@
<div class="gf-timepicker-relative-section">
<h3>Quick ranges</h3>
<ul ng-repeat="group in timeOptions">
<ul ng-repeat="group in ctrl.timeOptions">
<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
</li>

2
public/app/features/dashboard/timepicker/timepicker.html
View File

@ -9,7 +9,7 @@
<li>
<a bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
<i class="fa fa-clock-o"></i>
<span ng-bind="rangeString"></span>
<span ng-bind="ctrl.rangeString"></span>
<span ng-show="dashboard.refresh" class="text-warning">
&nbsp;

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

@ -12,70 +12,67 @@ declare var inputDate: any;
export class TimePickerCtrl {
static tooltipFormat = 'MMM D, YYYY HH:mm:ss';
static defaults = {
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 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]*$/
};
dashboard: any;
panel: any;
absolute: any;
timeRaw: any;
tooltip: string;
rangeString: string;
timeOptions: any;
refresh: any;
constructor(private $scope : any, private $rootScope, private timeSrv) {
$scope.patterns = TimePickerCtrl.patterns;
$scope.timeSrv = timeSrv;
constructor(private $scope, private $rootScope, private timeSrv) {
$scope.ctrl = this;
$scope.$on('refresh', () => this.init());
$rootScope.onAppEvent('refresh', () => this.init(), $scope);
$rootScope.onAppEvent('zoom-out', () => this.zoomOut(), $scope);
this.init();
}
init() {
this.$scope.panel = this.$scope.dashboard.timepicker;
this.$scope.panel.now = false;
this.panel = this.dashboard.timepicker;
this.panel.now = false;
_.defaults(this.$scope.panel, TimePickerCtrl.defaults);
_.defaults(this.panel, TimePickerCtrl.defaults);
var time = this.timeSrv.timeRange();
var timeRaw = this.timeSrv.timeRange(false);
if (_.isString(timeRaw.to) && timeRaw.to.indexOf('now') === 0) {
this.$scope.panel.now = true;
this.$scope.rangeString = rangeUtil.describeTimeRange(timeRaw);
this.panel.now = true;
this.rangeString = rangeUtil.describeTimeRange(timeRaw);
} else {
let format = 'MMM D, YYYY HH:mm:ss';
this.$scope.rangeString = this.$scope.dashboard.formatDate(time.from, format) + ' to ' +
this.$scope.dashboard.formatDate(time.to, format);
this.rangeString = this.dashboard.formatDate(time.from, TimePickerCtrl.tooltipFormat) + ' to ' +
this.dashboard.formatDate(time.to, TimePickerCtrl.tooltipFormat);
}
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);
this.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
this.timeRaw = timeRaw;
this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';
this.tooltip += this.dashboard.formatDate(time.to);
}
this.$scope.onAppEvent('zoom-out', function() {
this.$scope.zoom(2);
});
zoomOut() {
}
openDropdown() {
this.$scope.timeOptions = rangeUtil.getRelativeTimesList(this.$scope.panel, this.$scope.rangeString);
this.$scope.refresh = {
value: this.$scope.dashboard.refresh,
options: _.map(this.$scope.panel.refresh_intervals, (interval: any) => {
this.timeOptions = rangeUtil.getRelativeTimesList(this.panel, this.rangeString);
this.refresh = {
value: this.dashboard.refresh,
options: _.map(this.panel.refresh_intervals, (interval: any) => {
return {text: interval, value: interval};
})
};
this.$scope.refresh.options.unshift({text: 'off'});
this.refresh.options.unshift({text: 'off'});
this.$scope.appEvent('show-dash-editor', {
this.$rootScope.appEvent('show-dash-editor', {
src: 'app/features/dashboard/timepicker/dropdown.html',
scope: this.$scope,
cssClass: 'gf-timepicker-dropdown',
@ -83,34 +80,33 @@ export class TimePickerCtrl {
}
applyCustom() {
console.log(this.$scope.refresh.value);
if (this.$scope.refresh.value !== this.$scope.dashboard.refresh) {
this.timeSrv.setAutoRefresh(this.$scope.refresh.value);
if (this.refresh.value !== this.dashboard.refresh) {
this.timeSrv.setAutoRefresh(this.refresh.value);
}
this.timeSrv.setTime(this.$scope.timeRaw);
this.$scope.appEvent('hide-dash-editor');
this.timeSrv.setTime(this.timeRaw);
this.$rootScope.appEvent('hide-dash-editor');
}
absoluteFromChanged() {
this.$scope.timeRaw.from = moment(this.$scope.absolute.fromJs);
this.timeRaw.from = moment(this.absolute.fromJs);
}
absoluteToChanged() {
this.$scope.timeRaw.to = moment(this.$scope.absolute.toJs);
this.timeRaw.to = moment(this.absolute.toJs);
}
setRelativeFilter(timespan) {
this.$scope.panel.now = true;
this.panel.now = true;
var range = {from: timespan.from, to: timespan.to};
if (this.$scope.panel.nowDelay) {
range.to = 'now-' + this.$scope.panel.nowDelay;
if (this.panel.nowDelay) {
range.to = 'now-' + this.panel.nowDelay;
}
this.timeSrv.setTime(range);
this.$scope.appEvent('hide-dash-editor');
this.$rootScope.appEvent('hide-dash-editor');
}
}
@ -131,7 +127,11 @@ export function timePickerDirective() {
restrict: 'E',
templateUrl: 'app/features/dashboard/timepicker/timepicker.html',
controller: TimePickerCtrl,
scope: true
bindToController: true,
controllerAs: 'ctrl',
scope: {
dashboard: "="
}
};
}