refactor(new-webui): Remove redundant StatCard and DetailsCard. (#1088)

Author: hoophalab

components/webui/client/src/components/Stat/index.tsx

@@ -0,0 +1,34 @@
+import {
+    theme,
+    Typography,
+} from "antd";
+
+
+const {Text} = Typography;
+
+interface StatProps {
+    text: string;
+    fontSize?: string;
+    color?: string;
+}
+
+/**
+ * A text component for displaying statistical values.
+ *
+ * @param props
+ * @param props.text
+ * @param props.color
+ * @param props.fontSize
+ * @return
+ */
+const Stat = ({text, color, fontSize}: StatProps) => {
+    const {token} = theme.useToken();
+    return (
+        <Text style={{color: color ?? token.colorTextSecondary, fontSize: fontSize ?? "1.4rem"}}>
+            {text}
+        </Text>
+    );
+};
+
+
+export default Stat;

components/webui/client/src/components/StatCard/index.module.css

@@ -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,12 @@ interface FilesProps {
  */
 const Files = ({numFiles, isLoading}: FilesProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={(numFiles ?? 0).toString()}
-            title={"Files"}/>
+            title={"Files"}
+        >
+            <Stat text={(numFiles ?? 0).toString()}/>
+        </DashboardCard>
     );
 };
 

components/webui/client/src/components/StatCard/index.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,12 @@ interface MessagesProps {
  */
 const Messages = ({numMessages, isLoading}: MessagesProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={(numMessages ?? 0).toString()}
-            title={"Messages"}/>
+            title={"Messages"}
+        >
+            <Stat text={(numMessages ?? 0).toString()}/>
+        </DashboardCard>
     );
 };
 

components/webui/client/src/pages/IngestPage/Details/DetailsCard.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,12 @@ const TimeRange = ({beginDate, endDate, isLoading}: TimeRangeProps) => {
     }
 
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={stat}
-            title={"Time Range"}/>
+            title={"Time Range"}
+        >
+            <Stat text={stat}/>
+        </DashboardCard>
     );
 };
 

components/webui/client/src/pages/IngestPage/Details/Files.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>
     );
 };
 

components/webui/client/src/pages/IngestPage/Details/Messages.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,12 @@ interface CompressedSizeProps {
  */
 const CompressedSize = ({compressedSize, isLoading}: CompressedSizeProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={formatSizeInBytes(compressedSize, false)}
-            title={"Compressed Size"}/>
+            title={"Compressed Size"}
+        >
+            <Stat text={formatSizeInBytes(compressedSize, false)}/>
+        </DashboardCard>
     );
 };
 

components/webui/client/src/pages/IngestPage/Details/TimeRange.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,12 @@ interface UncompressedSizeProps {
  */
 const UncompressedSize = ({uncompressedSize, isLoading}: UncompressedSizeProps) => {
     return (
-        <DetailsCard
+        <DashboardCard
             isLoading={isLoading}
-            stat={formatSizeInBytes(uncompressedSize, false)}
-            title={"Uncompressed Size"}/>
+            title={"Uncompressed Size"}
+        >
+            <Stat text={formatSizeInBytes(uncompressedSize, false)}/>
+        </DashboardCard>
     );
 };