Skip to content

feat(sections): rebuild Network / Backup / Cloudflare tabs to match d…#21

Merged
rxf-sys merged 1 commit into
mainfrom
claude/redesign-v2-port
May 20, 2026
Merged

feat(sections): rebuild Network / Backup / Cloudflare tabs to match d…#21
rxf-sys merged 1 commit into
mainfrom
claude/redesign-v2-port

Conversation

@rxf-sys

@rxf-sys rxf-sys commented May 20, 2026

Copy link
Copy Markdown
Owner

…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.

…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.
@rxf-sys rxf-sys merged commit 59d8b1d into main May 20, 2026
4 checks passed
@rxf-sys rxf-sys deleted the claude/redesign-v2-port branch May 26, 2026 06:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants