dispaly uptime percentage on status pages

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

@@ -27,6 +27,7 @@ import {
 	statusBadgeKey,
 } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
 import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
+import { formatPercentage } from "@/Utils/FormatUtils";
 
 type StatusPageMonitor = Monitor & { checks?: Monitor["recentChecks"] };
 
@@ -161,6 +162,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 					const showInfra = isHardware && statusPage.showInfrastructure !== false;
 					const showChart = !isHardware && statusPage.showCharts !== false;
 					const badgeTone = monitorBadgeTone(monitor.status);
+					const uptimePercentage = formatPercentage(monitor.uptimePercentage ?? 0);
 
 					return (
 						<Box
@@ -178,6 +180,12 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 										>
 											{getMonitorTypeLabel(monitor.type, t)}
 										</Box>
+										<Box
+											component="span"
+											sx={styles.pill}
+										>
+											{uptimePercentage}
+										</Box>
 										{monitor.url && (
 											<Box
 												component="span"