CloudConfig
Layout 10 — Vertical Tabs Infrastructure Dashboard
A dark, technical cloud infrastructure dashboard inspired by AWS Console and Vercel. Features vertical tab navigation with spring animations, server status monitoring, database management, storage volumes, and a terminal-style log viewer.
Spring-animated active indicator bar slides between tabs. Status dots (healthy/warning/alert) with ping pulse animation next to each tab.
Status indicator dots on healthy servers pulse with a slow CSS animation, creating a living dashboard feel that communicates uptime at a glance.
CPU, memory, and storage usage bars animate from 0 to target percentage with motion spring physics (stiffness: 80, damping: 20).
Dark terminal background (#08080c) with color-coded log levels (INFO blue, WARN amber, ERROR red, DEBUG gray). Blinking cursor line and auto-scroll effect.
Area chart for CPU usage over 24h with gradient fill (cloudconfig-cpu-grad). Line chart for network throughput with dual inbound/outbound series.
All stat cards, table rows, and volume items animate in with staggered delays using motion's initial/animate pattern.
Infrastructure overview with stat cards, CPU/network charts, server health table, and live log stream
Sortable server table with hostname, IP, status badges, CPU/memory metrics, and action buttons (restart, SSH, monitor)
Database instance cards with engine badges, connection usage bars, backup status, and copyable connection strings
Volume list with usage progress bars, storage distribution bar chart, mount points, and SSD/HDD type labels
Terminal-style log viewer with level/source filtering, timestamp display, auto-scroll, and blinking cursor
Accordion sections for regions, alert thresholds, auto-scaling, SSH keys, backups, and firewall rules