From 0ccee94103e57de94d667c4683679eb6bed1713d Mon Sep 17 00:00:00 2001
From: hoophalab <200652805+hoophalab@users.noreply.github.com>
Date: Tue, 8 Jul 2025 01:27:19 -0400
Subject: [PATCH 1/3] refactor: Replace with `StatCard` and `DetailsCard` with
 dependency injection.

---
 .../client/src/components/Stat/index.tsx      | 34 ++++++++++
 .../src/components/StatCard/index.module.css  |  0
 .../client/src/components/StatCard/index.tsx  | 62 -------------------
 .../pages/IngestPage/Details/DetailsCard.tsx  | 33 ----------
 .../src/pages/IngestPage/Details/Files.tsx    | 13 ++--
 .../src/pages/IngestPage/Details/Messages.tsx | 13 ++--
 .../pages/IngestPage/Details/TimeRange.tsx    | 13 ++--
 .../src/pages/IngestPage/Jobs/index.tsx       | 30 ++++-----
 .../SpaceSavings/CompressedSize.tsx           | 13 ++--
 .../SpaceSavings/UncompressedSize.tsx         | 13 ++--
 .../pages/IngestPage/SpaceSavings/index.tsx   | 18 ++++--
 .../client/src/pages/IngestPage/index.tsx     |  4 +-
 12 files changed, 106 insertions(+), 140 deletions(-)
 create mode 100644 components/webui/client/src/components/Stat/index.tsx
 delete mode 100644 components/webui/client/src/components/StatCard/index.module.css
 delete mode 100644 components/webui/client/src/components/StatCard/index.tsx
 delete mode 100644 components/webui/client/src/pages/IngestPage/Details/DetailsCard.tsx

diff --git a/components/webui/client/src/components/Stat/index.tsx b/components/webui/client/src/components/Stat/index.tsx
new file mode 100644
index 0000000000..dfc8a681ed
--- /dev/null
+++ b/components/webui/client/src/components/Stat/index.tsx
@@ -0,0 +1,34 @@
+import {
+    theme,
+    Typography,
+} from "antd";
+
+
+const {Text} = Typography;
+
+interface StatCardProps {
+    children: React.ReactNode;
+    fontSize?: string;
+    color?: string;
+}
+
+/**
+ * A text component for displaying statistical values in `DashboardCard`.
+ *
+ * @param props
+ * @param props.children
+ * @param props.color
+ * @param props.fontSize
+ * @return
+ */
+const Stat = ({children, color, fontSize}: StatCardProps) => {
+    const {token} = theme.useToken();
+    return (
+        <Text style={{color: color ?? token.colorTextSecondary, fontSize: fontSize ?? "1.4rem"}}>
+            {children}
+        </Text>
+    );
+};
+
+
+export default Stat;
diff --git a/components/webui/client/src/components/StatCard/index.module.css b/components/webui/client/src/components/StatCard/index.module.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/components/webui/client/src/components/StatCard/index.tsx b/components/webui/client/src/components/StatCard/index.tsx
deleted file mode 100644
index 8b5cff4c85..0000000000
--- a/components/webui/client/src/components/StatCard/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import {Typography} from "antd";
-
-import {
-    DashboardCard,
-    DashboardCardProps,
-} from "../DashboardCard/index";
-
-
-const {Text} = Typography;
-
-interface StatCardProps {
-    title: string;
-    stat: string;
-    titleColor?: string;
-    backgroundColor?: string;
-    statSize?: string;
-    statColor?: string;
-    isLoading?: boolean;
-}
-
-/**
- * Renders a card with a statistic.
- *
- * @param props
- * @param props.title
- * @param props.stat
- * @param props.titleColor
- * @param props.backgroundColor
- * @param props.statSize
- * @param props.statColor
- * @param props.isLoading
- * @return
- */
-const StatCard = ({
-    title,
-    stat,
-    titleColor,
-    backgroundColor,
-    statSize,
-    statColor,
-    isLoading = false,
-}: StatCardProps) => {
-    const props: DashboardCardProps = {
-        title,
-        isLoading,
-        ...(titleColor ?
-            {titleColor} :
-            {}),
-        ...(backgroundColor ?
-            {backgroundColor} :
-            {}),
-    };
-
-    return (
-        <DashboardCard {...props}>
-            <Text style={{color: statColor, fontSize: statSize}}>
-                {stat}
-            </Text>
-        </DashboardCard>
-    );
-};
-export default StatCard;
diff --git a/components/webui/client/src/pages/IngestPage/Details/DetailsCard.tsx b/components/webui/client/src/pages/IngestPage/Details/DetailsCard.tsx
deleted file mode 100644
index fb497d0260..0000000000
--- a/components/webui/client/src/pages/IngestPage/Details/DetailsCard.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {theme} from "antd";
-
-import StatCard from "../../../components/StatCard";
-
-
-interface DetailsCardProps {
-    title: string;
-    stat: string;
-    isLoading: boolean;
-}
-
-/**
- * A stat card in the details grid.
- *
- * @param props
- * @param props.title
- * @param props.stat
- * @param props.isLoading
- * @return
- */
-const DetailsCard = ({title, stat, isLoading}: DetailsCardProps) => {
-    const {token} = theme.useToken();
-    return (
-        <StatCard
-            isLoading={isLoading}
-            stat={stat}
-            statColor={token.colorTextSecondary}
-            statSize={"1.4rem"}
-            title={title}/>
-    );
-};
-
-export default DetailsCard;
diff --git a/components/webui/client/src/pages/IngestPage/Details/Files.tsx b/components/webui/client/src/pages/IngestPage/Details/Files.tsx
index add17909f9..3b3592375f 100644
--- a/components/webui/client/src/pages/IngestPage/Details/Files.tsx
+++ b/components/webui/client/src/pages/IngestPage/Details/Files.tsx
@@ -1,6 +1,7 @@
 import {Nullable} from "src/typings/common";
 
-import DetailsCard from "./DetailsCard";
+import {DashboardCard} from "../../../components/DashboardCard";
+import Stat from "../../../components/Stat";
 
 
 interface FilesProps {
@@ -18,10 +19,14 @@ interface FilesProps {
  */
 const Files = ({numFiles, isLoading}: FilesProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={(numFiles ?? 0).toString()}
-            title={"Files"}/>
+            title={"Files"}
+        >
+            <Stat>
+                {(numFiles ?? 0).toString()}
+            </Stat>
+        </DashboardCard>
     );
 };
 
diff --git a/components/webui/client/src/pages/IngestPage/Details/Messages.tsx b/components/webui/client/src/pages/IngestPage/Details/Messages.tsx
index 8c7221b0ad..0cb6275c1a 100644
--- a/components/webui/client/src/pages/IngestPage/Details/Messages.tsx
+++ b/components/webui/client/src/pages/IngestPage/Details/Messages.tsx
@@ -1,6 +1,7 @@
 import {Nullable} from "src/typings/common";
 
-import DetailsCard from "./DetailsCard";
+import {DashboardCard} from "../../../components/DashboardCard";
+import Stat from "../../../components/Stat";
 
 
 interface MessagesProps {
@@ -18,10 +19,14 @@ interface MessagesProps {
  */
 const Messages = ({numMessages, isLoading}: MessagesProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={(numMessages ?? 0).toString()}
-            title={"Messages"}/>
+            title={"Messages"}
+        >
+            <Stat>
+                {(numMessages ?? 0).toString()}
+            </Stat>
+        </DashboardCard>
     );
 };
 
diff --git a/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx b/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
index 1672cb4939..e0ed57b315 100644
--- a/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
+++ b/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
@@ -1,6 +1,7 @@
 import {Dayjs} from "dayjs";
 
-import DetailsCard from "./DetailsCard";
+import {DashboardCard} from "../../../components/DashboardCard";
+import Stat from "../../../components/Stat";
 
 
 const DATE_FORMAT = "MMMM D, YYYY";
@@ -29,10 +30,14 @@ const TimeRange = ({beginDate, endDate, isLoading}: TimeRangeProps) => {
     }
 
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={stat}
-            title={"Time Range"}/>
+            title={"Time Range"}
+        >
+            <Stat>
+                {stat}
+            </Stat>
+        </DashboardCard>
     );
 };
 
diff --git a/components/webui/client/src/pages/IngestPage/Jobs/index.tsx b/components/webui/client/src/pages/IngestPage/Jobs/index.tsx
index 685aef96db..24c752ee3d 100644
--- a/components/webui/client/src/pages/IngestPage/Jobs/index.tsx
+++ b/components/webui/client/src/pages/IngestPage/Jobs/index.tsx
@@ -18,18 +18,12 @@ import {convertQueryJobsItemToJobData} from "./utils";
 
 const DAYS_TO_SHOW: number = 30;
 
-interface JobsProps {
-    className: string;
-}
-
 /**
  * Renders table with ingestion jobs inside a card.
  *
- * @param props
- * @param props.className
  * @return
  */
-const Jobs = ({className}: JobsProps) => {
+const Jobs = () => {
     const {data: jobs = [], isPending} = useQuery({
         queryKey: ["jobs"],
         queryFn: async () => {
@@ -41,17 +35,17 @@ const Jobs = ({className}: JobsProps) => {
     });
 
     return (
-        <div className={className}>
-            <DashboardCard title={"Ingestion Jobs"}>
-                <VirtualTable<JobData>
-                    className={styles["jobs"] || ""}
-                    columns={jobColumns}
-                    dataSource={jobs}
-                    loading={isPending}
-                    pagination={false}
-                    scroll={{y: 400}}/>
-            </DashboardCard>
-        </div>
+        <DashboardCard
+            isLoading={isPending}
+            title={"Ingestion Jobs"}
+        >
+            <VirtualTable<JobData>
+                className={styles["jobs"] || ""}
+                columns={jobColumns}
+                dataSource={jobs}
+                pagination={false}
+                scroll={{y: 400}}/>
+        </DashboardCard>
     );
 };
 
diff --git a/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx b/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
index 3663ecc854..3526c7cd8b 100644
--- a/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
+++ b/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
@@ -1,4 +1,5 @@
-import DetailsCard from "../Details/DetailsCard";
+import {DashboardCard} from "../../../components/DashboardCard";
+import Stat from "../../../components/Stat";
 import {formatSizeInBytes} from "../Jobs/units";
 
 
@@ -17,10 +18,14 @@ interface CompressedSizeProps {
  */
 const CompressedSize = ({compressedSize, isLoading}: CompressedSizeProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={formatSizeInBytes(compressedSize, false)}
-            title={"Compressed Size"}/>
+            title={"Compressed Size"}
+        >
+            <Stat>
+                {formatSizeInBytes(compressedSize, false)}
+            </Stat>
+        </DashboardCard>
     );
 };
 
diff --git a/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx b/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
index c61471d724..7351a2bacf 100644
--- a/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
+++ b/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
@@ -1,4 +1,5 @@
-import DetailsCard from "../Details/DetailsCard";
+import {DashboardCard} from "../../../components/DashboardCard";
+import Stat from "../../../components/Stat";
 import {formatSizeInBytes} from "../Jobs/units";
 
 
@@ -17,10 +18,14 @@ interface UncompressedSizeProps {
  */
 const UncompressedSize = ({uncompressedSize, isLoading}: UncompressedSizeProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={formatSizeInBytes(uncompressedSize, false)}
-            title={"Uncompressed Size"}/>
+            title={"Uncompressed Size"}
+        >
+            <Stat>
+                {formatSizeInBytes(uncompressedSize, false)}
+            </Stat>
+        </DashboardCard>
     );
 };
 
diff --git a/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx b/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
index 1d0d3e65f7..7e8350d11d 100644
--- a/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
+++ b/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
@@ -1,7 +1,8 @@
 import {useQuery} from "@tanstack/react-query";
 import {theme} from "antd";
 
-import StatCard from "../../../components/StatCard";
+import Stat from "../../..//components/Stat";
+import {DashboardCard} from "../../../components/DashboardCard";
 import {
     CLP_STORAGE_ENGINES,
     SETTINGS_STORAGE_ENGINE,
@@ -58,14 +59,19 @@ const SpaceSavings = () => {
     return (
         <div className={styles["spaceSavingsGrid"]}>
             <div className={styles["spaceSavingsCard"]}>
-                <StatCard
+                <DashboardCard
                     backgroundColor={token.colorPrimary}
                     isLoading={isPending}
-                    stat={spaceSavingsPercentText}
-                    statColor={token.colorWhite}
-                    statSize={"5.5rem"}
                     title={"Space Savings"}
-                    titleColor={token.colorWhite}/>
+                    titleColor={token.colorWhite}
+                >
+                    <Stat
+                        color={token.colorWhite}
+                        fontSize={"5.5rem"}
+                    >
+                        {spaceSavingsPercentText}
+                    </Stat>
+                </DashboardCard>
             </div>
             <UncompressedSize
                 isLoading={isPending}
diff --git a/components/webui/client/src/pages/IngestPage/index.tsx b/components/webui/client/src/pages/IngestPage/index.tsx
index 0735d95670..7fe3b81643 100644
--- a/components/webui/client/src/pages/IngestPage/index.tsx
+++ b/components/webui/client/src/pages/IngestPage/index.tsx
@@ -14,7 +14,9 @@ const IngestPage = () => {
         <div className={styles["ingestPageGrid"]}>
             <SpaceSavings/>
             <Details/>
-            <Jobs className={styles["jobs"] || ""}/>
+            <div className={styles["jobs"] || ""}>
+                <Jobs/>
+            </div>
         </div>
     );
 };

From 81d9e335ca2318701f38dad0bcbf251c52e266e3 Mon Sep 17 00:00:00 2001
From: hoophalab <200652805+hoophalab@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:37:27 -0400
Subject: [PATCH 2/3] Fix typo and make stat accept text instead of children.

---
 .../webui/client/src/components/Stat/index.tsx       | 12 ++++++------
 .../client/src/pages/IngestPage/Details/Files.tsx    |  4 +---
 .../client/src/pages/IngestPage/Details/Messages.tsx |  4 +---
 .../src/pages/IngestPage/Details/TimeRange.tsx       |  4 +---
 .../pages/IngestPage/SpaceSavings/CompressedSize.tsx |  4 +---
 .../IngestPage/SpaceSavings/UncompressedSize.tsx     |  4 +---
 .../src/pages/IngestPage/SpaceSavings/index.tsx      |  6 ++----
 7 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/components/webui/client/src/components/Stat/index.tsx b/components/webui/client/src/components/Stat/index.tsx
index dfc8a681ed..13a00bab75 100644
--- a/components/webui/client/src/components/Stat/index.tsx
+++ b/components/webui/client/src/components/Stat/index.tsx
@@ -6,26 +6,26 @@ import {
 
 const {Text} = Typography;
 
-interface StatCardProps {
-    children: React.ReactNode;
+interface StatProps {
+    text: string;
     fontSize?: string;
     color?: string;
 }
 
 /**
- * A text component for displaying statistical values in `DashboardCard`.
+ * A text component for displaying statistical values.
  *
  * @param props
- * @param props.children
+ * @param props.text
  * @param props.color
  * @param props.fontSize
  * @return
  */
-const Stat = ({children, color, fontSize}: StatCardProps) => {
+const Stat = ({text, color, fontSize}: StatProps) => {
     const {token} = theme.useToken();
     return (
         <Text style={{color: color ?? token.colorTextSecondary, fontSize: fontSize ?? "1.4rem"}}>
-            {children}
+            {text}
         </Text>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/Details/Files.tsx b/components/webui/client/src/pages/IngestPage/Details/Files.tsx
index 3b3592375f..5e5b913719 100644
--- a/components/webui/client/src/pages/IngestPage/Details/Files.tsx
+++ b/components/webui/client/src/pages/IngestPage/Details/Files.tsx
@@ -23,9 +23,7 @@ const Files = ({numFiles, isLoading}: FilesProps) => {
             isLoading={isLoading}
             title={"Files"}
         >
-            <Stat>
-                {(numFiles ?? 0).toString()}
-            </Stat>
+            <Stat text={(numFiles ?? 0).toString()}/>
         </DashboardCard>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/Details/Messages.tsx b/components/webui/client/src/pages/IngestPage/Details/Messages.tsx
index 0cb6275c1a..a43c3c2f5d 100644
--- a/components/webui/client/src/pages/IngestPage/Details/Messages.tsx
+++ b/components/webui/client/src/pages/IngestPage/Details/Messages.tsx
@@ -23,9 +23,7 @@ const Messages = ({numMessages, isLoading}: MessagesProps) => {
             isLoading={isLoading}
             title={"Messages"}
         >
-            <Stat>
-                {(numMessages ?? 0).toString()}
-            </Stat>
+            <Stat text={(numMessages ?? 0).toString()}/>
         </DashboardCard>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx b/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
index e0ed57b315..17315a53fa 100644
--- a/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
+++ b/components/webui/client/src/pages/IngestPage/Details/TimeRange.tsx
@@ -34,9 +34,7 @@ const TimeRange = ({beginDate, endDate, isLoading}: TimeRangeProps) => {
             isLoading={isLoading}
             title={"Time Range"}
         >
-            <Stat>
-                {stat}
-            </Stat>
+            <Stat text={stat}/>
         </DashboardCard>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx b/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
index 3526c7cd8b..870a1dc9ae 100644
--- a/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
+++ b/components/webui/client/src/pages/IngestPage/SpaceSavings/CompressedSize.tsx
@@ -22,9 +22,7 @@ const CompressedSize = ({compressedSize, isLoading}: CompressedSizeProps) => {
             isLoading={isLoading}
             title={"Compressed Size"}
         >
-            <Stat>
-                {formatSizeInBytes(compressedSize, false)}
-            </Stat>
+            <Stat text={formatSizeInBytes(compressedSize, false)}/>
         </DashboardCard>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx b/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
index 7351a2bacf..b6ce708cbe 100644
--- a/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
+++ b/components/webui/client/src/pages/IngestPage/SpaceSavings/UncompressedSize.tsx
@@ -22,9 +22,7 @@ const UncompressedSize = ({uncompressedSize, isLoading}: UncompressedSizeProps)
             isLoading={isLoading}
             title={"Uncompressed Size"}
         >
-            <Stat>
-                {formatSizeInBytes(uncompressedSize, false)}
-            </Stat>
+            <Stat text={formatSizeInBytes(uncompressedSize, false)}/>
         </DashboardCard>
     );
 };
diff --git a/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx b/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
index 7e8350d11d..8cb669837d 100644
--- a/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
+++ b/components/webui/client/src/pages/IngestPage/SpaceSavings/index.tsx
@@ -1,8 +1,8 @@
 import {useQuery} from "@tanstack/react-query";
 import {theme} from "antd";
 
-import Stat from "../../..//components/Stat";
 import {DashboardCard} from "../../../components/DashboardCard";
+import Stat from "../../../components/Stat";
 import {
     CLP_STORAGE_ENGINES,
     SETTINGS_STORAGE_ENGINE,
@@ -68,9 +68,7 @@ const SpaceSavings = () => {
                     <Stat
                         color={token.colorWhite}
                         fontSize={"5.5rem"}
-                    >
-                        {spaceSavingsPercentText}
-                    </Stat>
+                        text={spaceSavingsPercentText}/>
                 </DashboardCard>
             </div>
             <UncompressedSize

From 3267a093c2a1e568999bf35783eec3e7e93bcfef Mon Sep 17 00:00:00 2001
From: hoophalab <200652805+hoophalab@users.noreply.github.com>
Date: Wed, 9 Jul 2025 15:39:39 -0400
Subject: [PATCH 3/3] Rename Jobs -> JobsGrid in css.

---
 components/webui/client/src/pages/IngestPage/index.module.css | 2 +-
 components/webui/client/src/pages/IngestPage/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/webui/client/src/pages/IngestPage/index.module.css b/components/webui/client/src/pages/IngestPage/index.module.css
index ed4f36eca8..a71c2aaa6b 100644
--- a/components/webui/client/src/pages/IngestPage/index.module.css
+++ b/components/webui/client/src/pages/IngestPage/index.module.css
@@ -7,6 +7,6 @@
     gap: 20px;
 }
 
-.jobs {
+.jobsGrid {
     grid-column: 1 / -1;
 }
diff --git a/components/webui/client/src/pages/IngestPage/index.tsx b/components/webui/client/src/pages/IngestPage/index.tsx
index 7fe3b81643..d82a8fe9e7 100644
--- a/components/webui/client/src/pages/IngestPage/index.tsx
+++ b/components/webui/client/src/pages/IngestPage/index.tsx
@@ -14,7 +14,7 @@ const IngestPage = () => {
         <div className={styles["ingestPageGrid"]}>
             <SpaceSavings/>
             <Details/>
-            <div className={styles["jobs"] || ""}>
+            <div className={styles["jobsGrid"] || ""}>
                 <Jobs/>
             </div>
         </div>