Cloud → Datacenter → Cluster — inventory GUI redesign

Synced read-only from /home/synnet/mirrors/synvirt-product/docs/superpowers/specs/2026-06-10-cloud-inventory-gui-design.md. Edit at the source, not here.

Cloud → Datacenter → Cluster — inventory GUI redesign

Status: approved by Tony 2026-06-10 (mockup click-through at /home/synvirt/mockups/cluster-redesign/, 6 scenarios, not in repo). Scope of this spec: the end-state design + the phase plan. Phase 1 is GUI-only against the existing daemon API; later phases add backend.

End-state model

A single object hierarchy drives navigation, vSphere-class tree on the left, object detail on the right:

Cloud (root — DNS name + floating management IP)
└─ Datacenter            (site / L2-segment boundary)
   ├─ Cluster            (Raft group; quorum, leader)
   │   └─ Host → VMs
   └─ standalone Hosts → VMs

• Cloud is created once via a friendly wizard: Name your Cloud, Web address (DNS, e.g. cloud.synnet.mx), Cloud IP (floating VRRP address). VRRP router ID + management network are auto-set and live under a collapsed “Advanced” row. The handler talks to the in-process synvirt-network NetworkController: a vip: block is persisted in network.yaml (boot-reapply re-plumbs it), the address lives on the ipMGMT KernelPort (uplinks stay L2-only), and synvirt-firewall opens VRRP (protocol 112 / 224.0.0.18). Failover via keepalived managed by synvirt-network.
• Multi-segment: the VIP floats only inside its home L2 segment; VIP-eligibility is auto-detected by subnet. Hosts on other segments join by IP + credentials (mTLS pairing, routable) and reach the Cloud through the DNS name. Future: one VIP per Datacenter, DNS resolves to all of them.
• Cluster creation is a separate, later step: a wizard with a name
  • checkboxes picking which datacenter hosts join (founder pre-selected, odd-quorum hint). Leaving a cluster is per-node and returns the node to standalone inside the Cloud.
• Monitor is per-object: every object detail view carries tabs Summary · Monitor (n) · <children> · Configure (SegmentedControl), Monitor scoped to the object and its children with sub-tabs Issues & Alarms / Tasks / Events. Cloud-wide health stays on the Dashboard + top-bar bell (five-second rule).
• Icons: host = lucide Server with a status corner-dot, cluster = Boxes, datacenter = Building2, cloud root = Cloud, VM = the brand icon (brand/logo/synvirt-icon.png).
• Sidebar IA: Inventory (Dashboard + the tree — nothing else), Library (ISO library, Updates, Migrator), Observability (Activity, Metrics), Settings pinned at the bottom. The static host/hardware nav row and the global Monitor group are removed; the host’s hardware becomes a tab of the host object, monitoring becomes the object Monitor tab.
• Naming: visible copy says Cloud (the wire keeps federated; same display-vs-wire precedent as the vSwitch rename).

Phases

Phase	Scope	Backend
1	Sidebar IA restructure + tree icons + /cluster view becomes “Cloud” with state-conditional body and a visible Leave cluster action	none (existing API)
2	Initialize Cloud wizard (name/DNS/VIP) + Cloud entity + VIP via synvirt-network + keepalived	new
3	Datacenter entity + New-cluster wizard (pick hosts)	new
4	Add host by IP/credentials GUI + discovery accept flow	pairing (exists)
5	Object detail tabs (Summary/Monitor/Configure) incl. host hardware tab; remove transitional nav	none/partial

Phase 1 (this implementation)

GUI-only, works against today’s /api/v1/cluster/* + /api/v1/inventory:

1. SidebarInventory.vue
   • Section label Cluster → Inventory; new Library section (ISO library, Updates, Migrator); Monitor’s three rows (Issues & Alarms, Tasks, Events) move into Observability next to Activity/Metrics (transitional until phase 5 object tabs).
   • The static host/hardware nav row is removed. Reachability: /hardware keeps its route; the local host row in the tree gets an explicit open affordance, and standalone (ungrouped) mode keeps a host row inside the tree area so hardware stays one click away.
   • Nav row Cluster → label Cloud (route /cluster unchanged).
2. Tree visuals (SidebarInventory + DatacenterHostRow)
   • Host rows render the Server glyph with a status corner-dot (replaces the bare dot). VM rows render the brand icon image.
3. ClusterView.vue (/cluster)
   • Title Cluster → Cloud. Body becomes state-conditional:
     • standalone → existing initialize/discovery layout (copy adjusted to Cloud)
     • clustered → cluster summary (quorum, leader, membership rev, nodes) + Leave cluster button (same ConfirmDialog semantics as the sidebar affordance).
4. Stability constraints: every existing data-testid is preserved; e2e cluster-create / cluster-promote selectors keep working; the OpenAPI contract is untouched.

Out of scope for phase 1: Cloud wizard, VIP, DNS, datacenters, object tabs, removing the legacy sidebar.