feat(new-webui): Add panel to ingest page with mocked compression statistics.

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

@@ -0,0 +1,17 @@
+.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

@@ -0,0 +1,53 @@
+import {
+    Card,
+    Typography,
+} from "antd";
+
+import styles from "./index.module.css";
+
+
+const {Text} = Typography;
+
+interface StatCardProps {
+    title: string;
+    stat: string;
+    textColor?: string;
+    backgroundColor?: string;
+}
+
+/**
+ * Renders a card that dislays a statistic.
+ *
+ * @param props
+ * @param props.title
+ * @param props.stat
+ * @param props.textColor
+ * @param props.backgroundColor
+ * @return
+ */
+const StatCard = ({title, stat, textColor, backgroundColor}: StatCardProps) => {
+    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>
+    );
+};
+
+export default StatCard;

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

@@ -0,0 +1,37 @@
+import {theme} from "antd";
+
+import StatCard from "../../../components/StatCard";
+
+
+// eslint-disable-next-line no-warning-comments
+// TODO: Replace with values from database once api implemented.
+const DUMMY_COMPRESSED_SIZE = 1004023;
+const DUMMY_UNCOMPRESSED_SIZE = 110300010;
+
+/**
+ * Presents space savings or compression ratio from the given statistics.
+ *
+ * @return
+ */
+const SpaceSavings = () => {
+    const {token} = theme.useToken();
+    const compressedSize = DUMMY_COMPRESSED_SIZE as number;
+    const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE as number;
+
+    const spaceSavingsPercent = (0 === uncompressedSize) ?
+        100 * (1 - (compressedSize / uncompressedSize)) :
+        0;
+
+    const spaceSavingsPercentText = `${spaceSavingsPercent.toFixed(2)}%`;
+
+    return (
+        <StatCard
+            backgroundColor={token.colorPrimary}
+            stat={spaceSavingsPercentText}
+            textColor={token.colorWhite}
+            title={"Space Savings"}/>
+    );
+};
+
+
+export default SpaceSavings;

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

@@ -0,0 +1,6 @@
+.ingestPageGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 400px);
+    padding: 20px;
+    gap: 20px;
+}

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

@@ -0,0 +1,19 @@
+import styles from "./index.module.css";
+import SpaceSavings from "./SpaceSavings";
+
+
+/**
+ * Presents compression statistics.
+ *
+ * @return
+ */
+const IngestPage = () => {
+    return (
+        <div className={styles["ingestPageGrid"]}>
+            <SpaceSavings/>
+        </div>
+    );
+};
+
+
+export default IngestPage;