diff --git a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx index 2c026c35d..c08ca7933 100644 --- a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx +++ b/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 ( + + + + ); + }, + }, { id: "tags", content: t("common.table.headers.tags"), diff --git a/client/src/Utils/MonitorUtils.ts b/client/src/Utils/MonitorUtils.ts index 256d523de..401771f94 100644 --- a/client/src/Utils/MonitorUtils.ts +++ b/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; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 0b78ba1e9..e5f7073b6 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1607,7 +1607,8 @@ }, "table": { "headers": { - "responseTime": "Response time" + "responseTime": "Response time", + "uptime": "Uptime %" } }, "fallback": {