root = Card([regionSelector, metricsRow, resourceChart, incidentsSection, endpointsSection, alertThresholdForm])
regionSelector = Card([regionLabel, regionSelect], "clear", "row", "m", "center")
regionLabel = TextContent("Region:", "small-heavy")
regionSelect = Select("region", regionOptions, "All regions", [], "medium")
regionOptions = [optUsEast, optUsWest, optEuWest, optApSouth]
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)")
metricsRow = Card([uptimeCard, errorRateCard], "clear", "row", "l", "stretch")
uptimeCard = Card([uptimeLabel, uptimeValue, uptimeSub], "card", "column", "s")
uptimeLabel = TextContent("Uptime This Quarter", "small-heavy")
uptimeValue = TextContent("99.97%", "large-heavy")
uptimeSub = TextContent("Target: 99.95% • 12m 34s downtime", "small")
errorRateCard = Card([errorRateLabel, errorRateValue, errorRateSub], "card", "column", "s")
errorRateLabel = TextContent("Error Rate (Now)", "small-heavy")
errorRateValue = TextContent("0.23%", "large-heavy")
errorRateSub = TextContent("↑ 0.04% vs 1h ago", "small")
resourceChart = Card([chartHeader, cpuMemChart], "card", "column", "m")
chartHeader = CardHeader("Resource Usage (Last 24h)")
cpuMemChart = LineChart(timeLabels, [cpuSeries, memSeries], "natural", "Time", "Usage %")
timeLabels = ["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])
memSeries = Series("Memory %", [61, 58, 56, 63, 71, 74, 70, 64])
incidentsSection = Card([incidentsHeader, incidentsTable, ackForm], "card", "column", "m")
incidentsHeader = CardHeader("Open Incidents", "5 active")
incidentsTable = Table([incIdCol, incTitleCol, incSeverityCol, incSinceCol, incActionCol])
incIdCol = Col("ID", ["INC-2024-0847", "INC-2024-0842", "INC-2024-0839", "INC-2024-0835", "INC-2024-0831"])
incTitleCol = Col("Title", ["Payment API latency spike", "DB connection pool exhaustion", "Cache cluster partial outage", "Auth service 5xx errors", "CDN cache miss storm"])
incSeverityCol = Col("Severity", [sevCritical, sevHigh, sevHigh, sevMedium, sevLow])
sevCritical = Tag("Critical", null, "md", "danger")
sevHigh = Tag("High", null, "md", "warning")
sevMedium = Tag("Medium", null, "md", "info")
sevLow = Tag("Low", null, "md", "neutral")
incSinceCol = Col("Since", ["12m ago", "1h 23m", "3h 45m", "6h 12m", "14h 30m"])
incActionCol = Col("Action", [ackBtn1, ackBtn2, ackBtn3, ackBtn4, ackBtn5])
ackBtn1 = Button("Acknowledge", ["ack:INC-2024-0847"], "primary", "normal", "small")
ackBtn2 = Button("Acknowledge", ["ack:INC-2024-0842"], "primary", "normal", "small")
ackBtn3 = Button("Acknowledge", ["ack:INC-2024-0839"], "primary", "normal", "small")
ackBtn4 = Button("Acknowledge", ["ack:INC-2024-0835"], "primary", "normal", "small")
ackBtn5 = Button("Acknowledge", ["ack:INC-2024-0831"], "primary", "normal", "small")
ackForm = Form("acknowledge-incident", ackButtons, [ackIncidentSelect, ackNoteField])
ackIncidentSelect = FormControl("Incident", ackIncidentSelectInput, "Select incident to acknowledge")
ackIncidentSelectInput = Select("incident_id", ackIncidentOptions, "Choose incident", [], "medium")
ackIncidentOptions = [ackOpt1, ackOpt2, ackOpt3, ackOpt4, ackOpt5]
ackOpt1 = SelectItem("INC-2024-0847", "INC-2024-0847 — Payment API latency spike (Critical)")
ackOpt2 = SelectItem("INC-2024-0842", "INC-2024-0842 — DB connection pool exhaustion (High)")
ackOpt3 = SelectItem("INC-2024-0839", "INC-2024-0839 — Cache cluster partial outage (High)")
ackOpt4 = SelectItem("INC-2024-0835", "INC-2024-0835 — Auth service 5xx errors (Medium)")
ackOpt5 = SelectItem("INC-2024-0831", "INC-2024-0831 — CDN cache miss storm (Low)")
ackNoteField = FormControl("Note", ackNoteInput, "Optional context for the acknowledgment")
ackNoteInput = TextArea("ack_note", "Brief note...", 2)
ackButtons = Buttons([ackSubmitBtn, ackCancelBtn])
ackSubmitBtn = Button("Acknowledge", null, "primary")
ackCancelBtn = Button("Cancel", null, "tertiary")
endpointsSection = Card([endpointsHeader, endpointsTable], "card", "column", "m")
endpointsHeader = CardHeader("Slowest Endpoints (p99 latency)")
endpointsTable = Table([epPathCol, epMethodCol, epP99Col, epRpsCol, epErrorsCol])
epPathCol = Col("Endpoint", ["/api/v2/payments/charge", "/api/v1/users/batch", "/api/v3/reports/export", "/api/v2/orders/history", "/api/v1/auth/refresh"])
epMethodCol = Col("Method", ["POST", "POST", "GET", "GET", "POST"])
epP99Col = Col("p99 Latency", ["2.84s", "1.92s", "1.67s", "1.43s", "1.21s"])
epRpsCol = Col("RPS", ["1,240", "890", "340", "2,100", "4,500"])
epErrorsCol = Col("Error %", ["2.1%", "0.8%", "0.3%", "0.1%", "0.05%"])
alertThresholdForm = Card([thresholdHeader, thresholdForm], "card", "column", "m")
thresholdHeader = CardHeader("Alert Thresholds", "Configure when to be paged")
thresholdForm = Form("alert-thresholds", thresholdButtons, [cpuThresholdField, memThresholdField, errorRateThresholdField, latencyThresholdField])
cpuThresholdField = FormControl("CPU Alert Threshold (%)", cpuThresholdInput, "Trigger when CPU exceeds this for 5m")
cpuThresholdInput = Slider("cpu_threshold", "continuous", 50, 100, 5, [80], null, [])
memThresholdField = FormControl("Memory Alert Threshold (%)", memThresholdInput, "Trigger when Memory exceeds this for 5m")
memThresholdInput = Slider("mem_threshold", "continuous", 50, 100, 5, [85], null, [])
errorRateThresholdField = FormControl("Error Rate Alert Threshold (%)", errorRateThresholdInput, "Trigger when error rate exceeds this for 2m")
errorRateThresholdInput = Slider("error_rate_threshold", "continuous", 0.1, 5, 0.1, [1], null, [])
latencyThresholdField = FormControl("p99 Latency Alert Threshold (ms)", latencyThresholdInput, "Trigger when any endpoint p99 exceeds this for 5m")
latencyThresholdInput = Slider("latency_threshold", "continuous", 500, 10000, 100, [2000], null, [])
thresholdButtons = Buttons([thresholdSaveBtn, thresholdResetBtn])
thresholdSaveBtn = Button("Save Thresholds", null, "primary")
thresholdResetBtn = Button("Reset to Defaults", null, "tertiary")