Tollerud UI / Infrastructure / HostCard
Components · infrastructure

Infrastructure

Higher-order components for the homelab domain — host and service cards, container stacks, incidents, an alert inbox, the approval and rollback flows, backups and config diffs. These compose the Mission Control dashboard.

A machine at a glance: status dot, CPU / memory / disk meters (red past 85%), uptime and container count. Supports a loading skeleton.

PropsHostCardProps
PropType
hostnamestring
ip?string
status?Status
cpu?string
memory?string
disk?string
uptime?string
containers?number
loading?boolean
emma
4 containers
10.0.10.10
CPU: 23%RAM: 62%Disk: 45%Up: 14d
iris
6 containers
10.0.10.12
CPU: 88%RAM: 79%Disk: 52%Up: 3d
host-card

ServiceHealthCard

A single service with status badge and a compact stat strip — uptime, response time, version.

hermes
Uptime: 99.98%Response: 23msVersion: v2.0
nginx
Uptime: 99.4%Response: 1.84sVersion: 1.27
service-health

DockerStackCard

A compose stack with per-service status rows and an up/total count.

monitoring
3/4 healthy
/hdd/config/monitoring/compose.yml
prometheus
grafana
alertmanager
node-exporter
docker-stack

A severity-coded incident with a colored left border. Acknowledged incidents dim. Severity scale: critical · high · medium · low · info.

CPU sustained at 88% for 12mcritical
14:32·iris

hermes worker pool saturated — requests queueing.

TLS certificate renews in 6 dayslow
09:00·nginx
Nightly backup completedinfo
03:14·backup
incident-card

AlertInbox

A live inbox with severity filter chips, an open count, and per-row acknowledge. Wire onAcknowledge to your state. Pass loading for a skeleton; shows a clear all-good empty state.

Alerts3 unread1 critical
4 of 4
iris — CPU sustained at 88%critical
14:32
pia — disk at 71%medium
13:15
cert renews in 6 dayslow
09:00
backup completed lateinfo
03:14
Acknowledged
alert-inbox

ApprovalCard

A human-in-the-loop gate: the action, its blast radius, and approve / reject. Settles into an approved or rejected state.

restart_containerAwaiting approval

Restart iris:tollerud-hermes to clear the sustained CPU alert.

iris → /hdd/config/tia/compose.yml14:33
approval-card

RollbackPlan

An ordered execution plan with live per-step status — pending, running (spinner), success, failed or skipped.

Rollback hermes → v2.0
Drain traffic from hermes:v2.1
pending
Stop hermes:v2.1 containers
pending
Restore hermes:v2.0 image
pending
Re-attach traffic
pending
Verify health checks
skipped
rollback-plan

BackupStatusPanel

Backup jobs with status, target and size, plus a health summary footer that turns red when any job has failed. Supports loading and empty states.

Backups
48.6 GBLast full: 2026-06-01
emma-config
4.2 GB
pia-media
38 GB
iris-config
1 job failed — check logs
backup-status

ActionDiff

A unified config diff for previewing changes before an agent applies them. Context lines toggle off to focus on edits.

iris:/hdd/config/tia/compose.yml
+2-2
1010 services:
1111 hermes:
12- image: hermes:v2.1
12+ image: hermes:v2.0
1313 restart: unless-stopped
14- mem_limit: 512m
14+ mem_limit: 768m
action-diff