Theme · Data Dashboard · Intermediate
Internal Ops Tool
Internal ops tool = an environment switcher, four stability KPIs, and a deployment table with status pills in one dark console.
Tips
Service names in monospace. Three pill colours are enough: green ready, amber building, red act now.
See also
Build an internal operations tool called "Atlas Ops" for an infra team.
STYLE
- Dark canvas (#0b0f17), panels at #121826 with hairline borders
- Accents: teal (#00c2b3) and blue (#0071e3); up = teal, down = soft red
- Clean sans for labels, tabular numbers for metrics (Cupertino-calm, not playful)
LAYOUT
- Top bar: "Deployments" + Production / Staging switcher (Production on) + a white "Deploy" button
- Four KPIs: Uptime 99.98%; p95 latency 142ms; Deploys today 27; Failed 1 (red)
- Deployment table with columns Service / Status / Duration / When - api-gateway (Ready, 42s, 2 min ago), checkout (Building, 18s, now), auth-worker (Ready, 31s, 12 min ago); tall adds search-index (Error, 1m 12s, 1 h ago) and billing-cron (Ready, 8s, 3 h ago)
- Monospace service names; status pills green Ready / amber Building / red Error
COMPONENTS
- Top bar: title, env switcher, Deploy button
- Four KPI cards: uptime, p95 latency, deploys today, failed
- Deployment table: Service / Status / Duration / When
- Status pills: green Ready, amber Building, red Error
INTERACTION
- Env switcher swaps the active state; the failed KPI is pre-tinted red; rows highlight on hover.
TECHNICAL
- React, Tailwind CSS, Recharts or visx, shadcn/ui