5646508adb
Lightweight Go-based dashboard for Raspberry Pi cluster: Backend: - chi router with REST API - Embedded static file serving - JSON file-based state storage - Health checks and CORS support Frontend: - Responsive dark theme UI - Status view with nodes, alerts, ArgoCD apps - Pending actions with approve/reject - Action history and audit trail - Workflow listing and manual triggers Deployment: - Multi-stage Dockerfile (small Alpine image) - Kubernetes manifests with Pi 3 tolerations - Resource limits: 32-64Mi memory, 10-100m CPU - ArgoCD application manifest - Kustomize configuration API endpoints: - GET /api/status - Cluster status - GET/POST /api/pending - Action management - GET /api/history - Action audit trail - GET/POST /api/workflows - Workflow management 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
113 lines
3.6 KiB
HTML
113 lines
3.6 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>
|
|
<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>
|
|
<!-- 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>
|