diff --git a/src/components/PrettifyQuery.test.tsx b/src/components/PrettifyQuery.test.tsx index 50ab92f..1432c3c 100644 --- a/src/components/PrettifyQuery.test.tsx +++ b/src/components/PrettifyQuery.test.tsx @@ -46,6 +46,16 @@ const testQueries = [ name: 'query with grafana $__rate_interval variable', got: 'sum(rate(node_cpu_seconds_total{mode="idle"}[$__rate_interval]))', want:'sum(rate(node_cpu_seconds_total{mode="idle"}[$__rate_interval]))' + }, + { + name: 'query with two grafana variables', + got: 'rate(metric_name[$__interval]) + rate(metric_name[$__range]) ', + want:'rate(metric_name[$__interval]) + rate(metric_name[$__range]) ' + }, + { + name: 'query with grafana variable and label value as lookbehind window', + got: 'rate(metric_name{mode="idle"}[$__interval]) + up{instance="[1i]"} ', + want:'rate(metric_name{mode="idle"}[$__interval]) + up{instance="[1i]"} ' } ] diff --git a/src/components/PrettifyQuery.tsx b/src/components/PrettifyQuery.tsx index 9925276..907dd5a 100755 --- a/src/components/PrettifyQuery.tsx +++ b/src/components/PrettifyQuery.tsx @@ -23,9 +23,12 @@ const GRAFANA_VARIABLES = [ "$__range_s", "$__range_ms", "$__rate_interval", -] +]; -const DEFAULT_LOOKBEHIND_WINDOW = "1i" +interface GrafanaVariableReplacer { + variable: string; + defaultWindow: string; +} const PrettifyQuery: FC = ({ datasource, @@ -39,22 +42,26 @@ const PrettifyQuery: FC = ({ setLoading(true) try { let { expr } = query; - let grafanaVariable = ''; - GRAFANA_VARIABLES.forEach(variable => { - const regex = new RegExp(`\\[(\\${variable})\\]`, 'g'); + let grafanaVariables = [] as GrafanaVariableReplacer[]; + GRAFANA_VARIABLES.forEach((variable, idx) => { + const regex = new RegExp(`\\[(\\${variable})\\]\\)`, 'g'); if (regex.test(expr)) { - expr = expr.replace(regex, `[${DEFAULT_LOOKBEHIND_WINDOW}]`); - grafanaVariable = variable - return; + expr = expr.replace(regex, `[${idx+1}i])`); + grafanaVariables.push({ + variable, + defaultWindow: `${idx+1}i`, + }) } }); const response = await datasource.prettifyRequest(expr); const { data, status } = response if (data?.status === ResponseStatus.Success) { let { query } = data; - if (grafanaVariable) { - const regex = new RegExp(`\\[(${DEFAULT_LOOKBEHIND_WINDOW})\\]`, 'g'); - query = query.replace(regex, `[${grafanaVariable}]`); + if (grafanaVariables.length > 0) { + grafanaVariables.forEach(grafanaVariable => { + const regex = new RegExp(`\\[(${grafanaVariable.defaultWindow})\\]\\)`, 'g'); + query = query.replace(regex, `[${grafanaVariable.variable}])`); + }); } onChange({ ...query, expr: query }); } else {