root = Card([header, regionForm, statusRow, cpuMemSection, endpointsSection, incidentsSection, thresholdSection, followups], "card", "column", "l")
header = CardHeader("Service Health", "On-call engineer view · Q3 FY24")
regionForm = Form("region-filter", regionButtons, [regionField])
regionButtons = Buttons([applyRegionBtn])
applyRegionBtn = Button("Apply region", null, "primary")
regionField = FormControl("Region", regionSelect, "Scope all metrics on this screen to the selected region")
regionSelect = Select("region", [regionAll, regionUSEast, regionEUWest, regionAPSouth], "Select a region", null, "all")
regionAll = SelectItem("all", "All regions")
regionUSEast = SelectItem("us-east-1", "US East (us-east-1)")
regionEUWest = SelectItem("eu-west-1", "EU West (eu-west-1)")
regionAPSouth = SelectItem("ap-south-1", "AP South (ap-south-1)")
statusRow = Card([uptimeBlock, errorBlock, incidentsBlock], "sunk", "row", "l", "stretch", "start", true)
uptimeBlock = Card([uptimeTitle, uptimeValue, uptimeBar], "clear", "column", "none")
uptimeTitle = TextContent("Uptime this quarter", "small")
uptimeValue = TextContent("99.97%", "large-heavy")
uptimeBar = Progress(99.97)
errorBlock = Card([errorTitle, errorValue, errorStatus], "clear", "column", "none")
errorTitle = TextContent("Error rate right now", "small")
errorValue = TextContent("0.42%", "large-heavy")
errorStatus = Alert("Within threshold", "0.42% over the last 5 minutes vs 0.50% alert threshold", "success")
incidentsBlock = Card([incCountTitle, incCountValue, incCountTag], "clear", "column", "none")
incCountTitle = TextContent("Open incidents", "small")
incCountValue = TextContent("3", "large-heavy")
incCountTag = Tag("1 SEV-1", null, null, "danger")
cpuMemSection = Card([cpuMemHeader, cpuMemChart], "sunk", "column", "m")
cpuMemHeader = CardHeader("CPU & memory usage", "Last 24 hours")
cpuMemChart = AreaChart(cpuMemLabels, [cpuSeries, memSeries], "natural", "Time (UTC)", "Usage %")
cpuMemLabels = ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "Now"]
cpuSeries = Series("CPU %", [38, 42, 55, 61, 58, 72, 66, 49, 54])
memSeries = Series("Memory %", [40, 42, 45, 49, 53, 57, 60, 62, 63])
endpointsSection = Card([endpointsHeader, endpointsTable], "sunk", "column", "m")
endpointsHeader = CardHeader("Slowest endpoints", "p95 latency, last 15 minutes")
endpointsTable = Table([endpointCol, latencyCol, endpointRegionCol])
endpointCol = Col("Endpoint", ["POST /api/v2/orders/sync", "POST /api/v2/payments/verify", "GET /api/v1/invoices", "POST /graphql", "GET /api/v2/customers/import"])
latencyCol = Col("p95 Latency (ms)", [1240, 980, 760, 540, 320], "number")
endpointRegionCol = Col("Region", ["us-east-1", "us-east-1", "eu-west-1", "all regions", "ap-south-1"])
incidentsSection = Card([incidentsHeader, incident1, incident2, incident3], "sunk", "column", "m")
incidentsHeader = CardHeader("Open incidents", "3 active · sorted by severity")
incident1 = Card([incident1Info, sev1Tag, ack1Btn], "clear", "row", "m", "center")
incident1Info = Card([incident1Name, incident1Meta], "clear", "column", "none")
incident1Name = TextContent("Payments API latency spike", "small-heavy")
incident1Meta = TextContent("us-east-1 · open 58m · error rate 1.2%", "small")
sev1Tag = Tag("SEV-1", null, null, "danger")
ack1Btn = Button("Acknowledge")
incident2 = Card([incident2Info, sev2Tag, ack2Btn], "clear", "row", "m", "center")
incident2Info = Card([incident2Name, incident2Meta], "clear", "column", "none")
incident2Name = TextContent("Database connection pool exhaustion", "small-heavy")
incident2Meta = TextContent("eu-west-1 · open 2h 14m · CPU at 88%", "small")
sev2Tag = Tag("SEV-2", null, null, "warning")
ack2Btn = Button("Acknowledge")
incident3 = Card([incident3Info, sev3Tag, ack3Btn], "clear", "row", "m", "center")
incident3Info = Card([incident3Name, incident3Meta], "clear", "column", "none")
incident3Name = TextContent("Batch export jobs failing", "small-heavy")
incident3Meta = TextContent("ap-south-1 · open 5h 02m · 214 jobs failed", "small")
sev3Tag = Tag("SEV-3", null, null, "info")
ack3Btn = Button("Acknowledge")
thresholdSection = Card([thresholdHeader, thresholdForm], "sunk", "column", "m")
thresholdHeader = CardHeader("Alert threshold", "Current: 0.50% error rate")
thresholdForm = Form("alert-threshold", thresholdButtons, [thresholdField])
thresholdButtons = Buttons([saveThresholdBtn, resetThresholdBtn])
saveThresholdBtn = Button("Save threshold", null, "primary")
resetThresholdBtn = Button("Reset to default", null, "tertiary")
thresholdField = FormControl("Error rate threshold", thresholdSlider, "Page the on-call when the 5-minute error rate exceeds this value")
thresholdSlider = Slider("error_rate_threshold", "discrete", 0, 5, 0.5, [0.5], "Error rate %")
followups = FollowUpBlock([fu1, fu2, fu3])
fu1 = FollowUpItem("What changed in the last hour?")
fu2 = FollowUpItem("Compare these metrics across all regions")
fu3 = FollowUpItem("Show the full incident timeline")