🗄️ RackFlow

Lightweight infrastructure rack & device management — in your browser

Vanilla HTML · CSS · JavaScript · Zero dependencies · Docker-ready

A digital rack-management panel: visualize racks as physical cabinets, place devices by rack unit (U), manage users & roles — with a clean dark glassmorphism UI, light mode, and zero build tooling.

---

✨ Features

🗄️ Rack units, visualized	Every rack renders as a real cabinet with a numbered unit rail (bottom→top) — 12U / 24U / 42U, your choice
🖥️ Device placement	Place devices at any unit position with the exact height they occupy; edit, move or remove anytime
🔗 Port-level connections	Define connections per port (RJ45, fiber, console, power…) — names are labeled on each side
🔍 Zoom to inspect	Click any device to zoom into the rack and see its connections with per-port detail
👥 Users & roles	Admin console with a dedicated users tab — add, edit, delete, activate/deactivate, role assignment
🎨 Dark glassmorphism	Modern neon-cyan aesthetic with a light-theme toggle and subtle micro-interactions
💾 Persistent demo data	All changes survive page reloads (localStorage) — swap Store for a real API later
🐳 Docker-ready	One-command deployment via nginx:alpine — also plain-Ubuntu instructions included

---

📸 Screenshots

Admin — rack management

Users management

---

🚀 Deploy

Option A — Docker (recommended)

The project ships with a ready-made docker/ setup — a tiny nginx:alpine container. No Node, no build step.

# on your VPS with Docker + Compose v2 installed:
cd rackflow
./docker/deploy.sh

Or manually:

docker compose -f docker/docker-compose.yml up -d --build

Port: served on host port 8082 by default — change it in docker/.env:

RACKFLOW_PORT=8090   # pick any free port

Then open http://<your-vps-ip>:8082.

Updates? Re-run ./docker/deploy.sh — rebuild + restart, restart: unless-stopped survives reboots. Firewall? ufw allow 8082/tcp (or your cloud panel's security group).

Docker file	Purpose
docker/Dockerfile	nginx:alpine + site files + custom config
docker/nginx.conf	security headers, static caching, SPA fallback
docker/docker-compose.yml	build/run, healthcheck, restart policy
docker/.env	RACKFLOW_PORT (default 8082)
docker/deploy.sh	build + up + health check in one command

---

Option B — Plain Ubuntu (no Docker)

RackFlow is static files — any web server works. With nginx on Ubuntu:

# 1. install nginx
sudo apt update && sudo apt install -y nginx

# 2. copy the project into the web root
sudo cp -r rackflow /var/www/rackflow

# 3. configure a site
sudo tee /etc/nginx/sites-available/rackflow > /dev/null <<'EOF'
server {
    listen 8082;
    server_name _;
    root /var/www/rackflow;
    index index.html;

    location / { try_files $uri $uri/ /index.html; }

    location ~* \.(css|js|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
        expires 30d;
        add_header Cache-Control "public";
    }
}
EOF

# 4. enable + reload
sudo ln -s /etc/nginx/sites-available/rackflow /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Open http://<your-vps-ip>:8082.

Only nginx? python3 -m http.server 8080 inside the folder works too — the whole app is client-side.

---

🔑 Demo accounts

Role	Username	Password
Admin	admin	admin
User	liam	user

Any other active user (noor, yuki) signs in with user; diego is inactive and blocked — try the status gating!

---

🧱 Structure

rackflow/
├── index.html          login page
├── users.html          Users tab (admin-only account management)
├── admin.html          Racks tab (racks + devices + links)
├── dashboard.html      read-only user dashboard
├── css/style.css       design system (dark/light, glassmorphism)
├── js/
│   ├── app.js          shared core: Icons, Store (mock data), Auth, UI, rack renderer
│   ├── login.js        login wiring
│   ├── users.js        users table CRUD
│   ├── admin.js        racks/devices/connections admin
│   └── dashboard.js    read-only preview + zoom
├── assets/             icons & images
├── docs/screenshots/   repo screenshots
└── docker/             Docker deployment (nginx)

---

🔌 PHP migration map (when you go server-side)

The mock layer is isolated so only js/app.js changes. Each Store.* call maps to an endpoint:

Store call	PHP endpoint
Auth.login()	POST /api/login
Store.users	GET /api/users — addUser/updateUser/removeUser → POST/PUT/DELETE /api/users
Store.racks	GET /api/racks — addRack/updateRack/removeRack → POST/PUT/DELETE /api/racks
Store.devicesInRack	GET /api/racks/{id}/devices
Store.connections	GET /api/connections — connect/disconnect → POST/DELETE /api/connections

-- minimal schema sketch
racks(id, name, site, color, units)
users(id, name, username, password_hash, role, status, email)
devices(id, rack_id, start_unit, height, name, type, ip, status)
connections(id, a_device, a_port, b_device, b_port)

---

Built with ❤️ — no frameworks, no build step, no node_modules, just the browser.