ae958528a6
Add comprehensive Claude Code monitoring and realtime streaming to the K8s dashboard. Includes API endpoints for health, stats, summary, inventory, and live event streaming. Frontend provides overview, usage, inventory, debug, and live feed views.
204 lines
6.8 KiB
HTML
204 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>K8s Agent Dashboard</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>K8s Agent Dashboard</h1>
|
|
<div class="cluster-health" id="cluster-health">
|
|
<span class="health-indicator"></span>
|
|
<span class="health-text">Loading...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<nav>
|
|
<!-- General -->
|
|
<button class="nav-btn" data-view="overview">Overview</button>
|
|
<button class="nav-btn" data-view="usage">Usage</button>
|
|
<button class="nav-btn" data-view="inventory">Inventory</button>
|
|
<button class="nav-btn" data-view="debug">Debug</button>
|
|
<button class="nav-btn" data-view="live">Live</button>
|
|
|
|
<!-- Existing K8s views (kept intact) -->
|
|
<button class="nav-btn active" data-view="status">Status</button>
|
|
<button class="nav-btn" data-view="pending">Pending <span id="pending-count" class="badge">0</span></button>
|
|
<button class="nav-btn" data-view="history">History</button>
|
|
<button class="nav-btn" data-view="workflows">Workflows</button>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Overview View -->
|
|
<section id="overview-view" class="view">
|
|
<div class="card">
|
|
<h2>Overview</h2>
|
|
<div id="claude-overview">
|
|
<p class="empty-state">Loading Claude overview...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Usage View -->
|
|
<section id="usage-view" class="view">
|
|
<div class="card">
|
|
<h2>Usage</h2>
|
|
<table id="claude-usage-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Sessions</th>
|
|
<th>Messages</th>
|
|
<th>Tool Calls</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="4" class="empty-state">Loading usage...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Inventory View -->
|
|
<section id="inventory-view" class="view">
|
|
<div class="card">
|
|
<h2>Inventory</h2>
|
|
<div id="claude-inventory">
|
|
<p class="empty-state">Loading inventory...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Debug View -->
|
|
<section id="debug-view" class="view">
|
|
<div class="card">
|
|
<h2>Debug</h2>
|
|
<table id="claude-debug-table">
|
|
<thead>
|
|
<tr>
|
|
<th>File</th>
|
|
<th>Status</th>
|
|
<th>MTime</th>
|
|
<th>Error</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="4" class="empty-state">Loading debug info...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Live View -->
|
|
<section id="live-view" class="view">
|
|
<div class="card">
|
|
<h2>Live Feed</h2>
|
|
<div class="live-header">
|
|
<span id="claude-live-conn" class="conn-badge conn-badge-yellow">Connecting...</span>
|
|
</div>
|
|
<table id="claude-live-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Type</th>
|
|
<th>Summary</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="4" class="empty-state">Waiting for events...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Status View -->
|
|
<section id="status-view" class="view active">
|
|
<div class="card">
|
|
<h2>Nodes</h2>
|
|
<table id="nodes-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Node</th>
|
|
<th>Status</th>
|
|
<th>CPU</th>
|
|
<th>Memory</th>
|
|
<th>Conditions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Active Alerts</h2>
|
|
<div id="alerts-list" class="alerts-list">
|
|
<p class="empty-state">No active alerts</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>ArgoCD Applications</h2>
|
|
<table id="apps-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Application</th>
|
|
<th>Sync</th>
|
|
<th>Health</th>
|
|
<th>Revision</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pending Actions View -->
|
|
<section id="pending-view" class="view">
|
|
<div class="card">
|
|
<h2>Pending Actions</h2>
|
|
<div id="pending-list" class="pending-list">
|
|
<p class="empty-state">No pending actions</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- History View -->
|
|
<section id="history-view" class="view">
|
|
<div class="card">
|
|
<h2>Action History</h2>
|
|
<table id="history-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Agent</th>
|
|
<th>Action</th>
|
|
<th>Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Workflows View -->
|
|
<section id="workflows-view" class="view">
|
|
<div class="card">
|
|
<h2>Workflows</h2>
|
|
<div id="workflows-list" class="workflows-list">
|
|
<p class="empty-state">Loading workflows...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>K8s Agent Dashboard | Last updated: <span id="last-update">-</span></p>
|
|
</footer>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
</body>
|
|
</html>
|