Bugfix: Fix $interval variable interpolation (#291)

Author: idastambuk

.gitignore

@@ -9,3 +9,4 @@ cypress/videos/
 dist/
 provisioning
 pkg/__debug_bin
+yarn-error.log

src/DataSource.test.ts

@@ -5,22 +5,26 @@ import { mockDatasource, mockQuery } from './__mocks__/datasource';
 
 describe('DataSource', () => {
   describe('applyTemplateVariables', () => {
-    const scopedVars: Record<string, any> = {
-      $simple: 'foo',
-      $multiple: ['foo', 'bar'],
+    const scopedVars: ScopedVars = {
+      $simple: { value: 'foo' },
+      $multiple: { value: ['foo', 'bar'] },
+      __interval_ms: { value: 5000000 },
+      __interval: { value: 50000 },
     };
     // simplified version of getTemplateSrv().replace
-    const replace = jest.fn((target?: string, scopedVars?: ScopedVars, format?: string | Function) => {
-      let res = target ?? '';
-      if (scopedVars && typeof format === 'function') {
-        Object.keys(scopedVars).forEach((v) => (res = res.replace(v, format(scopedVars[v]))));
+    const replaceMock = jest.fn().mockImplementation(
+      (target?: string, scopedVars?: ScopedVars, format?: string | Function) => {
+        let res = target ?? '';
+        if (scopedVars && typeof format === 'function') {
+          Object.keys(scopedVars).forEach((v) => (res = res.replace(v, format(scopedVars[v]?.value))));
+        }
+        return res;
       }
-      return res;
-    });
+    );
     beforeEach(() => {
       jest.spyOn(runtime, 'getTemplateSrv').mockImplementation(() => ({
         getVariables: jest.fn(),
-        replace: replace,
+        replace: replaceMock,
         containsTemplate: jest.fn(),
         updateTimeRange: jest.fn(),
       }));
@@ -41,5 +45,18 @@ describe('DataSource', () => {
       );
       expect(res.rawQuery).toEqual(`select * from foo where var in ('foo','bar')`);
     });
+
+    it('should replace __interval interpolated variables with their original string', () => {
+      mockDatasource.applyTemplateVariables(
+        { ...mockQuery, rawQuery: 'select $__interval_ms, $__interval' },
+        {
+          __interval_ms: { value: 5000000 },
+          __interval: { value: 50000 },
+        }
+      );
+      // check rawQuery.replace is called with correct interval value
+      expect(replaceMock.mock.calls[3][1].__interval).toEqual({ value: '$__interval' });
+      expect(replaceMock.mock.calls[3][1].__interval_ms).toEqual({ value: '$__interval_ms' });
+    });
   });
 });

src/DataSource.ts

@@ -75,19 +75,23 @@ export class DataSource extends DataSourceWithBackend<TimestreamQuery, Timestrea
       return query;
     }
 
-    // create a copy of scopedVars without $__interval_ms for using with rawQuery
-    // ${__interval*} should be escaped by the server, not the frontend
-    const queryScopedVars = { ...scopedVars };
-    delete queryScopedVars.__interval_ms;
-    delete queryScopedVars.__interval;
+    const variables = { ...scopedVars };
+    // We want to interpolate these variables on backend.
+    // The pre-calculated values are replaced with the variable strings.
+    variables.__interval = {
+      value: '$__interval',
+    };
+    variables.__interval_ms = {
+      value: '$__interval_ms',
+    };
 
     const templateSrv = getTemplateSrv();
     return {
       ...query,
       database: templateSrv.replace(query.database || '', scopedVars),
       table: templateSrv.replace(query.table || '', scopedVars),
       measure: templateSrv.replace(query.measure || '', scopedVars),
-      rawQuery: templateSrv.replace(query.rawQuery, queryScopedVars, this.interpolateVariable),
+      rawQuery: templateSrv.replace(query.rawQuery, variables, this.interpolateVariable),
     };
   }
 

src/components/SQLEditor.tsx

@@ -43,10 +43,10 @@ export default function SQLEditor({ query, datasource, onRunQuery, onChange }: R
   const getColumns = useCallback(
     async (database?: string, tableName?: string) => {
       const interpolatedArgs = {
-        database: database ? database.replace(DATABASE_MACRO, queryRef.current.database ?? '') : queryRef.current.database,
-        table: tableName
-          ? tableName.replace(TABLE_MACRO, queryRef.current.table ?? '')
-          : queryRef.current.table,
+        database: database
+          ? database.replace(DATABASE_MACRO, queryRef.current.database ?? '')
+          : queryRef.current.database,
+        table: tableName ? tableName.replace(TABLE_MACRO, queryRef.current.table ?? '') : queryRef.current.table,
       };
       const [measures, dimensions] = await Promise.all([
         datasource.postResource('measures', interpolatedArgs).catch(() => []),

src/plugin.json

@@ -32,7 +32,7 @@
     "updated": "%TODAY%"
   },
   "dependencies": {
-    "grafanaDependency": ">=8.0.0",
+    "grafanaDependency": ">=9.5.13",
     "plugins": []
   }
 }