use formatMs function to consistently format point times

client/src/Pages/Logs/components/Stats.tsx

@@ -6,6 +6,7 @@ import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import type { Diagnostics } from "@/Types/Diagnostics";
+import { formatMs } from "@/Utils/TimeUtils";
 
 interface StatsProps {
 	diagnostics: Diagnostics | null;
@@ -18,9 +19,7 @@ export const Stats = ({ diagnostics }: StatsProps) => {
 	const theme = useTheme();
 
 	const eventLoopDelay = diagnostics
-		? prettyMilliseconds(diagnostics.eventLoopDelayMs ?? 0, {
-				millisecondsDecimalDigits: 2,
-			})
+		? formatMs(diagnostics.eventLoopDelayMs ?? 0)
 		: PLACEHOLDER;
 	const uptime = diagnostics
 		? prettyMilliseconds(diagnostics.uptimeMs ?? 0, { hideSeconds: true })

client/src/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip.tsx

@@ -1,8 +1,7 @@
 import type { CheckSnapshot } from "@/Types/Check";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import prettyMilliseconds from "pretty-ms";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
 import { useTranslation } from "react-i18next";
 
@@ -16,7 +15,7 @@ export const ThemedChartTooltip = ({ check }: { check: CheckSnapshot }) => {
 				fontWeight={600}
 			>
 				{check.status
-					? `${prettyMilliseconds(check.responseTime, { compact: true })}`
+					? formatMs(check.responseTime)
 					: t("pages.statusPages.monitorsList.chart.downTooltip")}
 			</Typography>
 			<Typography

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import type { CheckSnapshot } from "@/Types/Check";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
+import { formatMs } from "@/Utils/TimeUtils";
 
 const CELLS = MAX_RECENT_CHECKS;
 
@@ -59,7 +60,7 @@ export const ThemedHeatmap = ({ checks, containerSx, cellSx }: Props) => {
 					>
 						<Box
 							sx={cellSx(kind)}
-							aria-label={`${check.responseTime} ms, ${check.status ? "up" : "down"}`}
+							aria-label={`${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`}
 						/>
 					</Tooltip>
 				);

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import type { CheckSnapshot } from "@/Types/Check";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 import { computeBarHeights } from "@/Utils/DataUtils";
+import { formatMs } from "@/Utils/TimeUtils";
 import { ThemedChartTooltip } from "@/Pages/StatusPage/Status/themes/shared/ThemedChartTooltip";
 const CELLS = MAX_RECENT_CHECKS;
 const MIN_HEIGHT_PCT = 6;
@@ -41,11 +42,11 @@ export const ThemedHistogram = ({
 		];
 		const heights = computeBarHeights(source);
 		const valid = out.filter((c): c is CheckSnapshot => c !== null && c.responseTime > 0);
-		const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 1;
+		const maxRt = valid.length ? Math.max(...valid.map((c) => c.responseTime)) : 0;
 		const avgRt = valid.length
-			? Math.round(valid.reduce((s, c) => s + c.responseTime, 0) / valid.length)
+			? valid.reduce((s, c) => s + c.responseTime, 0) / valid.length
 			: 0;
-		return { padded: out, heights, avg: avgRt, peak: maxRt };
+		return { padded: out, heights, avg: formatMs(avgRt), peak: formatMs(maxRt) };
 	}, [checks]);
 
 	return (
@@ -71,7 +72,7 @@ export const ThemedHistogram = ({
 						>
 							<Box
 								sx={barSx(tone(check), height)}
-								aria-label={`${check.responseTime} ms`}
+								aria-label={formatMs(check.responseTime)}
 							/>
 						</Tooltip>
 					);

client/src/Pages/Uptime/Details/Components/GeoChecksTable.tsx

@@ -8,10 +8,9 @@ import Box from "@mui/material/Box";
 import type { Header } from "@/Components/design-elements";
 import type { FlatGeoCheck } from "@/Types/GeoCheck";
 import { useTranslation } from "react-i18next";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import type { RootState } from "@/Types/state";
 import { useSelector } from "react-redux";
-import prettyMilliseconds from "pretty-ms";
 
 export const GeoChecksTable = ({
 	geoChecks,
@@ -69,7 +68,7 @@ export const GeoChecksTable = ({
 			content: t("common.table.headers.responseTime"),
 			render: (row) => {
 				if (!row.timings?.total) return "N/A";
-				return prettyMilliseconds(row.timings.total, { compact: true });
+				return formatMs(row.timings.total);
 			},
 		},
 	];