From efd70b2c52c5c5aec83baad3135d8c1f347f9c70 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Thu, 18 Jul 2024 11:55:42 +0200
Subject: [PATCH] vmui/logs: switched requests to sequential execution (#6624)

### Describe Your Changes

This PR changes `/select/logsql/query` and `/select/logsql/hits` to
execute sequentially
Fixed
https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6558#issuecomment-2219298984

### Checklist

The following checks are **mandatory**:

- [x] My change adheres [VictoriaMetrics contributing
guidelines](https://docs.victoriametrics.com/contributing/).
---
 .../packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx   | 8 ++++----
 .../ExploreLogsBarChart/ExploreLogsBarChart.tsx           | 5 ++++-
 .../vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts      | 7 +++++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx
index b40a3d528..5d65592ae 100644
--- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx
+++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx
@@ -48,9 +48,9 @@ const ExploreLogs: FC = () => {
 
     const newPeriod = getPeriod();
     setPeriod(newPeriod);
-    fetchLogs(newPeriod);
-    fetchLogHits(newPeriod);
-
+    fetchLogs(newPeriod).then((isSuccess) => {
+      isSuccess && fetchLogHits(newPeriod);
+    }).catch(e => e);
     setSearchParamsFromKeys( {
       query,
       "g0.range_input": duration,
@@ -90,7 +90,7 @@ const ExploreLogs: FC = () => {
         onRun={handleRunQuery}
         onChangeMarkdownParsing={handleChangeMarkdownParsing}
       />
-      {isLoading && <Spinner />}
+      {isLoading && <Spinner message={"Loading logs..."}/>}
       {error && <Alert variant="error">{error}</Alert>}
       {!error && (
         <ExploreLogsBarChart
diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBarChart/ExploreLogsBarChart.tsx b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBarChart/ExploreLogsBarChart.tsx
index c95136348..5c0e0fcd3 100644
--- a/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBarChart/ExploreLogsBarChart.tsx
+++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBarChart/ExploreLogsBarChart.tsx
@@ -57,7 +57,10 @@ const ExploreLogsBarChart: FC<Props> = ({ logHits, period, error, isLoading }) =
         "vm-block_mobile": isMobile,
       })}
     >
-      {isLoading && <Spinner containerStyles={{ position: "absolute" }}/>}
+      {isLoading && <Spinner
+        message={"Loading hits stats..."}
+        containerStyles={{ position: "absolute" }}
+      />}
       {!error && noDataMessage && (
         <div className="vm-explore-logs-chart__empty">
           <Alert variant="info">{noDataMessage}</Alert>
diff --git a/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts b/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts
index 8f8332c27..2cc9ae47b 100644
--- a/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts
+++ b/app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts
@@ -52,20 +52,23 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
         setError(text);
         setLogs([]);
         setIsLoading(prev => ({ ...prev, [id]: false }));
-        return;
+        return false;
       }
 
       const lines = text.split("\n").filter(line => line).slice(0, limit);
       const data = lines.map(parseLineToJSON).filter(line => line) as Logs[];
       setLogs(data);
+      setIsLoading(prev => ({ ...prev, [id]: false }));
+      return true;
     } catch (e) {
+      setIsLoading(prev => ({ ...prev, [id]: false }));
       if (e instanceof Error && e.name !== "AbortError") {
         setError(String(e));
         console.error(e);
         setLogs([]);
       }
+      return false;
     }
-    setIsLoading(prev => ({ ...prev, [id]: false }));
   }, [url, query, limit]);
 
   return {