Enrich the Dashboard integration widgets to match the new DNS/Secrets sections

The six integration cards only ever showed one headline number each
(e.g. "3/5 devices online") -- thin compared to the new DNS/Secrets
sections' stat-row-plus-breakdown layout. Each widget now shows 2-3
mini stats plus a compact breakdown bar, using data these endpoints
already return (so no new API calls except one extra Synology call for
CPU/RAM, matching what the Synology page itself already fetches):

- Tailscale: online/unauthorized/expiring-soon stats + devices by OS
- Proxmox: running/total + VM vs LXC counts + guests by node
- Dockhand: running/total + host count + containers by state
- Semaphore: template/failing counts + templates by last-run status
- Gitea: repo/private/failing counts + repos by last-run status
- Synology: volumes/unhealthy/CPU load + RAM used-of-total + disks by
  health status

Extracted the breakdown-bar rendering out of the DNS/Secrets-only
TypeBreakdown into a bare BreakdownBar (no card wrapper, optional
compact sizing) so it drops into each integration card directly, and
factored the per-item counting into a small breakdownFrom() helper
used by all six. Status/state colors reuse the same palette each
integration's own dedicated page already uses for its badges (Docker's
container-state colors, Semaphore/Gitea's run-status colors); open-
ended categories (OS names, Proxmox node names) get a generated
palette instead since there's no fixed enum to hardcode against.
Widget cards moved from a 3-column to a 2-column grid to fit the
extra content without feeling cramped.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bobbanandClaude Sonnet 5 committed 2026-09-17 23:14:18 +02:00
1 parent a5ec099c13
commit 16d64c42d8
2 files changed
+335 -90

No files matched your search

+9 -7
View File
@@ -17,13 +17,15 @@ All modules from the original plan are built:
- Monorepo scaffold, Tabler-themed app shell/navigation
- Authentik OIDC login, roles (first user to sign in becomes admin), audit log
- **Dashboard** — an overview of every system this app tracks, not just the
six integrations: DNS (domain/record counts per provider, cached records
broken down by type), Secrets (monitored/expiring/expired counts, broken
down by type), and the existing live per-integration widgets
(Proxmox/Synology/Semaphore/Tailscale/Gitea/Dockhand). Breakdowns render
as a stacked proportion bar with a legend — no charting library, matching
the rest of the app's plain-Tabler-CSS approach.
- **Dashboard** — an overview of every system this app tracks: DNS (domain/
record counts per provider, cached records broken down by type), Secrets
(monitored/expiring/expired counts, broken down by type), and a widget per
integration with a small stat row plus its own breakdown — Tailscale by
OS, Proxmox by node (VM/LXC counts too), Dockhand by container state (plus
host count), Semaphore and Gitea by last-run status (plus private-repo
count), and Synology's CPU/RAM alongside its disk-health breakdown.
Breakdowns render as a stacked proportion bar with a legend — no charting
library, matching the rest of the app's plain-Tabler-CSS approach.
- **Diagnostic Log** (admin-only) — every call this app makes to a DNS
provider or integration (Tailscale, Proxmox, Synology, Semaphore, Gitea,
Dockhand), success or failure, with latency and the error message if it