Merge pull request bluewave-labs#3512 from SkyKingPX/feat/improved-status-bar-messages

Improve status bar messages on public status pages

Author: ajhollid

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+* text eol=lf

client/src/Pages/StatusPage/Status/Components/StatusBar.tsx

@@ -1,35 +1,115 @@
-import { AlertTriangle, CircleCheck } from "lucide-react";
+import {
+	AlertTriangle,
+	CircleCheck,
+	CircleX,
+	Loader,
+	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";
+
+interface StatusDisplay {
+	icon: JSX.Element;
+	msg?: string;
+	color?: string;
+}
 
 const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => {
-	const monitorsStatus: Record<string, any> = {
+	const monitorsStatus: StatusDisplay = {
 		icon: <AlertTriangle size={24} />,
 	};
 
-	if (monitors.every((monitor) => monitor.status === "up")) {
+	// Handle empty monitors array
+	if (monitors.length === 0) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.noMonitors");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <CircleX size={24} />;
+		return monitorsStatus;
+	}
+
+	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 = <CircleCheck size={24} />;
-		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.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+	} else if (allOf("maintenance")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allMaintenance");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+	} 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 = <CircleX size={24} />;
+	} else if (allOf("paused")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allPaused");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <PauseCircle size={24} />;
+	} else if (allOf("initializing")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.allInitializing");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Loader size={24} />;
+
+		// 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.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+	} else if (someOf("breached")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.breached");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <ShieldAlert size={24} />;
+
+		// Maintenance combinations
+	} else if (someOf("maintenance") && someOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenanceAndDown");
+		monitorsStatus.color = theme.palette.error.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+	} else if (someOf("maintenance") && noneOf("down")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenance");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <Wrench size={24} />;
+
+		// Degraded (some down, no maintenance/breached)
+	} else if (someOf("down")) {
 		monitorsStatus.msg = t("pages.statusPages.statusBar.degraded");
 		monitorsStatus.color = theme.palette.warning.main;
-		return monitorsStatus;
+		monitorsStatus.icon = <AlertTriangle size={24} />;
+
+		// Some Paused
+	} else if (someOf("paused")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.partiallyPaused");
+		monitorsStatus.color = theme.palette.warning.main;
+		monitorsStatus.icon = <PauseCircle size={24} />;
+
+		// Initializing
+	} else if (someOf("initializing")) {
+		monitorsStatus.msg = t("pages.statusPages.statusBar.initializing");
+		monitorsStatus.color = theme.palette.info.main;
+		monitorsStatus.icon = <Loader size={24} />;
 	} else {
 		monitorsStatus.msg = t("pages.statusPages.statusBar.unknown");
 		monitorsStatus.color = theme.palette.warning.main;
-		return monitorsStatus;
 	}
+
+	return monitorsStatus;
 };
 
 interface StatusBarProps {

client/src/locales/en.json

@@ -1208,9 +1208,20 @@
 				}
 			},
 			"statusBar": {
-				"allDown": "All systems are down",
 				"allUp": "All systems operational",
+				"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 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",
+				"partiallyPaused": "Some systems are paused",
+				"initializing": "Some systems are initializing",
+				"noMonitors": "No monitors have been configured",
 				"unknown": "Unable to determine system status"
 			},
 			"table": {