feat(webui): Add a progress bar to the Presto search page. (#1206)

Author: hoophalab

components/webui/client/src/pages/SearchPage/Presto/ProgressBar/index.module.css

@@ -0,0 +1,4 @@
+.prestoProgress {
+    position: absolute;
+    line-height: 0;
+}

components/webui/client/src/pages/SearchPage/Presto/ProgressBar/index.tsx

@@ -0,0 +1,51 @@
+import {useEffect} from "react";
+
+import {Progress} from "antd";
+
+import useSearchStore from "../../SearchState";
+import {SEARCH_UI_STATE} from "../../SearchState/typings";
+import {usePseudoProgress} from "../../SearchState/usePseudoProgress";
+import styles from "./index.module.css";
+
+
+/**
+ * Renders a pseudo progress bar that listens for changes in `searchUiState`.
+ *
+ * @return
+ */
+const ProgressBar = () => {
+    const {searchUiState} = useSearchStore.getState();
+    const {
+        progress,
+        start,
+        stop,
+    } = usePseudoProgress();
+
+    useEffect(() => {
+        if (searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING) {
+            start();
+        } else if (
+            searchUiState === SEARCH_UI_STATE.DONE ||
+            searchUiState === SEARCH_UI_STATE.FAILED
+        ) {
+            stop();
+        }
+    }, [searchUiState,
+        start,
+        stop]);
+
+    return (
+        <Progress
+            className={styles["prestoProgress"] || ""}
+            percent={progress ?? 0}
+            showInfo={false}
+            size={"small"}
+            status={"active"}
+            strokeLinecap={"butt"}
+            style={{display: null === progress ?
+                "none" :
+                "block"}}/>
+    );
+};
+
+export {ProgressBar};

components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/index.tsx

@@ -3,19 +3,14 @@ import {
     useCallback,
     useEffect,
     useRef,
-    useState,
 } from "react";
 
 import type {InputRef} from "antd";
-import {Nullable} from "src/typings/common";
 
 import QueryBox from "../../../../components/QueryBox";
 import useSearchStore from "../../SearchState/index";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
-import {
-    PROGRESS_INCREMENT,
-    PROGRESS_INTERVAL_MILLIS,
-} from "./typings";
+import {usePseudoProgress} from "../../SearchState/usePseudoProgress";
 
 
 /**
@@ -27,8 +22,7 @@ const QueryInput = () => {
     const queryIsCaseSensitive = useSearchStore((state) => state.queryIsCaseSensitive);
     const queryString = useSearchStore((state) => state.queryString);
     const searchUiState = useSearchStore((state) => state.searchUiState);
-    const [pseudoProgress, setPseudoProgress] = useState<Nullable<number>>(null);
-    const intervalIdRef = useRef<number>(0);
+    const {progress: pseudoProgress, start, stop} = usePseudoProgress();
     const inputRef = useRef<InputRef>(null);
 
     const handleCaseSensitiveChange = useCallback((newValue: boolean) => {
@@ -43,34 +37,16 @@ const QueryInput = () => {
 
     useEffect(() => {
         if (searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING) {
-            if (0 !== intervalIdRef.current) {
-                console.warn("Interval already set for submitted query");
-
-                return;
-            }
-            intervalIdRef.current = window.setInterval(() => {
-                setPseudoProgress((v) => {
-                    if (100 <= (v ?? 0) + PROGRESS_INCREMENT) {
-                        return 100;
-                    }
-
-                    return (v ?? 0) + PROGRESS_INCREMENT;
-                });
-            }, PROGRESS_INTERVAL_MILLIS);
+            start();
         } else if (
             searchUiState === SEARCH_UI_STATE.DONE ||
             searchUiState === SEARCH_UI_STATE.FAILED
         ) {
-            clearInterval(intervalIdRef.current);
-            intervalIdRef.current = 0;
-            setPseudoProgress(null);
+            stop();
         }
-    }, [searchUiState]);
-
-    // Clear the interval if the component unmounts.
-    useEffect(() => {
-        clearInterval(intervalIdRef.current);
-    }, []);
+    }, [searchUiState,
+        start,
+        stop]);
 
     useEffect(() => {
         if (

components/webui/client/src/pages/SearchPage/SearchControls/QueryInput/typings.ts

@@ -0,0 +1,74 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+import {Nullable} from "../../../typings/common";
+
+
+/**
+ * Pseudo progress bar increment on each interval tick.
+ */
+const PROGRESS_INCREMENT = 5;
+
+/**
+ * The interval for updating the pseudo progress bar.
+ */
+const PROGRESS_INTERVAL_MILLIS = 100;
+
+/**
+ * A custom hook to manage a pseudo progress value.
+ * The progress increases gradually and can be reset.
+ *
+ * @return
+ */
+const usePseudoProgress = (): {
+    progress: Nullable<number>;
+    start: () => void;
+    stop: () => void;
+} => {
+    const [progress, setProgress] = useState<Nullable<number>>(null);
+    const intervalIdRef = useRef<number>(0);
+
+    const start = useCallback(() => {
+        if (0 !== intervalIdRef.current) {
+            console.warn("Interval already set for submitted query");
+
+            return;
+        }
+        intervalIdRef.current = window.setInterval(() => {
+            setProgress((v) => {
+                if (100 <= (v ?? 0) + PROGRESS_INCREMENT) {
+                    return 100;
+                }
+
+                return (v ?? 0) + PROGRESS_INCREMENT;
+            });
+        }, PROGRESS_INTERVAL_MILLIS);
+    }, []);
+
+    const stop = useCallback(() => {
+        clearInterval(intervalIdRef.current);
+        intervalIdRef.current = 0;
+        setProgress(null);
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            if (0 !== intervalIdRef.current) {
+                clearInterval(intervalIdRef.current);
+                intervalIdRef.current = 0;
+            }
+        };
+    }, []);
+
+    return {
+        progress,
+        start,
+        stop,
+    };
+};
+
+export {usePseudoProgress};

components/webui/client/src/pages/SearchPage/SearchState/usePseudoProgress.ts

@@ -24,19 +24,25 @@ const useUiUpdateOnDoneSignal = () => {
             return;
         }
 
-        if (resultsMetadata.lastSignal === SEARCH_SIGNAL.RESP_DONE) {
-            updateSearchUiState(SEARCH_UI_STATE.DONE);
-        } else if (resultsMetadata.lastSignal === PRESTO_SEARCH_SIGNAL.FAILED) {
-            updateSearchUiState(SEARCH_UI_STATE.FAILED);
-            notification.error({
-                description: resultsMetadata.errorMsg || "An error occurred during search",
-                duration: 15,
-                key: `search-failed-${resultsMetadata._id}`,
-                message: resultsMetadata.errorName || "Search Failed",
-                pauseOnHover: true,
-                placement: "bottomRight",
-                showProgress: true,
-            });
+        switch (resultsMetadata.lastSignal) {
+            case SEARCH_SIGNAL.RESP_DONE:
+            case PRESTO_SEARCH_SIGNAL.FINISHED:
+                updateSearchUiState(SEARCH_UI_STATE.DONE);
+                break;
+            case PRESTO_SEARCH_SIGNAL.FAILED:
+                updateSearchUiState(SEARCH_UI_STATE.FAILED);
+                notification.error({
+                    description: resultsMetadata.errorMsg || "An error occurred during search",
+                    duration: 15,
+                    key: `search-failed-${resultsMetadata._id}`,
+                    message: resultsMetadata.errorName || "Search Failed",
+                    pauseOnHover: true,
+                    placement: "bottomRight",
+                    showProgress: true,
+                });
+                break;
+            default:
+                break;
         }
     }, [
         resultsMetadata,

components/webui/client/src/pages/SearchPage/SearchState/useUpdateStateWithMetadata.ts

@@ -1,4 +1,9 @@
+import {
+    CLP_QUERY_ENGINES,
+    SETTINGS_QUERY_ENGINE,
+} from "../../config";
 import styles from "./index.module.css";
+import {ProgressBar} from "./Presto/ProgressBar";
 import SearchControls from "./SearchControls";
 import SearchQueryStatus from "./SearchQueryStatus";
 import SearchResultsTable from "./SearchResults/SearchResultsTable";
@@ -15,14 +20,17 @@ const SearchPage = () => {
     useUiUpdateOnDoneSignal();
 
     return (
-        <div className={styles["searchPageContainer"]}>
-            <div>
-                <SearchControls/>
-                <SearchQueryStatus/>
+        <>
+            {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && <ProgressBar/>}
+            <div className={styles["searchPageContainer"]}>
+                <div>
+                    <SearchControls/>
+                    <SearchQueryStatus/>
+                </div>
+                <SearchResultsTimeline/>
+                <SearchResultsTable/>
             </div>
-            <SearchResultsTimeline/>
-            <SearchResultsTable/>
-        </div>
+        </>
     );
 };