root
1e87f22006
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>
645 lines
33 KiB
HTML
645 lines
33 KiB
HTML
<!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" />
|
||
<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>
|
||
(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>
|
||
<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>
|
||
<button type="button" class="btn ghost" id="btn-network" title="Fabric map & ATC racks">Network</button>
|
||
<button type="button" class="btn ghost" id="btn-reports" title="Fleet reports & 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>
|
||
|
||
<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>
|
||
<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" />
|
||
</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="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="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> & <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">
|
||
<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 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 (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>
|
||
</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>
|
||
<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 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 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> & <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
|
||
</div>
|
||
|
||
<!-- Ops desk / tickets -->
|
||
<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" />
|
||
<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">
|
||
<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>
|
||
<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>
|
||
<option value="openish">Active only</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>
|
||
<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>
|
||
<div class="list" id="ticket-list"></div>
|
||
</div>
|
||
<div class="ops-main" id="ops-main">
|
||
<div class="ops-empty" id="ops-empty">
|
||
<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> & <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">
|
||
<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>
|
||
|
||
<!-- 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>
|
||
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> & <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
|
||
</div>
|
||
|
||
<!-- 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="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>
|
||
</div>
|
||
<footer class="drawer-credit">OME Cockpit · Data Forward Deployed Engineers <strong>Mohamed El Kadi</strong> & <strong>Bart Sjerps</strong> · Not an official Dell Technologies product</footer>
|
||
</div>
|
||
|
||
<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">Handoff between ATC admins (Jody / Laurens) and Data FDEs (Mo / Bart)</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">
|
||
<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>
|
||
<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="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>
|
||
<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 = 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">
|
||
<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>
|
||
<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>
|