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
81
dashboard/cmd/server/main.go
Normal file
81
dashboard/cmd/server/main.go
Normal file
@@ -0,0 +1,81 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"flag"
|
||||
"io/fs"
|
||||
"log"
|
||||
"net/http"
|
||||
"os"
|
||||
|
||||
"github.com/go-chi/chi/v5"
|
||||
"github.com/go-chi/chi/v5/middleware"
|
||||
"github.com/go-chi/cors"
|
||||
"github.com/will/k8s-agent-dashboard/internal/api"
|
||||
"github.com/will/k8s-agent-dashboard/internal/store"
|
||||
)
|
||||
|
||||
//go:embed all:web
|
||||
var webFS embed.FS
|
||||
|
||||
func main() {
|
||||
port := flag.String("port", "8080", "Server port")
|
||||
dataDir := flag.String("data", "/data", "Data directory for state")
|
||||
flag.Parse()
|
||||
|
||||
// Initialize store
|
||||
s, err := store.New(*dataDir)
|
||||
if err != nil {
|
||||
log.Fatalf("Failed to initialize store: %v", err)
|
||||
}
|
||||
|
||||
// Create router
|
||||
r := chi.NewRouter()
|
||||
|
||||
// Middleware
|
||||
r.Use(middleware.Logger)
|
||||
r.Use(middleware.Recoverer)
|
||||
r.Use(middleware.Compress(5))
|
||||
r.Use(cors.Handler(cors.Options{
|
||||
AllowedOrigins: []string{"*"},
|
||||
AllowedMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
|
||||
AllowedHeaders: []string{"Accept", "Content-Type"},
|
||||
ExposedHeaders: []string{"Link"},
|
||||
AllowCredentials: false,
|
||||
MaxAge: 300,
|
||||
}))
|
||||
|
||||
// API routes
|
||||
r.Route("/api", func(r chi.Router) {
|
||||
r.Get("/health", api.HealthCheck)
|
||||
r.Get("/status", api.GetClusterStatus(s))
|
||||
r.Get("/pending", api.GetPendingActions(s))
|
||||
r.Post("/pending/{id}/approve", api.ApproveAction(s))
|
||||
r.Post("/pending/{id}/reject", api.RejectAction(s))
|
||||
r.Get("/history", api.GetActionHistory(s))
|
||||
r.Get("/workflows", api.GetWorkflows(s))
|
||||
r.Post("/workflows/{name}/run", api.RunWorkflow(s))
|
||||
})
|
||||
|
||||
// Static files
|
||||
webContent, err := fs.Sub(webFS, "web")
|
||||
if err != nil {
|
||||
log.Fatalf("Failed to get web content: %v", err)
|
||||
}
|
||||
|
||||
fileServer := http.FileServer(http.FS(webContent))
|
||||
r.Handle("/*", fileServer)
|
||||
|
||||
// Start server
|
||||
addr := ":" + *port
|
||||
if envPort := os.Getenv("PORT"); envPort != "" {
|
||||
addr = ":" + envPort
|
||||
}
|
||||
|
||||
log.Printf("Starting server on %s", addr)
|
||||
log.Printf("Data directory: %s", *dataDir)
|
||||
|
||||
if err := http.ListenAndServe(addr, r); err != nil {
|
||||
log.Fatalf("Server failed: %v", err)
|
||||
}
|
||||
}
|
||||
112
dashboard/cmd/server/web/index.html
Normal file
112
dashboard/cmd/server/web/index.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!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>
|
||||
355
dashboard/cmd/server/web/static/css/style.css
Normal file
355
dashboard/cmd/server/web/static/css/style.css
Normal file
@@ -0,0 +1,355 @@
|
||||
:root {
|
||||
--bg-primary: #1a1a2e;
|
||||
--bg-secondary: #16213e;
|
||||
--bg-card: #0f3460;
|
||||
--text-primary: #eaeaea;
|
||||
--text-secondary: #a0a0a0;
|
||||
--accent: #e94560;
|
||||
--success: #4ade80;
|
||||
--warning: #fbbf24;
|
||||
--danger: #ef4444;
|
||||
--info: #60a5fa;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
header {
|
||||
background: var(--bg-secondary);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--bg-card);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cluster-health {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-card);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.health-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
|
||||
.health-indicator.healthy { background: var(--success); }
|
||||
.health-indicator.degraded { background: var(--warning); }
|
||||
.health-indicator.critical { background: var(--danger); }
|
||||
|
||||
nav {
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.5rem 2rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
border-bottom: 1px solid var(--bg-card);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: left;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--bg-secondary);
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-ready, .status-healthy, .status-synced, .status-success {
|
||||
background: rgba(74, 222, 128, 0.2);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-notready, .status-degraded, .status-outofsync, .status-failed {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.status-progressing, .status-pending {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.status-rejected {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.status-approved {
|
||||
background: rgba(74, 222, 128, 0.2);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.alerts-list, .pending-list, .workflows-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--danger);
|
||||
}
|
||||
|
||||
.alert-item.warning {
|
||||
border-left-color: var(--warning);
|
||||
}
|
||||
|
||||
.pending-item {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-left: 3px solid var(--warning);
|
||||
}
|
||||
|
||||
.pending-item .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pending-item .agent {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.pending-item .action {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pending-item .description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pending-item .buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-approve {
|
||||
background: var(--success);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn-reject {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-run {
|
||||
background: var(--info);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.workflow-item {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.workflow-item .info h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.workflow-item .info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.workflow-item .triggers {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.trigger-tag {
|
||||
background: var(--bg-card);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--text-secondary);
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
border-top: 1px solid var(--bg-card);
|
||||
}
|
||||
|
||||
/* Progress bar for resource usage */
|
||||
.progress-bar {
|
||||
width: 100px;
|
||||
height: 8px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar .fill {
|
||||
height: 100%;
|
||||
background: var(--success);
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.progress-bar .fill.warning { background: var(--warning); }
|
||||
.progress-bar .fill.danger { background: var(--danger); }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
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