hoophalab · May 26, 2025 · May 12, 2025 · May 16, 2025 · May 21, 2025 · May 21, 2025
@@ -1,19 +1,17 @@
 import DetailsCard from "./DetailsCard";
 
 
-// eslint-disable-next-line no-warning-comments
-// TODO: Replace with values from database once api implemented.
-const DUMMY_FILES = 124;
-
 /**
  * Renders the files statistic.
  *
+ * @param props
+ * @param props.numFiles
  * @return
  */
-const Files = () => {
+const Files = ({numFiles}: {numFiles: number}) => {
     return (
         <DetailsCard
-            stat={DUMMY_FILES.toString()}
+            stat={numFiles.toString()}
             title={"Files"}/>
     );
 };

@@ -1,19 +1,17 @@
 import DetailsCard from "./DetailsCard";
 
 
-// eslint-disable-next-line no-warning-comments
-// TODO: Replace with values from database once api implemented.
-const DUMMY_MESSAGES = 1235844;
-
 /**
  * Renders the messages statistic.
  *
+ * @param props
+ * @param props.numMessages
  * @return
  */
-const Messages = () => {
+const Messages = ({numMessages}: {numMessages: number}) => {
     return (
         <DetailsCard
-            stat={DUMMY_MESSAGES.toString()}
+            stat={numMessages.toString()}
             title={"Messages"}/>
     );
 };

@@ -1,23 +1,22 @@
-import dayjs from "dayjs";
+import {Dayjs} from "dayjs";
+import {Nullable} from "src/typings/common";
 
 import DetailsCard from "./DetailsCard";
 
 
-// eslint-disable-next-line no-warning-comments
-// TODO: Replace with values from database once api implemented.
-const DUMMY_START_DATE = "2021-12-14";
-const DUMMY_END_DATE = "2025-04-16";
-
 const DATE_FORMAT = "MMMM D, YYYY";
 
 /**
  * Renders the time range statistic.
  *
+ * @param props
+ * @param props.startDate
+ * @param props.endDate
  * @return
  */
-const TimeRange = () => {
-    const formattedStat = `${dayjs(DUMMY_START_DATE).format(DATE_FORMAT)} -
-        ${dayjs(DUMMY_END_DATE).format(DATE_FORMAT)}`;
+const TimeRange = ({startDate, endDate}: {startDate: Nullable<Dayjs>;endDate: Nullable<Dayjs>}) => {
+    const formattedStat = `${startDate?.format(DATE_FORMAT) ?? "N/A"} -
+        ${endDate?.format(DATE_FORMAT) ?? "N/A"}`;
 
     return (
         <DetailsCard

@@ -1,6 +1,22 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+import dayjs, {Dayjs} from "dayjs";
+import {Nullable} from "src/typings/common";
+
+import useRefreshIntervalStore from "../RefreshIntervalState";
+import {querySql} from "../sqlConfig";
 import Files from "./Files";
 import styles from "./index.module.css";
 import Messages from "./Messages";
+import {
+    DetailsResp,
+    getDetailsSql,
+} from "./sql";
 import TimeRange from "./TimeRange";
 
 
@@ -10,13 +26,54 @@ import TimeRange from "./TimeRange";
  * @return
  */
 const Details = () => {
+    const {refreshInterval} = useRefreshIntervalStore();
+    const [startDate, setStartDate] = useState<Nullable<Dayjs>>(null);
+    const [endDate, setEndDate] = useState<Nullable<Dayjs>>(null);
+    const [numFiles, setNumFiles] = useState<number>(0);
+    const [numMessages, setNumMessages] = useState<number>(0);
+    const intervalIdRef = useRef<number>(0);
+
+    const update = useCallback(
+        () => {
+            (async () => {
+                const {data: [resp]} = await querySql<DetailsResp>(getDetailsSql());
+                if ("undefined" === typeof resp) {
+                    throw new Error();
+                }
+                setStartDate(dayjs(resp.begin_timestamp));
+                setEndDate(dayjs(resp.end_timestamp));
+                setNumFiles(resp.num_files);
+                setNumMessages(resp.num_messages);
+            })().catch((error: unknown) => {
+                console.error("An error occurred when fetching details: ", error);
+            });
+        }
+        , [setStartDate,
+            setEndDate,
+            setNumFiles,
+            setNumMessages]
+    );
+
+    useEffect(() => {
+        update();
+        intervalIdRef.current = setInterval(update, refreshInterval);
+
+        return () => {
+            clearInterval(intervalIdRef.current);
+        };
+    }, [refreshInterval,
+        update]);
+
+
     return (
         <div className={styles["detailsGrid"]}>
             <div className={styles["timeRange"]}>
-                <TimeRange/>
+                <TimeRange
+                    endDate={endDate}
+                    startDate={startDate}/>
             </div>
-            <Messages/>
-            <Files/>
+            <Messages numMessages={numMessages}/>
+            <Files numFiles={numFiles}/>
         </div>
     );
 };

@@ -0,0 +1,62 @@
+import {SQL_CONFIG} from "../sqlConfig";
+
+
+/**
+ * Enum of the column names for the `clp_archives` table.
+ *
+ * @enum {string}
+ */
+const CLP_ARCHIVES_TABLE_COLUMN_NAMES = Object.freeze({
+    BEGIN_TIMESTAMP: "begin_timestamp",
+    END_TIMESTAMP: "end_timestamp",
+});
+
+/**
+ * Enum of the column names for the `clp_files` table.
+ *
+ * @enum {string}
+ */
+const CLP_FILES_TABLE_COLUMN_NAMES = Object.freeze({
+    ORIG_FILE_ID: "orig_file_id",
+    NUM_MESSAGES: "num_messages",
+});
+
+/**
+ * Builds the query string to query stats.
+ *
+ * @return
+ */
+const getDetailsSql = () => `
+SELECT
+    a.begin_timestamp         AS begin_timestamp,
+    a.end_timestamp           AS end_timestamp,
+    b.num_files               AS num_files,
+    b.num_messages            AS num_messages
+FROM
+(
+    SELECT
+        MIN(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.BEGIN_TIMESTAMP})   AS begin_timestamp,
+        MAX(${CLP_ARCHIVES_TABLE_COLUMN_NAMES.END_TIMESTAMP})     AS end_timestamp
+    FROM ${SQL_CONFIG.SqlDbClpArchivesTableName}
+) a,
+(
+    SELECT
+        NULLIF(COUNT(DISTINCT ${CLP_FILES_TABLE_COLUMN_NAMES.ORIG_FILE_ID}), 0) AS num_files,
+        SUM(${CLP_FILES_TABLE_COLUMN_NAMES.NUM_MESSAGES})                       AS num_messages
+    FROM ${SQL_CONFIG.SqlDbClpFilesTableName}
+) b;
+`;
+
+interface DetailsItem {
+    begin_timestamp: number;
+    end_timestamp: number;
+    num_files: number;
+    num_messages: number;
+}
+
+type DetailsResp = DetailsItem[];
+
+export type {
+    DetailsItem, DetailsResp,
+};
+export {getDetailsSql};
@@ -1,73 +1,30 @@
+import {
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
 import {Table} from "antd";
+import dayjs from "dayjs";
 
 import {DashboardCard} from "../../../components/DashboardCard";
+import useRefreshIntervalStore from "../RefreshIntervalState";
+import {querySql} from "../sqlConfig";
 import styles from "./index.module.css";
+import {
+    getQueryJobsSql,
+    QueryJobsResp,
+} from "./sql";
 import {
     jobColumns,
     JobData,
 } from "./typings";
+import {convertQueryJobsItemToJobData} from "./utils";
 
 
-// eslint-disable-next-line no-warning-comments
-// TODO: Replace with values from database once api implemented.
-const DUMMY_DATA: JobData[] = [
-    {
-        compressedSize: "460 B",
-        dataIngested: "267 B",
-        jobId: "1",
-        key: "1",
-        speed: "66 B/s",
-        status: "success",
-    },
-    {
-        compressedSize: "5 KB",
-        dataIngested: "50 KB",
-        jobId: "3",
-        key: "3",
-        speed: "10 KB/s",
-        status: "success",
-    },
-    {
-        compressedSize: "800 B",
-        dataIngested: "1 KB",
-        jobId: "5",
-        key: "5",
-        speed: "500 B/s",
-        status: "success",
-    },
-    {
-        compressedSize: "1 KB",
-        dataIngested: "17 KB",
-        jobId: "2",
-        key: "2",
-        speed: "5 KB/s",
-        status: "processing",
-    },
-    {
-        compressedSize: "8 MB",
-        dataIngested: "10 MB",
-        jobId: "4",
-        key: "4",
-        speed: "1 MB/s",
-        status: "processing",
-    },
-    {
-        compressedSize: "0 B",
-        dataIngested: "0 B",
-        jobId: "6",
-        key: "6",
-        speed: "0 B/s",
-        status: "error",
-    },
-    {
-        compressedSize: "450 B",
-        dataIngested: "500 B",
-        jobId: "7",
-        key: "7",
-        speed: "100 B/s",
-        status: "warning",
-    },
-];
+const DAYS_TO_SHOW: number = 30;
+
 
 interface JobsProps {
     className?: string;
@@ -81,13 +38,43 @@ interface JobsProps {
  * @return
  */
 const Jobs = ({className}: JobsProps) => {
+    const {refreshInterval} = useRefreshIntervalStore();
+    const [jobs, setJobs] = useState<JobData[]>([]);
+    const intervalIdRef = useRef<number>(0);
+
+    const update = useCallback(() => {
+        (async () => {
+            const beginTimestamp = dayjs().subtract(DAYS_TO_SHOW, "days")
+                .unix();
+            const {data: resp} = await querySql<QueryJobsResp>(getQueryJobsSql(beginTimestamp));
+            const newJobs = resp
+                .map((item): JobData => convertQueryJobsItemToJobData(item));
+
+            setJobs(newJobs);
+        })().catch((error: unknown) => {
+            console.error("An error occurred when fetching jobs: ", error);
+        });
+    }, [setJobs]);
+
+
+    useEffect(() => {
+        update();
+        intervalIdRef.current = setInterval(update, refreshInterval);
+
+        return () => {
+            clearInterval(intervalIdRef.current);
+        };
+    }, [refreshInterval,
+        update]);
+
+
     return (
         <div className={className}>
             <DashboardCard title={"Ingestion Jobs"}>
                 <Table<JobData>
                     className={styles["jobs"] || ""}
                     columns={jobColumns}
-                    dataSource={DUMMY_DATA}
+                    dataSource={jobs}
                     pagination={false}/>
             </DashboardCard>
         </div>