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:
1 parent
a5ec099c13
commit
16d64c42d8
2 files changed
+335
-90
No files matched your search
@@ -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
|
||||
|
||||
Reference in new issue
Block a user