From 05923fbf34d2cbcf0900f48f6e37f87870b335c2 Mon Sep 17 00:00:00 2001
From: dmitryk-dk <kozlovdmitriyy@gmail.com>
Date: Thu, 20 Jun 2024 19:30:32 +0200
Subject: [PATCH] made logic better add tests

---
 src/components/PrettifyQuery.test.tsx | 93 +++++++++++++++++++++++++++
 src/components/PrettifyQuery.tsx      | 21 +++---
 2 files changed, 106 insertions(+), 8 deletions(-)
 create mode 100644 src/components/PrettifyQuery.test.tsx

diff --git a/src/components/PrettifyQuery.test.tsx b/src/components/PrettifyQuery.test.tsx
new file mode 100644
index 0000000..0b6b95d
--- /dev/null
+++ b/src/components/PrettifyQuery.test.tsx
@@ -0,0 +1,93 @@
+import { render, screen, act } from '@testing-library/react';
+import React from 'react';
+
+import { PrometheusDatasource } from "../datasource";
+
+import PrettifyQuery from './PrettifyQuery';
+
+
+const testQueries = [
+  {
+    name: 'empty query',
+    got:'',
+    want:''
+  },
+  {
+    name: 'query with defined lookbehind window',
+    got:'sum(rate(node_cpu_seconds_total{mode="idle"}[5m]))',
+    want:'sum(rate(node_cpu_seconds_total{mode="idle"}[5m]))'
+  },
+  {
+    name: 'query with grafana $__interval variable',
+    got:'sum(rate(node_cpu_seconds_total{mode="idle"}[$__interval]))',
+    want:'sum(rate(node_cpu_seconds_total{mode="idle"}[$__interval]))'
+  },
+  {
+    name: 'query with grafana variable and lookbehind window',
+    got:'sum(rate(node_cpu_seconds_total{mode="idle"}))',
+    want:'sum(rate(node_cpu_seconds_total{mode="idle"}))'
+  },
+  {
+    name: 'query with grafana $__interval_ms variable',
+    got: 'sum(rate(node_cpu_seconds_total{mode="idle"}[$__interval_ms]))',
+    want:'sum(rate(node_cpu_seconds_total{mode="idle"}[$__interval_ms]))'
+  },
+  {
+    name: 'query with grafana $__range variable',
+    got: 'sum(rate(node_cpu_seconds_total{mode="idle"}[$__range]))',
+    want:'sum(rate(node_cpu_seconds_total{mode="idle"}[$__range]))'
+  },
+  {
+    name: 'query with grafana $__range variable',
+    got: 'sum(rate(node_cpu_seconds_total{mode="idle"}[$__range_s]))',
+    want:'sum(rate(node_cpu_seconds_total{mode="idle"}[$__range_s]))'
+  },
+  {
+    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]))'
+  }
+]
+
+describe("Prettyfied Query", () => {
+  testQueries.forEach(async ({ name, got, want }) => {
+    it(`should prettify the query ${name}`, async () => {
+      const datasource = {
+        languageProvider: {
+          start: () => Promise.resolve([]),
+          syntax: () => {},
+          getLabelKeys: () => [],
+          metrics: [],
+        },
+        getInitHints: () => [],
+        prettifyRequest: async (_: string) => {
+          return {
+            data: {
+              query: got,
+              status: 'success'
+            }
+          }
+        }
+      } as unknown as PrometheusDatasource;
+
+      const mockCallback = jest.fn(resp => {
+        const { expr } = resp;
+        expect(expr).toBe(want)
+      });
+
+      act(() => {
+        render(<PrettifyQuery
+          datasource={datasource}
+          query={{ expr: got, refId: 'A' }}
+          onChange={mockCallback}
+        />);
+      });
+
+      const btn = await screen.findByRole('button');
+
+      await act(async () => {
+        btn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      });
+    });
+  });
+});
diff --git a/src/components/PrettifyQuery.tsx b/src/components/PrettifyQuery.tsx
index fda0c1d..9925276 100755
--- a/src/components/PrettifyQuery.tsx
+++ b/src/components/PrettifyQuery.tsx
@@ -32,24 +32,29 @@ const PrettifyQuery: FC<Props> = ({
   query,
   onChange
 }) => {
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
+
 
   const handleClickPrettify = async () => {
     setLoading(true)
     try {
       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);
-      }
+      let grafanaVariable = '';
+      GRAFANA_VARIABLES.forEach(variable => {
+        const regex = new RegExp(`\\[(\\${variable})\\]`, 'g');
+        if (regex.test(expr)) {
+          expr = expr.replace(regex, `[${DEFAULT_LOOKBEHIND_WINDOW}]`);
+          grafanaVariable = variable
+          return;
+        }
+      });
       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);
+            const regex = new RegExp(`\\[(${DEFAULT_LOOKBEHIND_WINDOW})\\]`, 'g');
+            query = query.replace(regex, `[${grafanaVariable}]`);
         }
         onChange({ ...query, expr: query });
       } else {