Merge latest develop into monitor sorting

# Conflicts:
#	client/src/Features/UI/uiSlice.ts

client/src/Features/UI/uiSlice.ts

@@ -1,4 +1,8 @@
-import { dashboardCardKeys, type DashboardCardKey } from "@/Types/Dashboard";
+import {
+	dashboardCardKeys,
+	type DashboardCardKey,
+	type DashboardSortOrder,
+} from "@/Types/Dashboard";
 import type { SortOrder } from "@/Types/Query";
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
@@ -41,6 +45,7 @@ interface UIState {
 	starPromptOpen: boolean;
 	chartType: ChartType;
 	dashboardVisibleCards: DashboardCardKey[];
+	dashboardUptimeSortOrder: DashboardSortOrder;
 }
 
 const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark)")
@@ -81,6 +86,7 @@ const initialState: UIState = {
 	starPromptOpen: true,
 	chartType: "histogram",
 	dashboardVisibleCards: [...dashboardCardKeys],
+	dashboardUptimeSortOrder: "ascending",
 };
 
 const uiSlice = createSlice({
@@ -135,6 +141,9 @@ const uiSlice = createSlice({
 		setDashboardVisibleCards: (state, action: PayloadAction<DashboardCardKey[]>) => {
 			state.dashboardVisibleCards = action.payload;
 		},
+		setDashboardUptimeSortOrder: (state, action: PayloadAction<DashboardSortOrder>) => {
+			state.dashboardUptimeSortOrder = action.payload;
+		},
 	},
 });
 
@@ -153,4 +162,5 @@ export const {
 	setStarPromptOpen,
 	setChartType,
 	setDashboardVisibleCards,
+	setDashboardUptimeSortOrder,
 } = uiSlice.actions;

client/src/Hooks/useMonitorForm.ts

@@ -85,6 +85,8 @@ export const getMonitorDefaults = (
 				dockerTlsKey: "",
 				dockerTlsKeySet: data?.dockerTlsKeySet ?? false,
 				dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
+				dockerAlertOnStopped: data?.dockerAlertOnStopped ?? false,
+				dockerAlertOnUnhealthy: data?.dockerAlertOnUnhealthy ?? false,
 			};
 			break;
 		case "game":

client/src/Pages/CreateMonitor/index.tsx

@@ -617,7 +617,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(0) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.general.title")}
@@ -758,7 +757,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(0) && watchedType === "docker" && isDockerTlsUrl(watchedUrl) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.dockerTls.title")}
@@ -816,7 +814,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.frequency.title")}
@@ -837,7 +834,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{/* Alert Thresholds - only for hardware type */}
 				{watchedType === "hardware" && showStep(1) && (
 					<ConfigBox
@@ -893,7 +889,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.incidents.title")}
@@ -920,7 +915,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.notifications.title")}
@@ -933,7 +927,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.tags.title")}
@@ -960,7 +953,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && watchedType === "docker" && !isCaptureDocker && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.dockerLogs.title")}
@@ -973,7 +965,28 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
+				{showStep(1) && watchedType === "docker" && (
+					<ConfigBox
+						title={t("pages.createMonitor.form.dockerAlerts.title")}
+						subtitle={t("pages.createMonitor.form.dockerAlerts.description")}
+						rightContent={
+							<Stack gap={theme.spacing(LAYOUT.MD)}>
+								<FormSwitchField
+									name="dockerAlertOnStopped"
+									label={t(
+										"pages.createMonitor.form.dockerAlerts.option.onStopped.label"
+									)}
+								/>
+								<FormSwitchField
+									name="dockerAlertOnUnhealthy"
+									label={t(
+										"pages.createMonitor.form.dockerAlerts.option.onUnhealthy.label"
+									)}
+								/>
+							</Stack>
+						}
+					/>
+				)}
 				{showStep(2) &&
 					(watchedType === "http" ||
 						watchedType === "grpc" ||
@@ -989,7 +1002,6 @@ const CreateMonitorPage = () => {
 							}
 						/>
 					)}
-
 				{showStep(2) && watchedType === "http" && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.advanced.title")}
@@ -1089,7 +1101,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(2) && supportsGeoCheck(watchedType) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.geoChecks.title")}
@@ -1122,7 +1133,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				<Stack
 					direction="row"
 					justifyContent={!isEditMode ? "space-between" : "flex-end"}

client/src/Pages/Dashboard/components/EditCardsModal.tsx

@@ -1,8 +1,11 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import Stack from "@mui/material/Stack";
 import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { Checkbox, Dialog } from "@/Components/inputs";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
 
 interface EditCardsModalProps {
@@ -18,16 +21,19 @@ export const EditCardsModal = ({
 	onClose,
 	onSave,
 }: EditCardsModalProps) => {
+	const theme = useTheme();
 	const { t } = useTranslation();
-	const [draft, setDraft] = useState<Set<DashboardCardKey>>(new Set(visibleCards));
+	const [cardsSelection, setCardsSelection] = useState<Set<DashboardCardKey>>(
+		new Set(visibleCards)
+	);
 
 	const handleClose = () => {
-		setDraft(new Set(visibleCards));
+		setCardsSelection(new Set(visibleCards));
 		onClose();
 	};
 
 	const handleToggle = (key: DashboardCardKey) => {
-		setDraft((prev) => {
+		setCardsSelection((prev) => {
 			const next = new Set(prev);
 			if (next.has(key)) {
 				next.delete(key);
@@ -38,26 +44,40 @@ export const EditCardsModal = ({
 		});
 	};
 
+	const sortedCardKeys = useMemo(
+		() =>
+			[...dashboardCardKeys].sort((a, b) =>
+				t(`pages.dashboard.cards.${a}`).localeCompare(t(`pages.dashboard.cards.${b}`))
+			),
+		[t]
+	);
+
 	return (
 		<Dialog
 			open={open}
 			title={t("pages.dashboard.editCardsModal.title")}
 			content={t("pages.dashboard.editCardsModal.description")}
 			onCancel={handleClose}
-			onConfirm={() => onSave(draft)}
+			onConfirm={() => onSave(cardsSelection)}
 			confirmText={t("pages.dashboard.editCardsModal.done")}
 			maxWidth="xs"
 			fullWidth
 		>
-			<Stack>
-				{dashboardCardKeys.map((key: DashboardCardKey) => (
+			<Stack gap={theme.spacing(LAYOUT.XXS)}>
+				<Typography
+					variant="eyebrow"
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.editCardsModal.groups.uptime")}
+				</Typography>
+				{sortedCardKeys.map((key: DashboardCardKey) => (
 					<FormControlLabel
 						key={key}
 						label={t(`pages.dashboard.cards.${key}`)}
 						control={
 							<Checkbox
-								checked={draft.has(key)}
-								disabled={draft.has(key) && draft.size === 1}
+								checked={cardsSelection.has(key)}
+								disabled={cardsSelection.has(key) && cardsSelection.size === 1}
 								onChange={() => handleToggle(key)}
 							/>
 						}

client/src/Pages/Dashboard/components/cards/CurrentlyDownCard.tsx

@@ -0,0 +1,58 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { Dot } from "@/Components/design-elements";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import type { Monitor } from "@/Types/Monitor";
+
+interface CurrentlyDownCardProps {
+	monitors: Monitor[];
+}
+
+export const CurrentlyDownCard = ({ monitors }: CurrentlyDownCardProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const downMonitors = monitors.filter((monitor) => monitor.status === "down");
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.currentlyDown")}
+			topRight={downMonitors.length > 0 ? downMonitors.length : undefined}
+		>
+			{downMonitors.length === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.currentlyDown.empty")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{downMonitors.map((monitor) => (
+						<Stack
+							key={monitor.id}
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(LAYOUT.XS)}
+						>
+							<Dot color={theme.palette.error.main} />
+							<Typography
+								fontSize={typographyLevels.m}
+								color={theme.palette.text.primary}
+								overflow="hidden"
+								textOverflow="ellipsis"
+								whiteSpace="nowrap"
+							>
+								{monitor.name}
+							</Typography>
+						</Stack>
+					))}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/components/cards/UptimeCard.tsx

@@ -0,0 +1,90 @@
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Icon } from "@/Components/design-elements";
+import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { BarRow } from "@/Pages/Dashboard/components/cards/BarRow";
+import { getUptimePercentageColor } from "@/Utils/MonitorUtils";
+import { formatPercentage } from "@/Utils/FormatUtils";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { setDashboardUptimeSortOrder } from "@/Features/UI/uiSlice";
+import type { Monitor } from "@/Types/Monitor";
+import type { AppDispatch, RootState } from "@/store";
+
+const TOP_N = 5;
+
+interface UptimeCardProps {
+	monitors: Monitor[];
+}
+
+export const UptimeCard = ({ monitors }: UptimeCardProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const dispatch = useDispatch<AppDispatch>();
+	const sortOrder = useSelector((state: RootState) => state.ui.dashboardUptimeSortOrder);
+
+	const direction = sortOrder === "ascending" ? 1 : -1;
+	const ranked = monitors
+		.filter((monitor) => monitor.status !== "paused")
+		.filter(
+			(monitor): monitor is Monitor & { uptimePercentage: number } =>
+				typeof monitor.uptimePercentage === "number"
+		)
+		.sort((a, b) => direction * (a.uptimePercentage - b.uptimePercentage))
+		.slice(0, TOP_N);
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.uptime")}
+			topRight={
+				<IconButton
+					size="small"
+					aria-label={t("pages.dashboard.uptimeCard.toggleSortOrder")}
+					onClick={() =>
+						dispatch(
+							setDashboardUptimeSortOrder(
+								sortOrder === "ascending" ? "descending" : "ascending"
+							)
+						)
+					}
+				>
+					<Icon
+						icon={sortOrder === "ascending" ? ArrowUp : ArrowDown}
+						size={16}
+						color={theme.palette.text.secondary}
+					/>
+				</IconButton>
+			}
+		>
+			{ranked.length === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.noData")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{ranked.map((monitor) => {
+						const paletteKey = getUptimePercentageColor(monitor.uptimePercentage);
+						const color = theme.palette[paletteKey].main;
+						return (
+							<BarRow
+								key={monitor.id}
+								label={monitor.name}
+								value={formatPercentage(monitor.uptimePercentage)}
+								fillRatio={monitor.uptimePercentage}
+								valueColor={color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/index.tsx

@@ -14,6 +14,8 @@ import { setDashboardVisibleCards } from "@/Features/UI/uiSlice";
 import type { RootState, AppDispatch } from "@/store";
 
 import { MonitorStatusCard } from "@/Pages/Dashboard/components/cards/MonitorStatusCard";
+import { CurrentlyDownCard } from "@/Pages/Dashboard/components/cards/CurrentlyDownCard";
+import { UptimeCard } from "@/Pages/Dashboard/components/cards/UptimeCard";
 import { MonitorsByTypeCard } from "@/Pages/Dashboard/components/cards/MonitorsByTypeCard";
 import { EditCardsModal } from "@/Pages/Dashboard/components/EditCardsModal";
 import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
@@ -48,6 +50,8 @@ const Dashboard = () => {
 
 	const cardComponents: Record<DashboardCardKey, ReactNode> = {
 		monitorStatus: <MonitorStatusCard summary={summary} />,
+		currentlyDown: <CurrentlyDownCard monitors={monitors ?? []} />,
+		uptime: <UptimeCard monitors={monitors ?? []} />,
 		monitorsByType: <MonitorsByTypeCard monitorsByType={monitorsByType} />,
 	};
 

client/src/Pages/Docker/Monitors/index.tsx

@@ -19,6 +19,7 @@ const DockerMonitorsPage = () => {
 			controller={c}
 			bulkActions
 			showTypeFilter={false}
+			summaryProps={{ showBreached: true }}
 		>
 			<DockerMonitorsTable
 				monitors={c.monitors || []}

client/src/Types/Dashboard.ts

@@ -1,2 +1,10 @@
-export const dashboardCardKeys = ["monitorStatus", "monitorsByType"] as const;
+export const dashboardCardKeys = [
+	"monitorStatus",
+	"currentlyDown",
+	"uptime",
+	"monitorsByType",
+] as const;
 export type DashboardCardKey = (typeof dashboardCardKeys)[number];
+
+export const dashboardSortOrders = ["ascending", "descending"] as const;
+export type DashboardSortOrder = (typeof dashboardSortOrders)[number];

client/src/Types/Monitor.ts

@@ -169,6 +169,8 @@ export interface Monitor {
 	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
 	dockerLogsEnabled?: boolean;
+	dockerAlertOnStopped?: boolean;
+	dockerAlertOnUnhealthy?: boolean;
 	dockerTlsCa?: string;
 	dockerTlsCert?: string;
 	dockerTlsKeySet?: boolean;

client/src/Utils/MonitorUtils.ts

@@ -31,7 +31,7 @@ export const getMonitorPath = (type: MonitorType): string => {
 		websocket: "uptime",
 		dns: "uptime",
 		unknown: "uptime",
-		docker: "docker",
+		docker: "docker/host",
 		hardware: "infrastructure",
 		pagespeed: "pagespeed",
 	};

client/src/Validation/monitor.ts

@@ -152,6 +152,8 @@ const dockerSchema = baseSchema.extend({
 	// Read only mirror of the server flag, stripped on submit
 	dockerTlsKeySet: z.boolean(),
 	dockerLogsEnabled: z.boolean().register(monitorStepRegistry, { step: 1 }),
+	dockerAlertOnStopped: z.boolean().register(monitorStepRegistry, { step: 1 }),
+	dockerAlertOnUnhealthy: z.boolean().register(monitorStepRegistry, { step: 1 }),
 });
 
 // Game server monitor schema

client/src/locales/en.json

@@ -557,7 +557,7 @@
 				},
 				"status": {
 					"down": "down",
-					"breached": "threshold exceeded",
+					"breached": "alert",
 					"initializing": "initializing",
 					"maintenance": "maintenance",
 					"paused": "paused",
@@ -827,6 +827,18 @@
 						}
 					}
 				},
+				"dockerAlerts": {
+					"title": "Container alerts",
+					"description": "Mark this host as breached while any container on it is stopped or failing its health check, and notify on the change. Containers that exit with code 0 do not count as stopped. Capture does not report exit codes, so on Capture hosts every stopped container counts.",
+					"option": {
+						"onStopped": {
+							"label": "Alert when a container is stopped"
+						},
+						"onUnhealthy": {
+							"label": "Alert when a container is unhealthy"
+						}
+					}
+				},
 				"stats": {
 					"title": "Monitor history",
 					"description": "Clear all monitoring history and statistics for your team. This action is irreversible.",
@@ -1685,7 +1697,7 @@
 				"status": {
 					"up": "Operational",
 					"down": "Down",
-					"breached": "Threshold exceeded",
+					"breached": "Alert",
 					"maintenance": "Maintenance",
 					"paused": "Paused",
 					"initializing": "Initializing"
@@ -1725,13 +1737,13 @@
 				"monitoringSummary": "Monitoring {{count}} service · Updates every 10 seconds",
 				"monitoringSummary_other": "Monitoring {{count}} services · Updates every 10 seconds",
 				"allUp": "All systems operational",
-				"allBreached": "All systems have exceeded thresholds",
+				"allBreached": "All systems have active alerts",
 				"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",
+				"breachedAndDown": "Some systems have active alerts and some are down",
+				"breached": "Some systems have active alerts",
 				"degraded": "Some systems are experiencing issues",
 				"maintenanceAndDown": "Some systems are down during maintenance",
 				"maintenance": "Some systems are under maintenance",
@@ -1924,16 +1936,27 @@
 			},
 			"cards": {
 				"monitorStatus": "Monitor status",
+				"currentlyDown": "Currently down",
+				"uptime": "Monitor uptime",
 				"monitorsByType": "Monitors by type"
 			},
+			"uptimeCard": {
+				"toggleSortOrder": "Toggle sort order"
+			},
+			"currentlyDown": {
+				"empty": "No monitors are down at this moment."
+			},
 			"header": {
 				"title": "Dashboard",
 				"description": "See every monitor type in one place and spot what needs attention."
 			},
 			"editCards": "Edit cards",
 			"editCardsModal": {
-				"title": "Edit cards",
+				"title": "Dashboard cards",
 				"description": "Select the cards to display on your dashboard.",
+				"groups": {
+					"uptime": "Uptime"
+				},
 				"done": "Done"
 			}
 		}