mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-27 12:18:59 +00:00
Anso
748ba46669
* feat(dashboard): status masthead, unified gauges, stack health sparklines Rework the home dashboard around a single cyan-railed status masthead that carries the health state word, node meta, and reasons inline. The resource block collapses into one strip with a CPU hero sparkline, memory and disk gauge bars, and a network tile whose sparkline is built from per-container byte-counter deltas. Stack health becomes an 8-column mono table with row tinting, an uptime column sourced from the oldest running container's creation time, and a per-stack 10-minute CPU sparkline. Historical charts pick up a cyan gradient and an amber peak marker. A shared Sparkline primitive backs all of the above. * docs(dashboard): refresh screenshot for phase B layout * fix(dashboard): anchor sparkline bucketing to latest metric timestamp The cpuHistory, netHistory, and cpuPeakLabel memos called Date.now() inside useMemo, which violates react-hooks/purity: the rule fires because re-renders can produce different bucket boundaries from the same inputs. Derive a historyEndAt anchor from the newest metric sample in the polled series and thread it through to ResourceGauges.
80 lines
4.4 KiB
Plaintext
80 lines
4.4 KiB
Plaintext
---
|
|
title: Dashboard
|
|
description: Real-time system stats, stack health, historical metrics, and recent alerts for your host machine.
|
|
---
|
|
|
|
The **Home** tab is the first thing you see after logging in. It provides a live overview of your node's health, resource usage, stack status, and recent alert activity.
|
|
|
|
<Frame>
|
|
<img src="/images/dashboard/dashboard-overview.png" alt="Sencho dashboard showing status masthead, unified gauge strip, stack health table, and historical charts" />
|
|
</Frame>
|
|
|
|
## Status masthead
|
|
|
|
The masthead at the top of the dashboard is the single place to read the node's current condition. It carries:
|
|
|
|
- A **state word** (Healthy, Degraded, or Critical) set in the editorial display face so the reader sees it first.
|
|
- A **pulsing dot** that mirrors the state color: green when nominal, amber when degraded, rose when critical.
|
|
- A **meta line** with the active node, the number of nodes in the fleet, and the time since the last successful sync.
|
|
- A **reasons line** that names exactly which signals moved the state away from Healthy (for example, "CPU 84% · 2 exited · 3 unread errors"). No hovering required.
|
|
- Three quick stat tiles on the right: containers running, aggregate CPU, and memory in use. Hover the **Running** tile to see the managed / external / exited breakdown.
|
|
- An alerts counter pinned to the far right.
|
|
|
|
Sencho derives the state from CPU, RAM, disk usage, exited containers, and unread error alerts:
|
|
|
|
| State | Meaning |
|
|
|-------|---------|
|
|
| **Healthy** | All systems nominal. No resources above warning thresholds, no unread errors. |
|
|
| **Degraded** | At least one resource is above 80%, there are exited containers, or there are unread error alerts. |
|
|
| **Critical** | At least one resource is above 90%, or there are exited containers combined with unread errors. |
|
|
|
|
## Unified gauge strip
|
|
|
|
A single rail of four tiles shows the numbers that change minute-to-minute:
|
|
|
|
| Tile | What it shows |
|
|
|------|---------------|
|
|
| **CPU (hero)** | Current usage with a 10-minute sparkline, average for the window, and the peak value with its time offset |
|
|
| **Memory** | RAM usage with a compact bar and the exact used/total split |
|
|
| **Disk** | Mount usage with a compact bar and the exact used/total split |
|
|
| **Network** | Total throughput per second with the received/transmitted split and a live rhythm spark |
|
|
|
|
The CPU tile's sparkline uses cyan as the data color and marks the peak in amber. Memory and disk bars turn amber at 80% and rose at 90%.
|
|
|
|
## Stack health
|
|
|
|
A mono table of every stack discovered in your `COMPOSE_DIR`, sorted by load so the stacks demanding attention sit at the top:
|
|
|
|
| Column | Description |
|
|
|--------|-------------|
|
|
| **State dot** | Green when healthy, amber when any container in the stack is pushing CPU above 80%, rose when one has exited or is above 90% |
|
|
| **Stack** | Stack name (derived from the directory name) |
|
|
| **Host** | Active node this stack belongs to |
|
|
| **Up** | How long the oldest running container has been up, in compact units (s/m/h/d) |
|
|
| **CPU** | Latest aggregate CPU for the stack's containers |
|
|
| **Memory** | Total memory allocated by the stack's containers |
|
|
| **CPU · 10m** | Per-stack sparkline of the last 10 minutes, tinted to match the row state |
|
|
|
|
Warning rows take on a subtle amber wash; critical rows take on a rose wash. Click any row to jump to that stack's editor. If you have more than 8 stacks, the list paginates automatically.
|
|
|
|
## Historical charts
|
|
|
|
Two area charts display time-series data sampled at one-minute intervals, retained for up to 24 hours:
|
|
|
|
- **CPU** - normalized total CPU percentage across all managed containers over host cores, stroked in cyan with the peak highlighted in amber.
|
|
- **Memory** - total memory allocated by managed containers in GB.
|
|
|
|
Hover over a data point to see the exact value at that moment.
|
|
|
|
<Note>
|
|
Charts only show data from the moment Sencho started collecting. If you just installed Sencho, they will be mostly empty until metrics accumulate.
|
|
</Note>
|
|
|
|
## Recent alerts
|
|
|
|
The bottom section displays triggered alert notifications sorted by recency. Each entry shows the severity level (info, warning, or error), the alert message, and a relative timestamp.
|
|
|
|
Use the **Clear All Notifications** button to dismiss all alerts. If you have more than 8 alerts, the list paginates.
|
|
|
|
Alert thresholds are configured per stack in **Settings > Notifications**. See [Alerts & Notifications](/features/alerts-notifications) for setup details.
|