# Service Health Dashboard

<Select label="Region" name="region" placeholder="All regions" options="All regions | us-east-1 | us-west-2 | eu-west-1 | ap-southeast-1" value="All regions" />

<Columns>
<Card title="Uptime this quarter">
<Stat label="Uptime" value="99.97%" change="+0.02% vs last quarter" tone="success" icon="chart-line" />
<Progress value="99.97" max="100" label="Target: 99.95%" tone="success" />
</Card>

<Card title="Error rate (last 5 min)">
<Stat label="Error rate" value="0.23%" change="-0.05% from 1hr ago" tone="success" icon="alert-triangle" />
<Progress value="0.23" max="1" label="Alert threshold: 1%" tone="info" />
</Card>
</Columns>

<Card title="Resource usage (24 hours)">
<Tabs>
<Tab title="CPU">
<Chart type="area" x="Time" y="CPU %">
| Time | CPU % |
|---|---|
| 00:00 | 42 |
| 03:00 | 38 |
| 06:00 | 35 |
| 09:00 | 52 |
| 12:00 | 68 |
| 15:00 | 71 |
| 18:00 | 65 |
| 21:00 | 58 |
| 00:00 | 45 |
</Chart>
</Tab>
<Tab title="Memory">
<Chart type="area" x="Time" y="Memory %">
| Time | Memory % |
|---|---|
| 00:00 | 55 |
| 03:00 | 52 |
| 06:00 | 49 |
| 09:00 | 61 |
| 12:00 | 73 |
| 15:00 | 78 |
| 18:00 | 72 |
| 21:00 | 66 |
| 00:00 | 58 |
</Chart>
</Tab>
</Tabs>
</Card>

<Card title="Open incidents">
| Severity | Title | Service | Started | Actions |
|---|---|---|---|---|
| <Badge tone="danger">SEV-1</Badge> | Payment API timeouts | payments | 14 min ago | <Button variant="secondary" size="small" ask="acknowledge INC-2341">Acknowledge</Button> |
| <Badge tone="warning">SEV-2</Badge> | Elevated 5xx on checkout | checkout | 32 min ago | <Button variant="secondary" size="small" ask="acknowledge INC-2340">Acknowledge</Button> |
| <Badge tone="warning">SEV-2</Badge> | Redis replication lag | cache | 1 hr ago | <Button variant="secondary" size="small" ask="acknowledge INC-2339">Acknowledge</Button> |
| <Badge tone="info">SEV-3</Badge> | Slow query alerts | analytics | 3 hr ago | <Button variant="secondary" size="small" ask="acknowledge INC-2338">Acknowledge</Button> |
| <Badge tone="info">SEV-3</Badge> | Disk usage > 80% | logging | 5 hr ago | <Button variant="secondary" size="small" ask="acknowledge INC-2337">Acknowledge</Button> |
</Card>

<Card title="Slowest endpoints (p99 latency)">
| Endpoint | Service | p99 Latency | Requests/min | Trend |
|---|---|---|---|---|
| POST /api/v1/checkout | payments | 2.84s | 1,240 | <Badge tone="danger">↑ 12%</Badge> |
| GET /api/v1/orders/{id} | orders | 1.92s | 3,100 | <Badge tone="warning">↑ 5%</Badge> |
| POST /api/v1/search | catalog | 1.67s | 890 | <Badge tone="neutral">→</Badge> |
| GET /api/v1/reports/daily | analytics | 1.43s | 45 | <Badge tone="success">↓ 3%</Badge> |
| PUT /api/v1/inventory/sync | warehouse | 1.21s | 210 | <Badge tone="warning">↑ 8%</Badge> |
</Card>

<Card title="Alert thresholds">
<Form name="alert-thresholds">
<Columns>
<Slider label="Error rate alert (%)" min="0.1" max="5" step="0.1" value="1" name="error-rate-threshold" />
<Slider label="CPU alert (%)" min="50" max="95" step="1" value="80" name="cpu-threshold" />
<Slider label="Memory alert (%)" min="50" max="95" step="1" value="85" name="memory-threshold" />
<Slider label="Latency p99 alert (s)" min="0.5" max="10" step="0.1" value="2" name="latency-threshold" />
</Columns>
<Button>Save thresholds</Button>
<Button variant="secondary">Reset to defaults</Button>
</Form>
</Card>