stackdriver: make it possible to use aggregation template variable

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

@@ -20,8 +20,10 @@
   <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="ctrl.target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in ctrl.alignOptions"
-        ng-change="refresh()"></select>
+      <gf-form-dropdown model="ctrl.target.aggregation.perSeriesAligner" get-options="ctrl.alignOptions" class="gf-form width-12"
+        disabled type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="refresh()"></gf-form-dropdown>
+      <!-- <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>
 
     <div class="gf-form gf-form--grow">

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

@@ -26,7 +26,7 @@ export class StackdriverAggregationCtrl {
   target: any;
 
   /** @ngInject */
-  constructor(private $scope) {
+  constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
     this.alignmentPeriods = options.alignmentPeriods;
@@ -51,7 +51,7 @@ export class StackdriverAggregationCtrl {
   setAggOptions() {
     this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
 
-    if (!this.aggOptions.find(o => o.value === this.target.aggregation.crossSeriesReducer)) {
+    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 

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

@@ -6,10 +6,19 @@ describe('StackdriverAggregationCtrl', () => {
     describe('when new query result is returned from the server', () => {
       describe('and result is double and gauge and no group by is used', () => {
         beforeEach(async () => {
-          ctrl = new StackdriverAggregationCtrl({
+          ctrl = new StackdriverAggregationCtrl(
+            {
               $on: () => {},
-            target: { valueType: 'DOUBLE', metricKind: 'GAUGE', aggregation: { crossSeriesReducer: '', groupBys: [] } },
-          });
+              target: {
+                valueType: 'DOUBLE',
+                metricKind: 'GAUGE',
+                aggregation: { crossSeriesReducer: '', groupBys: [] },
+              },
+            },
+            {
+              replace: s => s,
+            }
+          );
         });
 
         it('should populate all aggregate options except two', () => {
@@ -31,14 +40,19 @@ describe('StackdriverAggregationCtrl', () => {
 
       describe('and result is double and gauge and a group by is used', () => {
         beforeEach(async () => {
-          ctrl = new StackdriverAggregationCtrl({
+          ctrl = new StackdriverAggregationCtrl(
+            {
               $on: () => {},
               target: {
                 valueType: 'DOUBLE',
                 metricKind: 'GAUGE',
                 aggregation: { crossSeriesReducer: 'REDUCE_NONE', groupBys: ['resource.label.projectid'] },
               },
-          });
+            },
+            {
+              replace: s => s,
+            }
+          );
         });
 
         it('should populate all aggregate options except three', () => {