diff --git a/packages/grafana-data/src/types/index.ts b/packages/grafana-data/src/types/index.ts
index 33d9ca94a34..66af316e931 100644
--- a/packages/grafana-data/src/types/index.ts
+++ b/packages/grafana-data/src/types/index.ts
@@ -19,6 +19,7 @@ export * from './datasource';
 export * from './panel';
 export * from './plugin';
 export * from './thresholds';
+export * from './templateVars';
 export * from './fieldColor';
 export * from './theme';
 export * from './orgs';
diff --git a/packages/grafana-data/src/types/templateVars.ts b/packages/grafana-data/src/types/templateVars.ts
new file mode 100644
index 00000000000..1f9e89b5d44
--- /dev/null
+++ b/packages/grafana-data/src/types/templateVars.ts
@@ -0,0 +1,7 @@
+export type VariableType = 'query' | 'adhoc' | 'constant' | 'datasource' | 'interval' | 'textbox' | 'custom';
+
+export interface VariableModel {
+  type: VariableType;
+  name: string;
+  label: string | null;
+}
diff --git a/packages/grafana-runtime/src/services/index.ts b/packages/grafana-runtime/src/services/index.ts
index d8daad5865d..521be5deab3 100644
--- a/packages/grafana-runtime/src/services/index.ts
+++ b/packages/grafana-runtime/src/services/index.ts
@@ -3,3 +3,4 @@ export * from './AngularLoader';
 export * from './dataSourceSrv';
 export * from './LocationSrv';
 export * from './EchoSrv';
+export * from './templateSrv';
diff --git a/packages/grafana-runtime/src/services/templateSrv.ts b/packages/grafana-runtime/src/services/templateSrv.ts
new file mode 100644
index 00000000000..40fb64932e9
--- /dev/null
+++ b/packages/grafana-runtime/src/services/templateSrv.ts
@@ -0,0 +1,13 @@
+import { VariableModel } from '@grafana/data';
+
+export interface TemplateSrv {
+  getVariables(): VariableModel[];
+}
+
+let singletonInstance: TemplateSrv;
+
+export const setTemplateSrv = (instance: TemplateSrv) => {
+  singletonInstance = instance;
+};
+
+export const getTemplateSrv = (): TemplateSrv => singletonInstance;
diff --git a/public/app/core/reducers/root.test.ts b/public/app/core/reducers/root.test.ts
index c777f4773fe..209b2558c7d 100644
--- a/public/app/core/reducers/root.test.ts
+++ b/public/app/core/reducers/root.test.ts
@@ -8,13 +8,13 @@ import { cleanUpAction } from '../actions/cleanUp';
 import { initialTeamsState, teamsLoaded } from '../../features/teams/state/reducers';
 
 jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
   config: {
     bootData: {
       navTree: [] as NavModelItem[],
       user: {},
     },
   },
-  DataSourceWithBackend: jest.fn(),
 }));
 
 describe('recursiveCleanState', () => {
diff --git a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts
index f54f112a788..5e79995f639 100644
--- a/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts
+++ b/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts
@@ -12,6 +12,7 @@ jest.mock('app/core/store', () => {
 });
 
 jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
   getDataSourceSrv: () => ({
     get: jest.fn(arg => getStub(arg)),
   }),
@@ -22,7 +23,6 @@ jest.mock('@grafana/runtime', () => ({
       newVariables: false,
     },
   },
-  DataSourceWithBackend: jest.fn(),
 }));
 
 describe('given dashboard with repeated panels', () => {
diff --git a/public/app/features/templating/TextBoxVariable.ts b/public/app/features/templating/TextBoxVariable.ts
index 62c2c1b2f51..680faa32db0 100644
--- a/public/app/features/templating/TextBoxVariable.ts
+++ b/public/app/features/templating/TextBoxVariable.ts
@@ -4,10 +4,10 @@ import {
   VariableActions,
   VariableHide,
   VariableOption,
-  VariableType,
   variableTypes,
 } from './types';
 import { VariableSrv } from './variable_srv';
+import { VariableType } from '@grafana/data';
 
 export class TextBoxVariable implements TextBoxVariableModel, VariableActions {
   type: VariableType;
diff --git a/public/app/features/templating/adhoc_variable.ts b/public/app/features/templating/adhoc_variable.ts
index 36fa527c1a3..9e220f4a1a3 100644
--- a/public/app/features/templating/adhoc_variable.ts
+++ b/public/app/features/templating/adhoc_variable.ts
@@ -5,10 +5,11 @@ import {
   assignModelProperties,
   VariableActions,
   VariableHide,
-  VariableType,
   variableTypes,
 } from './types';
 
+import { VariableType } from '@grafana/data';
+
 export class AdhocVariable implements AdHocVariableModel, VariableActions {
   type: VariableType;
   name: string;
diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts
index 15eb3c3538a..75fc90a0272 100644
--- a/public/app/features/templating/constant_variable.ts
+++ b/public/app/features/templating/constant_variable.ts
@@ -4,10 +4,10 @@ import {
   VariableActions,
   VariableHide,
   VariableOption,
-  VariableType,
   variableTypes,
 } from './types';
 import { VariableSrv } from './all';
+import { VariableType } from '@grafana/data';
 
 export class ConstantVariable implements ConstantVariableModel, VariableActions {
   type: VariableType;
diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts
index 032dfc6ef4a..35c8cac7007 100644
--- a/public/app/features/templating/custom_variable.ts
+++ b/public/app/features/templating/custom_variable.ts
@@ -5,10 +5,10 @@ import {
   VariableActions,
   VariableHide,
   VariableOption,
-  VariableType,
   variableTypes,
 } from './types';
 import { VariableSrv } from './variable_srv';
+import { VariableType } from '@grafana/data';
 
 export class CustomVariable implements CustomVariableModel, VariableActions {
   type: VariableType;
diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts
index 924be3da150..3ea1c6948d4 100644
--- a/public/app/features/templating/datasource_variable.ts
+++ b/public/app/features/templating/datasource_variable.ts
@@ -5,10 +5,9 @@ import {
   VariableHide,
   VariableOption,
   VariableRefresh,
-  VariableType,
   variableTypes,
 } from './types';
-import { stringToJsRegex } from '@grafana/data';
+import { VariableType, stringToJsRegex } from '@grafana/data';
 import { VariableSrv } from './variable_srv';
 import { TemplateSrv } from './template_srv';
 import { DatasourceSrv } from '../plugins/datasource_srv';
diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts
index 1152e1f24ed..9041246b162 100644
--- a/public/app/features/templating/interval_variable.ts
+++ b/public/app/features/templating/interval_variable.ts
@@ -7,12 +7,12 @@ import {
   VariableHide,
   VariableOption,
   VariableRefresh,
-  VariableType,
   variableTypes,
 } from './types';
 import { TimeSrv } from '../dashboard/services/TimeSrv';
 import { TemplateSrv } from './template_srv';
 import { VariableSrv } from './variable_srv';
+import { VariableType } from '@grafana/data';
 
 export class IntervalVariable implements IntervalVariableModel, VariableActions {
   type: VariableType;
diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts
index ccab522ffc2..0b1b85314a6 100644
--- a/public/app/features/templating/query_variable.ts
+++ b/public/app/features/templating/query_variable.ts
@@ -8,10 +8,9 @@ import {
   VariableRefresh,
   VariableSort,
   VariableTag,
-  VariableType,
   variableTypes,
 } from './types';
-import { DataSourceApi, stringToJsRegex } from '@grafana/data';
+import { VariableType, DataSourceApi, stringToJsRegex } from '@grafana/data';
 import DatasourceSrv from '../plugins/datasource_srv';
 import { TemplateSrv } from './template_srv';
 import { VariableSrv } from './variable_srv';
diff --git a/public/app/features/templating/template_srv.ts b/public/app/features/templating/template_srv.ts
index 7d6d7402604..478a0679d2b 100644
--- a/public/app/features/templating/template_srv.ts
+++ b/public/app/features/templating/template_srv.ts
@@ -7,6 +7,7 @@ import { getConfig } from 'app/core/config';
 import { variableRegex } from './utils';
 import { isAdHoc } from '../variables/guard';
 import { VariableModel } from './types';
+import { setTemplateSrv, TemplateSrv as BaseTemplateSrv } from '@grafana/runtime';
 
 function luceneEscape(value: string) {
   return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, '\\$1');
@@ -28,7 +29,7 @@ const runtimeDependencies: TemplateSrvDependencies = {
   getVariableWithName,
 };
 
-export class TemplateSrv {
+export class TemplateSrv implements BaseTemplateSrv {
   private _variables: any[];
   private regex = variableRegex;
   private index: any = {};
@@ -448,4 +449,7 @@ export class TemplateSrv {
   };
 }
 
-export default new TemplateSrv();
+// Expose the template srv
+const srv = new TemplateSrv();
+setTemplateSrv(srv);
+export default srv;
diff --git a/public/app/features/templating/types.ts b/public/app/features/templating/types.ts
index d31f7037508..0f5519e6e80 100644
--- a/public/app/features/templating/types.ts
+++ b/public/app/features/templating/types.ts
@@ -1,5 +1,6 @@
 import { assignModelProperties } from 'app/core/utils/model_utils';
 import { Deferred } from '../../core/utils/deferred';
+import { VariableModel as BaseVariableModel } from '@grafana/data';
 
 export enum VariableRefresh {
   never,
@@ -38,8 +39,6 @@ export interface VariableOption {
   tags?: VariableTag[];
 }
 
-export type VariableType = 'query' | 'adhoc' | 'constant' | 'datasource' | 'interval' | 'textbox' | 'custom';
-
 export interface AdHocVariableFilter {
   key: string;
   operator: string;
@@ -93,12 +92,9 @@ export interface VariableWithOptions extends VariableModel {
   query: string;
 }
 
-export interface VariableModel {
+export interface VariableModel extends BaseVariableModel {
   id?: string; // only exists for variables in redux state
   global?: boolean; // only exists for variables in redux state
-  type: VariableType;
-  name: string;
-  label: string | null;
   hide: VariableHide;
   skipUrlSync: boolean;
   index?: number;
diff --git a/public/app/features/variables/adapters.ts b/public/app/features/variables/adapters.ts
index 4c5244d5b10..703eed3c394 100644
--- a/public/app/features/variables/adapters.ts
+++ b/public/app/features/variables/adapters.ts
@@ -12,12 +12,11 @@ import {
   TextBoxVariableModel,
   VariableModel,
   VariableOption,
-  VariableType,
 } from '../templating/types';
 import { VariableEditorProps } from './editor/types';
 import { VariablesState } from './state/variablesReducer';
 import { VariablePickerProps } from './pickers/types';
-import { Registry } from '@grafana/data';
+import { Registry, VariableType } from '@grafana/data';
 import { createQueryVariableAdapter } from './query/adapter';
 import { createCustomVariableAdapter } from './custom/adapter';
 import { createTextBoxVariableAdapter } from './textbox/adapter';
diff --git a/public/app/features/variables/editor/VariableEditorEditor.tsx b/public/app/features/variables/editor/VariableEditorEditor.tsx
index bcd8a9d0df8..1ad63b61aa2 100644
--- a/public/app/features/variables/editor/VariableEditorEditor.tsx
+++ b/public/app/features/variables/editor/VariableEditorEditor.tsx
@@ -1,11 +1,11 @@
 import React, { ChangeEvent, FormEvent, PureComponent } from 'react';
 import isEqual from 'lodash/isEqual';
-import { AppEvents } from '@grafana/data';
+import { AppEvents, VariableType } from '@grafana/data';
 import { FormLabel } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { variableAdapters } from '../adapters';
 import { NEW_VARIABLE_ID, toVariablePayload, VariableIdentifier } from '../state/types';
-import { VariableHide, VariableModel, VariableType } from '../../templating/types';
+import { VariableHide, VariableModel } from '../../templating/types';
 import { appEvents } from '../../../core/core';
 import { VariableValuesPreview } from './VariableValuesPreview';
 import { changeVariableName, onEditorAdd, onEditorUpdate, variableEditorMount, variableEditorUnMount } from './actions';
diff --git a/public/app/features/variables/editor/actions.ts b/public/app/features/variables/editor/actions.ts
index 11f072274ed..879903f4de6 100644
--- a/public/app/features/variables/editor/actions.ts
+++ b/public/app/features/variables/editor/actions.ts
@@ -17,7 +17,7 @@ import {
   VariableIdentifier,
 } from '../state/types';
 import cloneDeep from 'lodash/cloneDeep';
-import { VariableType } from '../../templating/types';
+import { VariableType } from '@grafana/data';
 import { addVariable, removeVariable, storeNewVariable } from '../state/sharedReducer';
 
 export const variableEditorMount = (identifier: VariableIdentifier): ThunkResult<void> => {
diff --git a/public/app/features/variables/state/reducers.test.ts b/public/app/features/variables/state/reducers.test.ts
index cdec57ec326..b76320f44ef 100644
--- a/public/app/features/variables/state/reducers.test.ts
+++ b/public/app/features/variables/state/reducers.test.ts
@@ -1,10 +1,11 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { cleanUpDashboard } from 'app/features/dashboard/state/reducers';
-import { QueryVariableModel, VariableHide, VariableType } from '../../templating/types';
+import { QueryVariableModel, VariableHide } from '../../templating/types';
 import { VariableAdapter, variableAdapters } from '../adapters';
 import { createAction } from '@reduxjs/toolkit';
 import { variablesReducer, VariablesState } from './variablesReducer';
 import { toVariablePayload, VariablePayload } from './types';
+import { VariableType } from '@grafana/data';
 
 const variableAdapter: VariableAdapter<QueryVariableModel> = {
   id: ('mock' as unknown) as VariableType,
diff --git a/public/app/features/variables/state/sharedReducer.ts b/public/app/features/variables/state/sharedReducer.ts
index 5baee615e17..e99d473a969 100644
--- a/public/app/features/variables/state/sharedReducer.ts
+++ b/public/app/features/variables/state/sharedReducer.ts
@@ -1,7 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cloneDeep from 'lodash/cloneDeep';
 
-import { VariableModel, VariableOption, VariableType, VariableWithOptions } from '../../templating/types';
+import { VariableType } from '@grafana/data';
+import { VariableModel, VariableOption, VariableWithOptions } from '../../templating/types';
 import { AddVariable, ALL_VARIABLE_VALUE, getInstanceState, NEW_VARIABLE_ID, VariablePayload } from './types';
 import { variableAdapters } from '../adapters';
 import { changeVariableNameSucceeded } from '../editor/reducer';
diff --git a/public/app/features/variables/state/types.ts b/public/app/features/variables/state/types.ts
index 76a4e53cdd0..6171a722747 100644
--- a/public/app/features/variables/state/types.ts
+++ b/public/app/features/variables/state/types.ts
@@ -1,5 +1,6 @@
-import { VariableModel, VariableType } from '../../templating/types';
+import { VariableModel } from '../../templating/types';
 import { VariablesState } from './variablesReducer';
+import { VariableType } from '@grafana/data';
 
 export const NEW_VARIABLE_ID = '00000000-0000-0000-0000-000000000000';
 export const ALL_VARIABLE_TEXT = 'All';