replace getTemplateSrv with PanelProps#replaceVariables() so that interpolations will be replaced by repeated variables, instead of the original variable. (#6)

Co-authored-by: Shenglong.Liu <shenglong.liu@keytech-engeering.com>

Author: Ldsystem

src/buttonPanel.test.tsx

@@ -8,7 +8,6 @@ import {
 import {
   getBackendSrv,
   getDataSourceSrv,
-  getTemplateSrv,
   SystemJS,
 } from '@grafana/runtime';
 import { Button, HorizontalGroup, VerticalGroup } from '@grafana/ui';
@@ -40,7 +39,7 @@ describe('button panel', () => {
       onFieldConfigChange: () => {},
       onOptionsChange: () => {},
       renderCounter: 1,
-      replaceVariables: () => '',
+      replaceVariables: () => '{}',
       timeRange: DefaultTimeRange,
       timeZone: DefaultTimeZone,
       options: {
@@ -68,11 +67,6 @@ describe('button panel', () => {
       { text: 'b', variant: 'primary', datasource: 'b' },
     ];
     wrapper.setProps({ options: { buttons: buttons } });
-
-    const mockTemplate = jest.fn().mockReturnValue('{}');
-    (getTemplateSrv as jest.Mock<any>).mockImplementation(() => ({
-      replace: mockTemplate,
-    }));
     const mockGet = jest.fn().mockReturnValue({ id: 1 });
     (getDataSourceSrv as jest.Mock<any>).mockImplementation(() => ({
       get: mockGet,
@@ -97,7 +91,6 @@ describe('button panel', () => {
       expect(b.text()).toBe(buttons[i].text);
       b.simulate('click');
       setImmediate(() => {
-        expect(mockTemplate).toHaveBeenCalled();
         expect(mockGet).toHaveBeenCalledWith(buttons[i].datasource);
         expect(mockDataSourceRequest).toHaveBeenCalled();
         expect(mockEmit).toHaveBeenCalledWith(AppEvents.alertSuccess, [
@@ -118,10 +111,6 @@ describe('button panel', () => {
     (getDataSourceSrv as jest.Mock<any>).mockImplementation(() => ({
       get: mockGet,
     }));
-    const mockTemplate = jest.fn().mockReturnValue('{}');
-    (getTemplateSrv as jest.Mock<any>).mockImplementation(() => ({
-      replace: mockTemplate,
-    }));
     const msg = 'msg';
     const mockDataSourceRequest = jest.fn().mockRejectedValue({
       status: statusError,

src/buttonPanel.tsx

@@ -2,7 +2,6 @@ import { AppEvents, PanelProps } from '@grafana/data';
 import {
   getBackendSrv,
   getDataSourceSrv,
-  getTemplateSrv,
   SystemJS,
 } from '@grafana/runtime';
 import { Button, HorizontalGroup, VerticalGroup } from '@grafana/ui';
@@ -11,7 +10,7 @@ import { ButtonOptions, Options } from 'types';
 
 interface Props extends PanelProps<Options> {}
 
-export const ButtonPanel: React.FC<Props> = ({ options }) => {
+export const ButtonPanel: React.FC<Props> = ({ options, replaceVariables }) => {
   const renderButtons = (buttons: ButtonOptions[]) => {
     return buttons.map((b: ButtonOptions, index: number) => {
       const text = b.text || 'Button';
@@ -21,7 +20,7 @@ export const ButtonPanel: React.FC<Props> = ({ options }) => {
           variant={b.variant}
           onClick={async () => {
             const payload = JSON.parse(
-              await getTemplateSrv().replace(b.query || '{}')
+              replaceVariables(b.query || '{}')
             );
             const ds = await getDataSourceSrv().get(b.datasource);
             try {