update logic, fix handle multiple grafana variables, improve regex

VictoriaMetrics · Jun 21, 2024 · 3b4bb53 · 3b4bb53
1 parent c31b56e
commit 3b4bb53
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git 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
@@ -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<Props> = ({
   datasource,
@@ -39,22 +42,26 @@ const PrettifyQuery: FC<Props> = ({
     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 {