shadcn.io is not affiliated with official shadcn/ui
Maintenance Windows Dashboard Block for React Aria
A week of 7 by 24 hourly cells shaded by typical traffic, the three quietest 1, 2 or 4 hour slots ringed and listed, and a Schedule here button that adds a window and refuses an overlap on the same service.
Installation
Overview
Find the least disruptive hour to take something down with this maintenance window planner for React with React Aria. A hairline frame with a plus mark on each corner holds a toolbar with a service and a length, then a week of 168 hourly cells shaded by typical traffic in five steps of the foreground colour, worked out from a seeded series as a share of the week's peak. The three quietest slots for the chosen length are ringed and numbered on the grid and listed below it, for example "Tue 02:00–04:00 UTC, 8% of peak". Press a cell or a listed slot to choose where a window starts, then Shine Button Schedule here adds it to the list of scheduled windows, and refuses one that overlaps a window of the same service, saying which. It is built from Native Select, Shine Button, Button, Empty and Guides. For operations teams who plan around their traffic.
FAQ
How do I use my own traffic?
Replace HOURLY, the typical share of the peak for each hour of a weekday, and WEEKDAY, how busy each day is, or fill RAW with a row of 24 hourly values for each day from your metrics. Everything else is worked out from the grid: the shading, the quietest slots and the percent of peak for each window.
How are the quietest slots found?
For the chosen length the block slides a window over every hour of every day, never across midnight, averages the traffic inside it, and sorts the windows from quietest to busiest. It then takes the quietest three that don't overlap on the same day. Choosing a different length finds them again and chooses the best one.
When does Schedule here refuse?
When the chosen window overlaps one already scheduled for the same service on the same day. The status line names the window it clashes with and its time. It also refuses a seventh window and says to cancel one first. A window for another service in the same hours is fine.
How do I use the grid with a keyboard?
The grid is one tab stop. Arrow keys move between cells, Home and End jump to the ends of a day, and Enter or Space chooses a cell as the start. Every cell is named with its day, hour and share of the peak, and whether it is in a quiet slot or already booked for the chosen service.