Opentsdb: Allow template variables for filter keys (#57226)

* allow template variables for filter keys

* add types to interpolate var function

.betterer.results

@@ -6568,13 +6568,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "50"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "51"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "52"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "53"],
+      [0, 0, 0, "Do not use any type assertions.", "53"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "54"],
-      [0, 0, 0, "Do not use any type assertions.", "55"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "55"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "56"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "57"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "57"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "58"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "59"]
     ],
     "public/app/plugins/datasource/opentsdb/migrations.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]

public/app/plugins/datasource/opentsdb/components/FilterSection.tsx

@@ -146,6 +146,8 @@ export function FilterSection({
               className="gf-form-input"
               value={curFilterKey ? toOption(curFilterKey) : undefined}
               placeholder="key"
+              allowCustomValue
+              filterOption={customFilterOption}
               onOpenMenu={async () => {
                 updKeyIsLoading(true);
                 const tKs = await suggestTagKeys(query);

public/app/plugins/datasource/opentsdb/datasource.ts

@@ -30,7 +30,7 @@ import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_sr
 
 import { AnnotationEditor } from './components/AnnotationEditor';
 import { prepareAnnotation } from './migrations';
-import { OpenTsdbOptions, OpenTsdbQuery } from './types';
+import { OpenTsdbFilter, OpenTsdbOptions, OpenTsdbQuery } from './types';
 
 export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenTsdbOptions> {
   type: any;
@@ -489,7 +489,7 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
     return label;
   }
 
-  convertTargetToQuery(target: any, options: any, tsdbVersion: number) {
+  convertTargetToQuery(target: OpenTsdbQuery, options: DataQueryRequest<OpenTsdbQuery>, tsdbVersion: number) {
     if (!target.metric || target.hide) {
       return null;
     }
@@ -541,13 +541,7 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
       query.filters = cloneDeep(target.filters);
 
       if (query.filters) {
-        for (const filterKey in query.filters) {
+        this.interpolateVariablesInFilters(query, options);
-          query.filters[filterKey].filter = this.templateSrv.replace(
-            query.filters[filterKey].filter,
-            options.scopedVars,
-            'pipe'
-          );
-        }
       }
     } else {
       query.tags = cloneDeep(target.tags);
@@ -566,6 +560,16 @@ export default class OpenTsDatasource extends DataSourceApi<OpenTsdbQuery, OpenT
     return query;
   }
 
+  interpolateVariablesInFilters(query: OpenTsdbQuery, options: DataQueryRequest<OpenTsdbQuery>) {
+    query.filters = query.filters?.map((filter: OpenTsdbFilter): OpenTsdbFilter => {
+      filter.tagk = this.templateSrv.replace(filter.tagk, options.scopedVars, 'pipe');
+
+      filter.filter = this.templateSrv.replace(filter.filter, options.scopedVars, 'pipe');
+
+      return filter;
+    });
+  }
+
   mapMetricsToTargets(metrics: any, options: any, tsdbVersion: number) {
     let interpolatedTagValue, arrTagV;
     return _map(metrics, (metricData) => {

public/app/plugins/datasource/opentsdb/specs/datasource.test.ts

@@ -1,5 +1,6 @@
 import { of } from 'rxjs';
 
+import { DataQueryRequest, dateTime } from '@grafana/data';
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 
 import { createFetchResponse } from '../../../../../test/helpers/createFetchResponse';
@@ -126,12 +127,19 @@ describe('opentsdb', () => {
       expect(ds.interpolateVariablesInQueries([], {})).toHaveLength(0);
     });
 
-    it('should replace correct variables', () => {
+    it('should replace metric variable', () => {
       const { ds, templateSrv } = getTestcontext();
-      const variableName = 'someVar';
       const logQuery: OpenTsdbQuery = {
         refId: 'someRefId',
-        metric: `$${variableName}`,
+        metric: '$someVar',
+        filters: [
+          {
+            type: 'type',
+            tagk: 'someTagk',
+            filter: 'someTagv',
+            groupBy: true,
+          },
+        ],
       };
 
       ds.interpolateVariablesInQueries([logQuery], {});
@@ -139,5 +147,75 @@ describe('opentsdb', () => {
       expect(templateSrv.replace).toHaveBeenCalledWith('$someVar', {});
       expect(templateSrv.replace).toHaveBeenCalledTimes(1);
     });
+
+    it('should replace filter tag key and value', () => {
+      const { ds, templateSrv } = getTestcontext();
+      let logQuery: OpenTsdbQuery = {
+        refId: 'A',
+        datasource: {
+          type: 'opentsdb',
+          uid: 'P311D5F9D9B165031',
+        },
+        aggregator: 'sum',
+        downsampleAggregator: 'avg',
+        downsampleFillPolicy: 'none',
+        metric: 'logins.count',
+        filters: [
+          {
+            type: 'iliteral_or',
+            tagk: '$someTagk',
+            filter: '$someTagv',
+            groupBy: false,
+          },
+        ],
+      };
+
+      const scopedVars = {
+        __interval: {
+          text: '20s',
+          value: '20s',
+        },
+        __interval_ms: {
+          text: '20000',
+          value: 20000,
+        },
+      };
+
+      const dataQR: DataQueryRequest<OpenTsdbQuery> = {
+        app: 'dashboard',
+        requestId: 'Q103',
+        timezone: 'browser',
+        panelId: 2,
+        dashboardId: 189,
+        dashboardUID: 'tyzmfPIVz',
+        publicDashboardAccessToken: '',
+        range: {
+          from: dateTime('2022-10-19T08:55:18.430Z'),
+          to: dateTime('2022-10-19T14:55:18.431Z'),
+          raw: {
+            from: 'now-6h',
+            to: 'now',
+          },
+        },
+        timeInfo: '',
+        interval: '20s',
+        intervalMs: 20000,
+        targets: [logQuery],
+        maxDataPoints: 909,
+        scopedVars: scopedVars,
+        startTime: 1666191318431,
+        rangeRaw: {
+          from: 'now-6h',
+          to: 'now',
+        },
+      };
+
+      ds.interpolateVariablesInFilters(logQuery, dataQR);
+
+      expect(templateSrv.replace).toHaveBeenCalledWith('$someTagk', scopedVars, 'pipe');
+      expect(templateSrv.replace).toHaveBeenCalledWith('$someTagv', scopedVars, 'pipe');
+
+      expect(templateSrv.replace).toHaveBeenCalledTimes(2);
+    });
   });
 });