root = Card([header, statusRow, uptimeCard, resourceCard, errorCard, regionCard, incidentsCard, endpointsCard, alertCard, ackCard], "card", "column", "l")
header = CardHeader("Service Health", "On-call view · Production")
statusRow = Card([statusLabel, statusBadge, regionFilter], "sunk", "row", "m", "center", "between")
statusLabel = TextContent("**Overall status:**", "small-heavy")
statusBadge = Badge("Operational", "default")
regionFilter = Card([regionLabel, regionSelect], "clear", "row", "xs", "center")
regionLabel = TextContent("Region", "small")
regionSelect = Select("region", [regionAll, regionUs, regionEu, regionAp], "us-east-1")
regionAll = SelectItem("all", "All regions")
regionUs = SelectItem("us-east-1", "us-east-1")
regionEu = SelectItem("eu-west-1", "eu-west-1")
regionAp = SelectItem("ap-southeast-1", "ap-southeast-1")
uptimeCard = Card([uptimeTitle, uptimeValue, uptimeProgress], "sunk", "column", "xs")
uptimeTitle = Heading("Uptime · Q3", "h3")
uptimeValue = TextContent("**99.97%**", "large")
uptimeProgress = Progress(99.97, "Target 99.9%")
resourceCard = Card([resourceTitle, resourceChart], "sunk", "column", "xs")
resourceTitle = Heading("CPU & Memory · last 24h", "h3")
resourceChart = LineChart(hours, [cpuSeries, memSeries], "linear", "Hour", "%")
hours = ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"]
cpuSeries = Series("CPU", [42, 45, 51, 48, 63, 71, 68, 74, 79, 72, 66, 58])
memSeries = Series("Memory", [55, 56, 58, 57, 62, 66, 65, 69, 71, 68, 64, 61])
errorCard = Card([errorTitle, errorValue, errorCallout], "sunk", "column", "xs")
errorTitle = Heading("Error rate · now", "h3")
errorValue = TextContent("**0.42%**", "large")
errorCallout = Callout("success", "Within SLO", "Error rate is below the 1% SLO threshold.")
incidentsCard = Card([incidentsTitle, incidentsTable], "sunk", "column", "xs")
incidentsTitle = Heading("Open incidents", "h3")
incidentsTable = Table([incidentId, incidentSeverity, incidentSummary, incidentAck])
incidentId = Col("ID", ["INC-4821", "INC-4817", "INC-4809"])
incidentSeverity = Col("Severity", ["SEV-1", "SEV-2", "SEV-3"])
incidentSummary = Col("Summary", ["Checkout latency spike", "Elevated 5xx on payments", "Cache miss ratio high"])
incidentAck = Col("Action", ["Acknowledge", "Acknowledge", "Acknowledge"], "action")
endpointsCard = Card([endpointsTitle, endpointsTable], "sunk", "column", "xs")
endpointsTitle = Heading("Slowest endpoints", "h3")
endpointsTable = Table([endpointName, endpointLatency])
endpointName = Col("Endpoint", ["/api/orders", "/api/payments", "/api/inventory", "/api/users", "/api/search"])
endpointLatency = Col("p95 latency", ["1.42s", "1.18s", "980ms", "764ms", "612ms"])
alertCard = Card([alertTitle, alertForm], "sunk", "column", "xs")
alertTitle = Heading("Alert threshold", "h3")
alertForm = Form("threshold", alertButtons, [thresholdField])
thresholdField = FormControl("Error rate threshold (%)", thresholdSlider, "Alert when error rate exceeds this value")
thresholdSlider = Slider("error_threshold", "discrete", 0.5, 5, 0.5, null, null, null, null, null)
alertButtons = Buttons([saveThresholdBtn])
saveThresholdBtn = Button("Save threshold", null, "primary")
ackCard = Card([ackTitle, ackForm], "sunk", "column", "xs")
ackTitle = Heading("Acknowledge incident", "h3")
ackForm = Form("ack", ackButtons, [ackSelectField])
ackSelectField = FormControl("Incident", ackSelect)
ackSelect = Select("ack_incident", [ackInc1, ackInc2, ackInc3], "Choose an incident")
ackInc1 = SelectItem("INC-4821", "INC-4821 · SEV-1")
ackInc2 = SelectItem("INC-4817", "INC-4817 · SEV-2")
ackInc3 = SelectItem("INC-4809", "INC-4809 · SEV-3")
ackButtons = Buttons([ackBtn])
ackBtn = Button("Acknowledge", null, "primary")