root = Card([header, kpis, cpuMemSection, incidentsSection, endpointsSection, controlsSection], "card", "column", "l")
header = CardHeader("Service Health", "On-call view · api-gateway · production")
kpis = Card([uptimeKpi, errorKpi, incidentsKpi], "sunk", "row", "m")
uptimeKpi = Card([uptimeValue, uptimeLabel, uptimeTag], "clear", "column", "xs")
uptimeValue = Heading("99.95%", "h3")
uptimeLabel = TextContent("Uptime this quarter", "small")
uptimeTag = Tag("SLA OK", null, null, "success")
errorKpi = Card([errorValue, errorLabel, errorTag], "clear", "column", "xs")
errorValue = Heading("0.42%", "h3")
errorLabel = TextContent("Error rate right now · 5-min avg", "small")
errorTag = Tag("Elevated", null, null, "warning")
incidentsKpi = Card([incidentValue, incidentLabel, incidentTag], "clear", "column", "xs")
incidentValue = Heading("3", "h3")
incidentLabel = TextContent("Open incidents", "small")
incidentTag = Tag("SEV-1 active", null, null, "danger")
cpuMemSection = Card([cpuMemTitle, cpuMemChart], "sunk", "column", "s")
cpuMemTitle = Heading("CPU & memory — last 24 hours", "h2")
cpuMemChart = AreaChart(cpuMemLabels, [cpuSeries, memSeries], "natural", "Time (UTC)", "%")
cpuMemLabels = ["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", [42, 40, 38, 35, 33, 36, 40, 45, 52, 58, 64, 61, 55, 49, 47, 50, 56, 63, 68, 65, 58, 52, 47, 43])
memSeries = Series("Memory", [55, 55, 56, 56, 57, 58, 59, 60, 62, 64, 65, 66, 66, 67, 68, 68, 69, 70, 71, 71, 70, 69, 68, 67])
incidentsSection = Card([incidentsTitle, incidentsTable], "sunk", "column", "s")
incidentsTitle = Heading("Open incidents", "h2")
incidentsTable = Table([incCol, sevCol, statusCol, openedCol, ackCol])
incCol = Col("Incident", ["INC-4821 · Payment API", "INC-4819 · Checkout", "INC-4817 · Search"])
sevCol = Col("Severity", ["SEV-1", "SEV-2", "SEV-3"])
statusCol = Col("Status", ["Investigating", "Mitigating", "Monitoring"])
openedCol = Col("Opened", ["14:02 UTC", "12:47 UTC", "09:15 UTC"])
ackCol = Col("Action", ["Acknowledge", "Acknowledge", "Acknowledge"], "action")
endpointsSection = Card([endpointsTitle, endpointsChart], "sunk", "column", "s")
endpointsTitle = Heading("Slowest endpoints (p95)", "h2")
endpointsChart = HorizontalBarChart(endpointLabels, [latencySeries], "grouped", "milliseconds")
endpointLabels = ["POST /v2/charges", "GET /v2/subscriptions", "PUT /v2/invoices", "GET /v2/customers", "POST /v2/refunds"]
latencySeries = Series("Latency (ms)", [1240, 980, 760, 540, 390])
controlsSection = Card([regionForm, thresholdForm], "sunk", "row", "m")
regionForm = Form("region-filter", regionButtons, [regionField])
regionField = FormControl("Region", regionSelect, "Narrows all metrics and incidents to one region")
regionSelect = Select("region", [regionAll, regionUseast, regionEuw, regionAps], "Choose region")
regionAll = SelectItem("all", "All regions")
regionUseast = SelectItem("us-east-1", "US East (us-east-1)")
regionEuw = SelectItem("eu-west-1", "EU West (eu-west-1)")
regionAps = SelectItem("ap-south-1", "AP South (ap-south-1)")
regionButtons = Buttons([applyRegionBtn])
applyRegionBtn = Button("Apply region")
thresholdForm = Form("alert-threshold", thresholdButtons, [thresholdField])
thresholdField = FormControl("Error rate alert threshold", thresholdSlider, "Alerts fire when the 5-minute error rate exceeds this value")
thresholdSlider = Slider("threshold", "discrete", 0, 5, 0.25, [1], "Threshold (%)")
thresholdButtons = Buttons([saveThresholdBtn])
saveThresholdBtn = Button("Save threshold", null, "primary")