Merge pull request #15814 from ryantxu/replace-scoped-vars

add ScopedVars to props.replaceVariables()

packages/grafana-ui/src/types/panel.ts

 import { ComponentClass } from 'react';
 import { TimeSeries, LoadingState, TableData } from './data';
 import { TimeRange } from './time';
+import { ScopedVars } from './datasource';
 
-export type InterpolateFunction = (value: string, format?: string | Function) => string;
+export type InterpolateFunction = (value: string, scopedVars?: ScopedVars, format?: string | Function) => string;
 
 export interface PanelProps<T = any> {
   panelData: PanelData;

public/app/features/dashboard/dashgrid/PanelChrome.test.tsx

+import { PanelChrome } from './PanelChrome';
+
+jest.mock('sass/_variables.generated.scss', () => ({
+  panelhorizontalpadding: 10,
+  panelVerticalPadding: 10,
+}));
+
+describe('PanelChrome', () => {
+  let chrome: PanelChrome;
+
+  beforeEach(() => {
+    chrome = new PanelChrome({
+      panel: {
+        scopedVars: {
+          aaa: { value: 'AAA', text: 'upperA' },
+          bbb: { value: 'BBB', text: 'upperB' },
+        },
+      },
+      dashboard: {},
+      plugin: {},
+      isFullscreen: false,
+    });
+  });
+
+  it('Should replace a panel variable', () => {
+    const out = chrome.replaceVariables('hello $aaa');
+    expect(out).toBe('hello AAA');
+  });
+
+  it('But it should prefer the local variable value', () => {
+    const extra = { aaa: { text: '???', value: 'XXX' } };
+    const out = chrome.replaceVariables('hello $aaa and $bbb', extra);
+    expect(out).toBe('hello XXX and BBB');
+  });
+});

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

@@ -19,6 +19,7 @@ import { profiler } from 'app/core/profiler';
 import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { DataQueryResponse, TimeRange, LoadingState, PanelData, DataQueryError } from '@grafana/ui';
+import { ScopedVars } from '@grafana/ui';
 
 import variables from 'sass/_variables.generated.scss';
 import templateSrv from 'app/features/templating/template_srv';
@@ -85,8 +86,12 @@ export class PanelChrome extends PureComponent<Props, State> {
     });
   };
 
-  replaceVariables = (value: string, format?: string) => {
-    return templateSrv.replace(value, this.props.panel.scopedVars, format);
+  replaceVariables = (value: string, extraVars?: ScopedVars, format?: string) => {
+    let vars = this.props.panel.scopedVars;
+    if (extraVars) {
+      vars = vars ? { ...vars, ...extraVars } : extraVars;
+    }
+    return templateSrv.replace(value, vars, format);
   };
 
   onDataResponse = (dataQueryResponse: DataQueryResponse) => {

public/app/features/templating/template_srv.ts

 import kbn from 'app/core/utils/kbn';
 import _ from 'lodash';
 import { variableRegex } from 'app/features/templating/variable';
-import { TimeRange } from '@grafana/ui/src';
+import { TimeRange, ScopedVars } from '@grafana/ui/src';
 
 function luceneEscape(value) {
   return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, '\\$1');
@@ -220,7 +220,7 @@ export class TemplateSrv {
     return values;
   }
 
-  replace(target, scopedVars?, format?) {
+  replace(target: string, scopedVars?: ScopedVars, format?: string | Function) {
     if (!target) {
       return target;
     }