From a8339c016913fb92ec46dad6f50219501d753b61 Mon Sep 17 00:00:00 2001 From: SkyKingPX Date: Tue, 14 Apr 2026 19:32:05 +0200 Subject: [PATCH 1/5] Improve status bar messages on public status pages --- .../Status/Components/StatusBar.tsx | 76 ++++++++++++++++--- client/src/locales/en.json | 8 ++ 2 files changed, 74 insertions(+), 10 deletions(-) diff --git a/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx b/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx index b5c52b32b..e85eb97b1 100644 --- a/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx +++ b/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx @@ -1,35 +1,91 @@ -import { AlertTriangle, CircleCheck } from "lucide-react"; +import { + AlertTriangle, + CircleCheck, + CircleX, + PauseCircle, + ShieldAlert, + Wrench, +} from "lucide-react"; import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; import { useTranslation } from "react-i18next"; -import type { Theme } from "@mui/material"; import { useTheme } from "@mui/material"; -import type { Monitor } from "@/Types/Monitor"; +import type { Theme } from "@mui/material"; +import type { Monitor, MonitorStatus } from "@/Types/Monitor"; const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => { const monitorsStatus: Record = { icon: , }; - if (monitors.every((monitor) => monitor.status === "up")) { + const allOf = (...statuses: MonitorStatus[]) => + monitors.every((m) => statuses.includes(m.status)); + const someOf = (...statuses: MonitorStatus[]) => + monitors.some((m) => statuses.includes(m.status)); + const noneOf = (...statuses: MonitorStatus[]) => + monitors.every((m) => !statuses.includes(m.status)); + + // All monitors in a single state + if (allOf("up")) { monitorsStatus.msg = t("pages.statusPages.statusBar.allUp"); monitorsStatus.color = theme.palette.success.main; monitorsStatus.icon = ; - return monitorsStatus; - } else if (monitors.every((monitor) => monitor.status === "down")) { + } else if (allOf("breached")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.allBreached"); + monitorsStatus.color = theme.palette.error.dark; + monitorsStatus.icon = ; + } else if (allOf("maintenance")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.allMaintenance"); + monitorsStatus.color = theme.palette.warning.main; + monitorsStatus.icon = ; + } else if (allOf("down")) { monitorsStatus.msg = t("pages.statusPages.statusBar.allDown"); monitorsStatus.color = theme.palette.error.main; - return monitorsStatus; - } else if (monitors.some((monitor) => monitor.status === "down")) { + monitorsStatus.icon = ; + } else if (allOf("paused")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.allPaused"); + monitorsStatus.color = theme.palette.warning.main; + monitorsStatus.icon = ; + + // Breached takes highest priority in mixed states + } else if (someOf("breached") && someOf("down")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.breachedAndDown"); + monitorsStatus.color = theme.palette.error.dark; + monitorsStatus.icon = ; + } else if (someOf("breached")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.breached"); + monitorsStatus.color = theme.palette.error.dark; + monitorsStatus.icon = ; + + // Maintenance combinations + } else if (someOf("maintenance") && someOf("down")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.maintenanceAndDown"); + monitorsStatus.color = theme.palette.error.main; + monitorsStatus.icon = ; + } else if (someOf("maintenance") && noneOf("down", "breached")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.maintenance"); + monitorsStatus.color = theme.palette.warning.main; + monitorsStatus.icon = ; + + // Degraded (some down, no maintenance/breached) + } else if (someOf("down") && noneOf("maintenance", "breached")) { monitorsStatus.msg = t("pages.statusPages.statusBar.degraded"); monitorsStatus.color = theme.palette.warning.main; - return monitorsStatus; + monitorsStatus.icon = ; + + // Some Paused + } else if (someOf("paused") && noneOf("down", "breached", "maintenance")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.partiallyPaused"); + monitorsStatus.color = theme.palette.warning.main; + monitorsStatus.icon = ; + } else { monitorsStatus.msg = t("pages.statusPages.statusBar.unknown"); monitorsStatus.color = theme.palette.warning.main; - return monitorsStatus; } + + return monitorsStatus; }; interface StatusBarProps { diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 83ca4fa33..69d316cd7 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1209,8 +1209,16 @@ }, "statusBar": { "allDown": "All systems are down", + "allMaintenance": "All systems are under maintenance", "allUp": "All systems operational", + "allPaused": "All systems are paused", + "allBreached": "All systems have been breached", + "breachedAndDown": "Some systems are breached and down", + "breached": "Some systems have been breached", "degraded": "Some systems are experiencing issues", + "maintenanceAndDown": "Some systems are down during maintenance", + "maintenance": "Some systems are under maintenance", + "partiallyPaused": "Some systems are paused", "unknown": "Unable to determine system status" }, "table": { From 7b164e4df536965623a6a007166712378762dd54 Mon Sep 17 00:00:00 2001 From: SkyKingPX Date: Thu, 16 Apr 2026 13:37:54 +0200 Subject: [PATCH 2/5] Make requested changes --- .../Status/Components/StatusBar.tsx | 39 +++++++++++++++---- client/src/locales/en.json | 9 +++-- 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx b/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx index e85eb97b1..3727669db 100644 --- a/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx +++ b/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx @@ -1,7 +1,7 @@ import { AlertTriangle, CircleCheck, - CircleX, + CircleX, Loader, PauseCircle, ShieldAlert, Wrench, @@ -14,11 +14,25 @@ import { useTheme } from "@mui/material"; import type { Theme } from "@mui/material"; import type { Monitor, MonitorStatus } from "@/Types/Monitor"; +interface StatusDisplay { + icon: JSX.Element; + msg?: string; + color?: string; +} + const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => { - const monitorsStatus: Record = { + const monitorsStatus: StatusDisplay = { icon: , }; + // Handle empty monitors array + if (monitors.length === 0) { + monitorsStatus.msg = t("pages.statusPages.statusBar.noMonitors"); + monitorsStatus.color = theme.palette.warning.main; + monitorsStatus.icon = ; + return monitorsStatus; + } + const allOf = (...statuses: MonitorStatus[]) => monitors.every((m) => statuses.includes(m.status)); const someOf = (...statuses: MonitorStatus[]) => @@ -33,7 +47,7 @@ const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => { monitorsStatus.icon = ; } else if (allOf("breached")) { monitorsStatus.msg = t("pages.statusPages.statusBar.allBreached"); - monitorsStatus.color = theme.palette.error.dark; + monitorsStatus.color = theme.palette.error.main; monitorsStatus.icon = ; } else if (allOf("maintenance")) { monitorsStatus.msg = t("pages.statusPages.statusBar.allMaintenance"); @@ -47,15 +61,19 @@ const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => { monitorsStatus.msg = t("pages.statusPages.statusBar.allPaused"); monitorsStatus.color = theme.palette.warning.main; monitorsStatus.icon = ; + } else if (allOf("initializing")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.allInitializing"); + monitorsStatus.color = theme.palette.warning.main; + monitorsStatus.icon = ; // Breached takes highest priority in mixed states } else if (someOf("breached") && someOf("down")) { monitorsStatus.msg = t("pages.statusPages.statusBar.breachedAndDown"); - monitorsStatus.color = theme.palette.error.dark; + monitorsStatus.color = theme.palette.error.main; monitorsStatus.icon = ; } else if (someOf("breached")) { monitorsStatus.msg = t("pages.statusPages.statusBar.breached"); - monitorsStatus.color = theme.palette.error.dark; + monitorsStatus.color = theme.palette.error.main; monitorsStatus.icon = ; // Maintenance combinations @@ -63,23 +81,28 @@ const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => { monitorsStatus.msg = t("pages.statusPages.statusBar.maintenanceAndDown"); monitorsStatus.color = theme.palette.error.main; monitorsStatus.icon = ; - } else if (someOf("maintenance") && noneOf("down", "breached")) { + } else if (someOf("maintenance") && noneOf("down")) { monitorsStatus.msg = t("pages.statusPages.statusBar.maintenance"); monitorsStatus.color = theme.palette.warning.main; monitorsStatus.icon = ; // Degraded (some down, no maintenance/breached) - } else if (someOf("down") && noneOf("maintenance", "breached")) { + } else if (someOf("down")) { monitorsStatus.msg = t("pages.statusPages.statusBar.degraded"); monitorsStatus.color = theme.palette.warning.main; monitorsStatus.icon = ; // Some Paused - } else if (someOf("paused") && noneOf("down", "breached", "maintenance")) { + } else if (someOf("paused")) { monitorsStatus.msg = t("pages.statusPages.statusBar.partiallyPaused"); monitorsStatus.color = theme.palette.warning.main; monitorsStatus.icon = ; + // Initializing + } else if (someOf("initializing")) { + monitorsStatus.msg = t("pages.statusPages.statusBar.initializing"); + monitorsStatus.color = theme.palette.info.main; + monitorsStatus.icon = ; } else { monitorsStatus.msg = t("pages.statusPages.statusBar.unknown"); monitorsStatus.color = theme.palette.warning.main; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 69d316cd7..faf7516bf 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1208,17 +1208,20 @@ } }, "statusBar": { - "allDown": "All systems are down", - "allMaintenance": "All systems are under maintenance", "allUp": "All systems operational", - "allPaused": "All systems are paused", "allBreached": "All systems have been breached", + "allMaintenance": "All systems are under maintenance", + "allDown": "All systems are down", + "allPaused": "All systems are paused", + "allInitializing": "All systems are initializing", "breachedAndDown": "Some systems are breached and down", "breached": "Some systems have been breached", "degraded": "Some systems are experiencing issues", "maintenanceAndDown": "Some systems are down during maintenance", "maintenance": "Some systems are under maintenance", "partiallyPaused": "Some systems are paused", + "initializing": "Some systems are initializing", + "noMonitors": "No monitors have been configured", "unknown": "Unable to determine system status" }, "table": { From 0d163e7100c2873c3b7b39a48b8e9b9b5f3cc307 Mon Sep 17 00:00:00 2001 From: SkyKingPX Date: Thu, 16 Apr 2026 18:56:06 +0200 Subject: [PATCH 3/5] Change Breached to exceeded thresholds --- client/src/locales/en.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/locales/en.json b/client/src/locales/en.json index faf7516bf..863e54f2c 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -1209,13 +1209,13 @@ }, "statusBar": { "allUp": "All systems operational", - "allBreached": "All systems have been breached", + "allBreached": "All systems have exceeded thresholds", "allMaintenance": "All systems are under maintenance", "allDown": "All systems are down", "allPaused": "All systems are paused", "allInitializing": "All systems are initializing", - "breachedAndDown": "Some systems are breached and down", - "breached": "Some systems have been breached", + "breachedAndDown": "Some systems have exceeded thresholds and are down", + "breached": "Some systems have exceeded thresholds", "degraded": "Some systems are experiencing issues", "maintenanceAndDown": "Some systems are down during maintenance", "maintenance": "Some systems are under maintenance", From 5920b9286931c4b9a97a519de67f451b96c52ed2 Mon Sep 17 00:00:00 2001 From: SkyKingPX Date: Thu, 16 Apr 2026 19:55:17 +0200 Subject: [PATCH 4/5] Run npm format --- client/src/Pages/StatusPage/Status/Components/StatusBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx b/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx index 3727669db..d2043a7f3 100644 --- a/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx +++ b/client/src/Pages/StatusPage/Status/Components/StatusBar.tsx @@ -1,7 +1,8 @@ import { AlertTriangle, CircleCheck, - CircleX, Loader, + CircleX, + Loader, PauseCircle, ShieldAlert, Wrench, From e60dbb9f7422fbc5bd1812f1d8d4a644a373db31 Mon Sep 17 00:00:00 2001 From: SkyKingPX Date: Thu, 16 Apr 2026 19:57:21 +0200 Subject: [PATCH 5/5] Add .gitattributes file so LF endings are preserved --- .gitattributes | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .gitattributes diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..7f80b8533 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +* text=auto +* text eol=lf \ No newline at end of file