From dd89745a3402c0e18c1a4850fffb67de905520f3 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Fri, 25 Oct 2024 09:32:20 +0200
Subject: [PATCH] vmui/logs: fix query and limit update issue (#7294)

### Describe Your Changes

Fixes issues with incorrect updating of query and limit fields, and
resolves the problem where the display tab resets.

Related issue: #7279 and #7290

### Checklist

The following checks are **mandatory**:

- [ ] My change adheres [VictoriaMetrics contributing
guidelines](https://docs.victoriametrics.com/contributing/).

---------

Signed-off-by: hagen1778 <roman@victoriametrics.com>
Co-authored-by: Zakhar Bessarab <z.bessarab@victoriametrics.com>
---
 .../src/pages/ExploreLogs/ExploreLogs.tsx     | 20 ++++++++++---------
 docs/VictoriaLogs/CHANGELOG.md                |  2 ++
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx
index 224650b7f..47827ccc7 100644
--- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx
+++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx
@@ -28,7 +28,7 @@ const ExploreLogs: FC = () => {
 
   const [limit, setLimit] = useStateSearchParams(defaultLimit, "limit");
   const [query, setQuery] = useStateSearchParams("*", "query");
-  const [tmpQuery, setTmpQuery] = useState("");
+  const [isUpdatingQuery, setIsUpdatingQuery] = useState(false);
   const [period, setPeriod] = useState<TimeParams>(periodState);
   const [queryError, setQueryError] = useState<ErrorTypes | string>("");
 
@@ -70,26 +70,28 @@ const ExploreLogs: FC = () => {
 
   const handleApplyFilter = (val: string) => {
     setQuery(prev => `_stream: ${val === "other" ? "{}" : val} AND (${prev})`);
+    setIsUpdatingQuery(true);
   };
 
-  const handleUpdateQuery = useCallback(() => {
+  const handleUpdateQuery = () => {
     if (isLoading || dataLogHits.isLoading) {
       abortController.abort && abortController.abort();
       dataLogHits.abortController.abort && dataLogHits.abortController.abort();
     } else {
-      setQuery(tmpQuery);
       handleRunQuery();
     }
-  }, [isLoading, dataLogHits.isLoading]);
+  };
 
   useEffect(() => {
-    if (query) handleRunQuery();
+    if (!query) return;
+    handleRunQuery();
   }, [periodState]);
 
   useEffect(() => {
+    if (!isUpdatingQuery) return;
     handleRunQuery();
-    setTmpQuery(query);
-  }, [query]);
+    setIsUpdatingQuery(false);
+  }, [query, isUpdatingQuery]);
 
   useEffect(() => {
     !hideChart && fetchLogHits(period);
@@ -98,10 +100,10 @@ const ExploreLogs: FC = () => {
   return (
     <div className="vm-explore-logs">
       <ExploreLogsHeader
-        query={tmpQuery}
+        query={query}
         error={queryError}
         limit={limit}
-        onChange={setTmpQuery}
+        onChange={setQuery}
         onChangeLimit={handleChangeLimit}
         onRun={handleUpdateQuery}
         isLoading={isLoading || dataLogHits.isLoading}
diff --git a/docs/VictoriaLogs/CHANGELOG.md b/docs/VictoriaLogs/CHANGELOG.md
index 06d797220..78f05254d 100644
--- a/docs/VictoriaLogs/CHANGELOG.md
+++ b/docs/VictoriaLogs/CHANGELOG.md
@@ -15,6 +15,8 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
 
 ## tip
 
+* BUGFIX: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): fix various glitches with updating query responses. The issue was introduced in [v0.36.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.36.0-victorialogs). See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/7279).
+
 ## [v0.37.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.37.0-victorialogs)
 
 Released at 2024-10-18