From edf84445acad686be488b36ae1d9fc84acb293bf Mon Sep 17 00:00:00 2001
From: dmitryk-dk <kozlovdmitriyy@gmail.com>
Date: Thu, 20 Jun 2024 14:47:56 +0200
Subject: [PATCH] fix an issue with prettify query

---
 CHANGELOG.md                     |  2 ++
 src/components/PrettifyQuery.tsx | 26 ++++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d070f33..e6ab6b39 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## tip
 
+* BUGFIX: fix an issue with prettify query if the query includes Grafana variables in the lookbehind window. See [this issue](https://github.com/VictoriaMetrics/grafana-datasource/issues/166).
+
 ## [v0.8.2](https://github.com/VictoriaMetrics/grafana-datasource/releases/tag/v0.8.2)
 
 * BUGFIX: fix parsing of label names with special characters for the query builder. See [this issue](https://github.com/VictoriaMetrics/grafana-datasource/issues/131#issuecomment-2105662179).
diff --git a/src/components/PrettifyQuery.tsx b/src/components/PrettifyQuery.tsx
index 4b7f5322..fda0c1d6 100755
--- a/src/components/PrettifyQuery.tsx
+++ b/src/components/PrettifyQuery.tsx
@@ -16,6 +16,17 @@ enum ResponseStatus {
   Error = 'error'
 }
 
+const GRAFANA_VARIABLES = [
+  "$__interval",
+  "$__interval_ms",
+  "$__range",
+  "$__range_s",
+  "$__range_ms",
+  "$__rate_interval",
+]
+
+const DEFAULT_LOOKBEHIND_WINDOW = "1i"
+
 const PrettifyQuery: FC<Props> = ({
   datasource,
   query,
@@ -26,10 +37,21 @@ const PrettifyQuery: FC<Props> = ({
   const handleClickPrettify = async () => {
     setLoading(true)
     try {
-      const response = await datasource.prettifyRequest(query.expr)
+      let { expr } = query;
+      const grafanaVariable = GRAFANA_VARIABLES.find(variable => expr.includes(variable));
+      if (grafanaVariable) {
+        const regex = new RegExp(`\\${grafanaVariable}`, 'g');
+        expr = expr.replace(regex, DEFAULT_LOOKBEHIND_WINDOW);
+      }
+      const response = await datasource.prettifyRequest(expr);
       const { data, status } = response
       if (data?.status === ResponseStatus.Success) {
-        onChange({ ...query, expr: data.query });
+        let { query } = data;
+        if (grafanaVariable) {
+            const regex = new RegExp(DEFAULT_LOOKBEHIND_WINDOW, 'g');
+            query = query.replace(regex, grafanaVariable);
+        }
+        onChange({ ...query, expr: query });
       } else {
         console.error(`Error requesting /prettify-query, status: ${status}`)
       }