Skip to content

N
nexpie-grafana-theme
Commit cea13b18 by Torkel Ödegaard
Options

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

parent 3d85e85f
Showing with 54 additions and 54 deletions
public/app/features/dashboard/partials/dashboardTopNav.html
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</a> </a>
</li> </li>
<li ng-if="dashboard"> <li ng-if="dashboard">
<gf-time-picker></gf-time-picker> <gf-time-picker dashboard="dashboard"></gf-time-picker>
</li> </li>
</ul> </ul>
</div> </div>
......
public/app/features/dashboard/timepicker/dropdown.html
...@@ -3,30 +3,30 @@ ...@@ -3,30 +3,30 @@
<h3>Time range</h3> <h3>Time range</h3>
<label class="small">From:</label> <label class="small">From:</label>
<div class="input-prepend"> <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"> <button class="btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
<i class="fa fa-calendar"></i> <i class="fa fa-calendar"></i>
</button> </button>
</div> </div>
<div ng-if="openFromPicker"> <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> </div>
<label class="small">To:</label> <label class="small">To:</label>
<div class="input-prepend"> <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"> <button class="btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
<i class="fa fa-calendar"></i> <i class="fa fa-calendar"></i>
</button> </button>
</div> </div>
<div ng-if="openToPicker"> <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> </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="ctrl.refresh.value" class='input-medium' ng-options="f.value as f.text for f in ctrl.refresh.options">
</select> </select>
<button class="btn btn-inverse gf-timepicker-btn-apply" type="button" ng-click="ctrl.applyCustom()"> <button class="btn btn-inverse gf-timepicker-btn-apply" type="button" ng-click="ctrl.applyCustom()">
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="gf-timepicker-relative-section"> <div class="gf-timepicker-relative-section">
<h3>Quick ranges</h3> <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}"> <li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a> <a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
</li> </li>
......
public/app/features/dashboard/timepicker/timepicker.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<li> <li>
<a bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()"> <a bs-tooltip="tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()">
<i class="fa fa-clock-o"></i> <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"> <span ng-show="dashboard.refresh" class="text-warning">
&nbsp; &nbsp;
......
public/app/features/dashboard/timepicker/timepicker.ts
...@@ -12,70 +12,67 @@ declare var inputDate: any; ...@@ -12,70 +12,67 @@ declare var inputDate: any;
export class TimePickerCtrl { export class TimePickerCtrl {
static tooltipFormat = 'MMM D, YYYY HH:mm:ss';
static defaults = { static defaults = {
status : "Stable",
time_options : ['5m','15m','1h','6h','12h','24h','2d','7d','30d'], 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'],
}; };
static patterns = { dashboard: any;
date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/, panel: any;
hour: /^([01]?[0-9]|2[0-3])$/, absolute: any;
minute: /^[0-5][0-9]$/, timeRaw: any;
second: /^[0-5][0-9]$/, tooltip: string;
millisecond: /^[0-9]*$/ rangeString: string;
}; timeOptions: any;
refresh: any;
constructor(private $scope : any, private $rootScope, private timeSrv) { constructor(private $scope, private $rootScope, private timeSrv) {
$scope.patterns = TimePickerCtrl.patterns;
$scope.timeSrv = timeSrv;
$scope.ctrl = this; $scope.ctrl = this;
$scope.$on('refresh', () => this.init()); $rootScope.onAppEvent('refresh', () => this.init(), $scope);
$rootScope.onAppEvent('zoom-out', () => this.zoomOut(), $scope);
this.init(); this.init();
} }
init() { init() {
this.$scope.panel = this.$scope.dashboard.timepicker; this.panel = this.dashboard.timepicker;
this.$scope.panel.now = false; this.panel.now = false;
_.defaults(this.$scope.panel, TimePickerCtrl.defaults); _.defaults(this.panel, TimePickerCtrl.defaults);
var time = this.timeSrv.timeRange(); var time = this.timeSrv.timeRange();
var timeRaw = this.timeSrv.timeRange(false); var timeRaw = this.timeSrv.timeRange(false);
if (_.isString(timeRaw.to) && timeRaw.to.indexOf('now') === 0) { if (_.isString(timeRaw.to) && timeRaw.to.indexOf('now') === 0) {
this.$scope.panel.now = true; this.panel.now = true;
this.$scope.rangeString = rangeUtil.describeTimeRange(timeRaw); this.rangeString = rangeUtil.describeTimeRange(timeRaw);
} else { } else {
let format = 'MMM D, YYYY HH:mm:ss'; this.rangeString = this.dashboard.formatDate(time.from, TimePickerCtrl.tooltipFormat) + ' to ' +
this.$scope.rangeString = this.$scope.dashboard.formatDate(time.from, format) + ' to ' + this.dashboard.formatDate(time.to, TimePickerCtrl.tooltipFormat);
this.$scope.dashboard.formatDate(time.to, format);
} }
this.$scope.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()}; this.absolute = {fromJs: time.from.toDate(), toJs: time.to.toDate()};
this.$scope.timeRaw = timeRaw; this.timeRaw = timeRaw;
this.$scope.tooltip = this.$scope.dashboard.formatDate(time.from) + ' <br>to<br>'; this.tooltip = this.dashboard.formatDate(time.from) + ' <br>to<br>';
this.$scope.tooltip += this.$scope.dashboard.formatDate(time.to); this.tooltip += this.dashboard.formatDate(time.to);
}
this.$scope.onAppEvent('zoom-out', function() { zoomOut() {
this.$scope.zoom(2);
});
} }
openDropdown() { openDropdown() {
this.$scope.timeOptions = rangeUtil.getRelativeTimesList(this.$scope.panel, this.$scope.rangeString); this.timeOptions = rangeUtil.getRelativeTimesList(this.panel, this.rangeString);
this.$scope.refresh = { this.refresh = {
value: this.$scope.dashboard.refresh, value: this.dashboard.refresh,
options: _.map(this.$scope.panel.refresh_intervals, (interval: any) => { options: _.map(this.panel.refresh_intervals, (interval: any) => {
return {text: interval, value: interval}; 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', src: 'app/features/dashboard/timepicker/dropdown.html',
scope: this.$scope, scope: this.$scope,
cssClass: 'gf-timepicker-dropdown', cssClass: 'gf-timepicker-dropdown',
...@@ -83,34 +80,33 @@ export class TimePickerCtrl { ...@@ -83,34 +80,33 @@ export class TimePickerCtrl {
} }
applyCustom() { applyCustom() {
console.log(this.$scope.refresh.value); if (this.refresh.value !== this.dashboard.refresh) {
if (this.$scope.refresh.value !== this.$scope.dashboard.refresh) { this.timeSrv.setAutoRefresh(this.refresh.value);
this.timeSrv.setAutoRefresh(this.$scope.refresh.value);
} }
this.timeSrv.setTime(this.$scope.timeRaw); this.timeSrv.setTime(this.timeRaw);
this.$scope.appEvent('hide-dash-editor'); this.$rootScope.appEvent('hide-dash-editor');
} }
absoluteFromChanged() { absoluteFromChanged() {
this.$scope.timeRaw.from = moment(this.$scope.absolute.fromJs); this.timeRaw.from = moment(this.absolute.fromJs);
} }
absoluteToChanged() { absoluteToChanged() {
this.$scope.timeRaw.to = moment(this.$scope.absolute.toJs); this.timeRaw.to = moment(this.absolute.toJs);
} }
setRelativeFilter(timespan) { setRelativeFilter(timespan) {
this.$scope.panel.now = true; this.panel.now = true;
var range = {from: timespan.from, to: timespan.to}; var range = {from: timespan.from, to: timespan.to};
if (this.$scope.panel.nowDelay) { if (this.panel.nowDelay) {
range.to = 'now-' + this.$scope.panel.nowDelay; range.to = 'now-' + this.panel.nowDelay;
} }
this.timeSrv.setTime(range); this.timeSrv.setTime(range);
this.$scope.appEvent('hide-dash-editor'); this.$rootScope.appEvent('hide-dash-editor');
} }
} }
...@@ -131,7 +127,11 @@ export function timePickerDirective() { ...@@ -131,7 +127,11 @@ export function timePickerDirective() {
restrict: 'E', restrict: 'E',
templateUrl: 'app/features/dashboard/timepicker/timepicker.html', templateUrl: 'app/features/dashboard/timepicker/timepicker.html',
controller: TimePickerCtrl, controller: TimePickerCtrl,
scope: true bindToController: true,
controllerAs: 'ctrl',
scope: {
dashboard: "="
}
}; };
} }
......
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