make templateSrv a prop

public/app/core/angular_wrappers.ts

@@ -1,5 +1,6 @@
 import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { QueryEditor } from 'app/plugins/datasource/stackdriver/components/QueryEditor';
+import { AnnotationQueryEditor } from 'app/plugins/datasource/stackdriver/components/AnnotationQueryEditor';
 import { PasswordStrength } from './components/PasswordStrength';
 import PageHeader from './components/PageHeader/PageHeader';
 import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
@@ -36,5 +37,13 @@ export function registerAngularDirectives() {
     'onExecuteQuery',
     ['events', { watchDepth: 'reference' }],
     ['datasource', { watchDepth: 'reference' }],
+    ['templateSrv', { watchDepth: 'reference' }],
+  ]);
+  react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
+    'target',
+    'onQueryChange',
+    'onExecuteQuery',
+    ['datasource', { watchDepth: 'reference' }],
+    ['templateSrv', { watchDepth: 'reference' }],
   ]);
 }

public/app/plugins/datasource/stackdriver/annotations_query_ctrl.ts

@@ -1,20 +1,13 @@
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { AnnotationQueryEditor } from './components/AnnotationQueryEditor';
-
 export class StackdriverAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
   annotation: any;
+  templateSrv: any;
 
-  constructor() {
+  /** @ngInject */
+  constructor(templateSrv) {
+    this.templateSrv = templateSrv;
     this.annotation.target = this.annotation.target || {};
     this.onQueryChange = this.onQueryChange.bind(this);
-
-    react2AngularDirective('annotationQueryEditor', AnnotationQueryEditor, [
-      'target',
-      'onQueryChange',
-      'onExecuteQuery',
-      ['datasource', { watchDepth: 'reference' }],
-    ]);
   }
 
   onQueryChange(target) {

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

@@ -10,6 +10,7 @@ export interface Props {
   onQueryChange: (target: AnnotationTarget) => void;
   target: AnnotationTarget;
   datasource: any;
+  templateSrv: any;
 }
 
 interface State extends AnnotationTarget {
@@ -59,14 +60,14 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
 
   render() {
     const { defaultProject, metricType, filters, refId, title, text } = this.state;
-    const { datasource } = this.props;
+    const { datasource, templateSrv } = this.props;
 
     return (
       <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
-          templateSrv={datasource.templateSrv}
+          templateSrv={templateSrv}
           datasource={datasource}
           onChange={value => this.onMetricTypeChange(value)}
         >
@@ -77,7 +78,7 @@ export class AnnotationQueryEditor extends React.Component<Props, State> {
                 filters={filters}
                 refId={refId}
                 hideGroupBys={true}
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />

public/app/plugins/datasource/stackdriver/components/QueryEditor.test.tsx

@@ -8,10 +8,10 @@ const props: Props = {
   target: DefaultTarget,
   events: { on: () => {} },
   datasource: {
-    templateSrv: { variables: [] },
     getDefaultProject: () => 'project',
     getMetricTypes: () => [],
   },
+  templateSrv: { variables: [] },
 };
 
 describe('QueryEditor', () => {

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

@@ -13,10 +13,11 @@ import { getAlignmentPickerData } from '../functions';
 
 export interface Props {
   onQueryChange: (target: Target) => void;
-  onExecuteQuery?: () => void;
+  onExecuteQuery: () => void;
   target: Target;
   events: any;
   datasource: any;
+  templateSrv: any;
 }
 
 interface State extends Target {
@@ -49,10 +50,10 @@ export class QueryEditor extends React.Component<Props, State> {
   state: State = DefaultTarget;
 
   componentDidMount() {
-    const { events, target, datasource } = this.props;
+    const { events, target, templateSrv } = this.props;
     events.on('data-received', this.onDataReceived.bind(this));
     events.on('data-error', this.onDataError.bind(this));
-    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, datasource.templateSrv);
+    const { perSeriesAligner, alignOptions } = getAlignmentPickerData(target, templateSrv);
     this.setState({
       ...this.props.target,
       alignOptions,
@@ -92,10 +93,10 @@ export class QueryEditor extends React.Component<Props, State> {
   }
 
   onMetricTypeChange({ valueType, metricKind, type, unit }) {
-    const { datasource, onQueryChange, onExecuteQuery } = this.props;
+    const { templateSrv, onQueryChange, onExecuteQuery } = this.props;
     const { perSeriesAligner, alignOptions } = getAlignmentPickerData(
       { valueType, metricKind, perSeriesAligner: this.state.perSeriesAligner },
-      datasource.templateSrv
+      templateSrv
     );
     this.setState(
       {
@@ -135,14 +136,14 @@ export class QueryEditor extends React.Component<Props, State> {
       lastQueryError,
       refId,
     } = this.state;
-    const { datasource } = this.props;
+    const { datasource, templateSrv } = this.props;
 
     return (
       <>
         <Metrics
           defaultProject={defaultProject}
           metricType={metricType}
-          templateSrv={datasource.templateSrv}
+          templateSrv={templateSrv}
           datasource={datasource}
           onChange={value => this.onMetricTypeChange(value)}
         >
@@ -155,13 +156,13 @@ export class QueryEditor extends React.Component<Props, State> {
                 groupBys={groupBys}
                 refId={refId}
                 hideGroupBys={false}
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 datasource={datasource}
                 metricType={metric ? metric.type : ''}
               />
               <Aggregations
                 metricDescriptor={metric}
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 crossSeriesReducer={crossSeriesReducer}
                 groupBys={groupBys}
                 onChange={value => this.onPropertyChange('crossSeriesReducer', value)}
@@ -170,7 +171,7 @@ export class QueryEditor extends React.Component<Props, State> {
                   displayAdvancedOptions && (
                     <Alignments
                       alignOptions={alignOptions}
-                      templateSrv={datasource.templateSrv}
+                      templateSrv={templateSrv}
                       perSeriesAligner={perSeriesAligner}
                       onChange={value => this.onPropertyChange('perSeriesAligner', value)}
                     />
@@ -179,7 +180,7 @@ export class QueryEditor extends React.Component<Props, State> {
               </Aggregations>
               <AliasBy value={aliasBy} onChange={value => this.onPropertyChange('aliasBy', value)} />
               <AlignmentPeriods
-                templateSrv={datasource.templateSrv}
+                templateSrv={templateSrv}
                 alignmentPeriod={alignmentPeriod}
                 onChange={value => this.onPropertyChange('alignmentPeriod', value)}
               />

public/app/plugins/datasource/stackdriver/partials/annotations.editor.html

@@ -2,4 +2,5 @@
   target="ctrl.annotation.target"
   on-query-change="(ctrl.onQueryChange)"
   datasource="ctrl.datasource"
+  template-srv="ctrl.templateSrv"
 ></annotation-query-editor>

public/app/plugins/datasource/stackdriver/partials/query.editor.html

@@ -3,6 +3,7 @@
     target="ctrl.target"
     events="ctrl.panelCtrl.events"
     datasource="ctrl.datasource"
+    template-srv="ctrl.templateSrv"
     on-query-change="(ctrl.onQueryChange)"
     on-execute-query="(ctrl.onExecuteQuery)"
   ></query-editor>

public/app/plugins/datasource/stackdriver/query_ctrl.ts

@@ -5,10 +5,12 @@ import { Target } from './types';
 
 export class StackdriverQueryCtrl extends QueryCtrl {
   static templateUrl = 'partials/query.editor.html';
+  templateSrv: any;
 
   /** @ngInject */
-  constructor($scope, $injector) {
+  constructor($scope, $injector, templateSrv) {
     super($scope, $injector);
+    this.templateSrv = templateSrv;
     this.onQueryChange = this.onQueryChange.bind(this);
     this.onExecuteQuery = this.onExecuteQuery.bind(this);
   }