root = Card([header, errorCallout, kpiRow, trendCard, regionCard, incidentsCard, endpointsCard, thresholdCard], "card", "column", "l")
header = CardHeader("Service Health", "On-call view · Q3 2025")
errorCallout = Callout("warning", "Error rate at 0.42% right now", "Sustained increase since 14:20 UTC · alert threshold is 0.5% (adjust below)")
kpiRow = Card([uptimeKpi, errorKpi, incidentsKpi], "clear", "row", "m")
uptimeKpi = Card([uptimeTitle, uptimeValue, uptimeProgress], "sunk", "column", "xs")
uptimeTitle = TextContent("Uptime · this quarter", "small")
uptimeValue = TextContent("99.98%", "large-heavy")
uptimeProgress = Progress(99.98, "Target 99.9%")
errorKpi = Card([errorTitle, errorValue, errorTag], "sunk", "column", "xs")
errorTitle = TextContent("Error rate · right now", "small")
errorValue = TextContent("0.42%", "large-heavy")
errorTag = Tag("Elevated", null, null, "warning")
incidentsKpi = Card([incidentsTitle, incidentsValue], "sunk", "column", "xs")
incidentsTitle = TextContent("Open incidents", "small")
incidentsValue = TextContent("3", "large-heavy")
trendCard = Card([trendHeader, trendChart], "sunk", "column", "m")
trendHeader = CardHeader("CPU & memory", "Past 24 hours · all regions")
trendChart = LineChart(timeLabels, [cpuSeries, memSeries], "natural", "Time (UTC)", "Usage (%)")
timeLabels = ["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00", "Now"]
cpuSeries = Series("CPU", [21, 18, 17, 20, 26, 39, 58, 72, 68, 59, 51, 46, 48])
memSeries = Series("Memory", [52, 53, 54, 56, 57, 59, 62, 65, 67, 68, 69, 69, 70])
regionCard = Card([regionHeader, regionForm], "card", "column", "m")
regionHeader = CardHeader("Narrow by region")
regionForm = Form("region-filter", regionButtons, [regionControl])
regionControl = FormControl("Region", regionSelect, "Filters the incidents and endpoint latency below")
regionSelect = Select("region", [regionAll, regionEast, regionWest, regionEu, regionAp], "All regions")
regionAll = SelectItem("all", "All regions")
regionEast = SelectItem("us-east-1", "US East (us-east-1)")
regionWest = SelectItem("us-west-2", "US West (us-west-2)")
regionEu = SelectItem("eu-west-1", "EU West (eu-west-1)")
regionAp = SelectItem("ap-southeast-1", "Asia Pacific (ap-southeast-1)")
regionButtons = Buttons([applyRegion, resetRegion])
applyRegion = Button("Apply region filter", null, "primary")
resetRegion = Button("Reset", null, "tertiary")
incidentsCard = Card([incidentsHeader, incidentsTable], "card", "column", "m")
incidentsHeader = CardHeader("Open incidents", "3 active")
incidentsTable = Table([incidentCol, severityCol, regionCol, ackCol])
incidentCol = Col("Incident", ["INC-4821 · Checkout latency spike", "INC-4820 · Elevated 5xx on payments", "INC-4817 · DB connection pool saturation"])
severityCol = Col("Severity", ["SEV-1", "SEV-2", "SEV-3"])
regionCol = Col("Region", ["us-east-1", "eu-west-1", "ap-southeast-1"])
ackCol = Col("Action", ["Acknowledge", "Acknowledge", "Acknowledge"], "action")
endpointsCard = Card([endpointsHeader, endpointsChart], "card", "column", "m")
endpointsHeader = CardHeader("Slowest endpoints", "p95 latency · last 24 hours")
endpointsChart = HorizontalBarChart(endpointLabels, [latencySeries], "grouped", "Latency (ms)")
endpointLabels = ["/api/v1/orders/search", "/api/v1/checkout", "/api/v1/payments/refund", "/api/v1/catalog/feed", "/api/v1/auth/session"]
latencySeries = Series("p95 latency", [1240, 980, 860, 720, 640])
thresholdCard = Card([thresholdHeader, thresholdForm], "card", "column", "m")
thresholdHeader = CardHeader("Alert threshold")
thresholdForm = Form("threshold-form", thresholdButtons, [thresholdControl])
thresholdControl = FormControl("Error rate threshold", thresholdSlider, "Alerts when the 5-minute error rate exceeds this value")
thresholdSlider = Slider("error_threshold", "continuous", 0, 5, 0.25, [0.5], "Error rate (%)")
thresholdButtons = Buttons([saveThreshold, resetThreshold])
saveThreshold = Button("Save threshold", null, "primary")
resetThreshold = Button("Reset", null, "tertiary")