feat(status-page): display active maintenance banner and monitor maintenance alert (#2679) - #3833
Open
Shivam-Kapure wants to merge 2 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Adds visibility of active scheduled maintenance to public status pages and the monitor detail UI, backed by new backend payload fields and maintenance-window time calculations.
Changes:
- Backend: compute and return
activeMaintenancesfor public status-page payloads based on active maintenance windows. - Frontend: render a
MaintenanceBanneron status pages and a maintenance warningAlerton the monitor details page. - Tests/i18n: add unit tests for maintenance-window end calculation and status-page payload, plus new English translation strings.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| server/src/utils/maintenanceWindow.ts | Adds getActiveWindowEnd() helper for active maintenance ETA calculation. |
| server/test/unit/utils/maintenanceWindow.test.ts | Adds unit tests covering getActiveWindowEnd() for one-time and recurring windows. |
| server/src/domain/status-pages/status-page.type.ts | Extends public status-page payload types with activeMaintenances. |
| server/src/domain/status-pages/status-page.service.ts | Queries maintenance windows for status-page monitors and includes activeMaintenances in the public payload. |
| server/test/unit/services/statusPageService.test.ts | Updates service construction and adds coverage for activeMaintenances inclusion/omission. |
| server/src/config/services.api.ts | Wires maintenanceWindowsRepository into StatusPageService. |
| client/src/Types/StatusPage.ts | Mirrors the new activeMaintenances payload type on the client. |
| client/src/Pages/Uptime/Details/index.tsx | Shows a warning banner when the monitor is in maintenance status. |
| client/src/Pages/StatusPage/Status/themes/shared/MaintenanceBanner.tsx | New themed banner that lists affected services and displays maintenance ETA. |
| client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx | Injects MaintenanceBanner into the base status-page layout. |
| client/src/Pages/StatusPage/Status/index.tsx | Passes activeMaintenances from API response into the themed status page view. |
| client/src/locales/en.json | Adds translation keys for the banner title/ETA/affected services and the monitor maintenance alert text. |
Suppressed comments (1)
client/src/Pages/StatusPage/Status/themes/shared/MaintenanceBanner.tsx:143
- Using the array index as the React key (
key={idx}) can cause unstable rendering if the list changes. Prefer a stable key derived from the data (e.g., maintenance-window id + service name) for the affected-services chips.
{affectedNames.map((name, idx) => (
<Box
key={idx}
sx={{
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+139
to
+152
| 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); |
Comment on lines
+193
to
+204
| {monitor.status === "maintenance" && ( | ||
| <Alert | ||
| severity="warning" | ||
| icon={<Wrench size={20} />} | ||
| sx={{ | ||
| borderRadius: "8px", | ||
| fontWeight: 500, | ||
| }} | ||
| > | ||
| {t("pages.uptime.details.maintenanceAlert")} | ||
| </Alert> | ||
| )} |
Comment on lines
+9
to
+21
| 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; | ||
|
|
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements maintenance mode visibility on public status pages and monitor detail pages as requested in #2679.
MaintenanceBannerwhen any monitors attached to the status page are undergoing active scheduled maintenance, detailing affected services and estimated completion time (ETA).getActiveWindowEnd()utility to calculate end times for one-time and recurring maintenance windows.StatusPageService.getPublicStatusPagePayloadto querymaintenanceWindowsRepositoryfor active windows covering the status page monitors.IMaintenanceWindowsRepositoryinservices.api.ts.en.json.Fixes #2679
PR Checklist
Fixes #2679).t(...)translations with keys inen.json.npm run lintand all unit tests (67 test suites, 1262 tests passing).developbranch.