From 786df7920ee0854e97a5b27afe14388c2888e76d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 2 Jan 2019 12:10:19 +0100
Subject: [PATCH] remove group name from select component. let the parent set
 group name instead

---
 public/app/core/angular_wrappers.ts           |  1 -
 .../core/components/Select/MetricSelect.tsx   | 15 ++++---
 .../stackdriver/query_aggregation_ctrl.ts     | 41 ++++++++++++++-----
 .../stackdriver/query_filter_ctrl.ts          |  9 +++-
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 004d8eb12c5..7a2703b76e7 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -27,7 +27,6 @@ export function registerAngularDirectives() {
     'isSearchable',
     'className',
     'placeholder',
-    'groupName',
     ['variables', { watchDepth: 'reference' }],
   ]);
 }
diff --git a/public/app/core/components/Select/MetricSelect.tsx b/public/app/core/components/Select/MetricSelect.tsx
index 03d700f1ef4..8c23bf4ded6 100644
--- a/public/app/core/components/Select/MetricSelect.tsx
+++ b/public/app/core/components/Select/MetricSelect.tsx
@@ -11,7 +11,6 @@ export interface Props {
   value: string;
   placeholder?: string;
   className?: string;
-  groupName?: string;
   variables?: Variable[];
 }
 
@@ -23,7 +22,6 @@ export class MetricSelect extends React.Component<Props, State> {
   static defaultProps = {
     variables: [],
     options: [],
-    groupName: 'Options',
   };
 
   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);
   }
 
-  buildOptions({ variables = [], groupName = '', options }) {
+  buildOptions({ variables = [], options }) {
     return variables.length > 0
       ? [
           this.getVariablesGroup(),
-          {
-            label: groupName,
-            expanded: true,
-            options,
-          },
+          // {
+          //   label: groupName,
+          //   expanded: true,
+          //   options,
+          // },
+          ...options,
         ]
       : options;
   }
diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
index c88b61725de..b43ecf56d50 100644
--- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts
@@ -29,10 +29,16 @@ export class StackdriverAggregationCtrl {
   constructor(private $scope, private templateSrv) {
     this.$scope.ctrl = this;
     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.setAlignOptions();
     const self = this;
@@ -46,28 +52,43 @@ export class StackdriverAggregationCtrl {
   }
 
   setAlignOptions() {
-    this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    const alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       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() {
-    this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
+    let aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind).map(a => ({
       ...a,
       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');
     }
 
     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.aggOptions = [
+      {
+        label: 'Aggregation Options',
+        expanded: true,
+        options: aggOptions,
+      },
+    ];
   }
 
   handleAlignmentChange(value) {
diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
index 4012cb733d2..c3f00134b11 100644
--- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
+++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts
@@ -130,7 +130,14 @@ export class StackdriverFilterCtrl {
     ) {
       this.target.metricType = metricsByService[0].value;
     }
-    return metricsByService;
+
+    return [
+      {
+        label: 'Metrics',
+        expanded: true,
+        options: metricsByService,
+      },
+    ];
   }
 
   async getLabels() {