stackdriver: es6 style directive, avoid using scope

public/app/plugins/datasource/stackdriver/partials/query.aggregation.html

@@ -2,25 +2,25 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Aggregation</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <select class="gf-form-input width-12" ng-model="target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in aggOptions"
+      <select class="gf-form-input width-12" ng-model="ctrl.target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in ctrl.aggOptions"
         ng-change="refresh()"></select>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
-      <a ng-click="target.showAggregationOptions = !target.showAggregationOptions">
-        <i class="fa fa-caret-down" ng-show="target.showAggregationOptions"></i>
-        <i class="fa fa-caret-right" ng-hide="target.showAggregationOptions"></i>
+      <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
+        <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
+        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
         Advanced Options
       </a>
     </label>
   </div>
 </div>
-<div class="gf-form-group" ng-if="target.showAggregationOptions">
+<div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
   <div class="gf-form offset-width-9">
     <label class="gf-form-label query-keyword width-12">Aligner</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <select class="gf-form-input width-14" ng-model="target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in alignOptions"
+      <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in ctrl.alignOptions"
         ng-change="refresh()"></select>
     </div>
 
@@ -33,14 +33,14 @@
   <div class="gf-form">
     <label class="gf-form-label query-keyword width-9">Alignment Period</label>
     <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
-      <select class="gf-form-input width-12" ng-model="target.aggregation.alignmentPeriod" ng-options="f.value as f.text for f in alignmentPeriods"
+      <select class="gf-form-input width-12" ng-model="ctrl.target.aggregation.alignmentPeriod" ng-options="f.value as f.text for f in ctrl.alignmentPeriods"
         ng-change="refresh()"></select>
     </div>
   </div>
 
   <div class="gf-form gf-form--grow">
     <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
-      {{formatAlignmentText()}}
+      {{ctrl.formatAlignmentText()}}
     </label>
   </div>
 </div>

public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts

@@ -19,51 +19,55 @@ export class StackdriverAggregation {
 }
 
 export class StackdriverAggregationCtrl {
+  alignmentPeriods: any[];
+  alignmentPeriod: string;
+  aggOptions: any[];
+  alignOptions: any[];
+  target: any;
+
   constructor(private $scope) {
-    $scope.aggOptions = options.aggOptions;
+    this.$scope.ctrl = this;
+    this.target = $scope.target;
+    this.alignmentPeriod = $scope.alignmentPeriod;
+    this.alignmentPeriods = options.alignmentPeriods;
+    this.aggOptions = options.aggOptions;
+    this.alignOptions = options.alignOptions;
     this.setAggOptions();
     this.setAlignOptions();
-    $scope.alignmentPeriods = options.alignmentPeriods;
-    $scope.formatAlignmentText = this.formatAlignmentText.bind(this);
     $scope.$on('metricTypeChanged', this.setAlignOptions.bind(this));
   }
 
   setAlignOptions() {
-    this.$scope.alignOptions = !this.$scope.target.valueType
+    this.alignOptions = !this.target.valueType
       ? []
       : options.alignOptions.filter(i => {
           return (
-            i.valueTypes.indexOf(this.$scope.target.valueType) !== -1 &&
-            i.metricKinds.indexOf(this.$scope.target.metricKind) !== -1
+            i.valueTypes.indexOf(this.target.valueType) !== -1 && i.metricKinds.indexOf(this.target.metricKind) !== -1
           );
         });
-    if (!this.$scope.alignOptions.find(o => o.value === this.$scope.target.aggregation.perSeriesAligner)) {
-      this.$scope.target.aggregation.perSeriesAligner =
-        this.$scope.alignOptions.length > 0 ? this.$scope.alignOptions[0].value : '';
+    if (!this.alignOptions.find(o => o.value === this.target.aggregation.perSeriesAligner)) {
+      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
     }
   }
 
   setAggOptions() {
-    this.$scope.aggOptions = !this.$scope.target.metricKind
+    this.aggOptions = !this.target.metricKind
       ? []
       : options.aggOptions.filter(i => {
           return (
-            i.valueTypes.indexOf(this.$scope.target.valueType) !== -1 &&
-            i.metricKinds.indexOf(this.$scope.target.metricKind) !== -1
+            i.valueTypes.indexOf(this.target.valueType) !== -1 && i.metricKinds.indexOf(this.target.metricKind) !== -1
           );
         });
 
-    if (!this.$scope.aggOptions.find(o => o.value === this.$scope.target.aggregation.crossSeriesReducer)) {
-      const newValue = this.$scope.aggOptions.find(o => o.value !== 'REDUCE_NONE');
-      this.$scope.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
+    if (!this.aggOptions.find(o => o.value === this.target.aggregation.crossSeriesReducer)) {
+      const newValue = this.aggOptions.find(o => o.value !== 'REDUCE_NONE');
+      this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
     }
   }
 
   formatAlignmentText() {
-    const selectedAlignment = this.$scope.alignOptions.find(
-      ap => ap.value === this.$scope.target.aggregation.perSeriesAligner
-    );
-    return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${selectedAlignment.text})`;
+    const selectedAlignment = this.alignOptions.find(ap => ap.value === this.target.aggregation.perSeriesAligner);
+    return `${kbn.secondsToHms(this.alignmentPeriod)} interval (${selectedAlignment.text})`;
   }
 }