From 949beff4f924cc619e3314c0dfa256b3b0f2117e Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 26 May 2026 14:55:22 -0700
Subject: [PATCH] add mongo collection stats component, reorder layout

---
 client/src/Pages/Logs/TabDiagnostics.tsx      | 24 +++++-
 .../Logs/components/MongoCollectionStats.tsx  | 80 +++++++++++++++++++
 .../src/Pages/Logs/components/MongoStats.tsx  | 33 +-------
 3 files changed, 103 insertions(+), 34 deletions(-)
 create mode 100644 client/src/Pages/Logs/components/MongoCollectionStats.tsx

diff --git a/client/src/Pages/Logs/TabDiagnostics.tsx b/client/src/Pages/Logs/TabDiagnostics.tsx
index 2f534dbfa..8b641420e 100644
--- a/client/src/Pages/Logs/TabDiagnostics.tsx
+++ b/client/src/Pages/Logs/TabDiagnostics.tsx
@@ -2,14 +2,13 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Stats } from "@/Pages/Logs/components/Stats";
 import { MongoStats } from "@/Pages/Logs/components/MongoStats";
+import { MongoCollectionStats } from "./components/MongoCollectionStats";
 import { StatGauges } from "@/Pages/Logs/components/StatGauges";
-import { StatBox } from "@/Components/design-elements";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useGet } from "@/Hooks/UseApi";
 import type { Diagnostics } from "@/Types/Diagnostics";
-import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabDiagnostics = () => {
 	const theme = useTheme();
@@ -52,8 +51,29 @@ export const TabDiagnostics = () => {
 				<StatGauges diagnostics={diagnostics} />
 			</Stack>
 			<Stack gap={theme.spacing(4)}>
+				<Typography
+					variant="eyebrow"
+					color={theme.palette.text.secondary}
+				>
+					{t("MongoDB Stats")}
+				</Typography>
+				<Typography color={theme.palette.text.secondary}>
+					{t("Information about MongoDB")}
+				</Typography>
 				<MongoStats diagnostics={diagnostics} />
 			</Stack>
+			<Stack gap={theme.spacing(4)}>
+				<Typography
+					variant="eyebrow"
+					color={theme.palette.text.secondary}
+				>
+					{t("MongoDB Collection Stats")}
+				</Typography>
+				<Typography color={theme.palette.text.secondary}>
+					{t("Information about Collections")}
+				</Typography>
+				<MongoCollectionStats diagnostics={diagnostics} />
+			</Stack>
 		</Stack>
 	);
 };
diff --git a/client/src/Pages/Logs/components/MongoCollectionStats.tsx b/client/src/Pages/Logs/components/MongoCollectionStats.tsx
new file mode 100644
index 000000000..e215b0bc4
--- /dev/null
+++ b/client/src/Pages/Logs/components/MongoCollectionStats.tsx
@@ -0,0 +1,80 @@
+import Box from "@mui/material/Box";
+import { StatBox, Gauge, Tooltip } from "@/Components/design-elements";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+import prettyBytes from "pretty-bytes";
+import { useTheme } from "@mui/material";
+import type { Diagnostics } from "@/Types/Diagnostics";
+import { LAYOUT } from "@/Utils/Theme/constants";
+
+interface MongoStatsProps {
+	diagnostics: Diagnostics | null;
+}
+
+export const MongoCollectionStats = ({ diagnostics }: MongoStatsProps) => {
+	const theme = useTheme();
+
+	const mongoStats = diagnostics?.mongoStats;
+	if (!mongoStats) {
+		return null;
+	}
+
+	return (
+		<Box
+			display={"grid"}
+			gap={theme.spacing(LAYOUT.MD)}
+			sx={{
+				gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
+				"& > *": { width: "100% !important" },
+			}}
+		>
+			{mongoStats.collections.map((colStat) => (
+				<StatBox
+					key={colStat.name}
+					title={colStat.name}
+					subtitle={""}
+				>
+					<Stack
+						direction={"row"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+					>
+						<Stack>
+							<Typography variant="body2">{`Documents: ${colStat.documentCount}`}</Typography>
+							{colStat.bucketCount !== undefined && (
+								<Typography variant="body2">{`Bucket count: ${colStat.bucketCount}`}</Typography>
+							)}
+							<Typography variant="body2">{`Storage size: ${prettyBytes(colStat.storageSize)}`}</Typography>
+							<Typography variant="body2">{`Index size: ${prettyBytes(colStat.totalIndexSize)}`}</Typography>
+							<Typography variant="body2">{`Total size: ${prettyBytes(colStat.totalSize)}`}</Typography>
+						</Stack>
+						<Stack alignItems={"center"}>
+							<Tooltip
+								title={`% of MongoDB storage used by ${colStat.name.toUpperCase()}`}
+								placement="top"
+								slotProps={{
+									popper: {
+										modifiers: [
+											{
+												name: "offset",
+												options: {
+													offset: [0, -10],
+												},
+											},
+										],
+									},
+								}}
+							>
+								<Gauge
+									progress={(colStat.totalSize / mongoStats.totalSize) * 100}
+									unit="%"
+								/>
+							</Tooltip>
+						</Stack>
+					</Stack>
+				</StatBox>
+			))}
+		</Box>
+	);
+};
diff --git a/client/src/Pages/Logs/components/MongoStats.tsx b/client/src/Pages/Logs/components/MongoStats.tsx
index 807a90fa7..00263e7a4 100644
--- a/client/src/Pages/Logs/components/MongoStats.tsx
+++ b/client/src/Pages/Logs/components/MongoStats.tsx
@@ -1,12 +1,8 @@
 import Box from "@mui/material/Box";
 import { StatBox } from "@/Components/design-elements";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
 
 import prettyBytes from "pretty-bytes";
-import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
 import type { Diagnostics } from "@/Types/Diagnostics";
 import { LAYOUT } from "@/Utils/Theme/constants";
 
@@ -14,10 +10,7 @@ interface MongoStatsProps {
 	diagnostics: Diagnostics | null;
 }
 
-const PLACEHOLDER = "—";
-
 export const MongoStats = ({ diagnostics }: MongoStatsProps) => {
-	const { t } = useTranslation();
 	const theme = useTheme();
 
 	const mongoStats = diagnostics?.mongoStats;
@@ -25,8 +18,6 @@ export const MongoStats = ({ diagnostics }: MongoStatsProps) => {
 		return null;
 	}
 
-	console.log("Mongo Stats:", mongoStats); // Debug log to check the structure of mongoStats
-
 	return (
 		<Box
 			display={"grid"}
@@ -54,30 +45,8 @@ export const MongoStats = ({ diagnostics }: MongoStatsProps) => {
 			/>
 			<StatBox
 				title={"Storage size"}
-				subtitle={prettyBytes(mongoStats.stats.totalSize)}
+				subtitle={prettyBytes(mongoStats.totalSize)}
 			/>
-			{mongoStats.collectionStats.map((colStat) => {
-				console.log(colStat);
-				return (
-					<StatBox
-						key={colStat.name}
-						title={colStat.name}
-						subtitle={""}
-					>
-						<Stack>
-							{colStat.documentCount !== undefined && (
-								<Typography variant="body2">{`Documents: ${colStat.documentCount}`}</Typography>
-							)}
-							{colStat.timeseries?.bucketCount !== undefined && (
-								<Typography variant="body2">{`Bucket count: ${colStat.timeseries.bucketCount}`}</Typography>
-							)}
-							<Typography variant="body2">{`Storage size: ${prettyBytes(colStat.storageSize)}`}</Typography>
-							<Typography variant="body2">{`Index size: ${prettyBytes(colStat.totalIndexSize)}`}</Typography>
-							<Typography variant="body2">{`Total size: ${prettyBytes(colStat.totalSize)}`}</Typography>
-						</Stack>
-					</StatBox>
-				);
-			})}
 		</Box>
 	);
 };