2026-07-17 04:00:38 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< title > Dell OpenManage Cockpit — ATC</ title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" />
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />
< link href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel = "stylesheet" />
2026-07-17 15:15:57 +02:00
< link rel = "stylesheet" href = "/styles.css?v=reports1" />
2026-07-17 04:00:38 +02:00
< link rel = "icon" href = "/dell.png" type = "image/png" />
< link rel = "stylesheet" href = "/vendor/xterm/xterm.css?v=home1" />
</ head >
< body >
< div id = "notify-stack" aria-live = "polite" aria-atomic = "false" ></ div >
< div id = "app" >
< header class = "topbar" >
< a class = "brand" href = "/" title = "OpenManage Cockpit home" >
< img class = "dell-logo" src = "/dell.png" alt = "Dell" width = "44" height = "44" />
< div class = "brand-text" >
< h1 > OpenManage < span > Cockpit</ span ></ h1 >
< p id = "ome-meta" > OME · connecting…</ p >
</ div >
</ a >
< div class = "kpi-strip" id = "kpi-strip" aria-label = "Fleet KPIs" ></ div >
< div class = "top-actions" >
< button type = "button" class = "btn ghost" id = "btn-reset-view" title = "Fit fleet in view" > Reset view</ button >
< button type = "button" class = "btn ghost" id = "btn-ome-console" title = "Open OME console" > OME console</ button >
2026-07-17 15:15:57 +02:00
< button type = "button" class = "btn ghost" id = "btn-reports" title = "Fleet reports & Dell compliance" > Reports</ button >
2026-07-17 04:00:38 +02:00
< button type = "button" class = "btn ghost" id = "btn-ops" title = "ATC admin tickets" > Ops desk</ button >
< button type = "button" class = "btn primary" id = "btn-chat" > Cockpit chat</ button >
</ div >
</ header >
< aside class = "rail left" id = "left-rail" >
< section class = "rail-block open" data-module = "viz" >
< button type = "button" class = "rail-toggle" aria-expanded = "true" >
< span > Visualization</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Interactive topology layout</ p >
< div class = "viz-grid" id = "layout-modes" >
< button type = "button" class = "viz-card active" data-layout = "orbit" >< span class = "viz-ico" > ◎</ span >< span class = "viz-t" > Orbit</ span >< span class = "viz-s" > Hub & rings</ span ></ button >
< button type = "button" class = "viz-card" data-layout = "galaxy" >< span class = "viz-ico" > ✶</ span >< span class = "viz-t" > Galaxy</ span >< span class = "viz-s" > Spiral arms</ span ></ button >
< button type = "button" class = "viz-card" data-layout = "clusters" >< span class = "viz-ico" > ◉</ span >< span class = "viz-t" > Clusters</ span >< span class = "viz-s" > Subnet islands</ span ></ button >
< button type = "button" class = "viz-card" data-layout = "lanes" >< span class = "viz-ico" > ≡</ span >< span class = "viz-t" > Lanes</ span >< span class = "viz-s" > Fiber highways</ span ></ button >
< button type = "button" class = "viz-card" data-layout = "helix" >< span class = "viz-ico" > ∿</ span >< span class = "viz-t" > Helix</ span >< span class = "viz-s" > 3D depth coil</ span ></ button >
</ div >
</ div >
</ section >
< section class = "rail-block open" data-module = "filters" >
< button type = "button" class = "rail-toggle" aria-expanded = "true" >
< span > Filters</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Servers / iDRACs = include types. Both off = empty map.</ p >
< div class = "filters" id = "filters" >
< label class = "toggle" >< input type = "checkbox" id = "f-servers" checked /> Servers</ label >
< label class = "toggle" >< input type = "checkbox" id = "f-idrac" /> iDRACs</ label >
< label class = "toggle" >< input type = "checkbox" id = "f-connected" /> Connected only</ label >
< label class = "toggle" >< input type = "checkbox" id = "f-powered" /> Powered on</ label >
< label class = "toggle" >< input type = "checkbox" id = "f-has-power" /> Has power reading</ label >
< label class = "toggle" >< input type = "checkbox" id = "f-ghost-links" /> Ghost offline links</ label >
< label class = "toggle" >< input type = "checkbox" id = "f-pulse-links" checked /> Animate link pulse</ label >
< label class = "range" >
< span > Min watts < em id = "min-w-label" > 0</ em ></ span >
< input type = "range" id = "f-min-watts" min = "0" max = "800" step = "10" value = "0" />
</ label >
</ div >
< div class = "filter-actions" >
< button type = "button" class = "btn ghost compact" id = "btn-clear-filters" title = "Reset filters to defaults" > Reset filters</ button >
</ div >
< input type = "search" id = "search" class = "search" placeholder = "Search name, tag, IP, model…" autocomplete = "off" />
</ div >
</ section >
< section class = "rail-block open" data-module = "view" >
< button type = "button" class = "rail-toggle" aria-expanded = "true" >
< span > Color mode</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Node colors by status, power, model…</ p >
< div class = "chip-grid" id = "view-modes" >
< button type = "button" class = "chip active" data-mode = "status" > Status</ button >
< button type = "button" class = "chip" data-mode = "power" > Power (W)</ button >
< button type = "button" class = "chip" data-mode = "connection" > Connection</ button >
< button type = "button" class = "chip" data-mode = "model" > Model</ button >
< button type = "button" class = "chip" data-mode = "subnet" > Subnet</ button >
</ div >
</ div >
</ section >
< section class = "rail-block open" data-module = "gpu" >
< button type = "button" class = "rail-toggle" aria-expanded = "true" >
< span > V100 GPU matrix</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Live atc-gpu-prod · llama3-70b-gptq</ p >
< div id = "gpu-summary" class = "gpu-summary" > Waiting for GPU telemetry…</ div >
< div id = "gpu-matrix" class = "gpu-matrix" ></ div >
</ div >
</ section >
< section class = "rail-block open" data-module = "live" >
< button type = "button" class = "rail-toggle" aria-expanded = "true" >
< span > Realtime context</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Live OME alerts + fleet deltas — click to focus</ p >
< div class = "ctx-stats" id = "ctx-stats" ></ div >
< div class = "list" id = "alert-list" ></ div >
</ div >
</ section >
< section class = "rail-block open" data-module = "networks" >
< button type = "button" class = "rail-toggle" aria-expanded = "true" >
< span > Networks</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Management subnets — click to focus</ p >
< div class = "list" id = "subnet-list" ></ div >
</ div >
</ section >
< section class = "rail-block" data-module = "models" >
< button type = "button" class = "rail-toggle" aria-expanded = "false" >
< span > Models</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< p class = "hint" > Server platforms in inventory</ p >
< div class = "list" id = "model-list" ></ div >
</ div >
</ section >
< section class = "rail-block" data-module = "groups" >
< button type = "button" class = "rail-toggle" aria-expanded = "false" >
< span > Groups</ span >
< span class = "chev" aria-hidden = "true" ></ span >
</ button >
< div class = "rail-panel" >
< div class = "list" id = "group-list" ></ div >
</ div >
</ section >
</ aside >
< main class = "stage" >
< div class = "ctx-bar" id = "ctx-bar" >
< div class = "ctx-live" >
< span class = "pulse-dot" aria-hidden = "true" ></ span >
< span id = "ctx-live-text" > Realtime context · waiting for OME…</ span >
</ div >
< div class = "ctx-focus" id = "ctx-focus" > Focus: all networks</ div >
</ div >
< canvas id = "topo" ></ canvas >
< div class = "stage-hud" >
< div class = "legend" id = "legend" ></ div >
< div class = "hint-bar" > Scroll = zoom · drag = pan · hover tip · double-click = Quick Connect</ div >
</ div >
< aside class = "ctx-feed" id = "ctx-feed" aria-label = "Realtime feed" >
< header class = "ctx-feed-head" id = "ctx-feed-drag" >
< strong > Live feed</ strong >
< span id = "ctx-feed-meta" > —</ span >
< span class = "feed-docks" >
< button type = "button" class = "feed-dock" id = "btn-feed-collapse" title = "Minimize feed" > ▾</ button >
< button type = "button" class = "feed-dock hidden" id = "btn-feed-expand" title = "Expand feed" > ▴</ button >
</ span >
</ header >
< div class = "ctx-feed-body" id = "ctx-feed-body" ></ div >
</ aside >
</ main >
< aside class = "rail right" id = "inspector" >
< div class = "inspector-empty" id = "inspector-empty" >
< img src = "/dell.png" alt = "" class = "ghost-logo" />
< h2 > Inspector</ h2 >
< p > Select a node, KPI, or subnet for live details. Everything is clickable.</ p >
</ div >
< div class = "inspector-body hidden" id = "inspector-body" ></ div >
</ aside >
< footer class = "ticker" id = "ticker" ></ footer >
</ div >
<!-- Cockpit chat -->
< div class = "drawer" id = "chat-drawer" aria-hidden = "true" >
< div class = "drawer-head" >
< div class = "drawer-brand" >
< img src = "/dell.png" alt = "Dell" height = "22" />
< span > Cockpit chat</ span >
</ div >
< button type = "button" class = "btn ghost" id = "btn-chat-close" > Close</ button >
</ div >
< div class = "chat-context" id = "chat-context" >
< label class = "chat-model-wrap" title = "Select model" >
< span class = "chat-model-label" > Model</ span >
< select id = "chat-model" class = "chat-model-select" aria-label = "Chat model" >
< option value = "llama3-70b-gptq" > llama3-70b-gptq</ option >
</ select >
</ label >
< span class = "chat-ctx-pill" id = "chat-ctx-fleet" > fleet …</ span >
< span class = "chat-ctx-pill" id = "chat-ctx-focus" > focus: none</ span >
</ div >
< div class = "chat-quick" id = "chat-quick" >
2026-07-17 15:15:57 +02:00
< button type = "button" data-q = "List every device with its Service Tag, model, and IP." > All service tags</ button >
< button type = "button" data-q = "What is the current fleet health? Include Service Tags for critical systems." > Fleet health</ button >
< button type = "button" data-q = "List all critical alerts with system name, Service Tag, and IP." > Critical alerts</ button >
< button type = "button" data-q = "Which systems are firmware outdated vs the Dell catalog? Include Service Tags and BIOS/iDRAC versions if known." > Outdated firmware</ button >
2026-07-17 04:00:38 +02:00
< button type = "button" data-q = "Summarize V100 GPU utilization on atc-gpu-prod." > GPU status</ button >
</ div >
< div class = "chat-body" id = "chat-body" ></ div >
< form class = "chat-form" id = "chat-form" >
< input type = "text" id = "chat-input" placeholder = "Ask about live OME fleet, alerts, power, iDRACs, GPUs…" autocomplete = "off" />
< button type = "submit" class = "btn primary" > Send</ button >
</ form >
</ div >
<!-- Ops desk / tickets -->
< div class = "drawer wide" id = "ops-drawer" aria-hidden = "true" >
< div class = "drawer-head" >
< div class = "drawer-brand" >
< img src = "/dell.png" alt = "Dell" height = "22" />
< span > ATC Ops desk</ span >
</ div >
< button type = "button" class = "btn ghost" id = "btn-ops-close" > Close</ button >
</ div >
< div class = "ops-layout" >
< div class = "ops-side" >
< label class = "ops-identity" > Acting as
< select id = "ops-actor" >
< option value = "jody" > Jody van Dongen</ option >
< option value = "laurens" > Laurens Rammers</ option >
</ select >
</ label >
< button type = "button" class = "btn primary" id = "btn-new-ticket" > New ticket</ button >
< div class = "ops-filters" >
< select id = "ops-filter" >
< option value = "openish" > Active</ option >
< option value = "all" > All</ option >
< option value = "open" > Open</ option >
< option value = "accepted" > Accepted</ option >
< option value = "in_progress" > In progress</ option >
< option value = "resolved" > Resolved</ option >
< option value = "closed" > Closed</ option >
< option value = "mine" > Assigned to me</ option >
</ select >
</ div >
< div class = "list" id = "ticket-list" ></ div >
</ div >
< div class = "ops-main" id = "ops-main" >
< div class = "ops-empty" id = "ops-empty" >
< h3 > Admin collaboration</ h3 >
< p > Jody van Dongen and Laurens Rammers can exchange notes and tickets for ATC datacenter operations.</ p >
</ div >
< div class = "ops-thread hidden" id = "ops-thread" ></ div >
</ div >
</ div >
</ div >
< div class = "drawer" id = "ai-drawer" aria-hidden = "true" >
< div class = "drawer-head" >
< div class = "drawer-brand" >
< img src = "/dell.png" alt = "Dell" height = "22" />
< span > OpenManage AI</ span >
</ div >
< button type = "button" class = "btn ghost" id = "btn-ai-close" > Close</ button >
</ div >
< iframe id = "ai-frame" title = "OpenManage AI" src = "about:blank" ></ iframe >
</ div >
2026-07-17 15:15:57 +02:00
<!-- Reports / compliance / export -->
< div class = "drawer wide reports-drawer" id = "reports-drawer" aria-hidden = "true" >
< div class = "drawer-head" >
< div class = "drawer-brand" >
< img src = "/dell.png" alt = "Dell" height = "22" />
< span > Fleet reports · Dell compliance</ span >
</ div >
< button type = "button" class = "btn ghost" id = "btn-reports-close" > Close</ button >
</ div >
< div class = "chip-grid reports-tabs" id = "reports-tabs" >
< button type = "button" class = "chip active" data-tab = "fleet" > Fleet inventory</ button >
< button type = "button" class = "chip" data-tab = "firmware" > Firmware / BIOS</ button >
< button type = "button" class = "chip" data-tab = "warranty" > Warranty</ button >
< button type = "button" class = "chip" data-tab = "ome" > OME reports</ button >
< button type = "button" class = "chip" data-tab = "brief" > Customer brief</ button >
</ div >
< div class = "reports-body" id = "reports-mount" >
< p class = "hint" > Select a report tab to load live OME data.</ p >
</ div >
</ div >
2026-07-17 04:00:38 +02:00
< div class = "scrim" id = "scrim" ></ div >
< div class = "node-tip hidden" id = "node-tip" role = "tooltip" ></ div >
< div class = "modal hidden" id = "ticket-modal" aria-hidden = "true" role = "dialog" aria-labelledby = "ticket-modal-title" >
< div class = "modal-card ticket-card" >
< button type = "button" class = "modal-close" id = "btn-ticket-modal-close" aria-label = "Close" > × </ button >
< div class = "modal-brand" >
< img src = "/dell.png" alt = "Dell" width = "36" height = "36" />
< div >
< p class = "modal-kicker" > ATC Ops desk</ p >
< h2 id = "ticket-modal-title" > Create ticket</ h2 >
< p class = "modal-sub" > Professional handoff between Jody van Dongen and Laurens Rammers</ p >
</ div >
</ div >
< form id = "ticket-form" class = "ticket-form" >
< label > Title
< input type = "text" id = "ticket-title" required maxlength = "180" placeholder = "Short operational title" />
</ label >
< div class = "ticket-form-row" >
< label > Priority
< select id = "ticket-priority" >
< option value = "low" > Low</ option >
< option value = "normal" selected > Normal</ option >
< option value = "high" > High</ option >
< option value = "critical" > Critical</ option >
</ select >
</ label >
< label > Assign to
< select id = "ticket-assignee" >
< option value = "laurens" > Laurens Rammers</ option >
< option value = "jody" > Jody van Dongen</ option >
</ select >
</ label >
</ div >
< label > Details / note
< textarea id = "ticket-body" rows = "7" required placeholder = "Context, system, IP, observed impact, requested action…" ></ textarea >
</ label >
< div class = "ticket-form-actions" >
< button type = "button" class = "btn ghost" id = "btn-ticket-cancel" > Cancel</ button >
< button type = "submit" class = "btn primary" > Create ticket</ button >
</ div >
</ form >
</ div >
</ div >
< div class = "modal hidden" id = "kpi-modal" aria-hidden = "true" role = "dialog" aria-labelledby = "kpi-title" >
< div class = "modal-card kpi-card" >
< button type = "button" class = "modal-close" id = "btn-kpi-close" aria-label = "Close" > × </ button >
< div class = "modal-brand" >
< img src = "/dell.png" alt = "Dell" width = "36" height = "36" />
< div >
< p class = "modal-kicker" > Fleet context</ p >
< h2 id = "kpi-title" > KPI</ h2 >
< p class = "modal-sub" id = "kpi-sub" > Interactive breakdown — click a system for actions</ p >
</ div >
</ div >
< div class = "kpi-summary" id = "kpi-summary" ></ div >
< div class = "kpi-toolbar" >
< input type = "search" id = "kpi-search" class = "search" placeholder = "Search name, IP, model, tag, subnet…" autocomplete = "off" />
< select id = "kpi-sort" aria-label = "Sort" >
< option value = "name" > Sort: name</ option >
< option value = "watts" > Sort: power</ option >
< option value = "status" > Sort: status</ option >
< option value = "subnet" > Sort: subnet</ option >
</ select >
< button type = "button" class = "btn" id = "btn-kpi-apply" > Apply as map filter</ button >
< button type = "button" class = "btn ghost" id = "btn-kpi-clear" > Clear map filter</ button >
</ div >
< div class = "kpi-layout" >
< div class = "kpi-list" id = "kpi-list" ></ div >
< div class = "kpi-detail" id = "kpi-detail" >
< p class = "hint" > Select a system on the left for live context and actions.</ p >
</ div >
</ div >
</ div >
</ div >
< div class = "modal hidden" id = "triage-modal" aria-hidden = "true" role = "dialog" aria-labelledby = "triage-title" >
< div class = "modal-card triage-card" >
< button type = "button" class = "modal-close" id = "btn-triage-close" aria-label = "Close" > × </ button >
< div class = "modal-brand" >
< img src = "/dell.png" alt = "Dell" width = "36" height = "36" />
< div >
< p class = "modal-kicker" > Realtime triage</ p >
< h2 id = "triage-title" > Critical alerts</ h2 >
< p class = "modal-sub" id = "triage-sub" > Click a system to inspect · create ATC ticket instantly</ p >
</ div >
</ div >
< div class = "triage-toolbar" >
< div class = "chip-grid" id = "triage-tabs" >
< button type = "button" class = "chip active" data-triage = "critical" > Critical</ button >
< button type = "button" class = "chip" data-triage = "warning" > Warning</ button >
< button type = "button" class = "chip" data-triage = "events" > Fleet deltas</ button >
< button type = "button" class = "chip" data-triage = "hottest" > Live power</ button >
< button type = "button" class = "chip" data-triage = "all" > All feed</ button >
</ div >
< input type = "search" id = "triage-search" class = "search" placeholder = "Filter by system, IP, message, tag…" />
</ div >
< div class = "triage-layout" >
< div class = "triage-list" id = "triage-list" ></ div >
< div class = "triage-detail" id = "triage-detail" >
< p class = "hint" > Select an alert or system on the left.</ p >
</ div >
</ div >
</ div >
</ div >
< div class = "modal hidden" id = "connect-modal" aria-hidden = "true" role = "dialog" aria-labelledby = "connect-title" >
< div class = "modal-card" >
< button type = "button" class = "modal-close" id = "btn-connect-close" aria-label = "Close" > × </ button >
< div class = "modal-brand" >
< img src = "/dell.png" alt = "Dell" width = "36" height = "36" />
< div >
< p class = "modal-kicker" > Quick Connect</ p >
< h2 id = "connect-title" > Device</ h2 >
< p class = "modal-sub" id = "connect-sub" > —</ p >
</ div >
</ div >
< div class = "modal-badges" id = "connect-badges" ></ div >
< div class = "modal-context" id = "connect-context" ></ div >
< div class = "connect-grid" id = "connect-grid" ></ div >
< p class = "modal-foot" > iDRAC opens in a new tab · SSH opens an in-browser terminal — enter your own username</ p >
</ div >
</ div >
< div class = "modal hidden" id = "ssh-modal" aria-hidden = "true" role = "dialog" aria-labelledby = "ssh-device" >
< div class = "modal-card ssh-card" >
< button type = "button" class = "modal-close" id = "btn-ssh-close" aria-label = "Close" > × </ button >
< div class = "modal-brand" >
< img src = "/dell.png" alt = "Dell" width = "36" height = "36" />
< div >
< p class = "modal-kicker" > SSH terminal</ p >
< h2 id = "ssh-device" > SSH session</ h2 >
< p class = "modal-sub" id = "ssh-sub" > —</ p >
</ div >
</ div >
< p class = "ssh-status" id = "ssh-status" > Enter username and password, then Connect.</ p >
< form class = "ssh-login" id = "ssh-login" autocomplete = "on" >
< div class = "ssh-grid" >
< label > Host
< input type = "text" id = "ssh-host" name = "host" autocomplete = "off" spellcheck = "false" />
</ label >
< label > Port
< input type = "number" id = "ssh-port" name = "port" value = "22" min = "1" max = "65535" />
</ label >
< label > Username
< input type = "text" id = "ssh-user" name = "username" autocomplete = "username" spellcheck = "false" placeholder = "your account (not root)" />
</ label >
< label > Password
< input type = "password" id = "ssh-pass" name = "password" autocomplete = "current-password" placeholder = "••••••••" />
</ label >
</ div >
< div class = "ssh-actions" >
< button type = "submit" class = "btn primary" id = "ssh-connect-btn" > Connect</ button >
< button type = "button" class = "btn ghost" id = "btn-ssh-disconnect" > Disconnect</ button >
</ div >
</ form >
< div class = "ssh-term-wrap hidden" id = "ssh-term-wrap" >
< div id = "ssh-term" class = "ssh-term" ></ div >
</ div >
</ div >
</ div >
< script src = "/vendor/xterm/xterm.min.js?v=home1" ></ script >
< script src = "/vendor/xterm/xterm-addon-fit.min.js?v=home1" ></ script >
2026-07-17 15:15:57 +02:00
< script src = "/app.js?v=reports1" ></ script >
< script src = "/ops.js?v=reports1" ></ script >
< script src = "/ssh.js?v=reports1" ></ script >
< script src = "/reports.js?v=reports1" ></ script >
2026-07-17 04:00:38 +02:00
</ body >
</ html >
