InfluxDB: Interpolate retention policies (#69202)

Interpolate retention policies

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { useMemo } from 'react';
 import { useAsync } from 'react-use';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, TypedVariableModel } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import { InlineLabel, SegmentSection, useStyles2 } from '@grafana/ui';
 
@@ -42,19 +42,31 @@ type Props = {
   datasource: InfluxDatasource;
 };
 
-function getTemplateVariableOptions() {
+function wrapRegex(v: TypedVariableModel): string {
+  return `/^$${v.name}$/`;
+}
+
+function wrapPure(v: TypedVariableModel): string {
+  return `$${v.name}`;
+}
+
+function getTemplateVariableOptions(wrapper: (v: TypedVariableModel) => string) {
   return (
     getTemplateSrv()
       .getVariables()
       // we make them regex-params, i'm not 100% sure why.
       // probably because this way multi-value variables work ok too.
-      .map((v) => `/^$${v.name}$/`)
+      .map(wrapper)
   );
 }
 
 // helper function to make it easy to call this from the widget-render-code
-function withTemplateVariableOptions(optionsPromise: Promise<string[]>, filter?: string): Promise<string[]> {
-  let templateVariableOptions = getTemplateVariableOptions();
+function withTemplateVariableOptions(
+  optionsPromise: Promise<string[]>,
+  wrapper: (v: TypedVariableModel) => string,
+  filter?: string
+): Promise<string[]> {
+  let templateVariableOptions = getTemplateVariableOptions(wrapper);
   if (filter) {
     templateVariableOptions = templateVariableOptions.filter((tvo) => tvo.indexOf(filter) > -1);
   }
@@ -149,7 +161,12 @@ export const Editor = (props: Props): JSX.Element => {
         <FromSection
           policy={policy ?? retentionPolicies[0]}
           measurement={measurement}
-          getPolicyOptions={() => getAllPolicies(datasource)}
+          getPolicyOptions={() =>
+            withTemplateVariableOptions(
+              allTagKeys.then((keys) => getAllPolicies(datasource)),
+              wrapPure
+            )
+          }
           getMeasurementOptions={(filter) =>
             withTemplateVariableOptions(
               allTagKeys.then((keys) =>
@@ -159,6 +176,7 @@ export const Editor = (props: Props): JSX.Element => {
                   datasource
                 )
               ),
+              wrapRegex,
               filter
             )
           }
@@ -175,7 +193,8 @@ export const Editor = (props: Props): JSX.Element => {
             withTemplateVariableOptions(
               allTagKeys.then((keys) =>
                 getTagValues(key, measurement, policy, filterTags(query.tags ?? [], keys), datasource)
-              )
+              ),
+              wrapRegex
             )
           }
         />

public/app/plugins/datasource/influxdb/datasource.ts

@@ -199,10 +199,13 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
         this.retentionPolicies = allPolicies;
         const policyFixedRequests = {
           ...request,
-          targets: request.targets.map((t) => ({
-            ...t,
-            policy: replaceHardCodedRetentionPolicy(t.policy, this.retentionPolicies),
-          })),
+          targets: request.targets.map((t) => {
+            t.policy = t.policy ? this.templateSrv.replace(t.policy, {}, 'regex') : '';
+            return {
+              ...t,
+              policy: replaceHardCodedRetentionPolicy(t.policy, this.retentionPolicies),
+            };
+          }),
         };
         return this._query(policyFixedRequests);
       })