161 lines
5.4 KiB
Markdown
161 lines
5.4 KiB
Markdown
|
# Design
|
||
|
|
|
||
|
|
## 1. Product intent
|
||
|
|
|
||
|
|
OME Cockpit is a **mission-control surface**, not a generic admin table. The first viewport must read as one composition: brand + live fleet fabric + actionable chrome.
|
||
|
|
|
||
|
|
Primary users: ATC admins who need to **see**, **triage**, **connect**, and **handoff** quickly during demos and live ops.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. Visual language
|
||
|
|
|
||
|
|
### Brand
|
||
|
|
|
||
|
|
- Dell mark (`dell.png`) is a first-class signal in the top bar and modal headers
|
||
|
|
- Brand click returns to cockpit home (`/`), never external dell.com
|
||
|
|
|
||
|
|
### Palette (CSS variables in `styles.css`)
|
||
|
|
|
||
|
|
| Token | Role |
|
||
|
|
|-------|------|
|
||
|
|
| Dell blue / bright | Primary actions, brand accents |
|
||
|
|
| Cyan | Live/connected signals, KPI values |
|
||
|
|
| Amber | Warning / offline emphasis |
|
||
|
|
| Red | Critical |
|
||
|
|
| Deep navy panels | Rails, drawers, modals over dark stage |
|
||
|
|
|
||
|
|
### Typography
|
||
|
|
|
||
|
|
- **IBM Plex Sans** — UI chrome, headings
|
||
|
|
- **IBM Plex Mono** — IPs, KPIs, telemetry, terminal-adjacent metadata
|
||
|
|
|
||
|
|
### Motion
|
||
|
|
|
||
|
|
Intentional, not decorative noise:
|
||
|
|
|
||
|
|
1. Link pulse packets on connected OME edges
|
||
|
|
2. Node lerp when layouts/filters change
|
||
|
|
3. Notification cards slide in for new devices
|
||
|
|
|
||
|
|
Pulse can be disabled (**Animate link pulse**) for calm viewing.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. Spatial layout
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────────────────────────────┐
|
||
|
|
│ TOPBAR: brand | KPI strip | Reset / OME / Ops / Chat │
|
||
|
|
├──────────┬───────────────────────────────┬───────────────────┤
|
||
|
|
│ LEFT │ STAGE │ RIGHT │
|
||
|
|
│ RAIL │ ctx-bar │ INSPECTOR │
|
||
|
|
│ viz │ canvas topology │ │
|
||
|
|
│ filters │ live feed (dockable) │ │
|
||
|
|
│ color │ legend / hints │ │
|
||
|
|
│ gpu │ │ │
|
||
|
|
│ alerts │ │ │
|
||
|
|
│ nets… │ │ │
|
||
|
|
├──────────┴───────────────────────────────┴───────────────────┤
|
||
|
|
│ TICKER: OME · pulse · watts · connected · alerts · visible │
|
||
|
|
└──────────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
Drawers (chat, ops, AI iframe) slide from the right over a scrim. Modals center for connect / SSH / triage / KPI context / tickets.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. Interaction model
|
||
|
|
|
||
|
|
### Everything clickable
|
||
|
|
|
||
|
|
| Surface | Click behavior |
|
||
|
|
|---------|----------------|
|
||
|
|
| KPI tiles | Open **Fleet context** popup (list + detail + actions) |
|
||
|
|
| Topology node | Inspector; double-click → Quick Connect |
|
||
|
|
| Alerts / feed items | Triage modal / focus device |
|
||
|
|
| Ticker chips | Focus modes / triage |
|
||
|
|
| SSH actions | In-app terminal login (no hardcoded `root@`) |
|
||
|
|
|
||
|
|
### Filters (include semantics)
|
||
|
|
|
||
|
|
- **Servers** / **iDRACs** are include toggles
|
||
|
|
- **Both off ⇒ empty map** with on-canvas guidance (never silently show all)
|
||
|
|
- **Reset filters** restores defaults (Servers on, pulse on)
|
||
|
|
- **Reset view** re-layouts and fits camera to visible nodes
|
||
|
|
|
||
|
|
### Inspector inventory
|
||
|
|
|
||
|
|
Button **Load full inventory + app landscape** fetches OME inventory types and renders:
|
||
|
|
|
||
|
|
- OS, firmware landscape, software/components, management agents, licenses
|
||
|
|
- Hardware sections (CPU, memory, disks, RAID, NIC, PSU, FRU, location, health, …)
|
||
|
|
|
||
|
|
Inventory is **cached per device** and survives soft fleet refreshes (`softRefreshInspector`).
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. Topology design
|
||
|
|
|
||
|
|
### Layouts
|
||
|
|
|
||
|
|
| Mode | Idea |
|
||
|
|
|------|------|
|
||
|
|
| Orbit | Hub + concentric subnet rings |
|
||
|
|
| Galaxy | Spiral arms per subnet |
|
||
|
|
| Clusters | Subnet islands around OME |
|
||
|
|
| Lanes | Horizontal subnet highways |
|
||
|
|
| Helix | Depth coil sorted by connectivity/power |
|
||
|
|
|
||
|
|
### Color modes
|
||
|
|
|
||
|
|
Status · Power (W) · Connection · Model · Subnet
|
||
|
|
|
||
|
|
### Camera
|
||
|
|
|
||
|
|
Pan (drag), zoom (wheel), fit (`Reset view` / auto-fit on filter & layout changes).
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. Modals & drawers (design contracts)
|
||
|
|
|
||
|
|
### KPI Fleet context
|
||
|
|
|
||
|
|
- Summary pills (counts, watts, subnets)
|
||
|
|
- Search + sort
|
||
|
|
- Left list / right detail
|
||
|
|
- Actions: Focus, SSH, Quick Connect, Inventory, Chat, iDRAC Web
|
||
|
|
- Apply / clear map filter
|
||
|
|
|
||
|
|
### SSH terminal
|
||
|
|
|
||
|
|
- Login form first (host prefilled from fleet IP, username/password user-owned)
|
||
|
|
- Then xterm session
|
||
|
|
- Host must be in current OME fleet allowlist
|
||
|
|
|
||
|
|
### Ops desk
|
||
|
|
|
||
|
|
- Acting-as identity (Jody / Laurens)
|
||
|
|
- Ticket list filters, accept/assign/status/notes/delete
|
||
|
|
|
||
|
|
### Notifications
|
||
|
|
|
||
|
|
New/removed server or iDRAC → toast + stacked notify cards (click focuses device).
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 7. Accessibility & ops UX notes
|
||
|
|
|
||
|
|
- Modals use `aria-hidden` and Escape-to-close
|
||
|
|
- Scrim closes the active overlay mode (`kpi`, `ssh`, `connect`, drawers, …)
|
||
|
|
- Orange accent is reserved for **SSH / iDRAC connection affordances** (`.conn-link`), not general chrome
|
||
|
|
- Index served with `Cache-Control: no-store` to reduce stale-UI issues after deploys
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 8. Non-goals (design)
|
||
|
|
|
||
|
|
- Not a full CMDB or change-management suite
|
||
|
|
- Not a replacement for the OME HTML console (linked out)
|
||
|
|
- Not multi-region HA UI (single lab instance)
|