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

public/app/features/dashboard/partials/dashboardTopNav.html

@@ -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>

public/app/features/dashboard/timepicker/dropdown.html

@@ -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>

public/app/features/dashboard/timepicker/timepicker.html

@@ -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;

public/app/features/dashboard/timepicker/timepicker.ts

@@ -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: "="
+    }
   };
 }