feat(new-webui): Add card to Ingestion page showing time range, file count, and message count.

components/log-viewer-webui/client/src/components/DashboardCard/index.module.css

@@ -0,0 +1,13 @@
+.card :global(.ant-card-head) {
+    border: 0px;
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+}
+
+.title {
+    font-size: 1.5rem;
+    font-weight: 600;
+}

components/log-viewer-webui/client/src/components/DashboardCard/index.tsx

@@ -0,0 +1,50 @@
+import {
+    Card,
+    Typography,
+} from "antd";
+
+import styles from "./index.module.css";
+
+
+const {Text} = Typography;
+
+interface DashboardCardProps {
+    title: string;
+    titleColor?: string;
+    backgroundColor?: string;
+    children?: React.ReactNode;
+}
+
+/**
+ * Renders a card for dashboard.
+ *
+ * @param props
+ * @param props.title
+ * @param props.titleColor
+ * @param props.backgroundColor
+ * @param props.children
+ * @return
+ */
+const DashboardCard = ({title, titleColor, backgroundColor, children}: DashboardCardProps) => {
+    return (
+        <Card
+            className={styles["card"] || ""}
+            hoverable={true}
+            style={{backgroundColor}}
+        >
+            <div className={styles["cardContent"]}>
+                <Text
+                    className={styles["title"] || ""}
+                    style={{color: titleColor}}
+                >
+                    {title}
+                </Text>
+                {children}
+            </div>
+        </Card>
+    );
+};
+
+export {DashboardCard};
+
+export type {DashboardCardProps};

components/log-viewer-webui/client/src/components/StatCard/index.module.css

@@ -1,17 +0,0 @@
-.card :global(.ant-card-head) {
-    border: 0px;
-}
-
-.cardContent {
-    display: flex;
-    flex-direction: column;
-}
-
-.title {
-    font-size: 1.5rem;
-    font-weight: 600;
-}
-
-.statistic {
-    font-size: 5rem;
-}

components/log-viewer-webui/client/src/components/StatCard/index.tsx

@@ -1,53 +1,58 @@
-import {
-    Card,
-    Typography,
-} from "antd";
+import {Typography} from "antd";
 
-import styles from "./index.module.css";
+import {
+    DashboardCard,
+    DashboardCardProps,
+} from "../DashboardCard/index";
 
 
 const {Text} = Typography;
 
 interface StatCardProps {
     title: string;
     stat: string;
-    textColor?: string;
+    titleColor?: string;
     backgroundColor?: string;
+    statSize?: string;
+    statColor?: string;
 }
 
 /**
- * Renders a card that dislays a statistic.
+ * Renders a card with a statistic.
  *
  * @param props
  * @param props.title
  * @param props.stat
- * @param props.textColor
+ * @param props.titleColor
  * @param props.backgroundColor
+ * @param props.statSize
+ * @param props.statColor
  * @return
  */
-const StatCard = ({title, stat, textColor, backgroundColor}: StatCardProps) => {
+const StatCard = ({
+    title,
+    stat,
+    titleColor,
+    backgroundColor,
+    statSize,
+    statColor,
+}: StatCardProps) => {
+    const props: DashboardCardProps = {
+        title,
+        ...(titleColor ?
+            {titleColor} :
+            {}),
+        ...(backgroundColor ?
+            {backgroundColor} :
+            {}),
+    };
+
     return (
-        <Card
-            className={styles["card"] || ""}
-            hoverable={true}
-            style={{backgroundColor}}
-        >
-            <div className={styles["cardContent"]}>
-                <Text
-                    className={styles["title"] || ""}
-                    style={{color: textColor}}
-                >
-                    {title}
-                </Text>
-                <Text
-                    className={styles["statistic"] || ""}
-                    style={{color: textColor}}
-                >
-                    {stat}
-                </Text>
-            </div>
-        </Card>
+        <DashboardCard {...props}>
+            <Text style={{color: statColor, fontSize: statSize}}>
+                {stat}
+            </Text>
+        </DashboardCard>
     );
 };
-
 export default StatCard;

components/log-viewer-webui/client/src/pages/IngestPage/Details/DetailsCard.tsx

@@ -0,0 +1,30 @@
+import {theme} from "antd";
+
+import StatCard from "../../../components/StatCard";
+
+
+interface DetailsCardProps {
+    title: string;
+    stat: string;
+}
+
+/**
+ * A stat card in the details grid.
+ *
+ * @param props
+ * @param props.title
+ * @param props.stat
+ * @return
+ */
+const DetailsCard = ({title, stat}: DetailsCardProps) => {
+    const {token} = theme.useToken();
+    return (
+        <StatCard
+            stat={stat}
+            statColor={token.colorTextSecondary}
+            statSize={"1.3rem"}
+            title={title}/>
+    );
+};
+
+export default DetailsCard;

components/log-viewer-webui/client/src/pages/IngestPage/Details/Files.tsx

@@ -0,0 +1,21 @@
+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.
+ *
+ * @return
+ */
+const Files = () => {
+    return (
+        <DetailsCard
+            stat={DUMMY_FILES.toString()}
+            title={"Files"}/>
+    );
+};
+
+export default Files;

components/log-viewer-webui/client/src/pages/IngestPage/Details/Messages.tsx

@@ -0,0 +1,21 @@
+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.
+ *
+ * @return
+ */
+const Messages = () => {
+    return (
+        <DetailsCard
+            stat={DUMMY_MESSAGES.toString()}
+            title={"Messages"}/>
+    );
+};
+
+export default Messages;

components/log-viewer-webui/client/src/pages/IngestPage/Details/TimeRange.tsx

@@ -0,0 +1,29 @@
+import dayjs from "dayjs";
+
+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.
+ *
+ * @return
+ */
+const TimeRange = () => {
+    const formattedStat = `${dayjs(DUMMY_START_DATE).format(DATE_FORMAT)} -
+        ${dayjs(DUMMY_END_DATE).format(DATE_FORMAT)}`;
+
+    return (
+        <DetailsCard
+            stat={formattedStat}
+            title={"Time Range"}/>
+    );
+};
+
+export default TimeRange;

components/log-viewer-webui/client/src/pages/IngestPage/Details/index.module.css

@@ -0,0 +1,10 @@
+.detailsGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 200px);
+    gap: 8px;
+}
+
+.timeRange {
+    grid-column: span 2;
+}
+

components/log-viewer-webui/client/src/pages/IngestPage/Details/index.tsx

@@ -0,0 +1,24 @@
+import Files from "./Files";
+import styles from "./index.module.css";
+import Messages from "./Messages";
+import TimeRange from "./TimeRange";
+
+
+/**
+ * Renders grid with compression details.
+ *
+ * @return
+ */
+const Details = () => {
+    return (
+        <div className={styles["detailsGrid"]}>
+            <div className={styles["timeRange"]}>
+                <TimeRange/>
+            </div>
+            <Messages/>
+            <Files/>
+        </div>
+    );
+};
+
+export default Details;

components/log-viewer-webui/client/src/pages/IngestPage/SpaceSavings/index.tsx

@@ -9,7 +9,7 @@ const DUMMY_COMPRESSED_SIZE = 1004023;
 const DUMMY_UNCOMPRESSED_SIZE = 110300010;
 
 /**
- * Presents space savings or compression ratio from the given statistics.
+ * Renders space savings card.
  *
  * @return
  */
@@ -18,7 +18,7 @@ const SpaceSavings = () => {
     const compressedSize = DUMMY_COMPRESSED_SIZE as number;
     const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE as number;
 
-    const spaceSavingsPercent = (0 === uncompressedSize) ?
+    const spaceSavingsPercent = (0 !== uncompressedSize) ?
         100 * (1 - (compressedSize / uncompressedSize)) :
         0;
 
@@ -28,10 +28,11 @@ const SpaceSavings = () => {
         <StatCard
             backgroundColor={token.colorPrimary}
             stat={spaceSavingsPercentText}
-            textColor={token.colorWhite}
-            title={"Space Savings"}/>
+            statColor={token.colorWhite}
+            statSize={"6rem"}
+            title={"Space Savings"}
+            titleColor={token.colorWhite}/>
     );
 };
 
-
 export default SpaceSavings;

components/log-viewer-webui/client/src/pages/IngestPage/index.tsx

@@ -1,3 +1,4 @@
+import Details from "./Details";
 import styles from "./index.module.css";
 import SpaceSavings from "./SpaceSavings";
 
@@ -11,6 +12,7 @@ const IngestPage = () => {
     return (
         <div className={styles["ingestPageGrid"]}>
             <SpaceSavings/>
+            <Details/>
         </div>
     );
 };