add uptime percentage label

client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx

@@ -7,6 +7,7 @@ import {
 	Pagination,
 	StatusLabel,
 	ColoredLabel,
+	ValueLabel,
 } from "@/Components/design-elements";
 import { HeatmapResponseTime, HistogramResponseTime } from "@/Components/common";
 import { ActionsMenu } from "@/Components/actions-menu";
@@ -25,6 +26,8 @@ import type { RootState } from "@/Types/state";
 import { Checkbox } from "@/Components/inputs";
 import type { Tag } from "@/Types/Tag";
 import { SPACING } from "@/Utils/Theme/constants";
+import { getUptimePercentageColor } from "@/Utils/MonitorUtils";
+import { formatPercentage } from "@/Utils/FormatUtils";
 
 interface MonitorTableProps {
 	monitors: Monitor[];
@@ -259,6 +262,24 @@ export const MonitorTable = ({
 					}
 				},
 			},
+			{
+				id: "uptime",
+				content: t("pages.uptime.table.headers.uptime"),
+				render: (row) => {
+					const uptimePercentage = row.uptimePercentage ?? 0;
+					const formattedPercentage = formatPercentage(uptimePercentage);
+					const paletteKey = getUptimePercentageColor(uptimePercentage);
+					const color = theme.palette[paletteKey].main;
+					return (
+						<Stack alignItems={"center"}>
+							<ColoredLabel
+								text={formattedPercentage}
+								color={color}
+							/>
+						</Stack>
+					);
+				},
+			},
 			{
 				id: "tags",
 				content: t("common.table.headers.tags"),

client/src/Utils/MonitorUtils.ts

@@ -63,6 +63,16 @@ export const getResponseTimeColor = (responseTime: number): PaletteKey => {
 	}
 };
 
+export const getUptimePercentageColor = (uptimePercentage: number): PaletteKey => {
+	if (uptimePercentage >= 0.75) {
+		return "success";
+	} else if (uptimePercentage >= 0.5) {
+		return "warning";
+	} else {
+		return "error";
+	}
+};
+
 export const getInfraGaugeColor = (val: number, theme: any) => {
 	if (val < 50) {
 		return theme.palette.success.main;

client/src/locales/en.json

@@ -1607,7 +1607,8 @@
 			},
 			"table": {
 				"headers": {
-					"responseTime": "Response time"
+					"responseTime": "Response time",
+					"uptime": "Uptime %"
 				}
 			},
 			"fallback": {