feat: Implement Phase 2 dashboard for K8s agent system
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>
This commit is contained in:
OpenCode Test
306
dashboard/cmd/server/web/static/js/app.js
Normal file
306
dashboard/cmd/server/web/static/js/app.js
Normal file
@@ -0,0 +1,306 @@
|
||||
// K8s Agent Dashboard - Frontend JavaScript
|
||||
|
||||
const API_BASE = '/api';
|
||||
|
||||
// State
|
||||
let currentView = 'status';
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setupNavigation();
|
||||
loadAllData();
|
||||
// Refresh data every 30 seconds
|
||||
setInterval(loadAllData, 30000);
|
||||
});
|
||||
|
||||
// Navigation
|
||||
function setupNavigation() {
|
||||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const view = btn.dataset.view;
|
||||
switchView(view);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function switchView(view) {
|
||||
currentView = view;
|
||||
|
||||
// Update nav buttons
|
||||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.view === view);
|
||||
});
|
||||
|
||||
// Update views
|
||||
document.querySelectorAll('.view').forEach(v => {
|
||||
v.classList.toggle('active', v.id === `${view}-view`);
|
||||
});
|
||||
}
|
||||
|
||||
// Data Loading
|
||||
async function loadAllData() {
|
||||
try {
|
||||
await Promise.all([
|
||||
loadClusterStatus(),
|
||||
loadPendingActions(),
|
||||
loadHistory(),
|
||||
loadWorkflows()
|
||||
]);
|
||||
updateLastUpdate();
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadClusterStatus() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/status`);
|
||||
const data = await response.json();
|
||||
renderClusterStatus(data);
|
||||
} catch (error) {
|
||||
console.error('Error loading status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPendingActions() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/pending`);
|
||||
const data = await response.json();
|
||||
renderPendingActions(data.actions || []);
|
||||
document.getElementById('pending-count').textContent = data.count || 0;
|
||||
} catch (error) {
|
||||
console.error('Error loading pending:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/history?limit=20`);
|
||||
const data = await response.json();
|
||||
renderHistory(data.history || []);
|
||||
} catch (error) {
|
||||
console.error('Error loading history:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadWorkflows() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/workflows`);
|
||||
const data = await response.json();
|
||||
renderWorkflows(data.workflows || []);
|
||||
} catch (error) {
|
||||
console.error('Error loading workflows:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Rendering
|
||||
function renderClusterStatus(status) {
|
||||
// Update health indicator
|
||||
const healthEl = document.getElementById('cluster-health');
|
||||
const indicator = healthEl.querySelector('.health-indicator');
|
||||
const text = healthEl.querySelector('.health-text');
|
||||
|
||||
const health = (status.health || 'Unknown').toLowerCase();
|
||||
indicator.className = `health-indicator ${health}`;
|
||||
text.textContent = status.health || 'Unknown';
|
||||
|
||||
// Render nodes
|
||||
const nodesBody = document.querySelector('#nodes-table tbody');
|
||||
if (status.nodes && status.nodes.length > 0) {
|
||||
nodesBody.innerHTML = status.nodes.map(node => `
|
||||
<tr>
|
||||
<td>${node.name}</td>
|
||||
<td><span class="status-badge status-${node.status.toLowerCase()}">${node.status}</span></td>
|
||||
<td>
|
||||
<div class="progress-bar">
|
||||
<div class="fill ${getProgressClass(node.cpu_percent)}" style="width: ${node.cpu_percent}%"></div>
|
||||
</div>
|
||||
${node.cpu_percent.toFixed(0)}%
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress-bar">
|
||||
<div class="fill ${getProgressClass(node.memory_percent)}" style="width: ${node.memory_percent}%"></div>
|
||||
</div>
|
||||
${node.memory_percent.toFixed(0)}%
|
||||
</td>
|
||||
<td>${node.conditions}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
nodesBody.innerHTML = '<tr><td colspan="5" class="empty-state">No nodes data available</td></tr>';
|
||||
}
|
||||
|
||||
// Render alerts
|
||||
const alertsList = document.getElementById('alerts-list');
|
||||
if (status.alerts && status.alerts.length > 0) {
|
||||
alertsList.innerHTML = status.alerts.map(alert => `
|
||||
<div class="alert-item ${alert.severity}">
|
||||
<strong>[${alert.severity.toUpperCase()}]</strong>
|
||||
<span>${alert.name}</span>
|
||||
<span class="description">${alert.description}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
alertsList.innerHTML = '<p class="empty-state">No active alerts</p>';
|
||||
}
|
||||
|
||||
// Render apps
|
||||
const appsBody = document.querySelector('#apps-table tbody');
|
||||
if (status.apps && status.apps.length > 0) {
|
||||
appsBody.innerHTML = status.apps.map(app => `
|
||||
<tr>
|
||||
<td>${app.name}</td>
|
||||
<td><span class="status-badge status-${app.sync_status.toLowerCase().replace(' ', '')}">${app.sync_status}</span></td>
|
||||
<td><span class="status-badge status-${app.health.toLowerCase()}">${app.health}</span></td>
|
||||
<td><code>${app.revision.substring(0, 7)}</code></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
} else {
|
||||
appsBody.innerHTML = '<tr><td colspan="4" class="empty-state">No ArgoCD apps data available</td></tr>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderPendingActions(actions) {
|
||||
const list = document.getElementById('pending-list');
|
||||
|
||||
if (actions.length === 0) {
|
||||
list.innerHTML = '<p class="empty-state">No pending actions</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = actions.map(action => `
|
||||
<div class="pending-item" data-id="${action.id}">
|
||||
<div class="header">
|
||||
<div>
|
||||
<span class="agent">${action.agent}</span>
|
||||
<div class="action">${action.action}</div>
|
||||
</div>
|
||||
<span class="status-badge status-pending">${action.risk} risk</span>
|
||||
</div>
|
||||
<div class="description">${action.description}</div>
|
||||
<div class="buttons">
|
||||
<button class="btn btn-approve" onclick="approveAction('${action.id}')">Approve</button>
|
||||
<button class="btn btn-reject" onclick="rejectAction('${action.id}')">Reject</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderHistory(history) {
|
||||
const tbody = document.querySelector('#history-table tbody');
|
||||
|
||||
if (history.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" class="empty-state">No history available</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = history.map(entry => `
|
||||
<tr>
|
||||
<td>${formatTime(entry.timestamp)}</td>
|
||||
<td>${entry.agent}</td>
|
||||
<td>${entry.action}</td>
|
||||
<td><span class="status-badge status-${entry.result}">${entry.result}</span></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function renderWorkflows(workflows) {
|
||||
const list = document.getElementById('workflows-list');
|
||||
|
||||
if (workflows.length === 0) {
|
||||
list.innerHTML = '<p class="empty-state">No workflows defined</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = workflows.map(wf => `
|
||||
<div class="workflow-item">
|
||||
<div class="info">
|
||||
<h3>${wf.name}</h3>
|
||||
<p>${wf.description}</p>
|
||||
<div class="triggers">
|
||||
${wf.triggers.map(t => `<span class="trigger-tag">${t}</span>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-run" onclick="runWorkflow('${wf.name}')">Run</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Actions
|
||||
async function approveAction(id) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/pending/${id}/approve`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
loadPendingActions();
|
||||
loadHistory();
|
||||
} else {
|
||||
alert('Failed to approve action');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error approving action:', error);
|
||||
alert('Error approving action');
|
||||
}
|
||||
}
|
||||
|
||||
async function rejectAction(id) {
|
||||
const reason = prompt('Reason for rejection (optional):');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/pending/${id}/reject`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ reason: reason || 'Rejected by user' })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
loadPendingActions();
|
||||
loadHistory();
|
||||
} else {
|
||||
alert('Failed to reject action');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error rejecting action:', error);
|
||||
alert('Error rejecting action');
|
||||
}
|
||||
}
|
||||
|
||||
async function runWorkflow(name) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/workflows/${name}/run`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
alert(data.message);
|
||||
} catch (error) {
|
||||
console.error('Error running workflow:', error);
|
||||
alert('Error running workflow');
|
||||
}
|
||||
}
|
||||
|
||||
// Helpers
|
||||
function getProgressClass(percent) {
|
||||
if (percent >= 80) return 'danger';
|
||||
if (percent >= 60) return 'warning';
|
||||
return '';
|
||||
}
|
||||
|
||||
function formatTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function updateLastUpdate() {
|
||||
const now = new Date();
|
||||
document.getElementById('last-update').textContent = now.toLocaleTimeString();
|
||||
}
|
||||
Reference in New Issue
Block a user