52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
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;
|
|
}
|
|
|
|
export const Stats = ({ diagnostics }: StatsProps) => {
|
|
const { t } = useTranslation();
|
|
const theme = useTheme();
|
|
|
|
if (!diagnostics) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
direction={{ xs: "column", md: "row" }}
|
|
gap={theme.spacing(8)}
|
|
>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.eventLoopDelay")}
|
|
subtitle={prettyMilliseconds(diagnostics.eventLoopDelayMs ?? 0, {
|
|
millisecondsDecimalDigits: 2,
|
|
})}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.uptime")}
|
|
subtitle={prettyMilliseconds(diagnostics.uptimeMs ?? 0, { hideSeconds: true })}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.usedHeapSize")}
|
|
subtitle={prettyBytes(diagnostics.v8HeapStats?.usedHeapSizeBytes ?? 0)}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.totalHeapSize")}
|
|
subtitle={prettyBytes(diagnostics.v8HeapStats?.totalHeapSizeBytes ?? 0)}
|
|
/>
|
|
<StatBox
|
|
title={t("pages.logs.diagnostics.stats.osMemoryLimit")}
|
|
subtitle={prettyBytes(diagnostics.osStats?.totalMemoryBytes ?? 0)}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|