feat(webui): Show query speed in native search status. (#1429)

Author: hoophalab

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/QuerySpeed/index.tsx

@@ -0,0 +1,47 @@
+import {useQuery} from "@tanstack/react-query";
+import {Typography} from "antd";
+
+import {formatSizeInBytes} from "../../../../IngestPage/Jobs/units";
+import useSearchStore from "../../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../../SearchState/typings";
+import {fetchQuerySpeed} from "./utils";
+
+
+const {Text} = Typography;
+const SPEED_DEFAULT = {latency: 0, speed: 0};
+
+/**
+ * Displays the query latency and speed.
+ *
+ * @return
+ */
+const QuerySpeed = () => {
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const searchJobId = useSearchStore((state) => state.searchJobId);
+    const cachedDataset = useSearchStore((state) => state.cachedDataset);
+
+    const {data = SPEED_DEFAULT} = useQuery({
+        queryKey: [
+            "speed",
+            searchJobId,
+            cachedDataset,
+        ],
+        queryFn: async () => {
+            if (null === searchJobId) {
+                return SPEED_DEFAULT;
+            }
+            const {bytes, duration} = await fetchQuerySpeed(cachedDataset ?? "", searchJobId);
+            return {latency: duration, speed: bytes / duration};
+        },
+        enabled: SEARCH_UI_STATE.DONE === searchUiState,
+        refetchInterval: false,
+    });
+    const {latency, speed} = data;
+    return (
+        <Text type={"secondary"}>
+            {` in ${latency.toFixed(3)} seconds (${formatSizeInBytes(speed)}/s)`}
+        </Text>
+    );
+};
+
+export default QuerySpeed;

components/webui/client/src/pages/SearchPage/SearchControls/QueryStatus/QuerySpeed/utils.ts

@@ -0,0 +1,64 @@
+import {querySql} from "../../../../../api/sql";
+import {settings} from "../../../../../settings";
+
+
+/**
+ * Builds a SQL query string to retrieve the total uncompressed bytes and duration
+ * for a specific query job within a given dataset.
+ *
+ * @param datasetName
+ * @param jobId
+ * @return
+ */
+const buildQuerySpeedSql = (datasetName: string, jobId: string) => {
+    const tableName = "" === datasetName ?
+        settings.SqlDbClpArchivesTableName :
+        `${settings.SqlDbClpTablePrefix}${datasetName}_archives`;
+
+    return `WITH qt AS (
+    SELECT job_id, archive_id
+    FROM query_tasks
+    WHERE
+        archive_id IS NOT NULL
+        AND job_id = ${jobId}
+),
+totals AS (
+    SELECT
+        qt.job_id,
+        SUM(ca.uncompressed_size) AS total_uncompressed_bytes
+    FROM qt
+    JOIN ${tableName} ca
+    ON qt.archive_id = ca.id
+)
+SELECT
+    CAST(totals.total_uncompressed_bytes AS double) AS bytes,
+    qj.duration AS duration
+FROM query_jobs qj
+JOIN totals
+ON totals.job_id = qj.id`;
+};
+
+interface QuerySpeedResp {
+    bytes: number;
+    duration: number;
+}
+
+/**
+ * Fetches the query speed data (bytes and duration) for a specific job ID
+ * within a given dataset by executing a SQL query.
+ *
+ * @param datasetName
+ * @param jobId
+ * @return
+ */
+const fetchQuerySpeed = async (datasetName: string, jobId: string): Promise<QuerySpeedResp> => {
+    const resp = await querySql<QuerySpeedResp[]>(buildQuerySpeedSql(datasetName, jobId));
+    const [data] = resp.data;
+    if ("undefined" === typeof data) {
+        throw new Error("Invalid query speed.");
+    }
+
+    return data;
+};
+
+export {fetchQuerySpeed};

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

@@ -10,6 +10,7 @@ import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
 import OpenQueryDrawerButton from "./OpenQueryDrawerButton";
 import QueryDrawer from "./QueryDrawer";
+import QuerySpeed from "./QuerySpeed";
 import Results from "./Results";
 
 
@@ -90,6 +91,7 @@ const QueryStatus = () => {
                     <Results/>
                     {" "}
                     <Text type={"secondary"}>results</Text>
+                    {CLP_QUERY_ENGINES.PRESTO !== SETTINGS_QUERY_ENGINE && <QuerySpeed/>}
                 </>
             )}
             {searchUiState === SEARCH_UI_STATE.FAILED && (