Chore: Remove angular dependency from data sources (#27735)

* Chore: Remove angular dependency from data sources

* Removes default export for time and template srvs
Also uses @grafana/runtime versions of the interfaces where possible

* Replace usage of internal templateSrv where possible

* Use runtime templateSrv in a couple more places

public/app/core/filters/filters.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import angular from 'angular';
 import coreModule from '../core_module';
-import { TemplateSrv } from 'app/features/templating/template_srv';
+import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 import { dateTime } from '@grafana/data';
 
 coreModule.filter('stringSort', () => {
@@ -39,8 +39,7 @@ coreModule.filter('moment', () => {
   };
 });
 
-/** @ngInject */
-function interpolateTemplateVars(templateSrv: TemplateSrv) {
+function interpolateTemplateVars(templateSrv: TemplateSrv = getTemplateSrv()) {
   const filterFunc: any = (text: string, scope: any) => {
     let scopedVars;
     if (scope.ctrl) {

public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { Icon } from '@grafana/ui';
 import { PanelModel } from '../../state/PanelModel';
 import { DashboardModel } from '../../state/DashboardModel';
-import templateSrv from 'app/features/templating/template_srv';
 import appEvents from 'app/core/app_events';
 import { CoreEvents } from 'app/types';
 import { RowOptionsButton } from '../RowOptions/RowOptionsButton';
+import { getTemplateSrv } from '@grafana/runtime';
 
 export interface DashboardRowProps {
   panel: PanelModel;
@@ -69,7 +69,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
       'dashboard-row--collapsed': this.state.collapsed,
     });
 
-    const title = templateSrv.replace(this.props.panel.title, this.props.panel.scopedVars, 'text');
+    const title = getTemplateSrv().replace(this.props.panel.title, this.props.panel.scopedVars, 'text');
     const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
     const panels = count === 1 ? 'panel' : 'panels';
     const canEdit = this.props.dashboard.meta.canEdit === true;

public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx

@@ -14,9 +14,11 @@ jest.mock('app/features/dashboard/services/TimeSrv', () => ({
 let fillVariableValuesForUrlMock = (params: any) => {};
 
 jest.mock('app/features/templating/template_srv', () => ({
-  fillVariableValuesForUrl: (params: any) => {
-    fillVariableValuesForUrlMock(params);
-  },
+  getTemplateSrv: () => ({
+    fillVariableValuesForUrl: (params: any) => {
+      fillVariableValuesForUrlMock(params);
+    },
+  }),
 }));
 
 function mockLocationHref(href: string) {

public/app/features/dashboard/components/ShareModal/utils.ts

@@ -1,6 +1,6 @@
 import { config } from '@grafana/runtime';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import templateSrv from 'app/features/templating/template_srv';
+import { getTemplateSrv } from 'app/features/templating/template_srv';
 import { PanelModel, dateTime, urlUtil } from '@grafana/data';
 
 export function buildParams(
@@ -22,7 +22,7 @@ export function buildParams(
   }
 
   if (includeTemplateVars) {
-    templateSrv.fillVariableValuesForUrl(params);
+    getTemplateSrv().fillVariableValuesForUrl(params);
   }
 
   if (selectedTheme !== 'current') {

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -2,13 +2,12 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice, ScopedVars } from '@grafana/data';
-import { AngularComponent } from '@grafana/runtime';
+import { AngularComponent, getTemplateSrv } from '@grafana/runtime';
 import { ClickOutsideWrapper, Icon, IconName, Tooltip } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
-import templateSrv from 'app/features/templating/template_srv';
 
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -137,7 +136,7 @@ export class PanelHeader extends Component<Props, State> {
   render() {
     const { panel, scopedVars, error, isViewing, isEditing, data, alertState } = this.props;
     const { menuItems } = this.state;
-    const title = templateSrv.replace(panel.title, scopedVars, 'text');
+    const title = getTemplateSrv().replace(panel.title, scopedVars, 'text');
 
     const panelHeaderClass = classNames({
       'panel-header': true,

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -2,10 +2,9 @@ import React, { Component } from 'react';
 
 import { renderMarkdown, LinkModelSupplier, ScopedVars } from '@grafana/data';
 import { Tooltip, PopoverContent } from '@grafana/ui';
-import { getLocationSrv } from '@grafana/runtime';
+import { getLocationSrv, getTemplateSrv } from '@grafana/runtime';
 
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
-import templateSrv from 'app/features/templating/template_srv';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { InspectTab } from '../../components/Inspector/types';
 
@@ -45,7 +44,7 @@ export class PanelHeaderCorner extends Component<Props> {
   getInfoContent = (): JSX.Element => {
     const { panel } = this.props;
     const markdown = panel.description || '';
-    const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
+    const interpolatedMarkdown = getTemplateSrv().replace(markdown, panel.scopedVars);
     const markedInterpolatedMarkdown = renderMarkdown(interpolatedMarkdown);
     const links = this.props.links && this.props.links.getLinks(panel);
 

public/app/features/dashboard/state/PanelModel.ts

@@ -1,9 +1,9 @@
 // Libraries
 import _ from 'lodash';
 // Utils
+import { getTemplateSrv } from '@grafana/runtime';
 import { Emitter } from 'app/core/utils/emitter';
 import { getNextRefIdChar } from 'app/core/utils/query';
-import templateSrv from 'app/features/templating/template_srv';
 // Types
 import {
   AppEvent,
@@ -478,7 +478,7 @@ export class PanelModel implements DataConfigSource {
     if (extraVars) {
       vars = vars ? { ...vars, ...extraVars } : extraVars;
     }
-    return templateSrv.replace(value, vars, format);
+    return getTemplateSrv().replace(value, vars, format);
   }
 
   resendLastResult() {

public/app/features/dashboard/state/PanelQueryRunner.ts

@@ -4,8 +4,8 @@ import { ReplaySubject, Unsubscribable, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 // Services & Utils
+import { getTemplateSrv } from '@grafana/runtime';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
-import templateSrv from 'app/features/templating/template_srv';
 import { runRequest, preProcessPanelData } from './runRequest';
 import { runSharedRequest, isSharedDashboardQuery } from '../../../plugins/datasource/dashboard';
 
@@ -164,7 +164,7 @@ export class PanelQueryRunner {
         return query;
       });
 
-      const lowerIntervalLimit = minInterval ? templateSrv.replace(minInterval, request.scopedVars) : ds.interval;
+      const lowerIntervalLimit = minInterval ? getTemplateSrv().replace(minInterval, request.scopedVars) : ds.interval;
       const norm = rangeUtil.calculateInterval(timeRange, maxDataPoints, lowerIntervalLimit);
 
       // make shallow copy of scoped vars,

public/app/features/dashboard/utils/panel.ts

@@ -14,7 +14,7 @@ import appEvents from 'app/core/app_events';
 import config from 'app/core/config';
 
 // Services
-import templateSrv from 'app/features/templating/template_srv';
+import { getTemplateSrv } from '@grafana/runtime';
 
 // Constants
 import { LS_PANEL_COPY_KEY, PANEL_BORDER } from 'app/core/constants';
@@ -84,7 +84,7 @@ export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange)
   };
 
   if (panel.timeFrom) {
-    const timeFromInterpolated = templateSrv.replace(panel.timeFrom, panel.scopedVars);
+    const timeFromInterpolated = getTemplateSrv().replace(panel.timeFrom, panel.scopedVars);
     const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated);
     if (timeFromInfo.invalid) {
       newTimeData.timeInfo = 'invalid time override';
@@ -106,7 +106,7 @@ export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange)
   }
 
   if (panel.timeShift) {
-    const timeShiftInterpolated = templateSrv.replace(panel.timeShift, panel.scopedVars);
+    const timeShiftInterpolated = getTemplateSrv().replace(panel.timeShift, panel.scopedVars);
     const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated);
     if (timeShiftInfo.invalid) {
       newTimeData.timeInfo = 'invalid timeshift';

public/app/features/panel/panellinks/link_srv.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
-import templateSrv, { TemplateSrv } from 'app/features/templating/template_srv';
+import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 import coreModule from 'app/core/core_module';
 import { getConfig } from 'app/core/config';
 import {
@@ -80,11 +80,13 @@ const buildLabelPath = (label: string) => {
 };
 
 export const getPanelLinksVariableSuggestions = (): VariableSuggestion[] => [
-  ...templateSrv.getVariables().map(variable => ({
-    value: variable.name as string,
-    label: variable.name,
-    origin: VariableOrigin.Template,
-  })),
+  ...getTemplateSrv()
+    .getVariables()
+    .map(variable => ({
+      value: variable.name as string,
+      label: variable.name,
+      origin: VariableOrigin.Template,
+    })),
   {
     value: `${DataLinkBuiltInVars.includeVars}`,
     label: 'All variables',
@@ -240,11 +242,13 @@ export const getPanelOptionsVariableSuggestions = (plugin: PanelPlugin, data?: D
   const dataVariables = plugin.meta.skipDataQuery ? [] : getDataFrameVars(data || []);
   return [
     ...dataVariables, // field values
-    ...templateSrv.getVariables().map(variable => ({
-      value: variable.name as string,
-      label: variable.name,
-      origin: VariableOrigin.Template,
-    })),
+    ...getTemplateSrv()
+      .getVariables()
+      .map(variable => ({
+        value: variable.name as string,
+        label: variable.name,
+        origin: VariableOrigin.Template,
+      })),
   ];
 };
 

public/app/features/plugins/datasource_srv.ts

@@ -4,11 +4,14 @@ import coreModule from 'app/core/core_module';
 // Services & Utils
 import config from 'app/core/config';
 import { importDataSourcePlugin } from './plugin_loader';
-import { DataSourceSrv as DataSourceService, getDataSourceSrv as getDataSourceService } from '@grafana/runtime';
+import {
+  DataSourceSrv as DataSourceService,
+  getDataSourceSrv as getDataSourceService,
+  TemplateSrv,
+} from '@grafana/runtime';
 // Types
 import { AppEvents, DataSourceApi, DataSourceInstanceSettings, DataSourceSelectItem, ScopedVars } from '@grafana/data';
 import { auto } from 'angular';
-import { TemplateSrv } from '../templating/template_srv';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
 // Pretend Datasource
 import { expressionDatasource } from 'app/features/expressions/ExpressionDatasource';

public/app/features/plugins/variableQueryEditorLoader.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import DefaultVariableQueryEditor from '../variables/editor/DefaultVariableQueryEditor';
 import { DataSourcePluginMeta } from '@grafana/data';
-import { TemplateSrv } from '../templating/template_srv';
+import { TemplateSrv } from '@grafana/runtime';
 
 async function loadComponent(meta: DataSourcePluginMeta) {
   const dsPlugin = await importDataSourcePlugin(meta);

public/app/features/templating/all.ts

@@ -1,4 +1,4 @@
 import coreModule from 'app/core/core_module';
-import templateSrv from './template_srv';
+import { getTemplateSrv } from './template_srv';
 
-coreModule.factory('templateSrv', () => templateSrv);
+coreModule.factory('templateSrv', () => getTemplateSrv());

public/app/features/templating/template_srv.ts

@@ -336,4 +336,4 @@ export class TemplateSrv implements BaseTemplateSrv {
 // Expose the template srv
 const srv = new TemplateSrv();
 setTemplateSrv(srv);
-export default srv;
+export const getTemplateSrv = () => srv;

public/app/features/variables/datasource/actions.ts

@@ -6,7 +6,7 @@ import { DataSourceSelectItem, stringToJsRegex } from '@grafana/data';
 import { getDatasourceSrv } from '../../plugins/datasource_srv';
 import { getVariable } from '../state/selectors';
 import { DataSourceVariableModel } from '../types';
-import templateSrv from '../../templating/template_srv';
+import { getTemplateSrv } from '@grafana/runtime';
 import _ from 'lodash';
 import { changeVariableEditorExtended } from '../editor/reducer';
 
@@ -23,7 +23,7 @@ export const updateDataSourceVariableOptions = (
   let regex;
 
   if (variableInState.regex) {
-    regex = templateSrv.replace(variableInState.regex, undefined, 'regex');
+    regex = getTemplateSrv().replace(variableInState.regex, undefined, 'regex');
     regex = stringToJsRegex(regex);
   }
 

public/app/features/variables/interval/actions.ts

@@ -7,7 +7,7 @@ import { validateVariableSelectionState } from '../state/actions';
 import { getVariable } from '../state/selectors';
 import { IntervalVariableModel } from '../types';
 import { getTimeSrv } from '../../dashboard/services/TimeSrv';
-import templateSrv from '../../templating/template_srv';
+import { getTemplateSrv, TemplateSrv } from '../../templating/template_srv';
 import appEvents from '../../../core/app_events';
 
 export interface UpdateIntervalVariableOptionsDependencies {
@@ -30,15 +30,15 @@ export const updateIntervalVariableOptions = (
 export interface UpdateAutoValueDependencies {
   calculateInterval: typeof rangeUtil.calculateInterval;
   getTimeSrv: typeof getTimeSrv;
-  templateSrv: typeof templateSrv;
+  templateSrv: TemplateSrv;
 }
 
 export const updateAutoValue = (
   identifier: VariableIdentifier,
   dependencies: UpdateAutoValueDependencies = {
     calculateInterval: rangeUtil.calculateInterval,
     getTimeSrv: getTimeSrv,
-    templateSrv: templateSrv,
+    templateSrv: getTemplateSrv(),
   }
 ): ThunkResult<void> => (dispatch, getState) => {
   const variableInState = getVariable<IntervalVariableModel>(identifier.id, getState());

public/app/features/variables/query/QueryVariableEditor.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent, PureComponent } from 'react';
 import { InlineFormLabel, LegacyForms } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
-import templateSrv from '../../templating/template_srv';
+import { getTemplateSrv } from '@grafana/runtime';
 import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
 import { QueryVariableModel, VariableRefresh, VariableSort, VariableWithMultiSupport } from '../types';
 import { QueryVariableEditorState } from './reducer';
@@ -185,7 +185,7 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
             <VariableQueryEditor
               datasource={this.props.editor.extended?.dataSource}
               query={this.props.variable.query}
-              templateSrv={templateSrv}
+              templateSrv={getTemplateSrv()}
               onChange={this.onQueryChange}
             />
           )}

public/app/features/variables/query/actions.ts

@@ -1,9 +1,9 @@
 import { AppEvents, DataSourcePluginMeta, DataSourceSelectItem } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
 import { validateVariableSelectionState } from '../state/actions';
 import { QueryVariableModel, VariableRefresh } from '../types';
 import { ThunkResult } from '../../../types';
 import { getDatasourceSrv } from '../../plugins/datasource_srv';
-import templateSrv from '../../templating/template_srv';
 import { getTimeSrv } from '../../dashboard/services/TimeSrv';
 import appEvents from '../../../core/app_events';
 import { importDataSourcePlugin } from '../../plugins/plugin_loader';
@@ -138,5 +138,5 @@ const getTemplatedRegex = (variable: QueryVariableModel): string => {
     return '';
   }
 
-  return templateSrv.replace(variable.regex, {}, 'regex');
+  return getTemplateSrv().replace(variable.regex, {}, 'regex');
 };

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

@@ -30,7 +30,7 @@ import {
 import { toVariableIdentifier, toVariablePayload, VariableIdentifier } from './types';
 import { appEvents } from 'app/core/core';
 import { contextSrv } from 'app/core/services/context_srv';
-import templateSrv from '../../templating/template_srv';
+import { getTemplateSrv, TemplateSrv } from '../../templating/template_srv';
 import { alignCurrentWithMulti } from '../shared/multiOptions';
 import { isMulti } from '../guard';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
@@ -89,7 +89,7 @@ export const initDashboardTemplating = (list: VariableModel[]): ThunkResult<void
       dispatch(addVariable(toVariablePayload(model, { global: false, index: orderIndex++, model })));
     }
 
-    templateSrv.updateTimeRange(getTimeSrv().timeRange());
+    getTemplateSrv().updateTimeRange(getTimeSrv().timeRange());
 
     for (let index = 0; index < getVariables(getState()).length; index++) {
       dispatch(addInitLock(toVariablePayload(getVariables(getState())[index])));
@@ -458,13 +458,13 @@ export const variableUpdated = (
 };
 
 export interface OnTimeRangeUpdatedDependencies {
-  templateSrv: typeof templateSrv;
+  templateSrv: TemplateSrv;
   appEvents: typeof appEvents;
 }
 
 export const onTimeRangeUpdated = (
   timeRange: TimeRange,
-  dependencies: OnTimeRangeUpdatedDependencies = { templateSrv: templateSrv, appEvents: appEvents }
+  dependencies: OnTimeRangeUpdatedDependencies = { templateSrv: getTemplateSrv(), appEvents: appEvents }
 ): ThunkResult<Promise<void>> => async (dispatch, getState) => {
   dependencies.templateSrv.updateTimeRange(timeRange);
   const variablesThatNeedRefresh = getVariables(getState()).filter(variable => {

public/app/plugins/datasource/cloud-monitoring/annotations_query_ctrl.ts

@@ -1,12 +1,9 @@
-import { TemplateSrv } from 'app/features/templating/template_srv';
 import { AnnotationTarget } from './types';
 
 export class CloudMonitoringAnnotationsQueryCtrl {
   static templateUrl = 'partials/annotations.editor.html';
   annotation: any;
-  templateSrv: TemplateSrv;
 
-  /** @ngInject */
   constructor() {
     this.annotation.target = this.annotation.target || {};
     this.onQueryChange = this.onQueryChange.bind(this);