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

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

@@ -0,0 +1,39 @@
+.card {
+    background-color: #1888fa;
+}
+
+.card :global(.ant-card-head) {
+    border: 0px;
+}
+
+.cardContent {
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.title {
+    font-size: 24px;
+    color: white;
+    font-weight: 600;
+}
+
+.segmented {
+    background-color: transparent;
+    color:white;
+
+}
+
+.segmented :global(.ant-segmented-item-selected) {
+    color:rgba(0, 0, 0, 0.65)
+}
+
+.statistic {
+    font-size: 80px;
+    color: white;
+}

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

@@ -0,0 +1,81 @@
+import {useState} from "react";
+
+import {
+    CloseOutlined,
+    PercentageOutlined,
+} from "@ant-design/icons";
+import {
+    Card,
+    Segmented,
+    Typography,
+} from "antd";
+
+import styles from "./index.module.css";
+import {
+    DEFAULT_SIZE_OPTION,
+    SIZE_OPTION,
+} from "./typings.js";
+
+
+const {Text} = Typography;
+
+// 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 Size = () => {
+    const [segmentedOption, setSegmentedOption] = useState<SIZE_OPTION>(DEFAULT_SIZE_OPTION);
+    const compressedSize = DUMMY_COMPRESSED_SIZE;
+    const uncompressedSize = DUMMY_UNCOMPRESSED_SIZE;
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const spaceSavingsPercent = 0 < compressedSize ?
+        100 * (1 - (compressedSize / uncompressedSize)) :
+        0;
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const compressionRatio = 0 < compressedSize ?
+        uncompressedSize / compressedSize :
+        0;
+
+    const handleChange = (option: SIZE_OPTION) => {
+        setSegmentedOption(option);
+    };
+
+    return (
+        <Card
+            className={styles["card"] || ""}
+            hoverable={true}
+        >
+            <div className={styles["cardContent"]}>
+                <div className={styles["header"]}>
+                    <Text className={styles["title"] || ""}>
+                        {segmentedOption}
+                    </Text>
+                    <Segmented
+                        className={styles["segmented"] || ""}
+                        defaultValue={DEFAULT_SIZE_OPTION}
+                        options={[
+                            {value: SIZE_OPTION.SPACE_SAVINGS, icon: <PercentageOutlined/>},
+                            {value: SIZE_OPTION.COMPRESSION_RATIO, icon: <CloseOutlined/>},
+                        ]}
+                        onChange={handleChange}/>
+                </div>
+                <Text className={styles["statistic"] || ""}>
+                    {segmentedOption === SIZE_OPTION.SPACE_SAVINGS ?
+                        `${spaceSavingsPercent.toFixed(2)}%` :
+                        `${compressionRatio.toFixed(2)}x`}
+                </Text>
+            </div>
+        </Card>
+    );
+};
+
+
+export default Size;

components/log-viewer-webui/client/src/pages/IngestPage/Size/typings.ts

@@ -0,0 +1,10 @@
+enum SIZE_OPTION {
+    SPACE_SAVINGS = "Space Savings",
+    COMPRESSION_RATIO = "Compression Ratio",
+}
+
+const DEFAULT_SIZE_OPTION = SIZE_OPTION.SPACE_SAVINGS;
+
+export {
+    DEFAULT_SIZE_OPTION, SIZE_OPTION,
+};

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

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

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

@@ -1,13 +1,16 @@
+import styles from "./index.module.css";
+import Size from "./Size";
+
+
 /**
  * Presents compression statistics.
  *
  * @return
  */
 const IngestPage = () => {
     return (
-        <div>
-            <h1>Ingest Page</h1>
-            <p>This is the Ingest Page.</p>
+        <div className={styles["ingestPageGrid"]}>
+            <Size/>
         </div>
     );
 };