defuss-shadcn / Application / Scaffolds / scaffold-status-page
Status Page
A Statuspage-style status page as a clickdummy - "Beacon" for a fictional Acme Cloud. Hover the uptime bars, open the incident, subscribe, then switch to Manage: set a component to Major outage, create an incident, post an update, resolve it - the public page follows every step. Every control is a shipped component. Part of the Application Scaffolds.
On this page (2)
§Status page
The whole page and its console in one source. Views and incident reports are URL fragments (#history, #manage, #incident-i-api) shown with :target; a component's level is one data-level attribute that sets inherited colours and glyphs, and the banner and group rows take the worst level below them.
§How it works
A page, not a component: it composes the library and keeps its own glue small.
- Views - the status page, the incident history, the console and every incident report are sections with an id, shown with
:target; links, back and forward work. - Levels -
data-levelon a component (operational, under maintenance, degraded, partial, major) sets an inherited colour and glyph; groups and the banner take the worst level of their children. Impacts colour incident titles the same way. - Uptime bars - 90 days per component (30 on narrow screens), drawn from the incident history at build time; a hover card names the day and its incidents. Groups are
<details>that show their own bars while closed. - Incidents - the active incident shows its timeline; the upcoming maintenance counts down with the Countdown; the response time is a Chart whose Toggle Group swaps the period.
- Subscribe - a Dialog with Tabs for email, SMS, Slack, webhook and RSS; a Toast confirms.
- Console - Tabs for incidents, components and subscribers. Component Selects change the public page at once; creating an incident (Radio status, affected components with Checkboxes, a notify Switch) stamps its card, report and console row from
<template>s; posting Resolved restores its components and files it under past incidents. - Full screen - app-status-page.html is generated from this page's example at build time.
Comments, ideas or improvements? Edit this page's source on GitHub