diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
index 80c3711fecf..a9a4756eb19 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
@@ -1,5 +1,6 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
-import { InlineFormLabel } from '@grafana/ui';
+import { InlineFormLabel, Select, InlineField } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
 
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
@@ -26,3 +27,31 @@ export const QueryInlineField: FunctionComponent<Props> = ({ ...props }) => {
     </div>
   );
 };
+
+interface VariableQueryFieldProps {
+  onChange: (value: string) => void;
+  options: SelectableValue[];
+  value: string;
+  label: string;
+  allowCustomValue?: boolean;
+}
+
+export const VariableQueryField: FunctionComponent<VariableQueryFieldProps> = ({
+  label,
+  onChange,
+  value,
+  options,
+  allowCustomValue = false,
+}) => {
+  return (
+    <InlineField label={label} labelWidth={20}>
+      <Select
+        width={25}
+        allowCustomValue={allowCustomValue}
+        value={value}
+        onChange={({ value }) => onChange(value!)}
+        options={options}
+      />
+    </InlineField>
+  );
+};
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SimpleSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SimpleSelect.tsx
deleted file mode 100644
index 5590895ffbb..00000000000
--- a/public/app/plugins/datasource/cloud-monitoring/components/SimpleSelect.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { ChangeEvent, FC } from 'react';
-
-interface Props {
-  onValueChange: (e: ChangeEvent<HTMLSelectElement>) => void;
-  options: Array<{ value: string; name: string }>;
-  value: string;
-  label: string;
-}
-
-export const SimpleSelect: FC<Props> = (props) => {
-  const { label, onValueChange, value, options } = props;
-  return (
-    <div className="gf-form max-width-21">
-      <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) => (
-            <option key={i} value={value}>
-              {name}
-            </option>
-          ))}
-        </select>
-      </div>
-    </div>
-  );
-};
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
index 53b139c5413..9cb564fb573 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
@@ -1,5 +1,9 @@
 import React, { PureComponent } from 'react';
-import { SimpleSelect } from './';
+
+import { getTemplateSrv } from '@grafana/runtime';
+import { QueryEditorProps } from '@grafana/data';
+
+import { VariableQueryField } from './';
 import { extractServicesFromMetricDescriptors, getLabelKeys, getMetricTypes } from '../functions';
 import {
   CloudMonitoringOptions,
@@ -10,8 +14,6 @@ import {
   VariableQueryData,
 } from '../types';
 import CloudMonitoringDatasource from '../datasource';
-import { getTemplateSrv } from '@grafana/runtime';
-import { QueryEditorProps } from '@grafana/data';
 
 export type Props = QueryEditorProps<
   CloudMonitoringDatasource,
@@ -21,19 +23,19 @@ export type Props = QueryEditorProps<
 >;
 
 export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, VariableQueryData> {
-  queryTypes: Array<{ value: string; name: string }> = [
-    { value: MetricFindQueryTypes.Projects, name: 'Projects' },
-    { value: MetricFindQueryTypes.Services, name: 'Services' },
-    { value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' },
-    { value: MetricFindQueryTypes.LabelKeys, name: 'Label Keys' },
-    { value: MetricFindQueryTypes.LabelValues, name: 'Label Values' },
-    { value: MetricFindQueryTypes.ResourceTypes, name: 'Resource Types' },
-    { value: MetricFindQueryTypes.Aggregations, name: 'Aggregations' },
-    { value: MetricFindQueryTypes.Aligners, name: 'Aligners' },
-    { value: MetricFindQueryTypes.AlignmentPeriods, name: 'Alignment Periods' },
-    { value: MetricFindQueryTypes.Selectors, name: 'Selectors' },
-    { value: MetricFindQueryTypes.SLOServices, name: 'SLO Services' },
-    { value: MetricFindQueryTypes.SLO, name: 'Service Level Objectives (SLO)' },
+  queryTypes: Array<{ value: string; label: string }> = [
+    { value: MetricFindQueryTypes.Projects, label: 'Projects' },
+    { value: MetricFindQueryTypes.Services, label: 'Services' },
+    { value: MetricFindQueryTypes.MetricTypes, label: 'Metric Types' },
+    { value: MetricFindQueryTypes.LabelKeys, label: 'Label Keys' },
+    { value: MetricFindQueryTypes.LabelValues, label: 'Label Values' },
+    { value: MetricFindQueryTypes.ResourceTypes, label: 'Resource Types' },
+    { value: MetricFindQueryTypes.Aggregations, label: 'Aggregations' },
+    { value: MetricFindQueryTypes.Aligners, label: 'Aligners' },
+    { value: MetricFindQueryTypes.AlignmentPeriods, label: 'Alignment Periods' },
+    { value: MetricFindQueryTypes.Selectors, label: 'Selectors' },
+    { value: MetricFindQueryTypes.SLOServices, label: 'SLO Services' },
+    { value: MetricFindQueryTypes.SLO, label: 'Service Level Objectives (SLO)' },
   ];
 
   defaults: VariableQueryData = {
@@ -68,7 +70,7 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
     );
     const services = extractServicesFromMetricDescriptors(metricDescriptors).map((m: any) => ({
       value: m.service,
-      name: m.serviceShortName,
+      label: m.serviceShortName,
     }));
 
     let selectedService = '';
@@ -93,9 +95,9 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       metricTypes,
       selectedMetricType,
       metricDescriptors,
-      projects: projects.map(({ value, label }: any) => ({ value, name: label })),
+      projects,
       ...(await this.getLabels(selectedMetricType, this.state.projectName)),
-      sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })),
+      sloServices,
       loading: false,
     };
     this.setState(state, () => this.onPropsChange());
@@ -127,14 +129,17 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
 
     const sloServices = await this.props.datasource.getSLOServices(projectName);
 
-    this.setState({
-      ...labels,
-      metricTypes,
-      selectedMetricType,
-      metricDescriptors,
-      projectName,
-      sloServices: sloServices.map(({ value, label }: any) => ({ value, name: label })),
-    });
+    this.setState(
+      {
+        ...labels,
+        metricTypes,
+        selectedMetricType,
+        metricDescriptors,
+        projectName,
+        sloServices,
+      },
+      () => this.onPropsChange()
+    );
   }
 
   async onServiceChange(service: string) {
@@ -185,31 +190,33 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
     return result;
   }
 
-  insertTemplateVariables(options: any) {
-    const templateVariables = getTemplateSrv()
-      .getVariables()
-      .map((v: any) => ({
-        name: `$${v.name}`,
-        value: `$${v.name}`,
-      }));
-    return [...templateVariables, ...options];
-  }
-
   renderQueryTypeSwitch(queryType: string) {
+    const variableOptionGroup = {
+      label: 'Template Variables',
+      expanded: false,
+      options: getTemplateSrv()
+        .getVariables()
+        .map((v: any) => ({
+          value: `$${v.name}`,
+          label: `$${v.name}`,
+        })),
+    };
+
     switch (queryType) {
       case MetricFindQueryTypes.MetricTypes:
         return (
           <>
-            <SimpleSelect
+            <VariableQueryField
+              allowCustomValue={true}
               value={this.state.projectName}
-              options={this.insertTemplateVariables(this.state.projects)}
-              onValueChange={(e) => this.onProjectChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.projects]}
+              onChange={(value) => this.onProjectChange(value)}
               label="Project"
             />
-            <SimpleSelect
+            <VariableQueryField
               value={this.state.selectedService}
-              options={this.insertTemplateVariables(this.state.services)}
-              onValueChange={(e) => this.onServiceChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.services]}
+              onChange={(value) => this.onServiceChange(value)}
               label="Service"
             />
           </>
@@ -219,29 +226,33 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       case MetricFindQueryTypes.ResourceTypes:
         return (
           <>
-            <SimpleSelect
+            <VariableQueryField
+              allowCustomValue={true}
               value={this.state.projectName}
-              options={this.insertTemplateVariables(this.state.projects)}
-              onValueChange={(e) => this.onProjectChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.projects]}
+              onChange={(value) => this.onProjectChange(value)}
               label="Project"
             />
-            <SimpleSelect
+            <VariableQueryField
               value={this.state.selectedService}
-              options={this.insertTemplateVariables(this.state.services)}
-              onValueChange={(e) => this.onServiceChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.services]}
+              onChange={(value) => this.onServiceChange(value)}
               label="Service"
             />
-            <SimpleSelect
+            <VariableQueryField
               value={this.state.selectedMetricType}
-              options={this.insertTemplateVariables(this.state.metricTypes)}
-              onValueChange={(e) => this.onMetricTypeChange(e.target.value)}
+              options={[
+                variableOptionGroup,
+                ...this.state.metricTypes.map(({ value, name }) => ({ value, label: name })),
+              ]}
+              onChange={(value) => this.onMetricTypeChange(value)}
               label="Metric Type"
             />
             {queryType === MetricFindQueryTypes.LabelValues && (
-              <SimpleSelect
+              <VariableQueryField
                 value={this.state.labelKey}
-                options={this.insertTemplateVariables(this.state.labels.map((l) => ({ value: l, name: l })))}
-                onValueChange={(e) => this.onLabelKeyChange(e.target.value)}
+                options={[variableOptionGroup, ...this.state.labels.map((l) => ({ value: l, label: l }))]}
+                onChange={(value) => this.onLabelKeyChange(value)}
                 label="Label Key"
               />
             )}
@@ -251,16 +262,19 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       case MetricFindQueryTypes.Aggregations:
         return (
           <>
-            <SimpleSelect
+            <VariableQueryField
               value={this.state.selectedService}
-              options={this.insertTemplateVariables(this.state.services)}
-              onValueChange={(e) => this.onServiceChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.services]}
+              onChange={(value) => this.onServiceChange(value)}
               label="Service"
             />
-            <SimpleSelect
+            <VariableQueryField
               value={this.state.selectedMetricType}
-              options={this.insertTemplateVariables(this.state.metricTypes)}
-              onValueChange={(e) => this.onMetricTypeChange(e.target.value)}
+              options={[
+                variableOptionGroup,
+                ...this.state.metricTypes.map(({ value, name }) => ({ value, label: name })),
+              ]}
+              onChange={(value) => this.onMetricTypeChange(value)}
               label="Metric Type"
             />
           </>
@@ -268,10 +282,11 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       case MetricFindQueryTypes.SLOServices:
         return (
           <>
-            <SimpleSelect
+            <VariableQueryField
+              allowCustomValue={true}
               value={this.state.projectName}
-              options={this.insertTemplateVariables(this.state.projects)}
-              onValueChange={(e) => this.onProjectChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.projects]}
+              onChange={(value) => this.onProjectChange(value)}
               label="Project"
             />
           </>
@@ -280,19 +295,20 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       case MetricFindQueryTypes.SLO:
         return (
           <>
-            <SimpleSelect
+            <VariableQueryField
+              allowCustomValue={true}
               value={this.state.projectName}
-              options={this.insertTemplateVariables(this.state.projects)}
-              onValueChange={(e) => this.onProjectChange(e.target.value)}
+              options={[variableOptionGroup, ...this.state.projects]}
+              onChange={(value) => this.onProjectChange(value)}
               label="Project"
             />
-            <SimpleSelect
+            <VariableQueryField
               value={this.state.selectedSLOService}
-              options={this.insertTemplateVariables(this.state.sloServices)}
-              onValueChange={(e) => {
+              options={[variableOptionGroup, ...this.state.sloServices]}
+              onChange={(value) => {
                 this.setState({
                   ...this.state,
-                  selectedSLOService: e.target.value,
+                  selectedSLOService: value,
                 });
               }}
               label="SLO Service"
@@ -320,10 +336,10 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
 
     return (
       <>
-        <SimpleSelect
+        <VariableQueryField
           value={this.state.selectedQueryType}
           options={this.queryTypes}
-          onValueChange={(e) => this.onQueryTypeChange(e.target.value)}
+          onChange={(value) => this.onQueryTypeChange(value)}
           label="Query Type"
         />
         {this.renderQueryTypeSwitch(this.state.selectedQueryType)}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/index.ts b/public/app/plugins/datasource/cloud-monitoring/components/index.ts
index 7cf6d44786a..0d0c0235070 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/index.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/components/index.ts
@@ -8,10 +8,9 @@ export { Alignments } from './Alignments';
 export { AlignmentPeriods } from './AlignmentPeriods';
 export { AliasBy } from './AliasBy';
 export { Aggregations } from './Aggregations';
-export { SimpleSelect } from './SimpleSelect';
 export { MetricQueryEditor } from './MetricQueryEditor';
 export { SLOQueryEditor } from './SLOQueryEditor';
 export { MQLQueryEditor } from './MQLQueryEditor';
 export { QueryTypeSelector } from './QueryType';
-export { QueryInlineField, QueryField } from './Fields';
+export { QueryInlineField, QueryField, VariableQueryField } from './Fields';
 export { VisualMetricQueryEditor } from './VisualMetricQueryEditor';
diff --git a/public/app/plugins/datasource/cloud-monitoring/functions.ts b/public/app/plugins/datasource/cloud-monitoring/functions.ts
index 064f95fad23..0a99e2e114d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/functions.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/functions.ts
@@ -24,7 +24,8 @@ export const getMetricTypes = (
   const metricTypeExistInArray = metricTypes.some(
     (m: { value: string; name: string }) => m.value === interpolatedMetricType
   );
-  const selectedMetricType = metricTypeExistInArray ? metricType : metricTypes[0].value;
+  const metricTypeByService = metricTypes.length ? metricTypes[0].value : '';
+  const selectedMetricType = metricTypeExistInArray ? metricType : metricTypeByService;
   return {
     metricTypes,
     selectedMetricType,
diff --git a/public/app/plugins/datasource/cloud-monitoring/types.ts b/public/app/plugins/datasource/cloud-monitoring/types.ts
index 613ae864be8..102e086567b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/types.ts
+++ b/public/app/plugins/datasource/cloud-monitoring/types.ts
@@ -1,4 +1,4 @@
-import { DataQuery, DataSourceJsonData } from '@grafana/data';
+import { DataQuery, DataSourceJsonData, SelectableValue } from '@grafana/data';
 
 export enum AuthType {
   JWT = 'jwt',
@@ -32,8 +32,8 @@ export interface CloudMonitoringVariableQuery extends DataQuery {
   selectedMetricType: string;
   selectedSLOService: string;
   labelKey: string;
-  projects: Array<{ value: string; name: string }>;
-  sloServices: Array<{ value: string; name: string }>;
+  projects: SelectableValue[];
+  sloServices: SelectableValue[];
   projectName: string;
 }
 
@@ -46,9 +46,9 @@ export interface VariableQueryData {
   labels: string[];
   labelKey: string;
   metricTypes: Array<{ value: string; name: string }>;
-  services: Array<{ value: string; name: string }>;
-  projects: Array<{ value: string; name: string }>;
-  sloServices: Array<{ value: string; name: string }>;
+  services: SelectableValue[];
+  projects: SelectableValue[];
+  sloServices: SelectableValue[];
   projectName: string;
   loading: boolean;
 }