Live preview
Change the range or region and the page re-renders — the chart, services list, and incident timeline all stay in sync. Click an incident to focus it in the right-hand panel.
$range = "24h"
$region = "all"
$focusedIncident = ""
$email = ""
$channel = "email"
data = Query("status_summary", {range: $range, region: $region}, {
overall: "operational",
message: "",
uptime: "100%",
incidentCount: 0,
avgLatency: "0 ms",
servicesDown: 0,
servicesTotal: 0,
latency: {times: [], values: []},
services: [],
incidents: []
})
bannerTone = data.overall == "down" ? "danger" : (data.overall == "degraded" ? "warning" : "success")
bannerIcon = data.overall == "down" ? "circle-xmark" : (data.overall == "degraded" ? "triangle-exclamation" : "circle-check")
bannerLabel = data.overall == "down" ? "Service disruption" : (data.overall == "degraded" ? "Partial outage" : "All systems operational")
banner = Banner(
bannerLabel,
data.message,
Button("Subscribe to updates", Action([@ToAssistant("Open subscribe form")]), "secondary", "button", "small"),
bannerIcon,
bannerTone
)
header = PageHeader(
"System status",
data.servicesTotal + " services monitored · " + data.servicesDown + " currently affected",
Breadcrumb([BreadcrumbItem("Acme", "#"), BreadcrumbItem("Status")]),
[
Button("History", Action([@ToAssistant("Show full incident history")]), "ghost"),
Button("Refresh", Action([@Set($range, $range), @ToAssistant("Force refresh status data")]), "primary")
],
StatusDot("Live", "success", true)
)
rangeToggle = ToggleGroup("range", [
{value: "1h", label: "Last hour"},
{value: "24h", label: "Last 24h"},
{value: "7d", label: "Last 7 days"},
{value: "30d", label: "Last 30 days"}
], $range)
regionToggle = ToggleGroup("region", [
{value: "all", label: "All regions", icon: "globe"},
{value: "us-east", label: "US East", icon: "flag-usa"},
{value: "eu-west", label: "EU West", icon: "earth-europe"},
{value: "ap-south", label: "AP South", icon: "earth-asia"}
], $region)
filters = Toolbar([rangeToggle], [regionToggle])
kpis = MetricGrid([
StatCard("Uptime", data.uptime, "up", "vs prev period", "gauge-high"),
StatCard("Incidents", "" + data.incidentCount, "flat", "in window", "siren-on"),
StatCard("Avg response", data.avgLatency, "down", "lower is better", "bolt"),
StatCard("Affected", "" + data.servicesDown + " / " + data.servicesTotal, data.servicesDown == 0 ? "up" : "down", "right now", "satellite-dish")
])
latencyCard = Card([
SectionHeader("Response latency", "p95 across all probes", null, Tag("ms", null, "sm", "info")),
LineChart(data.latency.times, [Series("Latency", data.latency.values)])
])
servicesRows = @Each(data.services, "s",
Stack([
StatusDot(s.name, s.tone, s.tone == "danger"),
Spacer(),
Tag(s.region, "location-dot", "sm", "neutral"),
Tag(s.uptime + " uptime", null, "sm", s.tone),
Button("Details",
Action([@ToAssistant("Show details for " + s.name)]),
"ghost", "button", "small")
], "row", "m", "center")
)
servicesEmpty = EmptyState(
"No services in this region",
"Pick another region or reset the filter to see every service.",
"satellite-dish",
Button("All regions", Action([@Set($region, "all")]), "secondary")
)
servicesCard = Card([
SectionHeader("Service health", "Status by component", null, Tag("Sync · just now", null, "sm", "success")),
@Count(data.services) == 0 ? servicesEmpty : Stack(servicesRows, "column", "s")
])
incidentItems = @Each(data.incidents, "i",
TimelineItem(i.title, i.time, i.description, i.icon, i.tone)
)
incidentsEmpty = EmptyState(
"No incidents in this window",
"All systems were stable. Widen the range to see older incidents.",
"circle-check",
null
)
incidentsCard = Card([
SectionHeader("Recent incidents", "Last " + $range + " · " + data.incidentCount + " total"),
@Count(data.incidents) == 0 ? incidentsEmpty : Timeline(incidentItems)
])
focused = @First(@Filter(data.incidents, "id", "==", $focusedIncident))
focusedExists = @Count(@Filter(data.incidents, "id", "==", $focusedIncident))
focusedPanel = focusedExists == 0 ? EmptyState(
"Pick an incident",
"Tap a row to drill into the incident timeline.",
"circle-info",
null
) : Stack([
PageHeader(focused.title, focused.time, null, null, Tag(focused.status, null, "sm", focused.tone)),
DescriptionList([
DescriptionItem("Status", focused.status, focused.icon),
DescriptionItem("Severity", focused.severity, "triangle-exclamation"),
DescriptionItem("Components", focused.component, "diagram-project"),
DescriptionItem("Owner", focused.owner, "user")
]),
Card([CardHeader("Updates"), Stack(@Each(focused.updates, "u",
ChatBubble(u.author, u.body, u.time, null, "agent", "delivered")
), "column", "m")])
], "column", "m")
incidentTabs = SplitView(
[Stack([incidentsCard, Card([
SectionHeader("Subscribe to updates", "Get notified the moment status changes"),
FormControl("Email", Input("email", "you@company.com", "email", null, $email)),
FormControl("Channel", ToggleGroup("channel", [
{value: "email", label: "Email", icon: "envelope"},
{value: "slack", label: "Slack", icon: "slack"},
{value: "sms", label: "SMS", icon: "mobile-screen-button"},
{value: "rss", label: "RSS", icon: "rss"}
], $channel)),
Buttons([
Button("Subscribe",
Action([
@ToAssistant("Subscribe " + $email + " via " + $channel),
@Reset($email)
]),
"primary"),
Button("Open RSS feed",
Action([@OpenUrl("https://example.com/status.rss")]),
"ghost")
])
])], "column", "l")],
[Card([focusedPanel])],
"1.6fr"
)
selectIncidentRow = @Each(data.incidents, "i",
Button(i.title,
Action([@Set($focusedIncident, i.id)]),
$focusedIncident == i.id ? "primary" : "ghost",
"button",
"small")
)
quickJump = Card([
SectionHeader("Jump to incident", "Quick filter for the right-hand panel"),
Stack(selectIncidentRow, "row", "s")
])
followUps = FollowUpBlock([
FollowUpItem("Open the 90-day uptime report"),
FollowUpItem("Subscribe to incident webhooks"),
FollowUpItem("Compare regions side by side")
], "Try next")
root = Stack([banner, header, filters, kpis, latencyCard, servicesCard, @Count(data.incidents) == 0 ? null : quickJump, incidentTabs, followUps], "column", "l")