use new option group in aggregation directive

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

@@ -2,16 +2,21 @@
   <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">
-      <gf-form-dropdown model="ctrl.target.aggregation.crossSeriesReducer" get-options="ctrl.aggOptions" 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>
+      <option-group-picker
+        onChange="ctrl.handleAggregationChange"
+        selected="ctrl.target.aggregation.crossSeriesReducer"
+        groups="ctrl.aggOptions"
+        searchable="true"
+        placeholder="'Select Aggregation'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
   <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
       <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
+        <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i> Advanced Options
       </a>
     </label>
   </div>
@@ -20,27 +25,35 @@
   <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">
-      <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>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentChange"
+        selected="ctrl.target.aggregation.perSeriesAligner"
+        groups="ctrl.alignOptions"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
 
-    <div class="gf-form gf-form--grow">
-      <div class="gf-form-label gf-form-label--grow"></div>
-    </div>
+    <div class="gf-form gf-form--grow"><div class="gf-form-label gf-form-label--grow"></div></div>
   </div>
 </div>
 <div class="gf-form-inline">
   <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">
-      <gf-form-dropdown model="ctrl.target.aggregation.alignmentPeriod" get-options="ctrl.alignmentPeriods" 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>
+      <option-group-picker
+        onChange="ctrl.handleAlignmentPeriodChange"
+        selected="ctrl.target.aggregation.alignmentPeriod"
+        groups="ctrl.alignmentPeriods"
+        searchable="true"
+        placeholder="'Select Alignment'"
+        className="'width-15'"
+      ></option-group-picker>
     </div>
   </div>
 
   <div class="gf-form gf-form--grow">
-    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow">
-      {{ctrl.formatAlignmentText()}}
-    </label>
+    <label ng-if="alignmentPeriod" class="gf-form-label gf-form-label--grow"> {{ ctrl.formatAlignmentText() }} </label>
   </div>
 </div>

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

 <query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
-  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"></stackdriver-filter>
+  <stackdriver-filter target="ctrl.target" refresh="ctrl.refresh()" datasource="ctrl.datasource"
+    ></stackdriver-filter>
   <stackdriver-aggregation target="ctrl.target" alignment-period="ctrl.lastQueryMeta.alignmentPeriod" refresh="ctrl.refresh()"></stackdriver-aggregation>
   <div class="gf-form-inline">
     <div class="gf-form">

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

 import coreModule from 'app/core/core_module';
 import _ from 'lodash';
-import * as options from './constants';
+import { alignmentPeriods } from './constants';
 import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions';
 import kbn from 'app/core/utils/kbn';
 
@@ -29,9 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.target = $scope.target;
-    this.alignmentPeriods = options.alignmentPeriods;
-    this.aggOptions = options.aggOptions;
-    this.alignOptions = options.alignOptions;
+    this.alignmentPeriods = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Periods',
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAlignOptions();
     const self = this;
@@ -39,30 +46,68 @@ export class StackdriverAggregationCtrl {
       self.setAggOptions();
       self.setAlignOptions();
     });
+    this.handleAlignmentChange = this.handleAlignmentChange.bind(this);
+    this.handleAggregationChange = this.handleAggregationChange.bind(this);
+    this.handleAlignmentPeriodChange = this.handleAlignmentPeriodChange.bind(this);
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
-    if (!this.alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
-      this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : '';
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    this.alignOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Alignment Options',
+        options: alignments,
+      },
+    ];
+    if (!alignments.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignments.length > 0 ? alignments[0].value : '';
     }
   }
 
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind);
-
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    let aggregations = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+      ...a,
+      label: a.text,
+    }));
+    if (!aggregations.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
     }
 
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggregations = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
+    this.aggOptions = [
+      this.getTemplateVariablesGroup(),
+      {
+        label: 'Aggregations',
+        options: aggregations,
+      },
+    ];
+  }
+
+  handleAlignmentChange(value) {
+    this.target.aggregation.perSeriesAligner = value;
+    this.$scope.refresh();
+  }
+
+  handleAggregationChange(value) {
+    this.target.aggregation.crossSeriesReducer = value;
+    this.$scope.refresh();
+  }
+
+  handleAlignmentPeriodChange(value) {
+    this.target.aggregation.alignmentPeriod = value;
+    this.$scope.refresh();
   }
 
   formatAlignmentText() {
-    const selectedAlignment = this.alignOptions.find(
+    const alignments = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind);
+    const selectedAlignment = alignments.find(
       ap => ap.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner)
     );
     return `${kbn.secondsToHms(this.$scope.alignmentPeriod)} interval (${
@@ -74,6 +119,16 @@ export class StackdriverAggregationCtrl {
     const newValue = this.aggOptions.find(o => o.value !== notValidOptionValue);
     this.target.aggregation.crossSeriesReducer = newValue ? newValue.value : '';
   }
+
+  getTemplateVariablesGroup() {
+    return {
+      label: 'Template Variables',
+      options: this.templateSrv.variables.map(v => ({
+        label: `$${v.name}`,
+        value: `$${v.name}`,
+      })),
+    };
+  }
 }
 
 coreModule.directive('stackdriverAggregation', StackdriverAggregation);