TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mongo collection stats component, reorder layout

Browse Source
This commit is contained in:
Alex Holliday committed 2026-05-26 14:55:22 -07:00
1 parent 806c7764b1
commit 949beff4f9
3 files changed
+103 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Pages/Logs/TabDiagnostics.tsx
+22 -2
View File
@@ -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>
);
};
client/src/Pages/Logs/components/MongoCollectionStats.tsx
+80
View File
@@ -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>
);
};
client/src/Pages/Logs/components/MongoStats.tsx
+1 -32
View File
@@ -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>
);
};