root = Card([header, regionFilter, uptimeCard, errorRateCard, cpuMemCharts, incidentsSection, slowestEndpointsSection, alertThresholdForm, followUps])
header = CardHeader("Service Health Dashboard", "On-call view — last 24 hours")
regionFilter = Form("region-filter", regionButtons, [regionField])
regionField = FormControl("Region", regionSelect, "Filter all metrics to a single region")
regionSelect = Select("region", regionOptions, "All regions")
regionOptions = [optAll, optUsEast, optUsWest, optEuWest, optApSouth]
optAll = SelectItem("all", "All regions")
optUsEast = SelectItem("us-east-1", "US East (N. Virginia)")
optUsWest = SelectItem("us-west-2", "US West (Oregon)")
optEuWest = SelectItem("eu-west-1", "EU West (Ireland)")
optApSouth = SelectItem("ap-south-1", "Asia Pacific (Mumbai)")
regionButtons = Buttons([applyRegionBtn])
applyRegionBtn = Button("Apply filter", null, "primary")
uptimeCard = Card([uptimeLabel, uptimeValue], "sunk")
uptimeLabel = TextContent("Uptime this quarter", "small-heavy")
uptimeValue = TextContent("99.97%", "large-heavy")
errorRateCard = Card([errorRateCallout], "clear")
errorRateCallout = Callout("warning", "Error rate elevated", "Current error rate: 2.3% (threshold: 1.0%) — last 5 min")
cpuMemCharts = Card([cpuMemHeading, cpuChart, memChart], "clear", "column", "m")
cpuMemHeading = Heading("Resource usage (24h)", "h3")
cpuChart = LineChart(cpuLabels, [cpuSeries], "natural", "Hour", "CPU %")
cpuLabels = ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"]
cpuSeries = Series("CPU", [42, 38, 35, 55, 68, 72, 65, 48])
memChart = LineChart(memLabels, [memSeries], "natural", "Hour", "Memory %")
memLabels = ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"]
memSeries = Series("Memory", [58, 55, 54, 62, 71, 78, 74, 60])
incidentsSection = Card([incidentsHeading, incidentsTable, incidentActions], "clear", "column", "m")
incidentsHeading = Heading("Open incidents", "h3")
incidentsTable = Table([incidentIdCol, incidentServiceCol, incidentSeverityCol, incidentStatusCol, incidentRegionCol])
incidentIdCol = Col("ID", ["INC-2024-0847", "INC-2024-0842", "INC-2024-0839", "INC-2024-0835"])
incidentServiceCol = Col("Service", ["payments-api", "auth-gateway", "notification-worker", "search-indexer"])
incidentSeverityCol = Col("Severity", ["P1", "P2", "P2", "P3"])
incidentStatusCol = Col("Status", ["Investigating", "Mitigating", "Investigating", "Monitoring"])
incidentRegionCol = Col("Region", ["us-east-1", "eu-west-1", "us-east-1", "ap-south-1"])
incidentActions = Buttons([ackBtn1, ackBtn2, ackBtn3, ackBtn4], "column")
ackBtn1 = Button("Acknowledge INC-2024-0847", ["ack", "INC-2024-0847"], "secondary")
ackBtn2 = Button("Acknowledge INC-2024-0842", ["ack", "INC-2024-0842"], "secondary")
ackBtn3 = Button("Acknowledge INC-2024-0839", ["ack", "INC-2024-0839"], "secondary")
ackBtn4 = Button("Acknowledge INC-2024-0835", ["ack", "INC-2024-0835"], "secondary")
slowestEndpointsSection = Card([slowestHeading, slowestTable], "clear", "column", "m")
slowestHeading = Heading("Five slowest endpoints (p99 latency)", "h3")
slowestTable = Table([endpointCol, latencyCol, endpointRegionCol])
endpointCol = Col("Endpoint", ["POST /api/v1/payments/charge", "GET /api/v1/search", "POST /api/v1/auth/token", "GET /api/v1/users/{id}/profile", "PUT /api/v1/orders/{id}"])
latencyCol = Col("p99 Latency (ms)", [2840, 1920, 1650, 1410, 1280])
endpointRegionCol = Col("Region", ["us-east-1", "eu-west-1", "us-east-1", "ap-south-1", "us-west-2"])
alertThresholdForm = Card([alertHeading, alertForm], "sunk", "column", "m")
alertHeading = Heading("Alert threshold configuration", "h3")
alertForm = Form("alert-threshold", alertButtons, [errorThresholdField, latencyThresholdField])
errorThresholdField = FormControl("Error rate threshold (%)", errorThresholdInput, "Alert fires when error rate exceeds this value over 5 min")
errorThresholdInput = Input("error_threshold", "1.0", "number", null, "1.0")
latencyThresholdField = FormControl("p99 latency threshold (ms)", latencyThresholdInput, "Alert fires when any endpoint p99 exceeds this value")
latencyThresholdInput = Input("latency_threshold", "1500", "number", null, "1500")
alertButtons = Buttons([saveThresholdBtn, resetThresholdBtn])
saveThresholdBtn = Button("Save thresholds", null, "primary")
resetThresholdBtn = Button("Reset to defaults", null, "tertiary")
followUps = FollowUpBlock([followUp1, followUp2, followUp3])
followUp1 = FollowUpItem("Show me the full incident timeline for INC-2024-0847")
followUp2 = FollowUpItem("Compare error rates across all regions")
followUp3 = FollowUpItem("Generate a postmortem template for the current P1")