diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx index d9264597f18..27477576254 100644 --- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Editor.tsx +++ b/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, filter?: string): Promise { - let templateVariableOptions = getTemplateVariableOptions(); +function withTemplateVariableOptions( + optionsPromise: Promise, + wrapper: (v: TypedVariableModel) => string, + filter?: string +): Promise { + 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 => { 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 ) } /> diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index b2ca919fd8c..22d00671930 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -200,10 +200,13 @@ export default class InfluxDatasource extends DataSourceWithBackend ({ - ...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); })