stackdriver: add query keyword style to query fields

public/app/plugins/datasource/stackdriver/components/SimpleSelect.tsx

@@ -11,7 +11,7 @@ const SimpleSelect: SFC<Props> = props => {
   const { label, onValueChange, value, options } = props;
   const { label, onValueChange, value, options } = props;
   return (
   return (
     <div className="gf-form max-width-21">
     <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">
       <div className="gf-form-select-wrapper max-width-12">
         <select className="gf-form-input" required onChange={onValueChange} value={value}>
         <select className="gf-form-input" required onChange={onValueChange} value={value}>
           {options.map(({ value, name }, i) => (
           {options.map(({ value, name }, i) => (

public/app/plugins/datasource/stackdriver/components/VariableQueryEditor.tsx

@@ -127,7 +127,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
             value={this.state.selectedService}
             value={this.state.selectedService}
             options={this.insertTemplateVariables(this.state.services)}
             options={this.insertTemplateVariables(this.state.services)}
             onValueChange={e => this.onServiceChange(e)}
             onValueChange={e => this.onServiceChange(e)}
-            label="Services"
+            label="Service"
           />
           />
         );
         );
       case MetricFindQueryTypes.LabelKeys:
       case MetricFindQueryTypes.LabelKeys:
@@ -139,20 +139,20 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
               value={this.state.selectedService}
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
               options={this.insertTemplateVariables(this.state.services)}
               onValueChange={e => this.onServiceChange(e)}
               onValueChange={e => this.onServiceChange(e)}
-              label="Services"
+              label="Service"
             />
             />
             <SimpleSelect
             <SimpleSelect
               value={this.state.selectedMetricType}
               value={this.state.selectedMetricType}
               options={this.insertTemplateVariables(this.state.metricTypes)}
               options={this.insertTemplateVariables(this.state.metricTypes)}
               onValueChange={e => this.onMetricTypeChange(e)}
               onValueChange={e => this.onMetricTypeChange(e)}
-              label="Metric Types"
+              label="Metric Type"
             />
             />
             {queryType === MetricFindQueryTypes.LabelValues && (
             {queryType === MetricFindQueryTypes.LabelValues && (
               <SimpleSelect
               <SimpleSelect
                 value={this.state.labelKey}
                 value={this.state.labelKey}
                 options={this.insertTemplateVariables(this.state.labels.map(l => ({ value: l, name: l })))}
                 options={this.insertTemplateVariables(this.state.labels.map(l => ({ value: l, name: l })))}
                 onValueChange={e => this.onLabelKeyChange(e)}
                 onValueChange={e => this.onLabelKeyChange(e)}
-                label="Label Keys"
+                label="Label Key"
               />
               />
             )}
             )}
           </React.Fragment>
           </React.Fragment>
@@ -165,13 +165,13 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
               value={this.state.selectedService}
               value={this.state.selectedService}
               options={this.insertTemplateVariables(this.state.services)}
               options={this.insertTemplateVariables(this.state.services)}
               onValueChange={e => this.onServiceChange(e)}
               onValueChange={e => this.onServiceChange(e)}
-              label="Services"
+              label="Service"
             />
             />
             <SimpleSelect
             <SimpleSelect
               value={this.state.selectedMetricType}
               value={this.state.selectedMetricType}
               options={this.insertTemplateVariables(this.state.metricTypes)}
               options={this.insertTemplateVariables(this.state.metricTypes)}
               onValueChange={e => this.onMetricTypeChange(e)}
               onValueChange={e => this.onMetricTypeChange(e)}
-              label="Metric Types"
+              label="Metric Type"
             />
             />
           </React.Fragment>
           </React.Fragment>
         );
         );
@@ -187,7 +187,7 @@ export class StackdriverVariableQueryEditor extends PureComponent<VariableQueryP
           value={this.state.selectedQueryType}
           value={this.state.selectedQueryType}
           options={this.queryTypes}
           options={this.queryTypes}
           onValueChange={e => this.handleQueryTypeChange(e)}
           onValueChange={e => this.handleQueryTypeChange(e)}
-          label="Query Types"
+          label="Query Type"
         />
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
       </React.Fragment>
       </React.Fragment>