root = Card([header, regionSelector, uptimeSection, resourceSection, errorSection, incidentsSection, endpointsSection, thresholdSection])

header = CardHeader("Service Health", "On-call engineer view")

regionSelector = Card([regionLabel, regionSelect], "sunk", "column", "xs")
regionLabel = TextContent("Region", "small-heavy")
regionSelect = Select("region", [regionAll, regionUsEast, regionUsWest, regionEuWest], "All regions", null, null, "small")
regionAll = SelectItem("all", "All regions")
regionUsEast = SelectItem("us-east", "US East (us-east-1)")
regionUsWest = SelectItem("us-west", "US West (us-west-2)")
regionEuWest = SelectItem("eu-west", "EU West (eu-west-1)")

uptimeSection = Card([uptimeHeading, uptimeValue, uptimeProgress], "clear", "column", "xs")
uptimeHeading = Heading("Uptime this quarter", "h3")
uptimeValue = TextContent("99.95%", "large-heavy")
uptimeProgress = Progress(99.95, "Target 99.9%")

resourceSection = Card([resourceHeading, resourceChart], "sunk", "column", "xs")
resourceHeading = Heading("CPU & memory — past 24 hours", "h3")
resourceChart = LineChart(["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "Now"], [cpuSeries, memorySeries], "linear", "Time", "Usage %")
cpuSeries = Series("CPU", [35, 42, 68, 74, 55, 48, 61])
memorySeries = Series("Memory", [52, 58, 63, 66, 64, 62, 65])

errorSection = Card([errorHeading, errorCallout], "clear", "column", "xs")
errorHeading = Heading("Error rate (now)", "h3")
errorCallout = Callout("success", "0.12%", "Error rate is within the healthy range of < 1%.")

incidentsSection = Card([incidentsHeading, incidentsTable], "sunk", "column", "xs")
incidentsHeading = Heading("Open incidents", "h3")
incidentsTable = Table([incidentId, incidentTitle, incidentSeverity, incidentRegion, incidentAck])
incidentId = Col("ID", ["INC-4821", "INC-4817", "INC-4809"])
incidentTitle = Col("Title", ["Payment API timeouts", "Database replica lag", "CDN cache misses"])
incidentSeverity = Col("Severity", ["Sev-1", "Sev-2", "Sev-3"])
incidentRegion = Col("Region", ["us-east-1", "eu-west-1", "global"])
incidentAck = Col("Acknowledge", ["Acknowledge", "Acknowledge", "Acknowledge"])

endpointsSection = Card([endpointsHeading, endpointsTable], "clear", "column", "xs")
endpointsHeading = Heading("Slowest endpoints (p95 latency)", "h3")
endpointsTable = Table([endpointName, endpointLatency, endpointMethod])
endpointName = Col("Endpoint", ["/api/v1/checkout", "/api/v1/reports", "/api/v1/search", "/api/v1/sync", "/api/v1/webhooks"])
endpointLatency = Col("Latency (ms)", [1240, 980, 870, 760, 690])
endpointMethod = Col("Method", ["POST", "GET", "GET", "PUT", "POST"])

thresholdSection = Card([thresholdHeading, thresholdForm], "sunk", "column", "xs")
thresholdHeading = Heading("Set alert threshold", "h3")
thresholdForm = Form("threshold-form", thresholdButtons, [thresholdField])
thresholdField = FormControl("Error rate threshold (%)", thresholdInput, "We alert when error rate exceeds this value")
thresholdInput = Input("threshold", "1.0", "number")
thresholdButtons = Buttons([thresholdSubmit])
thresholdSubmit = Button("Save threshold", null, "primary")