From 2780ef27fde9381db30fd1e555248e4683e3c06b Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 31 Oct 2018 14:12:21 +0100
Subject: [PATCH] stackdriver: extract variables for pickers

---
 .../components/TemplateQueryComponent.tsx     | 77 +++++++++----------
 1 file changed, 35 insertions(+), 42 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
index 4ddf585ccce..e603c5581ab 100644
--- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx
@@ -115,62 +115,55 @@ export class StackdriverTemplateQueryComponent extends PureComponent<TemplateQue
     return result;
   }
 
+  servicePicker = (
+    <SimpleSelect
+      value={this.state.selectedService}
+      options={this.state.services}
+      onValueChange={this.onServiceChange}
+      label="Services"
+    />
+  );
+
+  metricTypesPicker = (
+    <SimpleSelect
+      value={this.state.selectedMetricType}
+      options={this.state.metricTypes}
+      onValueChange={this.onMetricTypeChange}
+      label="Metric Types"
+    />
+  );
+
+  labelPicker = (
+    <SimpleSelect
+      value={this.state.labelKey}
+      options={this.state.labels.map(l => ({ value: l, name: l }))}
+      onValueChange={this.onLabelKeyChange}
+      label={
+        this.state.selectedQueryType === MetricFindQueryTypes.ResourceLabels ? 'Resource Label Key' : 'Metric Label Key'
+      }
+    />
+  );
+
   renderQueryTypeSwitch(queryType) {
     switch (queryType) {
       case MetricFindQueryTypes.MetricTypes:
-        return (
-          <SimpleSelect
-            value={this.state.selectedService}
-            options={this.state.services}
-            onValueChange={this.onServiceChange}
-            label="Services"
-          />
-        );
+        return this.servicePicker;
       case MetricFindQueryTypes.MetricLabels:
       case MetricFindQueryTypes.ResourceLabels:
       case MetricFindQueryTypes.ResourceTypes:
         return (
           <React.Fragment>
-            <SimpleSelect
-              value={this.state.selectedService}
-              options={this.state.services}
-              onValueChange={this.onServiceChange}
-              label="Services"
-            />
-            <SimpleSelect
-              value={this.state.selectedMetricType}
-              options={this.state.metricTypes}
-              onValueChange={this.onMetricTypeChange}
-              label="Metric Types"
-            />
-            <SimpleSelect
-              value={this.state.labelKey}
-              options={this.state.labels.map(l => ({ value: l, name: l }))}
-              onValueChange={this.onLabelKeyChange}
-              label={
-                this.state.selectedQueryType === MetricFindQueryTypes.ResourceLabels
-                  ? 'Resource Label Key'
-                  : 'Metric Label Key'
-              }
-            />
+            {this.servicePicker}
+            {this.metricTypesPicker}
+            {queryType !== MetricFindQueryTypes.ResourceTypes && this.labelPicker}
           </React.Fragment>
         );
       case MetricFindQueryTypes.Alignerns:
       case MetricFindQueryTypes.Aggregations:
         return (
           <React.Fragment>
-            <SimpleSelect
-              value={this.state.selectedService}
-              options={this.state.services}
-              onValueChange={this.onServiceChange}
-              label="Services"
-            />
-            <SimpleSelect
-              value={this.state.selectedMetricType}
-              options={this.state.metricTypes}
-              onValueChange={this.onMetricTypeChange}
-              label="Metric Types"
-            />
+            {this.servicePicker}
+            {this.metricTypesPicker}
           </React.Fragment>
         );
       default: