gorkem-bwl
752f59b09b
- Stats and StatGauges use CSS grid (5 + 4 columns) so cards in each row are equal width; widths overridden against the legacy 25%-flex GradientBox so they fill their grid cell. - DetailGauge gains a maxWidth prop (default 225) so consumers in wide grids can opt out of the cap. - Section explainers above each row: "Runtime stats" + description, "Memory & CPU" + description (i18n driven, propagated to all 16 locales via pages.logs.diagnostics.sections). - Both grids render immediately with placeholder "—" values, so the initial paint shows the layout and values fill in as data loads (eliminates the layout shake when switching to the tab).
70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import Box from "@mui/material/Box";
|
|
import { StatBox } from "@/Components/design-elements";
|
|
|
|
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";
|
|
|
|
interface StatsProps {
|
|
diagnostics: Diagnostics | null;
|
|
}
|
|
|
|
const PLACEHOLDER = "—";
|
|
|
|
export const Stats = ({ diagnostics }: StatsProps) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
|
|
const eventLoopDelay = diagnostics
|
|
? prettyMilliseconds(diagnostics.eventLoopDelayMs ?? 0, {
|
|
millisecondsDecimalDigits: 2,
|
|
})
|
|
: PLACEHOLDER;
|
|
const uptime = diagnostics
|
|
? prettyMilliseconds(diagnostics.uptimeMs ?? 0, { hideSeconds: true })
|
|
: PLACEHOLDER;
|
|
const usedHeap = diagnostics
|
|
? prettyBytes(diagnostics.v8HeapStats?.usedHeapSizeBytes ?? 0)
|
|
: PLACEHOLDER;
|
|
const totalHeap = diagnostics
|
|
? prettyBytes(diagnostics.v8HeapStats?.totalHeapSizeBytes ?? 0)
|
|
: PLACEHOLDER;
|
|
const osMemory = diagnostics
|
|
? prettyBytes(diagnostics.osStats?.totalMemoryBytes ?? 0)
|
|
: PLACEHOLDER;
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "grid",
|
|
gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
|
|
gap: theme.spacing(8),
|
|
"& > *": { width: "100% !important" },
|
|
}}
|
|
>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.eventLoopDelay")}
|
|
subtitle={eventLoopDelay}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.uptime")}
|
|
subtitle={uptime}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.usedHeapSize")}
|
|
subtitle={usedHeap}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.totalHeapSize")}
|
|
subtitle={totalHeap}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.osMemoryLimit")}
|
|
subtitle={osMemory}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|