TemplateSrv: expose limited templateSrv in grafana/runtime (#23339)

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';

packages/grafana-data/src/types/templateVars.ts

+export type VariableType = 'query' | 'adhoc' | 'constant' | 'datasource' | 'interval' | 'textbox' | 'custom';
+
+export interface VariableModel {
+  type: VariableType;
+  name: string;
+  label: string | null;
+}

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';

packages/grafana-runtime/src/services/templateSrv.ts

+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;

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', () => {

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', () => {

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;

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;

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;

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;

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';

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;

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';

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;

public/app/features/templating/types.ts

 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;

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';

public/app/features/variables/editor/VariableEditorEditor.tsx

 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';

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> => {

public/app/features/variables/state/reducers.test.ts

 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,

public/app/features/variables/state/sharedReducer.ts

 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';

public/app/features/variables/state/types.ts

-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';