feat(sections): rebuild Network / Backup / Cloudflare tabs to match d…#21
Merged
Conversation
…esign
Follows the design artboards for the three section tabs. Top Clients and
Network Events are intentionally dropped (per decision) — the official
UniFi Integration API exposes neither per-client bandwidth nor an event
history, so faking them would make the dashboard dishonest.
Backend — per-device UniFi statistics
- UnifiDevice model gains cpu_pct, mem_pct, uptime_s, ports_used,
ports_total (all best-effort, null when the controller omits them).
- unifi.py: after the /devices list call, fan out one /devices/{id}
detail request per device (parallel, return_exceptions=True) and parse
the `statistics` block + `interfaces.ports`. New _device_stats() probes
several field aliases since naming drifts across firmware revisions.
- 3 new tests: _device_stats nested-parse, missing-field tolerance, and
an integration test that mocks /devices/{id} and asserts enrichment.
Network tab
- DeviceCard rebuilt: device-icon (router/wifi), ONLINE badge, model ·
role · IP, uptime, then a 2-col metric grid with real CPU + RAM bars.
Gateways render the port-grid (used/total), APs render a client count.
- WAN · DDNS card: Public IP / ISP / Link / Gateway kv-stack (Gateway
replaces the old "Tunnel" row; Gateway IP read from the gateway device).
- WAN Throughput uses the shared AreaChart with a peak summary line.
- VLANs: full vlan-row markup — swatch, name, "VLAN n", distribution bar,
client count. Spans 12 cols now that Top Clients is gone.
- Top Clients + Network Events cards removed.
Backup tab
- Fixes the empty heatmap: cells were emitting `day-{label}` classes
(day-ok/day-partial/...) that no CSS rule matched. Now mapped to the
design's `day-cell ok|half|fail` variants; each cell shows its count.
- Datastore card: big used/total mono number + percentage, thick bar,
kv-stack (Frei / Snapshots heute / Letzter Erfolg / Aufbewahrung).
- Storage-by-Guest uses the shared StackedBar + stacked-legend.
- PBS Jobs: job-table with `.attn` row tinting + note line on failures.
Cloudflare tab
- Tunnel card: tunnel name + kv-stack (Connections / Edge regions /
WAN-IP / cloudflared / Tunnel-ID).
- Access card: kv-stack (App / Policy / Letzter Login / Letzter Benutzer
/ Sessions 24h); keeps the honest token-scope hint when the audit log
is unreachable.
- SSL Certs switched to the design's mini-table; DNS Records keep the
status-dot cross-reference + PROXIED badge.
Shared CSS
- layout-extra.css: drawer-section-head, hours-select, toggle-pill.
- Replaced the now-removed ov-row / cert-table / heatmap-legend classes
with the design's kv-stack / mini-table / day-legend.
Verified: tsc -b · eslint · 31 vitest · vite build green;
backend pytest (57) + ruff green.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…esign
Follows the design artboards for the three section tabs. Top Clients and Network Events are intentionally dropped (per decision) — the official UniFi Integration API exposes neither per-client bandwidth nor an event history, so faking them would make the dashboard dishonest.
Backend — per-device UniFi statistics
statisticsblock +interfaces.ports. New _device_stats() probes several field aliases since naming drifts across firmware revisions.Network tab
Backup tab
day-{label}classes (day-ok/day-partial/...) that no CSS rule matched. Now mapped to the design'sday-cell ok|half|failvariants; each cell shows its count..attnrow tinting + note line on failures.Cloudflare tab
Shared CSS
Verified: tsc -b · eslint · 31 vitest · vite build green; backend pytest (57) + ruff green.