remove group name from select component. let the parent set group name instead

public/app/core/angular_wrappers.ts

@@ -27,7 +27,6 @@ export function registerAngularDirectives() {
     'isSearchable',
     'isSearchable',
     'className',
     'className',
     'placeholder',
     'placeholder',
-    'groupName',
     ['variables', { watchDepth: 'reference' }],
     ['variables', { watchDepth: 'reference' }],
   ]);
   ]);
 }
 }

public/app/core/components/Select/MetricSelect.tsx

@@ -11,7 +11,6 @@ export interface Props {
   value: string;
   value: string;
   placeholder?: string;
   placeholder?: string;
   className?: string;
   className?: string;
-  groupName?: string;
   variables?: Variable[];
   variables?: Variable[];
 }
 }
 
 
@@ -23,7 +22,6 @@ export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
   static defaultProps = {
     variables: [],
     variables: [],
     options: [],
     options: [],
-    groupName: 'Options',
   };
   };
 
 
   constructor(props) {
   constructor(props) {
@@ -46,15 +44,16 @@ export class MetricSelect extends React.Component<Props, State> {
     return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
     return nextProps.value !== this.props.value || !_.isEqual(nextOptions, this.state.options);
   }
   }
 
 
-  buildOptions({ variables = [], groupName = '', options }) {
+  buildOptions({ variables = [], options }) {
     return variables.length > 0
     return variables.length > 0
       ? [
       ? [
           this.getVariablesGroup(),
           this.getVariablesGroup(),
-          {
-            label: groupName,
-            expanded: true,
-            options,
-          },
+          // {
+          //   label: groupName,
+          //   expanded: true,
+          //   options,
+          // },
+          ...options,
         ]
         ]
       : options;
       : options;
   }
   }

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

@@ -29,10 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     this.$scope.ctrl = this;
     this.target = $scope.target;
     this.target = $scope.target;
-    this.alignmentPeriods = alignmentPeriods.map(ap => ({
-      ...ap,
-      label: ap.text,
-    }));
+    this.alignmentPeriods = [
+      {
+        label: 'Alignment Periods',
+        expanded: true,
+        options: alignmentPeriods.map(ap => ({
+          ...ap,
+          label: ap.text,
+        })),
+      },
+    ];
     this.setAggOptions();
     this.setAggOptions();
     this.setAlignOptions();
     this.setAlignOptions();
     const self = this;
     const self = this;
@@ -46,28 +52,43 @@ export class StackdriverAggregationCtrl {
   }
   }
 
 
   setAlignOptions() {
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    const alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       ...a,
       label: a.text,
       label: a.text,
     }));
     }));
-    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 : '';
+    if (!alignOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.perSeriesAligner))) {
+      this.target.aggregation.perSeriesAligner = alignOptions.length > 0 ? alignOptions[0].value : '';
     }
     }
+    this.alignOptions = [
+      {
+        label: 'Alignment Options',
+        expanded: true,
+        options: alignOptions,
+      },
+    ];
   }
   }
 
 
   setAggOptions() {
   setAggOptions() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    let aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       ...a,
       label: a.text,
       label: a.text,
     }));
     }));
-    if (!this.aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
+    if (!aggOptions.find(o => o.value === this.templateSrv.replace(this.target.aggregation.crossSeriesReducer))) {
       this.deselectAggregationOption('REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
     }
 
 
     if (this.target.aggregation.groupBys.length > 0) {
     if (this.target.aggregation.groupBys.length > 0) {
-      this.aggOptions = this.aggOptions.filter(o => o.value !== 'REDUCE_NONE');
+      aggOptions = aggOptions.filter(o => o.value !== 'REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
       this.deselectAggregationOption('REDUCE_NONE');
     }
     }
+
+    this.aggOptions = [
+      {
+        label: 'Aggregation Options',
+        expanded: true,
+        options: aggOptions,
+      },
+    ];
   }
   }
 
 
   handleAlignmentChange(value) {
   handleAlignmentChange(value) {

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

@@ -130,7 +130,14 @@ export class StackdriverFilterCtrl {
     ) {
     ) {
       this.target.metricType = metricsByService[0].value;
       this.target.metricType = metricsByService[0].value;
     }
     }
-    return metricsByService;
+
+    return [
+      {
+        label: 'Metrics',
+        expanded: true,
+        options: metricsByService,
+      },
+    ];
   }
   }
 
 
   async getLabels() {
   async getLabels() {