claude-code/dashboard/cmd/server/web/static/js/app.js

// 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();
}