vmui/logs: add spinner to bar chart (#6577)

Add a spinner to the bar chart 

https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6558

---------

Signed-off-by: hagen1778 <roman@victoriametrics.com>
Co-authored-by: hagen1778 <roman@victoriametrics.com>

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogs.tsx

@@ -48,9 +48,8 @@ const ExploreLogs: FC = () => {
 
     const newPeriod = getPeriod();
     setPeriod(newPeriod);
-    fetchLogs(newPeriod).then(() => {
-      fetchLogHits(newPeriod);
-    }).catch(e => e);
+    fetchLogs(newPeriod);
+    fetchLogHits(newPeriod);
 
     setSearchParamsFromKeys( {
       query,
@@ -95,9 +94,10 @@ const ExploreLogs: FC = () => {
       {error && <Alert variant="error">{error}</Alert>}
       {!error && (
         <ExploreLogsBarChart
+          {...dataLogHits}
           query={query}
           period={period}
-          {...dataLogHits}
+          isLoading={isLoading ? false : dataLogHits.isLoading}
         />
       )}
       <ExploreLogsBody

app/vmui/packages/vmui/src/pages/ExploreLogs/ExploreLogsBarChart/ExploreLogsBarChart.tsx

@@ -9,6 +9,7 @@ import { AlignedData } from "uplot";
 import BarHitsChart from "../../../components/Chart/BarHitsChart/BarHitsChart";
 import Alert from "../../../components/Main/Alert/Alert";
 import { TimeParams } from "../../../types";
+import Spinner from "../../../components/Main/Spinner/Spinner";
 
 interface Props {
   query: string;
@@ -18,7 +19,7 @@ interface Props {
   isLoading: boolean;
 }
 
-const ExploreLogsBarChart: FC<Props> = ({ logHits, period, error }) => {
+const ExploreLogsBarChart: FC<Props> = ({ logHits, period, error, isLoading }) => {
   const { isMobile } = useDeviceDetect();
   const timeDispatch = useTimeDispatch();
 
@@ -56,6 +57,7 @@ const ExploreLogsBarChart: FC<Props> = ({ logHits, period, error }) => {
         "vm-block_mobile": isMobile,
       })}
     >
+      {isLoading && <Spinner containerStyles={{ position: "absolute" }}/>}
       {!error && noDataMessage && (
         <div className="vm-explore-logs-chart__empty">
           <Alert variant="info">{noDataMessage}</Alert>

app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogHits.ts

@@ -7,7 +7,7 @@ import { LOGS_BARS_VIEW } from "../../../constants/logs";
 
 export const useFetchLogHits = (server: string, query: string) => {
   const [logHits, setLogHits] = useState<LogHits[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState<{[key: number]: boolean;}>([]);
   const [error, setError] = useState<ErrorTypes | string>();
   const abortControllerRef = useRef(new AbortController());
 
@@ -36,7 +36,8 @@ export const useFetchLogHits = (server: string, query: string) => {
     abortControllerRef.current = new AbortController();
     const { signal } = abortControllerRef.current;
 
-    setIsLoading(true);
+    const id = Date.now();
+    setIsLoading(prev => ({ ...prev, [id]: true }));
     setError(undefined);
 
     try {
@@ -47,8 +48,8 @@ export const useFetchLogHits = (server: string, query: string) => {
         const text = await response.text();
         setError(text);
         setLogHits([]);
-        setIsLoading(false);
-        return Promise.reject(new Error(text));
+        setIsLoading(prev => ({ ...prev, [id]: false }));
+        return;
       }
 
       const data = await response.json();
@@ -56,25 +57,22 @@ export const useFetchLogHits = (server: string, query: string) => {
       if (!hits) {
         const error = "Error: No 'hits' field in response";
         setError(error);
-        return Promise.reject(new Error(error));
       }
 
-      setLogHits(hits);
+      setLogHits(!hits ? [] : hits);
     } catch (e) {
       if (e instanceof Error && e.name !== "AbortError") {
         setError(String(e));
         console.error(e);
         setLogHits([]);
       }
-      return Promise.reject(e);
-    } finally {
-      setIsLoading(false);
     }
+    setIsLoading(prev => ({ ...prev, [id]: false }));
   }, [url, query]);
 
   return {
     logHits,
-    isLoading,
+    isLoading: Object.values(isLoading).some(s => s),
     error,
     fetchLogHits,
   };

app/vmui/packages/vmui/src/pages/ExploreLogs/hooks/useFetchLogs.ts

@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 
 export const useFetchLogs = (server: string, query: string, limit: number) => {
   const [logs, setLogs] = useState<Logs[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState<{[key: number]: boolean;}>([]);
   const [error, setError] = useState<ErrorTypes | string>();
   const abortControllerRef = useRef(new AbortController());
 
@@ -39,7 +39,8 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
     abortControllerRef.current = new AbortController();
     const { signal } = abortControllerRef.current;
 
-    setIsLoading(true);
+    const id = Date.now();
+    setIsLoading(prev => ({ ...prev, [id]: true }));
     setError(undefined);
 
     try {
@@ -50,8 +51,8 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
       if (!response.ok || !response.body) {
         setError(text);
         setLogs([]);
-        setIsLoading(false);
-        return Promise.reject(new Error(text));
+        setIsLoading(prev => ({ ...prev, [id]: false }));
+        return;
       }
 
       const lines = text.split("\n").filter(line => line).slice(0, limit);
@@ -63,16 +64,13 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
         console.error(e);
         setLogs([]);
       }
-      return Promise.reject(e);
-    } finally {
-      setIsLoading(false);
     }
-    setIsLoading(false);
+    setIsLoading(prev => ({ ...prev, [id]: false }));
   }, [url, query, limit]);
 
   return {
     logs,
-    isLoading,
+    isLoading: Object.values(isLoading).some(s => s),
     error,
     fetchLogs,
   };

docs/VictoriaLogs/CHANGELOG.md

@@ -19,6 +19,8 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
 
 ## tip
 
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): show a spinner on top of bar chart until user's request is finished. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6558).
+
 ## [v0.27.1](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.27.1-victorialogs)
 
 Released at 2024-07-05