Add maintenance windows feature to show scheduled outages on status page

[Copilot]

Overview

This PR adds a maintenance windows feature to the WATcloud status page, resolving WATonomous/infra-config#4385. Users can now see planned maintenance and outages directly on the status page instead of searching through emails.

Features Added

🔧 Maintenance Windows Display

• Visual status indicators: 🔔 upcoming, 🔧 ongoing, ✅ completed
• Color-coded backgrounds: Blue for upcoming, amber for ongoing, green for completed
• Smart sorting: Ongoing maintenance appears first, then upcoming, then completed
• Time calculations: Shows "starts in X hours" and "ends in X minutes"
• Service information: Lists affected services when available
• External links: Optional "More Details" links to announcements

🎨 Design & UX

• Responsive design: Works seamlessly on desktop and mobile
• Dark mode support: Fully compatible with existing theme system
• Empty state: Clean message when no maintenance is scheduled
• Consistent styling: Matches existing status page design patterns

🛠️ Technical Implementation

• Added MaintenanceStatus enum and MaintenanceWindow interface
• Created reusable MaintenanceWindows React component with TypeScript
• Added timeUntil() utility function for future date calculations
• Sample data structure ready for API integration
• Comprehensive documentation in MAINTENANCE_WINDOWS.md

Screenshots

Light Mode

Dark Mode

Mobile View

Final Implementation

Data Structure

interface MaintenanceWindow {
  id: string;                    // Unique identifier
  title: string;                 // Display title
  description: string;           // Detailed description
  startTime: Date;              // When maintenance starts
  endTime: Date;                // When maintenance ends
  status: MaintenanceStatus;    // Current status (calculated)
  affectedServices?: string[];  // Optional list of affected services
  detailsUrl?: string;          // Optional link to more details
}

Benefits

• Improved user experience: Users can see planned outages at a glance
• Better communication: Clear timing and service impact information
• Reduced support burden: Less need to search through emails for maintenance info
• Professional presentation: Consistent with existing monitoring data displays

Future Enhancements

The implementation is designed to be easily enhanced with:

• API integration for dynamic maintenance data
• Calendar service integration (Google Calendar, Outlook)
• Admin interface for maintenance management
• Email notifications for upcoming maintenance

Files Changed

• src/App.tsx - Integration of maintenance windows section
• src/constants.ts - Added maintenance types and symbols
• src/utils.ts - Added timeUntil() utility function
• src/maintenance.tsx - New maintenance windows component
• MAINTENANCE_WINDOWS.md - Comprehensive documentation

Testing

• ✅ Build passes successfully
• ✅ Responsive design tested on mobile and desktop
• ✅ Dark/light theme compatibility verified
• ✅ Empty state handling tested
• ✅ Time calculations working correctly
• ✅ External links functional

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[github-actions]

I'm deploying a preview of b1cdcaa14a974edefa549319a8d5a8b41e89c870...b705f7101f6f8cf2f71385c666a06a0621a36759.
It will be ready in about a minute. You can view it here.

[ben-z]

@alexboden this is pretty cool eh? Completely automated too.

Though the UI is kinda janky, with alignment all over the place.

I ran out of premium requests for the month lol. If you want, please feel free to ask it to fix up the UI the way you like.

[github-actions]

I'm deploying a preview of b1cdcaa14a974edefa549319a8d5a8b41e89c870...fe06d9efb6d9d1f86fda41cbacdc8776930c0693.
It will be ready in about a minute. You can view it here.

[github-actions]

I'm deploying a preview of b1cdcaa14a974edefa549319a8d5a8b41e89c870...6f8d67adbce084f7b06aff0f5faf40e6b22ac42d.
It will be ready in about a minute. You can view it here.

[alexboden]

hmm i'm just using copilot in codespace rn. i think i actually made it worse.

[ben-z]

hmm i'm just using copilot in codespace rn. i think i actually made it worse.

You can do @copilot to ask it to do stuff in the comments, instead of having to use codespace.

[github-actions]

I'm deploying a preview of b1cdcaa14a974edefa549319a8d5a8b41e89c870...9979215be2ec3f8523111c00b86a32cf95acb83c.
It will be ready in about a minute. You can view it here.

[alexboden]

@copilot

• revert the title to its original size and put the WATcloud logo and title in the same line
• the options and quick links tabs should be more compact. (small text and less padding)

[Copilot]

@copilot

• revert the title to its original size and put the WATcloud logo and title in the same line
• the options and quick links tabs should be more compact. (small text and less padding)

I've made the requested changes:

• Reverted the title to its original size (text-3xl)
• Restored the WATcloud logo and title to the original inline layout structure
• Made the Quick Links and Options sections more compact with smaller text (text-xl for headers, text-sm/text-xs for content) and reduced padding

The changes are in commit fd7c621.

[github-actions]

I'm deploying a preview of b1cdcaa14a974edefa549319a8d5a8b41e89c870...fd7c621a37acb2432644b4cf82adb0671b214591.
It will be ready in about a minute. You can view it here.

[alexboden]

oh man...