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

Add VLAN inventory, Present decks, and network fabric mapping.

Browse Source 
Seed all ATC/FDE VLANs with live host inventory and editable notes, fix cluster membership on the map, and ship Present/network UI polish.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
root
2026-07-18 21:56:30 +02:00
parent 91222faffe
commit 1e87f22006
15 changed files with 7587 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/index.html
+141 -18
View File
@@ -7,7 +7,7 @@
<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=plate4" />
<link rel="stylesheet" href="/styles.css?v=vlanall1" />
<link rel="icon" href="/dell.png" type="image/png" />
<link rel="stylesheet" href="/vendor/xterm/xterm.css?v=home1" />
<script>
@@ -41,6 +41,7 @@
<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 present-btn" id="btn-present" title="Customer presentation · mid or fullscreen slides">Present</button>
<button type="button" class="btn primary" id="btn-chat">Cockpit Copilot</button>
</div>
</header>
@@ -77,7 +78,46 @@
<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>
<div class="pulse-row">
<label class="toggle"><input type="checkbox" id="f-pulse-links" checked /> Animate link pulse</label>
<button type="button" class="btn ghost compact pulse-gear" id="btn-pulse-settings" title="Pulse speed settings" aria-haspopup="dialog" aria-expanded="false">⚙</button>
<div class="pulse-pop" id="pulse-pop" hidden role="dialog" aria-label="Link pulse settings">
<strong>Link pulse</strong>
<label class="range pulse-speed-range">
<span>Speed <em id="pulse-speed-label">0.45×</em></span>
<input type="range" id="f-pulse-speed" min="0.15" max="1.5" step="0.05" value="0.45" />
</label>
<div class="pulse-presets">
<button type="button" class="chip" data-pulse-speed="0.25">Slow</button>
<button type="button" class="chip" data-pulse-speed="0.45">Normal</button>
<button type="button" class="chip" data-pulse-speed="0.8">Fast</button>
<button type="button" class="chip" data-pulse-speed="1.2">Max</button>
</div>
<div class="pulse-colors">
<label class="pulse-color-field">
<span>Line</span>
<input type="color" id="f-pulse-line-color" value="#3dffe0" title="Link line color" />
</label>
<label class="pulse-color-field">
<span>Glow</span>
<input type="color" id="f-pulse-glow-color" value="#00a8e8" title="Link glow color" />
</label>
<label class="pulse-color-field">
<span>Packet</span>
<input type="color" id="f-pulse-packet-color" value="#ffffff" title="Moving packet color" />
</label>
</div>
<div class="pulse-color-presets" id="pulse-color-presets">
<button type="button" class="pulse-swatch" data-pulse-theme="cyan" style="--sw:#3dffe0" title="Cyan"></button>
<button type="button" class="pulse-swatch" data-pulse-theme="orange" style="--sw:#ff9a3c" title="Orange"></button>
<button type="button" class="pulse-swatch" data-pulse-theme="green" style="--sw:#3dffa0" title="Green"></button>
<button type="button" class="pulse-swatch" data-pulse-theme="purple" style="--sw:#c4a7ff" title="Purple"></button>
<button type="button" class="pulse-swatch" data-pulse-theme="pink" style="--sw:#f472b6" title="Pink"></button>
<button type="button" class="pulse-swatch" data-pulse-theme="gold" style="--sw:#f0e68c" title="Gold"></button>
</div>
<p class="hint">Lower speed = calmer packets on the main map.</p>
</div>
</div>
<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" />
@@ -188,7 +228,16 @@
<div class="inspector-body hidden" id="inspector-body"></div>
</aside>
<footer class="ticker" id="ticker"></footer>
<footer class="app-footer" id="app-footer">
<div class="app-credit" title="Not an official Dell product">
<span>OME Cockpit · Data FDEs <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong></span>
<span class="app-credit-sep" aria-hidden="true">·</span>
<span>Data Forward Deployed Engineers</span>
<span class="app-credit-sep" aria-hidden="true">·</span>
<span>Not an official Dell Technologies product</span>
</div>
<div class="ticker" id="ticker"></div>
</footer>
</div>
<button type="button" class="theme-fab" id="btn-theme" title="Switch theme" aria-label="Switch light or dark theme">
@@ -240,10 +289,11 @@
<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>
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
</div>
<!-- Ops desk / tickets -->
<div class="drawer wide" id="ops-drawer" aria-hidden="true">
<div class="drawer wide ops-drawer" id="ops-drawer" aria-hidden="true">
<div class="drawer-head">
<div class="drawer-brand">
<img src="/dell.png" alt="Dell" height="22" />
@@ -255,11 +305,20 @@
<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>
<optgroup label="ATC Admins">
<option value="jody">Jody van Dongen · Admin</option>
<option value="laurens">Laurens Rammers · Admin</option>
</optgroup>
<optgroup label="Data FDE team">
<option value="mo">Mohamed El Kadi · Data FDE</option>
<option value="bart">Bart Sjerps · Data FDE</option>
</optgroup>
</select>
</label>
<button type="button" class="btn primary" id="btn-new-ticket">New ticket</button>
<div class="ops-side-actions">
<button type="button" class="btn primary" id="btn-new-ticket">New ticket</button>
<button type="button" class="btn compact" id="btn-ops-refresh" title="Reload ticket list">Refresh</button>
</div>
<div class="ops-filters">
<select id="ops-filter" title="Ticket history filter">
<option value="all" selected>All history</option>
@@ -270,6 +329,9 @@
<option value="resolved">Resolved</option>
<option value="closed">Closed</option>
<option value="mine">Assigned to me</option>
<option value="created">Created by me</option>
<option value="fde">FDE involved</option>
<option value="admin">Admin handoff</option>
</select>
<span class="ops-count" id="ops-count">0 tickets</span>
</div>
@@ -277,12 +339,47 @@
</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>
<h3>ATC Ops desk</h3>
<p class="ops-intro">Select a ticket or create one to collaborate across ATC admins and Data Forward Deployed Engineers.</p>
<div class="ops-team-grid" id="ops-team-grid">
<section class="ops-team-card admin">
<h4>ATC Admins</h4>
<ul>
<li><strong>Jody van Dongen</strong><span>OME fleet · racks · warranty / compliance</span></li>
<li><strong>Laurens Rammers</strong><span>Datacenter ops · handoffs · escalation</span></li>
</ul>
</section>
<section class="ops-team-card fde">
<h4>Data Forward Deployed Engineers</h4>
<ul>
<li><strong>Mohamed El Kadi</strong><span>Data Forward Deployed Engineer · Cockpit · OpenManage AI</span></li>
<li><strong>Bart Sjerps</strong><span>Data Forward Deployed Engineer · FDE cluster · AI workloads</span></li>
</ul>
</section>
</div>
<div class="ops-quick" id="ops-quick">
<h4>Quick actions</h4>
<div class="ops-quick-row">
<button type="button" class="btn primary" data-ops-quick="ticket">New ticket</button>
<button type="button" class="btn" data-ops-quick="to-admin">Handoff to admin</button>
<button type="button" class="btn" data-ops-quick="to-fde">Ask FDE / AI cluster</button>
<button type="button" class="btn" data-ops-quick="active">Show active tickets</button>
<button type="button" class="btn" data-ops-quick="chat">Open Copilot</button>
<button type="button" class="btn" data-ops-quick="reports">Fleet reports</button>
</div>
</div>
<div class="ops-stats" id="ops-stats"></div>
</div>
<div class="ops-thread hidden" id="ops-thread"></div>
</div>
</div>
<footer class="ops-footer">
<span>OME Cockpit · Data FDEs <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong></span>
<span class="ops-footer-sep" aria-hidden="true">·</span>
<span>Data Forward Deployed Engineers</span>
<span class="ops-footer-sep" aria-hidden="true">·</span>
<span>Not an official Dell Technologies product</span>
</footer>
</div>
<div class="drawer" id="ai-drawer" aria-hidden="true">
@@ -318,6 +415,7 @@
<div id="network-racks" class="network-panel hidden"></div>
<div id="network-vlans" class="network-panel hidden"></div>
</div>
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
</div>
<!-- Reports / compliance / export -->
@@ -341,6 +439,7 @@
<div class="reports-body" id="reports-mount">
<p class="hint">Select a report tab to load live OME data.</p>
</div>
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
</div>
<div class="scrim" id="scrim"></div>
@@ -354,7 +453,7 @@
<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>
<p class="modal-sub">Handoff between ATC admins (Jody / Laurens) and Data FDEs (Mo / Bart)</p>
</div>
</div>
<form id="ticket-form" class="ticket-form">
@@ -372,8 +471,14 @@
</label>
<label>Assign to
<select id="ticket-assignee">
<option value="laurens">Laurens Rammers</option>
<option value="jody">Jody van Dongen</option>
<optgroup label="ATC Admins">
<option value="jody">Jody van Dongen</option>
<option value="laurens">Laurens Rammers</option>
</optgroup>
<optgroup label="Data FDE team">
<option value="mo">Mohamed El Kadi</option>
<option value="bart">Bart Sjerps</option>
</optgroup>
</select>
</label>
</div>
@@ -389,6 +494,23 @@
</div>
<div class="modal hidden" id="an-context-modal" aria-hidden="true" role="dialog" aria-labelledby="an-ctx-title">
<div class="modal-card an-ctx-card">
<button type="button" class="modal-close" id="an-ctx-close" aria-label="Close">×</button>
<div class="modal-brand">
<img src="/dell.png" alt="Dell" width="32" height="32" />
<div>
<p class="modal-kicker">Analytics context</p>
<h2 id="an-ctx-title">Context</h2>
<p class="modal-sub" id="an-ctx-sub"></p>
</div>
</div>
<div class="an-ctx-pills" id="an-ctx-pills"></div>
<div class="an-ctx-list" id="an-ctx-list"></div>
<div class="an-ctx-actions" id="an-ctx-actions"></div>
</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>
@@ -511,11 +633,12 @@
<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=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>
<script src="/app.js?v=vlanall1"></script>
<script src="/ops.js?v=opsfde2"></script>
<script src="/ssh.js?v=fabric4"></script>
<script src="/rdp.js?v=fabric4"></script>
<script src="/reports.js?v=anctx1"></script>
<script src="/network.js?v=vlanall1"></script>
<script src="/present.js?v=present16"></script>
</body>
</html>