root = Card([header, regionFilter, uptimeCard, metricsRow, errorRateCard, incidentsSection, slowEndpointsSection, alertThresholdForm, followUps])
header = CardHeader("Service Health Dashboard", "On-call view · Last updated: 2024-01-15 14:32 UTC")
regionFilter = Card([regionLabel, regionSelect], "clear", "row", "m", "center")
regionLabel = TextContent("Region:", "small-heavy")
regionSelect = Select("region", regionOptions, "All regions", null, null, "medium")
regionOptions = [optUsEast, optUsWest, optEuWest, optApSouth, optAll]
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)")
optAll = SelectItem("all", "All regions")
uptimeCard = Card([uptimeLabel, uptimeValue, uptimeTrend], "sunk")
uptimeLabel = TextContent("Uptime this quarter", "small-heavy")
uptimeValue = TextContent("99.97%", "large-heavy")
uptimeTrend = TextContent("↑ 0.02% vs last quarter", "small")
metricsRow = Card([cpuCard, memoryCard], "clear", "row", "l", "stretch")
cpuCard = Card([cpuHeader, cpuChart], "sunk")
cpuHeader = CardHeader("CPU Usage (24h)", "Average across instances")
cpuChart = LineChart(cpuLabels, [cpuSeries], "natural", "Hour", "%")
cpuLabels = ["00", "03", "06", "09", "12", "15", "18", "21"]
cpuSeries = Series("CPU %", [23, 19, 15, 34, 52, 61, 48, 31])
memoryCard = Card([memoryHeader, memoryChart], "sunk")
memoryHeader = CardHeader("Memory Usage (24h)", "Average across instances")
memoryChart = LineChart(memoryLabels, [memorySeries], "natural", "Hour", "%")
memoryLabels = ["00", "03", "06", "09", "12", "15", "18", "21"]
memorySeries = Series("Memory %", [45, 42, 40, 58, 72, 78, 65, 52])
errorRateCard = Card([errorHeader, errorValue, errorTrend], "sunk")
errorHeader = CardHeader("Error Rate (now)", "Last 5 minutes")
errorValue = TextContent("0.23%", "large-heavy")
errorTrend = TextContent("↑ 0.08% from 1h ago", "small")
incidentsSection = Card([incidentsHeader, incidentsTable], "sunk")
incidentsHeader = CardHeader("Open Incidents", "5 active · 2 critical")
incidentsTable = Table([incidentIdCol, incidentTitleCol, incidentSeverityCol, incidentSinceCol, incidentActionCol])
incidentIdCol = Col("ID", ["INC-2847", "INC-2845", "INC-2842", "INC-2839", "INC-2836"])
incidentTitleCol = Col("Title", ["Payment API timeout", "Auth service degradation", "Database connection pool exhaustion", "CDN cache invalidation failure", "Webhook delivery delays"])
incidentSeverityCol = Col("Severity", ["Critical", "Critical", "High", "Medium", "Low"])
incidentSinceCol = Col("Since", ["14:12 UTC", "13:45 UTC", "11:20 UTC", "09:30 UTC", "06:15 UTC"])
incidentActionCol = Col("Action", ["Acknowledge", "Acknowledge", "Acknowledge", "Acknowledge", "Acknowledge"])
slowEndpointsSection = Card([slowHeader, slowTable], "sunk")
slowHeader = CardHeader("Slowest Endpoints (p99)", "Top 5 by latency · Last 1 hour")
slowTable = Table([endpointCol, methodCol, p99Col, p95Col, requestsCol])
endpointCol = Col("Endpoint", ["/api/v2/payments/charge", "/api/v1/users/batch", "/api/v3/reports/generate", "/api/v2/webhooks/deliver", "/api/v1/auth/token/refresh"])
methodCol = Col("Method", ["POST", "POST", "GET", "POST", "POST"])
p99Col = Col("p99 Latency", ["2.84s", "1.92s", "1.67s", "1.43s", "1.18s"])
p95Col = Col("p95 Latency", ["1.92s", "1.34s", "1.21s", "0.98s", "0.87s"])
requestsCol = Col("Req/min", ["1,240", "3,890", "420", "2,150", "8,720"])
alertThresholdForm = Card([alertHeader, alertForm], "sunk")
alertHeader = CardHeader("Alert Thresholds", "Configure when to be paged")
alertForm = Form("alert-thresholds", alertButtons, [cpuThresholdField, memoryThresholdField, errorRateThresholdField, latencyThresholdField])
cpuThresholdField = FormControl("CPU Alert Threshold (%)", cpuThresholdInput, "Trigger when CPU exceeds this for 5min")
cpuThresholdInput = Slider("cpu_threshold", "continuous", 50, 95, 5, [80], null, null)
memoryThresholdField = FormControl("Memory Alert Threshold (%)", memoryThresholdInput, "Trigger when memory exceeds this for 5min")
memoryThresholdInput = Slider("memory_threshold", "continuous", 60, 95, 5, [85], null, null)
errorRateThresholdField = FormControl("Error Rate Alert Threshold (%)", errorRateThresholdInput, "Trigger when error rate exceeds this for 2min")
errorRateThresholdInput = Slider("error_rate_threshold", "continuous", 0.1, 5, 0.1, [1], null, null)
latencyThresholdField = FormControl("p99 Latency Alert Threshold (s)", latencyThresholdInput, "Trigger when p99 exceeds this for 5min")
latencyThresholdInput = Slider("latency_threshold", "continuous", 0.5, 10, 0.5, [2], null, null)
alertButtons = Buttons([saveThresholdsBtn, resetThresholdsBtn])
saveThresholdsBtn = Button("Save Thresholds", null, "primary")
resetThresholdsBtn = Button("Reset to Defaults", null, "secondary")
followUps = FollowUpBlock([followUp1, followUp2, followUp3])
followUp1 = FollowUpItem("Acknowledge INC-2847")
followUp2 = FollowUpItem("Show incidents for us-east-1 only")
followUp3 = FollowUpItem("Export incident timeline as CSV")