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

Add ATC Team chat, soft identity, and update Present decks.

Browse Source 
Ship team/DM chat with files, avatars, unread alerts, and a first-open identity gate (including Guest); fold Team into Ops desk; clarify Datacenter Engineer vs "Data Plumbers" FDE roles; refresh Present story/tech slides to match.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
root
2026-07-19 01:42:00 +02:00
parent 03e207b46d
commit b4714c70d1
11 changed files with 1953 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/present.js
+47 -26
View File
@@ -28,16 +28,17 @@
title: "What we will cover",
anim: "rise",
html: `
<p class="ps-lead">ATC admins asked us to help them see OME data faster and explain it with AI. This briefing shows the result — and why a cockpit like this adds value.</p>
<p class="ps-lead">Datacenter Engineers asked us to help them see OME data faster and explain it with AI. This briefing shows the result — and why a cockpit like this adds value.</p>
<ol class="ps-steps ps-stagger">
<li><strong>Why</strong> — the gap around OME and why AI alone is not enough.</li>
<li><strong>Architecture</strong> — one design: Browser → Cockpit BFF → OME / AI (with logos).</li>
<li><strong>Apps</strong> — map, network, reports, <em>Console wall</em>, ops desk, copilots.</li>
<li><strong>Apps</strong> — map, network, reports, Console wall, Ops + Team chat, copilots.</li>
<li><strong>Remote ops</strong> — power via OME→iDRAC and live consoles in-panel.</li>
<li><strong>People</strong> — who asked, who built, who runs it.</li>
<li><strong>Team</strong> — soft identity, chat, files, avatars, live unread alerts.</li>
<li><strong>People</strong> — Datacenter Engineers &amp; Data FDEs (<em>"Data Plumbers"</em> 😉).</li>
<li><strong>Value</strong> — what customers can take away.</li>
</ol>
<p class="ps-sub">Requested by <strong>Jody van Dongen</strong> &amp; <strong>Laurens Rammers</strong> · delivered by the FDE team (<strong>Mohamed El Kadi</strong> &amp; <strong>Bart Sjerps</strong>).</p>`,
<p class="ps-sub">Requested by <strong>Jody van Dongen</strong> &amp; <strong>Laurens Rammers</strong> · delivered by the FDE team (<strong>Mo</strong> &amp; <strong>Bart</strong> — <em>"Data Plumbers"</em> 😉).</p>`,
},
{
id: "problem",
@@ -51,7 +52,7 @@
<div class="ps-card"><h4>Context loss</h4><p>Warranty, firmware, and offline state are related — rarely one story.</p></div>
<div class="ps-card"><h4>Ungrounded AI</h4><p>Generic chatbots guess. Useful AI must start from OME.</p></div>
</div>
<p class="ps-sub">Jody and Laurens asked the FDE team to assist — build a practical ops lens on top of OME, not replace OME.</p>`,
<p class="ps-sub">Jody and Laurens (Datacenter Engineers) asked the FDE team to assist — build a practical ops lens on top of OME, not replace OME.</p>`,
},
{
id: "value",
@@ -63,8 +64,8 @@
<div class="ps-card"><h4>One Service Tag story</h4><p>Map, inventory, compliance, warranty, fabric, and tickets around the same ST.</p></div>
<div class="ps-card"><h4>Remote ops in UI</h4><p>Power via OME jobs · live iDRAC Console wall (4/8) without tab sprawl.</p></div>
<div class="ps-card"><h4>AI that cites the fleet</h4><p>Copilot answers from live OME facts — or says it does not know.</p></div>
<div class="ps-card"><h4>Faster briefings</h4><p>Click a chart → named systems → hand off in Ops desk.</p></div>
<div class="ps-card"><h4>Admin ↔ Data FDE</h4><p>Clear roles: ATC admins own the estate; Data FDEs deliver the AI/ops surface.</p></div>
<div class="ps-card"><h4>Ops + Team chat</h4><p>Tickets and live team / DM chat with files, avatars, and unread alerts.</p></div>
<div class="ps-card"><h4>DC Engineer ↔ Data FDE</h4><p>Jody &amp; Laurens own the estate; Mo &amp; Bart (<em>"Data Plumbers"</em> 😉) deliver the surface.</p></div>
<div class="ps-card"><h4>Copyable pattern</h4><p>OME API + BFF + grounded AI — a blueprint, not a Dell SKU.</p></div>
</div>`,
},
@@ -117,7 +118,7 @@
<div class="ps-arch-node app"><strong>Console</strong><span>iDRAC wall</span></div>
<div class="ps-arch-node app core-app"><strong>Cockpit UI</strong><span>Drawers · KPIs</span></div>
<div class="ps-arch-node app"><strong>Network</strong><span>Fabric · Racks</span></div>
<div class="ps-arch-node app"><strong>Ops / AI</strong><span>Tickets · Copilot</span></div>
<div class="ps-arch-node app"><strong>Ops / Team</strong><span>Tickets · chat</span></div>
</div>
<div class="ps-arch-layer mid">
<div class="ps-arch-node bff">
@@ -163,10 +164,10 @@
<div class="ps-app"><i></i><strong>Console wall</strong><span>4 / 8 live iDRAC embeds · drag</span></div>
<div class="ps-app"><i></i><strong>Network</strong><span>Fabric · 42U racks · VLANs</span></div>
<div class="ps-app"><i></i><strong>Reports</strong><span>Compliance · warranty analytics</span></div>
<div class="ps-app"><i></i><strong>Ops desk</strong><span>Admin ↔ Data FDE tickets</span></div>
<div class="ps-app"><i></i><strong>Ops + Team</strong><span>Tickets · chat · files · avatars</span></div>
<div class="ps-app"><i></i><strong>Copilot</strong><span>Grounded chat on Service Tags</span></div>
</div>
<p class="ps-sub">One join key everywhere: <strong>Service Tag</strong>. Power and console actions ride OME → iDRAC — not a second inventory.</p>`,
<p class="ps-sub">One join key everywhere: <strong>Service Tag</strong>. Soft identity on open so Jody, Laurens, Mo, Bart (or Guest) act as themselves.</p>`,
},
{
id: "console-wall",
@@ -200,6 +201,22 @@
</div>
<p class="ps-sub">Demo power with care — production change windows still belong in official OME / iDRAC process.</p>`,
},
{
id: "team-chat",
kicker: "Collaboration",
title: "Team chat · who you are, what you share",
anim: "rise",
html: `
<p class="ps-lead">First popup on open: pick yourself (or Guest). Then Ops desk and Team chat share one soft identity — tickets, DMs, and files stay attributable without SSO.</p>
<div class="ps-grid3">
<div class="ps-card"><h4>Identity gate</h4><p>Jody · Laurens · Mo · Bart · Guest — profile photo upload optional.</p></div>
<div class="ps-card"><h4>Team + DMs</h4><p>Shared ATC room and 1:1 chats · WebSocket live presence.</p></div>
<div class="ps-card"><h4>Files &amp; avatars</h4><p>Drop files into chat · avatars on bubbles, presence, and the Team chip.</p></div>
<div class="ps-card"><h4>Unread alerts</h4><p>Badge on Ops|Team · room counters · browser notify when the tab is in the background.</p></div>
<div class="ps-card"><h4>Ops|Team combo</h4><p>One topbar control: tickets left, Team + who-you-are right — KPIs keep a single row.</p></div>
<div class="ps-card"><h4>Roles that match reality</h4><p>Datacenter Engineers own rack &amp; stack; FDEs are <em>"Data Plumbers"</em> 😉.</p></div>
</div>`,
},
{
id: "ai",
kicker: "AI + OME",
@@ -219,24 +236,24 @@
{
id: "origin",
kicker: "How this started",
title: "Admins set the need · Data FDEs delivered the surface",
title: "Datacenter Engineers set the need · Data FDEs delivered the surface",
anim: "rise",
html: `
<p class="ps-lead"><strong>Jody van Dongen</strong> and <strong>Laurens Rammers</strong> defined the operational need and asked the FDE team to help. Together they produced a cockpit that sits on OME: topology, reports, network context, tickets, and AI — for ATC use and customer conversations, explicitly not a product SKU.</p>
<p class="ps-lead"><strong>Jody van Dongen</strong> and <strong>Laurens Rammers</strong> (Datacenter Engineers — storage, servers, network, rack &amp; stack, installs) defined the operational need and asked the FDE team to help. Together they produced a cockpit that sits on OME: topology, reports, network context, tickets, and AI — for ATC use and customer conversations, explicitly not a product SKU.</p>
<div class="ps-cols">
<div>
<h4>ATC Admins · the ask</h4>
<h4>Datacenter Engineers · the ask</h4>
<ul class="ps-bullets ps-stagger">
<li><strong>Jody van Dongen</strong> — fleet, racks, warranty / compliance</li>
<li><strong>Laurens Rammers</strong> — datacenter ops &amp; escalation</li>
<li><strong>Jody van Dongen</strong> — storage, servers, network, rack &amp; stack, installs</li>
<li><strong>Laurens Rammers</strong> — storage, servers, network, rack &amp; stack, installs</li>
<li>Better visibility and faster OME storytelling</li>
</ul>
</div>
<div>
<h4>Data FDEs · the delivery</h4>
<ul class="ps-bullets ps-stagger">
<li><strong>Mohamed El Kadi</strong> — cockpit UX/API, OME integration, Copilot, Present</li>
<li><strong>Bart Sjerps</strong> — FDE cluster, Open WebUI / AI workloads, hosting</li>
<li><strong>Mohamed El Kadi</strong> — cockpit UX/API, OME integration, Copilot, Present · <em>"Data Plumbers"</em> 😉</li>
<li><strong>Bart Sjerps</strong> — FDE cluster, Open WebUI / AI workloads, hosting · <em>"Data Plumbers"</em> 😉</li>
</ul>
</div>
</div>
@@ -252,7 +269,7 @@
<div class="ps-card"><h4>Clarity</h4><p>One place for connectivity, compliance, warranty, and hardware depth.</p></div>
<div class="ps-card"><h4>Credibility</h4><p>Claims trace to a Service Tag from OME.</p></div>
<div class="ps-card"><h4>Speed</h4><p>AI drafts explanations; humans own change windows.</p></div>
<div class="ps-card"><h4>Collaboration</h4><p>Admins and Data FDEs share one Ops language.</p></div>
<div class="ps-card"><h4>Collaboration</h4><p>Datacenter Engineers and Data FDEs (<em>"Data Plumbers"</em> 😉) share Ops + Team chat.</p></div>
<div class="ps-card"><h4>Pattern</h4><p>OME + Docker BFF + grounded AI — repeatable.</p></div>
<div class="ps-card"><h4>Honesty</h4><p>Demo power with an explicit non-product disclaimer.</p></div>
</div>`,
@@ -264,10 +281,11 @@
anim: "zoom",
html: `
<ol class="ps-steps ps-stagger">
<li>Pick yourself on the identity gate (or Guest) when the UI opens.</li>
<li>Pick a Service Tag on the map and open the inspector.</li>
<li>Open <strong>Console</strong> — Auto-fill live iDRACs (4 or 8 screens).</li>
<li>From Servers KPI: Power on a cold node · open iDRAC console in-panel.</li>
<li>Open Reports · Analytics and click a colored segment.</li>
<li>Open <strong>Ops|Team</strong> — create a ticket, then send a Team or DM message with a file.</li>
<li>Ask Copilot a question that must cite Service Tags.</li>
<li>Switch to <strong>Technical architecture</strong> for API and trust-boundary depth.</li>
</ol>
@@ -308,8 +326,9 @@
<li>AI completion path</li>
<li>Portal containers &amp; key <code>/api/*</code> contracts</li>
<li>iDRAC proxy · power jobs · Console wall</li>
<li>Team chat · soft identity · WebSocket · file / avatar store</li>
</ol>
<p class="ps-sub">Delivered for ATC admins Jody &amp; Laurens by Data FDEs Mo &amp; Bart.</p>`,
<p class="ps-sub">Delivered for Datacenter Engineers Jody &amp; Laurens by Data FDEs Mo &amp; Bart (<em>"Data Plumbers"</em> 😉).</p>`,
},
{
id: "arch-design",
@@ -360,7 +379,7 @@
<div class="ps-arch-node app"><strong>Console</strong><span>iDRAC wall</span></div>
<div class="ps-arch-node app core-app"><strong>Cockpit UI</strong><span>Drawers · KPIs</span></div>
<div class="ps-arch-node app"><strong>Network</strong><span>Fabric · Racks</span></div>
<div class="ps-arch-node app"><strong>Ops / AI</strong><span>Tickets · Copilot</span></div>
<div class="ps-arch-node app"><strong>Ops / Team</strong><span>Tickets · chat</span></div>
</div>
<div class="ps-arch-layer mid">
<div class="ps-arch-node bff">
@@ -496,7 +515,7 @@
<div class="ps-card tech"><h4>/api/fleet</h4><p>Cached device graph for canvas &amp; KPIs.</p></div>
<div class="ps-card tech"><h4>/api/devices/…/power</h4><p>OME JobService POWER_CONTROL · on / off / cycle.</p></div>
<div class="ps-card tech"><h4>/api/idrac-proxy/…</h4><p>Same-origin HTML + WebSocket bridge · strips XFO.</p></div>
<div class="ps-card tech"><h4>/api/reports/*</h4><p>Analytics, firmware, warranty, brief.</p></div>
<div class="ps-card tech"><h4>/api/team/* · /ws/team-chat</h4><p>Rooms, DMs, files, avatars · live presence &amp; messages.</p></div>
<div class="ps-card tech"><h4>/api/chat · /api/models</h4><p>Grounded completions · model list.</p></div>
<div class="ps-card tech"><h4>/api/network/*</h4><p>Fabric ports · racks · VLANs.</p></div>
</div>`,
@@ -531,12 +550,14 @@
<h4 style="margin-top:0.85rem">Cockpit-local (write)</h4>
<ul class="ps-bullets ps-stagger">
<li>Fabric / racks / tickets / presentation decks</li>
<li>Team chat messages, files, and profile avatars (<code>/data/team-chat</code>)</li>
</ul>
</div>
<div>
<h4>Security notes</h4>
<ul class="ps-bullets ps-stagger">
<li>Secrets only in portal environment variables</li>
<li>Soft identity is localStorage (ops convenience — not SSO)</li>
<li>iDRAC proxy is an ops convenience — credentials stay with the user</li>
<li>Production change windows still belong in official OME / iDRAC process</li>
</ul>
@@ -552,7 +573,7 @@
<ol class="ps-steps ps-stagger">
<li>Return to the map and pick a Service Tag.</li>
<li>Open <strong>Console</strong> and drop two iDRACs onto the wall.</li>
<li>Open Reports and click a compliance segment.</li>
<li>Open <strong>Ops|Team</strong> — ticket + a chat message with unread badge.</li>
<li>Ask Copilot a question that must cite that ST.</li>
<li>Use <strong>Customer story</strong> for business / ops audiences.</li>
</ol>
@@ -560,20 +581,20 @@
},
];
const BUILTIN_VERSION = 9;
const BUILTIN_VERSION = 10;
const BUILTIN_DECKS = [
{
id: "story",
name: "Customer story",
description: "Customer briefing — ask, Console wall, power, architecture, value",
description: "Customer briefing — Console, power, Team chat, roles, value",
builtin: true,
slides: structuredClone(STORY_SLIDES),
},
{
id: "technical",
name: "Technical architecture",
description: "Engineer deep dive — design, BFF, APIs, trust",
description: "Engineer deep dive — design, BFF, APIs, Team chat, trust",
builtin: true,
slides: structuredClone(TECH_SLIDES),
},