feat(status-page): display active maintenance banner and monitor maintenance alert (#2679)

client/src/Pages/StatusPage/Status/index.tsx

@@ -149,6 +149,7 @@ const StatusPageView = () => {
 				<BaseStatusPage
 					statusPage={statusPage}
 					monitors={monitors}
+					activeMaintenances={data?.activeMaintenances}
 					config={themeConfig}
 				/>
 			</StatusPageThemeProvider>

client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx

@@ -4,9 +4,10 @@ import Stack from "@mui/material/Stack";
 import { useTranslation } from "react-i18next";
 import type { SxProps, Theme } from "@mui/material/styles";
 import type { Monitor } from "@/Types/Monitor";
-import type { StatusPage } from "@/Types/StatusPage";
+import type { StatusPage, ActiveMaintenanceInfo } from "@/Types/StatusPage";
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
+import { MaintenanceBanner } from "@/Pages/StatusPage/Status/themes/shared/MaintenanceBanner";
 import {
 	ThemedHeatmap,
 	type HeatCellKind,
@@ -81,10 +82,16 @@ export interface ThemeConfig<S extends BaseStyles = BaseStyles> {
 interface Props {
 	statusPage: StatusPage;
 	monitors: StatusPageMonitor[];
+	activeMaintenances?: ActiveMaintenanceInfo[];
 	config: ThemeConfig<any>;
 }
 
-export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
+export const BaseStatusPage = ({
+	statusPage,
+	monitors,
+	activeMaintenances,
+	config,
+}: Props) => {
 	const { t } = useTranslation();
 	const { tokens, mode } = useStatusPageTheme();
 	const styles = useMemo(
@@ -125,6 +132,12 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 				styles={styles}
 			/>
 
+			<MaintenanceBanner
+				activeMaintenances={activeMaintenances}
+				monitors={monitors}
+				timezone={statusPage.timezone}
+			/>
+
 			{statusPage.showCharts && (
 				<Box sx={styles.chartSwitchWrap}>
 					<Box

client/src/Pages/StatusPage/Status/themes/shared/MaintenanceBanner.tsx

@@ -0,0 +1,164 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Wrench, Clock } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { Monitor } from "@/Types/Monitor";
+import type { ActiveMaintenanceInfo } from "@/Types/StatusPage";
+import { useStatusPageTheme } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+
+interface Props {
+	activeMaintenances?: ActiveMaintenanceInfo[];
+	monitors: Monitor[];
+	timezone?: string;
+}
+
+export const MaintenanceBanner = ({ activeMaintenances, monitors, timezone }: Props) => {
+	const { t } = useTranslation();
+	const { tokens, timezone: themeTimezone } = useStatusPageTheme();
+	const effectiveTimezone = timezone || themeTimezone;
+
+	if (!activeMaintenances || activeMaintenances.length === 0) {
+		return null;
+	}
+
+	const monitorMap = new Map(monitors.map((m) => [m.id, m.name]));
+
+	return (
+		<Stack
+			spacing={2}
+			sx={{
+				width: "100%",
+				mb: 4,
+			}}
+		>
+			{activeMaintenances.map((mw) => {
+				const affectedNames = mw.monitorIds
+					.map((id) => monitorMap.get(id))
+					.filter(Boolean);
+
+				const formattedEnd = formatDateWithTz(
+					mw.end,
+					"MMM D, YYYY h:mm A",
+					effectiveTimezone
+				);
+
+				const etaText = t("pages.statusPages.maintenanceBanner.eta", {
+					time: `${formattedEnd} (${effectiveTimezone})`,
+				});
+
+				return (
+					<Box
+						key={mw.id}
+						sx={{
+							p: 2.5,
+							borderRadius: tokens.radius,
+							backgroundColor: tokens.warnSoft,
+							border: `1px solid ${tokens.warn}`,
+							color: tokens.text,
+							display: "flex",
+							flexDirection: "column",
+							gap: 1.5,
+							boxShadow: "0 2px 8px rgba(0, 0, 0, 0.04)",
+						}}
+					>
+						<Stack
+							direction="row"
+							alignItems="center"
+							justifyContent="space-between"
+							flexWrap="wrap"
+							gap={1}
+						>
+							<Stack
+								direction="row"
+								alignItems="center"
+								spacing={1.5}
+							>
+								<Box
+									sx={{
+										display: "inline-flex",
+										alignItems: "center",
+										justifyContent: "center",
+										p: 0.75,
+										borderRadius: "8px",
+										backgroundColor: tokens.warn,
+										color: "#ffffff",
+									}}
+								>
+									<Wrench size={18} />
+								</Box>
+								<Typography
+									variant="subtitle1"
+									sx={{
+										fontWeight: 600,
+										fontFamily: tokens.headingFontFamily || "inherit",
+										color: tokens.text,
+										lineHeight: 1.2,
+									}}
+								>
+									{mw.name || t("pages.statusPages.maintenanceBanner.title")}
+								</Typography>
+							</Stack>
+
+							<Stack
+								direction="row"
+								alignItems="center"
+								spacing={0.75}
+								sx={{
+									fontSize: "0.875rem",
+									color: tokens.textMuted,
+									backgroundColor: "rgba(0, 0, 0, 0.04)",
+									px: 1.25,
+									py: 0.5,
+									borderRadius: "6px",
+								}}
+							>
+								<Clock size={15} />
+								<span>{etaText}</span>
+							</Stack>
+						</Stack>
+
+						{affectedNames.length > 0 && (
+							<Stack
+								direction="row"
+								alignItems="center"
+								flexWrap="wrap"
+								gap={0.75}
+								sx={{ mt: 0.5 }}
+							>
+								<Typography
+									variant="body2"
+									sx={{
+										color: tokens.textMuted,
+										fontSize: "0.8125rem",
+										fontWeight: 500,
+									}}
+								>
+									{t("pages.statusPages.maintenanceBanner.affectedServices")}
+								</Typography>
+								{affectedNames.map((name, idx) => (
+									<Box
+										key={idx}
+										sx={{
+											fontSize: "0.75rem",
+											fontWeight: 500,
+											px: 1,
+											py: 0.25,
+											borderRadius: "4px",
+											backgroundColor: tokens.surface,
+											border: `1px solid ${tokens.border}`,
+											color: tokens.text,
+										}}
+									>
+										{name}
+									</Box>
+								))}
+							</Stack>
+						)}
+					</Box>
+				);
+			})}
+		</Stack>
+	);
+};

client/src/Pages/Uptime/Details/index.tsx

@@ -9,7 +9,8 @@ import {
 	HeaderGeoTabs,
 	GeoChecksMap,
 } from "@/Components/monitors";
-import { TrendingUp, AlertTriangle } from "lucide-react";
+import { TrendingUp, AlertTriangle, Wrench } from "lucide-react";
+import Alert from "@mui/material/Alert";
 import { ChecksTable } from "@/Pages/Uptime/Details/Components/ChecksTable";
 import { GeoChecksTable } from "@/Pages/Uptime/Details/Components/GeoChecksTable";
 import { MonitorStatBoxes } from "@/Components/monitors";
@@ -189,6 +190,18 @@ const UptimeDetailsPage = () => {
 				isAdmin={isAdmin}
 				refetch={refetchMonitor}
 			/>
+			{monitor.status === "maintenance" && (
+				<Alert
+					severity="warning"
+					icon={<Wrench size={20} />}
+					sx={{
+						borderRadius: "8px",
+						fontWeight: 500,
+					}}
+				>
+					{t("pages.uptime.details.maintenanceAlert")}
+				</Alert>
+			)}
 			<MonitorStatBoxes
 				monitor={monitor}
 				monitorStats={monitorStats}

client/src/Types/StatusPage.ts

@@ -75,7 +75,16 @@ export interface StatusPage {
 	updatedAt: string;
 }
 
+export interface ActiveMaintenanceInfo {
+	id: string;
+	name: string;
+	start: string;
+	end: string;
+	monitorIds: string[];
+}
+
 export interface StatusPageResponse {
 	statusPage: StatusPage;
 	monitors: Monitor[];
+	activeMaintenances?: ActiveMaintenanceInfo[];
 }

client/src/locales/en.json

@@ -1437,6 +1437,11 @@
 		},
 		"statusPages": {
 			"deleteSuccess": "Status page deleted successfully",
+			"maintenanceBanner": {
+				"title": "Scheduled Maintenance in Progress",
+				"eta": "Expected completion: {{time}}",
+				"affectedServices": "Affected services:"
+			},
 			"fallback": {
 				"title": "No status pages yet",
 				"description": "Publish a public page that shows real-time uptime and incident history to your customers and stakeholders.",
@@ -1669,6 +1674,9 @@
 			"header": {
 				"title": "Uptime monitors",
 				"description": "Watch HTTP endpoints, pings, containers, and ports — and get alerted the moment something goes down."
+			},
+			"details": {
+				"maintenanceAlert": "This monitor is currently under scheduled maintenance. Incident detection and alert notifications are temporarily paused."
 			}
 		}
 	}

server/src/config/services.api.ts

@@ -91,7 +91,7 @@ export const buildApi = (shared: SharedServices, jobScheduler: IJobScheduler): A
 		emailService,
 	});
 
-	const statusPageService = new StatusPageService(statusPagesRepository, settingsService, monitorsRepository);
+	const statusPageService = new StatusPageService(statusPagesRepository, settingsService, monitorsRepository, maintenanceWindowsRepository);
 	const tagsService = new TagsService(tagsRepository, monitorsRepository);
 	const diagnosticService = new DiagnosticService(db);
 

server/src/domain/status-pages/status-page.service.ts

@@ -1,14 +1,17 @@
 import { type IStatusPagesRepository } from "@/domain/status-pages/status-page-repository.interface.js";
 import { ISettingsService } from "@/domain/app-settings/app-settings.service.js";
 import { IMonitorsRepository } from "@/domain/monitors/monitor.repository.interface.js";
+import { type IMaintenanceWindowsRepository } from "@/domain/maintenance-windows/maintenance-window.repository.interface.js";
 import {
+	ActiveMaintenanceInfo,
 	DEFAULT_STATUS_PAGE_THEME,
 	DEFAULT_STATUS_PAGE_THEME_MODE,
 	PublicStatusPagePayload,
 	StatusPage,
 } from "@/domain/status-pages/status-page.type.js";
 import { AppError } from "@/utils/AppError.js";
 import { normalizeStatusPageDomain } from "@/utils/statusPageDomain.js";
+import { isWindowActive, getActiveWindowEnd } from "@/utils/maintenanceWindow.js";
 import { Monitor } from "@/domain/monitors/monitor.type.js";
 
 export interface IStatusPageService {
@@ -26,7 +29,8 @@ export class StatusPageService implements IStatusPageService {
 	constructor(
 		private statusPagesRepository: IStatusPagesRepository,
 		private settingsService: ISettingsService,
-		private monitorsRepository: IMonitorsRepository
+		private monitorsRepository: IMonitorsRepository,
+		private maintenanceWindowsRepository?: IMaintenanceWindowsRepository
 	) {}
 
 	private assertCustomDomainAllowed = (customDomain: string | null | undefined) => {
@@ -128,7 +132,35 @@ export class StatusPageService implements IStatusPageService {
 		const order = new Map(statusPage.monitors.map((id, i) => [id, i]));
 		const sorted = [...monitors].sort((a, b) => (order.get(a.id) ?? Number.MAX_SAFE_INTEGER) - (order.get(b.id) ?? Number.MAX_SAFE_INTEGER));
 
-		return { statusPage, monitors: sorted.map((monitor) => this.toPublicMonitor(monitor, showURL)) };
+		let activeMaintenances: ActiveMaintenanceInfo[] | undefined;
+		if (this.maintenanceWindowsRepository && statusPage.monitors.length > 0) {
+			const windows = await this.maintenanceWindowsRepository.findByMonitorIds(statusPage.monitors, statusPage.teamId);
+			const now = new Date();
+			const activeList = windows
+				.filter((win) => isWindowActive(win, now))
+				.map((win) => {
+					const activeEnd = getActiveWindowEnd(win, now) ?? new Date(win.end);
+					const affectedMonitorIds = win.monitorIds.filter((id) => statusPage.monitors.includes(id));
+					return {
+						id: win.id,
+						name: win.name,
+						start: win.start,
+						end: activeEnd.toISOString(),
+						monitorIds: affectedMonitorIds,
+					};
+				})
+				.filter((m) => m.monitorIds.length > 0);
+
+			if (activeList.length > 0) {
+				activeMaintenances = activeList;
+			}
+		}
+
+		return {
+			statusPage,
+			monitors: sorted.map((monitor) => this.toPublicMonitor(monitor, showURL)),
+			...(activeMaintenances ? { activeMaintenances } : {}),
+		};
 	};
 
 	updateStatusPage = async (id: string, teamId: string, image: Express.Multer.File | undefined, data: Partial<StatusPage>): Promise<StatusPage> => {

server/src/domain/status-pages/status-page.type.ts

@@ -49,7 +49,16 @@ export interface StatusPage {
 export type PublicStatusPageMonitor = Pick<Monitor, "id" | "name" | "type" | "status" | "uptimePercentage" | "recentChecks"> &
 	Partial<Pick<Monitor, "url" | "port">>;
 
+export interface ActiveMaintenanceInfo {
+	id: string;
+	name: string;
+	start: string;
+	end: string;
+	monitorIds: string[];
+}
+
 export interface PublicStatusPagePayload {
 	statusPage: StatusPage;
 	monitors: PublicStatusPageMonitor[];
+	activeMaintenances?: ActiveMaintenanceInfo[];
 }