Scheduled Downtime Panel Error Block for React

The real notice would show the clock of the moment, which no static demo can. The Slider is a demo control: it pretends the time is any 15 minutes from 02:00 to 06:00 UTC so you can see every state of the panel, and the copy says so. In your app, drop the Slider and set at from the current time (and refresh it every minute if you want the panel live).

Each task has a typed start and end in minutes after midnight UTC. At the clock's time a task is Done once its end has passed, Running from its start, and Queued before it. A running task shows how far through its own window the clock is, and the "1 of 4 done" count and the bar are derived from the same list, so the text and the drawing never disagree.

The window's day and its hours are typed constants, written in UTC with Intl.DateTimeFormat and a timeZone: "UTC", so the page reads the same on the server and in every time zone. Nothing calls Date.now() or new Date() with no argument. Show your visitors' own time zone only if they ask for it, and keep UTC visible beside it.

It's a real slider with a name ("Pretend the time is") and a spoken value such as "04:15 UTC", operable with the arrow keys, Home and End. A polite status line, present from load, announces the new state half a second after you stop moving it ("04:15 UTC: Database migration is running, 1 h 45 min to go"), so a screen reader isn't flooded while you drag. The bar is decorative; its numbers are in text.

Times, the Slider and the bar stay left to right, because a clock's axis doesn't flip; the text around them follows the page. The Slider is wrapped in the catalog's direction provider for that, so its keys and thumb agree with its drawing.

Everything: the clock, the Slider and the list change only this page. The status page link goes to #: point it at yours. It's a Shine Button with render set to an a element and nativeButton={false}.