Infra & network topology primitives
Visual primitives for an infra/network topology view — VPCs, subnets, load balancers, service mesh, k8s clusters and containers, drawn against Mufflermen prod infrastructure (Sydney + Singapore). Visual references — no real telemetry wired.
Infra & network topology primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Infra & network topology primitives: Visual primitives for an infra/network topology view — VPCs, subnets, load balancers, service mesh, k8s clusters and containers, drawn against Mufflermen prod infrastructure (Sydney + Singapore). Visual references — no real telemetry wired.
Topology canvas
Pannable/zoomable canvas surface with starfield grid, fine + coarse dot grids, compass and zoom corner badges.
Network node card
Generic node card — icon by kind, name, IP/CIDR, region chip, health dot with degraded pulse.
Edge connection line
SVG bezier edge with animated dashed flow, bandwidth chip + protocol chip at midpoint, optional bidirectional return.
Subnet box
Dashed-rectangle group around nodes with subnet label, CIDR chip and AZ chip in the header.
Traffic flow arrow
Animated arrow showing req/s with tone shifting from green to red as saturation increases.
Latency badge
p50/p99 latency chip with tone shift from green to red against an SLO threshold + tiny sparkline.
Region marker
Region id + display label + datacentre count chip with an ISO flag glyph or pin fallback.
VPC card
VPC name, CIDR, region, subnet count, internet-gateway chip + peering connections list.
Load balancer card
ALB / NLB / CLB card with listener ports, target group health bar, throughput chip.
Firewall rule row
Semantic table row — priority, action chip (Allow/Deny/Log), protocol, source, destination, ports.
Service mesh dependency
Caller → callee arrow with RPS chip, error rate chip, mTLS chip.
Cluster node
Kubernetes node card — role chip (Master/Worker/Edge), pod count + CPU/MEM usage mini chips.
Container badge
Container image:tag with status (Running/Pending/Failed/Crashing) and restart counter.
Healthcheck status dot
Tiny pulsing dot for healthy/degraded/failed with aria-live + tooltip QuoteBubble.
Full topology composition
Sydney + Singapore VPCs with web/app/db subnets, ALB at edge, mesh dependencies, latency, firewall, cluster + containers.