diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
index 89968516891..9a6d477011b 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Alignment.tsx
@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { SELECT_WIDTH } from '../constants';
-import { CustomMetaData, MetricQuery } from '../types';
+import { CustomMetaData, MetricQuery, SLOQuery } from '../types';
 import { AlignmentFunction, AlignmentPeriod, AlignmentPeriodLabel, QueryEditorField, QueryEditorRow } from '.';
 import CloudMonitoringDatasource from '../datasource';
 
 export interface Props {
-  onChange: (query: MetricQuery) => void;
+  onChange: (query: MetricQuery | SLOQuery) => void;
   query: MetricQuery;
   templateVariableOptions: Array<SelectableValue<string>>;
   customMetaData: CustomMetaData;
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
index 707cc12e6da..66992df2f49 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/AlignmentPeriod.tsx
@@ -1,17 +1,22 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '@grafana/ui';
 import { ALIGNMENT_PERIODS } from '../constants';
-import { BaseQuery } from '../types';
+import { MetricQuery, SLOQuery } from '../types';
 
-export interface Props {
-  onChange: (query: BaseQuery) => void;
-  query: BaseQuery;
+export interface Props<TQuery> {
+  onChange(query: TQuery): void;
+  query: TQuery;
   templateVariableOptions: Array<SelectableValue<string>>;
   selectWidth?: number;
 }
 
-export const AlignmentPeriod: FC<Props> = ({ templateVariableOptions, onChange, query, selectWidth }) => {
+export function AlignmentPeriod<TQuery extends MetricQuery | SLOQuery>({
+  templateVariableOptions,
+  onChange,
+  query,
+  selectWidth,
+}: Props<TQuery>) {
   const options = useMemo(
     () =>
       ALIGNMENT_PERIODS.map((ap) => ({
@@ -42,4 +47,4 @@ export const AlignmentPeriod: FC<Props> = ({ templateVariableOptions, onChange,
       placeholder="Select Alignment"
     ></Select>
   );
-};
+}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
index 0c49203e96e..495b818ba43 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
@@ -10,6 +10,7 @@ import {
   AlignmentTypes,
   CustomMetaData,
   ValueTypes,
+  SLOQuery,
 } from '../types';
 import { getAlignmentPickerData } from '../functions';
 import CloudMonitoringDatasource from '../datasource';
@@ -71,7 +72,7 @@ function Editor({
   }, [datasource, groupBys, metricType, projectName, refId]);
 
   const onChange = useCallback(
-    (metricQuery: MetricQuery) => {
+    (metricQuery: MetricQuery | SLOQuery) => {
       onQueryChange({ ...query, ...metricQuery });
       onRunQuery();
     },
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
index 7513fcd4396..4e5e646556a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryEditor.tsx
@@ -33,7 +33,7 @@ export class QueryEditor extends PureComponent<Props> {
     }
   }
 
-  onQueryChange(prop: string, value: any) {
+  onQueryChange(prop: string, value: MetricQuery | SLOQuery) {
     this.props.onChange({ ...this.props.query, [prop]: value });
     this.props.onRunQuery();
   }
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/QueryType.tsx b/public/app/plugins/datasource/cloud-monitoring/components/QueryType.tsx
index c57c7fcfa7d..79ac257737a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/QueryType.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/QueryType.tsx
@@ -10,12 +10,25 @@ export interface Props {
   templateVariableOptions: Array<SelectableValue<string>>;
 }
 
+function asQueryType(input: Array<SelectableValue<string>>) {
+  const res: Array<SelectableValue<QueryType>> = [];
+  input.forEach((v) => {
+    if (v.value === QueryType.METRICS) {
+      res.push({ ...v, value: QueryType.METRICS });
+    }
+    if (v.value === QueryType.SLO) {
+      res.push({ ...v, value: QueryType.SLO });
+    }
+  });
+  return res;
+}
+
 export const QueryTypeSelector: FunctionComponent<Props> = ({ onChange, value, templateVariableOptions }) => {
   return (
     <div className="gf-form-inline">
       <label className="gf-form-label query-keyword width-9">Query Type</label>
       <Segment
-        value={[...QUERY_TYPES, ...templateVariableOptions].find((qt) => qt.value === value)}
+        value={[...QUERY_TYPES, ...asQueryType(templateVariableOptions)].find((qt) => qt.value === value)}
         options={[
           ...QUERY_TYPES,
           {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
index e1e26ee009c..a81f11c0cc6 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Metrics, LabelFilter, GroupBy, Preprocessor, Alignment } from '.';
-import { MetricQuery, MetricDescriptor, CustomMetaData } from '../types';
+import { MetricQuery, MetricDescriptor, CustomMetaData, SLOQuery } from '../types';
 import CloudMonitoringDatasource from '../datasource';
 
 export interface Props {
   customMetaData: CustomMetaData;
   variableOptionGroup: SelectableValue<string>;
   onMetricTypeChange: (query: MetricDescriptor) => void;
-  onChange: (query: MetricQuery) => void;
+  onChange: (query: MetricQuery | SLOQuery) => void;
   query: MetricQuery;
   datasource: CloudMonitoringDatasource;
   labels: any;