From 19d1d7f35a4a49611bf207c99f281bfa3f55542a Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Mon, 19 Nov 2018 16:26:06 +0100
Subject: [PATCH] stackdriver: add query keyword style to query fields

---
 .../stackdriver/components/SimpleSelect.tsx        |  2 +-
 .../stackdriver/components/VariableQueryEditor.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx b/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx
index 1834bd9da5c..3a4a0707a2c 100644
--- a/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx
@@ -11,7 +11,7 @@ const SimpleSelect: SFC<Props> = props => {
   const { label, onValueChange, value, options } = props;
   return (
     <div className="gf-form max-width-21">
-      <span className="gf-form-label width-10">{label}</span>
+      <span className="gf-form-label width-10 query-keyword">{label}</span>
       <div className="gf-form-select-wrapper max-width-12">
         <select className="gf-form-input" required onChange={onValueChange} value={value}>
           {options.map(({ value, name }, i) => (
diff --git a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
index 1e7ba83a42d..1f349ccab59 100644
--- a/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx
@@ -127,7 +127,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
             value={this.state.selectedService}
             options={this.insertTemplateVariables(this.state.services)}
             onValueChange={e => this.onServiceChange(e)}
-            label="Services"
+            label="Service"
           />
         );
       case MetricFindQueryTypes.LabelKeys:
@@ -139,20 +139,20 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
               onValueChange={e => this.onServiceChange(e)}
-              label="Services"
+              label="Service"
             />
             <SimpleSelect
               value={this.state.selectedMetricType}
               options={this.insertTemplateVariables(this.state.metricTypes)}
               onValueChange={e => this.onMetricTypeChange(e)}
-              label="Metric Types"
+              label="Metric Type"
             />
             {queryType === MetricFindQueryTypes.LabelValues && (
               <SimpleSelect
                 value={this.state.labelKey}
                 options={this.insertTemplateVariables(this.state.labels.map(l => ({ value: l, name: l })))}
                 onValueChange={e => this.onLabelKeyChange(e)}
-                label="Label Keys"
+                label="Label Key"
               />
             )}
           </React.Fragment>
@@ -165,13 +165,13 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
               onValueChange={e => this.onServiceChange(e)}
-              label="Services"
+              label="Service"
             />
             <SimpleSelect
               value={this.state.selectedMetricType}
               options={this.insertTemplateVariables(this.state.metricTypes)}
               onValueChange={e => this.onMetricTypeChange(e)}
-              label="Metric Types"
+              label="Metric Type"
             />
           </React.Fragment>
         );
@@ -187,7 +187,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
           value={this.state.selectedQueryType}
           options={this.queryTypes}
           onValueChange={e => this.handleQueryTypeChange(e)}
-          label="Query Types"
+          label="Query Type"
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
       </React.Fragment>