root = Card([header, statusRow, uptimeSection, resourceSection, errorSection, regionSection, incidentsSection, endpointsSection, thresholdSection, ackSection, followups])
header = CardHeader("Service Health", "On-call engineer view")
statusRow = Card([statusBadge, currentError], "sunk", "row", "m", "center")
statusBadge = Badge("All systems nominal", "default")
currentError = Tag("Error rate: 0.42%", null, null, "info")
uptimeSection = Card([uptimeHeading, uptimeChart], "sunk")
uptimeHeading = Heading("Uptime this quarter", "h3")
uptimeChart = RadialChart(["Uptime"], [99.98])
resourceSection = Card([resourceHeading, resourceChart], "sunk")
resourceHeading = Heading("CPU & memory — last 24h", "h3")
resourceChart = LineChart(["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "Now"], [cpuSeries, memSeries], "natural", "Time", "%")
cpuSeries = Series("CPU", [42, 55, 61, 48, 72, 65, 58])
memSeries = Series("Memory", [60, 63, 66, 64, 69, 71, 70])
errorSection = Card([errorHeading, errorCallout], "sunk")
errorHeading = Heading("Error rate right now", "h3")
errorCallout = TextCallout("success", "0.42%", "Below the 1% alert threshold. All good.")
regionSection = Card([regionHeading, regionSelect], "sunk")
regionHeading = Heading("Region filter", "h3")
regionSelect = Select("region", [regionAll, regionUs, regionEu, regionApac], "All regions", null, "all")
regionAll = SelectItem("all", "All regions")
regionUs = SelectItem("us", "US East")
regionEu = SelectItem("eu", "EU West")
regionApac = SelectItem("apac", "APAC")
incidentsSection = Card([incidentsHeading, incidentsTable], "sunk")
incidentsHeading = Heading("Open incidents", "h3")
incidentsTable = Table([incidentId, incidentSeverity, incidentTitle, incidentStatus])
incidentId = Col("ID", ["INC-4821", "INC-4817", "INC-4809"])
incidentSeverity = Col("Severity", ["P1", "P2", "P3"])
incidentTitle = Col("Title", ["Checkout latency spike", "Webhook delivery delay", "Dashboard load errors"])
incidentStatus = Col("Status", ["Acknowledged", "Open", "Open"])
endpointsSection = Card([endpointsHeading, endpointsTable], "sunk")
endpointsHeading = Heading("Slowest endpoints", "h3")
endpointsTable = Table([endpointName, endpointLatency])
endpointName = Col("Endpoint", ["/api/orders", "/api/checkout", "/api/users", "/api/search", "/api/reports"])
endpointLatency = Col("Latency (ms)", [842, 731, 689, 654, 602])
thresholdSection = Card([thresholdHeading, thresholdForm], "sunk")
thresholdHeading = Heading("Alert threshold", "h3")
thresholdForm = Form("threshold", thresholdButtons, [thresholdField])
thresholdField = FormControl("Error rate threshold (%)", thresholdInput, "Alerts fire when error rate exceeds this value")
thresholdInput = Input("threshold", "1.0", "number")
thresholdButtons = Buttons([saveThresholdBtn])
saveThresholdBtn = Button("Save threshold", null, "primary")
ackSection = Card([ackHeading, ackButtons], "sunk")
ackHeading = Heading("Acknowledge incident", "h3")
ackButtons = Buttons([ackBtn, escalateBtn])
ackBtn = Button("Acknowledge INC-4809", null, "primary")
escalateBtn = Button("Escalate to P1", null, "secondary")
followups = FollowUpBlock([followup1, followup2, followup3])
followup1 = FollowUpItem("Show CPU breakdown by region")
followup2 = FollowUpItem("What changed in the last 24 hours?")
followup3 = FollowUpItem("List recent incident timeline")