root = Card([header, topRow, regionCard, resourcesCard, incidentsCard, endpointsCard, thresholdCard], "card", "column", "xl")
header = CardHeader("Service Health", "us-east-1 · Production · Updated 14:32 UTC")
topRow = Card([uptimeCard, errorCard], "card", "row", "l")
uptimeCard = Card([uptimeHeading, uptimeNum, uptimeProgress, uptimeNote], "sunk")
uptimeHeading = Heading("Uptime — this quarter", "h3")
uptimeNum = TextContent("99.95%", "large-heavy")
uptimeProgress = Progress(99.95, "vs. 99.90% SLO target")
uptimeNote = TextContent("Rolling availability since Jul 1 in the selected region.", "small")
errorCard = Card([errorHeading, errorNum, errorCallout], "sunk")
errorHeading = Heading("Error rate — right now", "h3")
errorNum = TextContent("0.42%", "large-heavy")
errorCallout = Callout("warning", "Elevated", "The 5-minute error rate is 4x the 0.10% baseline.")
regionCard = Card([regionHeading, regionForm], "sunk")
regionHeading = Heading("Narrow to one region", "h3")
regionForm = Form("region-filter", regionButtons, [regionField])
regionField = FormControl("Region", regionSelect, "Applies to every metric and incident below.")
regionSelect = Select("region", [regionAll, regionEast, regionWest, regionCentral], "All regions")
regionAll = SelectItem("all", "All regions")
regionEast = SelectItem("us-east-1", "us-east-1 (N. Virginia)")
regionWest = SelectItem("us-west-2", "us-west-2 (Oregon)")
regionCentral = SelectItem("eu-central-1", "eu-central-1 (Frankfurt)")
regionButtons = Buttons([regionApplyBtn, regionResetBtn])
regionApplyBtn = Button("Apply", null, "primary")
regionResetBtn = Button("Reset", null, "tertiary")
resourcesCard = Card([resourcesHeading, cpuMemChart, cpuMemNote], "sunk")
resourcesHeading = Heading("CPU & memory — last 24 hours", "h2")
cpuMemChart = AreaChart(hourLabels, [cpuSeries, memSeries], "natural", "Time (UTC)", "Utilization (%)")
cpuMemNote = TextContent("Current: CPU 43% · Memory 72% — averaged across the selected region.", "small")
incidentsCard = Card([incidentsHeading, incidentsTable, incidentActions, incidentsNote], "sunk")
incidentsHeading = Heading("Open incidents", "h2")
incidentsTable = Table([incId, incService, incSeverity, incRegion])
incidentActions = Buttons([ackBtn, runbookBtn])
ackBtn = Button("Acknowledge INC-4821", null, "primary")
runbookBtn = Button("Runbook", null, "secondary")
incidentsNote = TextContent("Acknowledging an incident assigns it to you and silences pages for 15 minutes.", "small")
endpointsCard = Card([endpointsHeading, endpointsTable], "sunk")
endpointsHeading = Heading("Slowest endpoints — p95, last 24 hours", "h2")
endpointsTable = Table([epEndpoint, epMethod, epLatency, epRequests])
thresholdCard = Card([thresholdHeading, thresholdForm, thresholdNote], "sunk")
thresholdHeading = Heading("Set alert threshold", "h2")
thresholdForm = Form("alert-threshold", thresholdButtons, [thresholdField])
thresholdField = FormControl("Error-rate threshold (%)", thresholdSlider, "An alert fires when the 5-minute error rate stays above this value.")
thresholdSlider = Slider("error_threshold", "continuous", 0, 5, 0.25, [1.0], "1.0%")
thresholdButtons = Buttons([saveThresholdBtn, resetThresholdBtn])
saveThresholdBtn = Button("Save threshold", null, "primary")
resetThresholdBtn = Button("Reset to 1.0%", null, "tertiary")
thresholdNote = TextContent("Current threshold: 1.0% · last changed by pager-droid 2 hours ago.", "small")
hourLabels = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"]
cpuSeries = Series("CPU", [35, 38, 42, 55, 61, 58, 47, 44, 52, 68, 74, 71, 66, 58, 54, 49, 45, 51, 57, 63, 60, 52, 47, 43])
memSeries = Series("Memory", [52, 53, 54, 55, 56, 57, 58, 59, 61, 63, 64, 65, 66, 66, 67, 67, 68, 68, 69, 70, 71, 71, 72, 72])
incId = Col("ID", ["INC-4821", "INC-4807", "INC-4798", "INC-4791"])
incService = Col("Service", ["checkout-api", "auth-service", "payments-worker", "search-indexer"])
incSeverity = Col("Severity", ["Critical", "High", "Medium", "Low"])
incRegion = Col("Region", ["us-east-1", "us-east-1", "eu-central-1", "us-west-2"])
epEndpoint = Col("Endpoint", ["/api/v1/checkout/confirm", "/api/v1/users/{id}/profile", "/api/v1/search", "/api/v1/auth/token", "/api/v1/orders/export"])
epMethod = Col("Method", ["POST", "GET", "GET", "POST", "GET"])
epLatency = Col("p95 latency", ["1.84 s", "1.21 s", "980 ms", "745 ms", "612 ms"])
epRequests = Col("Requests", [1240, 8900, 45200, 31200, 380])