ATC/ome-cockpit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Network Design Studio with multi-U Dell rack designer.

Browse Source 
Includes rack catalog/API, Visio-style drag-and-drop, faceplate assets, readable nameplates, and theme/RDP UI updates so multi-U placement stays correct during design.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
root
2026-07-18 01:18:14 +02:00
parent a3d0ed72bd
commit 91222faffe
17 changed files with 8865 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/index.html
+80 -33
View File
@@ -7,9 +7,19 @@
<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" />
<link rel="stylesheet" href="/styles.css?v=reports1" />
<link rel="stylesheet" href="/styles.css?v=plate4" />
<link rel="icon" href="/dell.png" type="image/png" />
<link rel="stylesheet" href="/vendor/xterm/xterm.css?v=home1" />
<script>
(function () {
try {
var t = localStorage.getItem("cockpit_theme") || "light";
document.documentElement.setAttribute("data-theme", t === "dark" ? "dark" : "light");
} catch (e) {
document.documentElement.setAttribute("data-theme", "light");
}
})();
</script>
</head>
<body>
<div id="notify-stack" aria-live="polite" aria-atomic="false"></div>
@@ -28,9 +38,10 @@
<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>
<button type="button" class="btn ghost" id="btn-network" title="Fabric map &amp; ATC racks">Network</button>
<button type="button" class="btn ghost" id="btn-reports" title="Fleet reports &amp; Dell compliance">Reports</button>
<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>
<button type="button" class="btn primary" id="btn-chat">Cockpit Copilot</button>
</div>
</header>
@@ -96,18 +107,6 @@
</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>
@@ -192,17 +191,26 @@
<footer class="ticker" id="ticker"></footer>
</div>
<!-- Cockpit chat -->
<div class="drawer" id="chat-drawer" aria-hidden="true">
<button type="button" class="theme-fab" id="btn-theme" title="Switch theme" aria-label="Switch light or dark theme">
<svg class="theme-ico theme-ico-moon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M21 14.3A8.5 8.5 0 0 1 9.7 3 7 7 0 1 0 21 14.3z"/>
</svg>
<svg class="theme-ico theme-ico-sun" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
<path fill="currentColor" d="M12 4.5a1 1 0 0 1 1 1V7a1 1 0 1 1-2 0V5.5a1 1 0 0 1 1-1zm0 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM5.5 11a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h1.5a1 1 0 0 1 1 1zm15.5 0a1 1 0 0 1-1 1H18.5a1 1 0 1 1 0-2H20a1 1 0 0 1 1 1zM6.7 6.7a1 1 0 0 1 0 1.4L5.6 9.2A1 1 0 1 1 4.2 7.8l1.1-1.1a1 1 0 0 1 1.4 0zm11.6 0a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 1 1-1.4 1.4l-1.1-1.1a1 1 0 0 1 0-1.4zM12 17a1 1 0 0 1 1 1v1.5a1 1 0 1 1-2 0V18a1 1 0 0 1 1-1zm-5.3.3a1 1 0 0 1 1.4 0l1.1 1.1a1 1 0 1 1-1.4 1.4L6.7 18.7a1 1 0 0 1 0-1.4zm11.6 0a1 1 0 0 1 0 1.4l-1.1 1.1a1 1 0 1 1-1.4-1.4l1.1-1.1a1 1 0 0 1 1.4 0z"/>
</svg>
</button>
<!-- Cockpit chat / Copilot -->
<div class="drawer chat-copilot" 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>
<span>Cockpit Copilot</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">
<label class="chat-model-wrap" title="Select model (Llama / OpenManage AI)">
<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>
@@ -211,16 +219,25 @@
<span class="chat-ctx-pill" id="chat-ctx-fleet">fleet …</span>
<span class="chat-ctx-pill" id="chat-ctx-focus">focus: none</span>
</div>
<section class="chat-gpu" aria-label="Live GPU matrix">
<div class="chat-gpu-head">
<strong>V100 GPU matrix</strong>
<span class="chat-gpu-host">atc-gpu-prod · live</span>
</div>
<div id="gpu-summary" class="gpu-summary">Waiting for GPU telemetry…</div>
<div id="gpu-matrix" class="gpu-matrix chat-gpu-matrix"></div>
</section>
<div class="chat-quick" id="chat-quick">
<button type="button" data-q="List every device with its Service Tag, model, and IP.">All service tags</button>
<button type="button" data-q="How much memory (RAM GB) does each server currently have? List Service Tag, name, model, and installed GB.">Memory per server</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>
<button type="button" data-q="Summarize V100 GPU utilization on atc-gpu-prod.">GPU status</button>
<button type="button" data-q="Summarize V100 GPU utilization on atc-gpu-prod from the live matrix.">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" />
<input type="text" id="chat-input" placeholder="Ask about fleet memory, alerts, power, iDRACs, GPUs…" autocomplete="off" />
<button type="submit" class="btn primary">Send</button>
</form>
</div>
@@ -244,9 +261,9 @@
</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>
<select id="ops-filter" title="Ticket history filter">
<option value="all" selected>All history</option>
<option value="openish">Active only</option>
<option value="open">Open</option>
<option value="accepted">Accepted</option>
<option value="in_progress">In progress</option>
@@ -254,6 +271,7 @@
<option value="closed">Closed</option>
<option value="mine">Assigned to me</option>
</select>
<span class="ops-count" id="ops-count">0 tickets</span>
</div>
<div class="list" id="ticket-list"></div>
</div>
@@ -278,6 +296,30 @@
<iframe id="ai-frame" title="OpenManage AI" src="about:blank"></iframe>
</div>
<!-- Network: fabric + ATC racks -->
<div class="drawer wide network-drawer" id="network-drawer" aria-hidden="true">
<div class="drawer-head">
<div class="drawer-brand">
<img src="/dell.png" alt="Dell" height="22" />
<span>Network · ATC1 / ATC2</span>
</div>
<div class="net-head-meta">
<span id="network-status" class="hint">—</span>
<button type="button" class="btn ghost" id="btn-network-close">Close</button>
</div>
</div>
<div class="chip-grid" id="network-tabs">
<button type="button" class="chip active" data-ntab="fabric">Fabric</button>
<button type="button" class="chip" data-ntab="racks">Racks 42U</button>
<button type="button" class="chip" data-ntab="vlans">VLANs</button>
</div>
<div class="network-body">
<div id="network-fabric" class="network-panel"></div>
<div id="network-racks" class="network-panel hidden"></div>
<div id="network-vlans" class="network-panel hidden"></div>
</div>
</div>
<!-- Reports / compliance / export -->
<div class="drawer wide reports-drawer" id="reports-drawer" aria-hidden="true">
<div class="drawer-head">
@@ -288,11 +330,13 @@
<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>
<button type="button" class="chip active" data-tab="analytics" title="Dashboard KPIs — click tiles to drill into filtered views">Analytics</button>
<button type="button" class="chip" data-tab="hardware" title="DIMM slot map, disk/PCIe expansion, Dell best practices">Hardware / Expansion</button>
<button type="button" class="chip" data-tab="fleet" title="Full fleet table with Service Tags — filter & export">Fleet inventory</button>
<button type="button" class="chip" data-tab="firmware" title="BIOS/iDRAC vs Dell Online Baseline — outdated filter">Firmware / BIOS</button>
<button type="button" class="chip" data-tab="warranty" title="Warranty end dates — expired / expiring filters">Warranty</button>
<button type="button" class="chip" data-tab="ome" title="OME ReportDefs, catalogs, baselines, jobs">OME reports</button>
<button type="button" class="chip" data-tab="brief" title="Printable customer brief with Service Tag appendix">Customer brief</button>
</div>
<div class="reports-body" id="reports-mount">
<p class="hint">Select a report tab to load live OME data.</p>
@@ -421,12 +465,13 @@
<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>
<p class="modal-foot">iDRAC opens in a new tab · SSH = in-browser terminal · RDP = popout for Windows (local client)</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">
@@ -466,9 +511,11 @@
<script src="/vendor/xterm/xterm.min.js?v=home1"></script>
<script src="/vendor/xterm/xterm-addon-fit.min.js?v=home1"></script>
<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>
<script src="/app.js?v=plate4"></script>
<script src="/ops.js?v=plate4"></script>
<script src="/ssh.js?v=plate4"></script>
<script src="/rdp.js?v=plate4"></script>
<script src="/reports.js?v=plate4"></script>
<script src="/network.js?v=plate4"></script>
</body>
</html>