virtmanager/static/app.js

const API_BASE = window.location.origin;

async function loadVMs() {
    try {
        const response = await fetch(`${API_BASE}/vms`);
        const data = await response.json();
        const tbody = document.getElementById('vmTableBody');
        tbody.innerHTML = '';
        
        data.vms.forEach(vm => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${vm.id}</td>
                <td>${vm.name}</td>
                <td>${vm.state}</td>
                <td>
                    <button class="btn btn-sm btn-success" onclick="startVM(${vm.id})">Lanzar</button>
                    <button class="btn btn-sm btn-warning" onclick="stopVM(${vm.id})">Stop</button>
                    <button class="btn btn-sm btn-danger" onclick="deleteVM('${vm.name}')">Delete</button>
                    ${vm.vnc_port ? `<button class="btn btn-sm btn-info" onclick="openVNC('${vm.name}')">Console</button>` : ''}
                </td>
            `;
            tbody.appendChild(row);
        });
    } catch (error) {
        console.error('Error loading VMs:', error);
        alert('Error loading VMs');
    }
}

async function startVM(id) {
    try {
        await fetch(`${API_BASE}/vms/${id}/start`);
        loadVMs();
    } catch (error) {
        console.error('Error starting VM:', error);
        alert('Error starting VM');
    }
}

async function stopVM(id) {
    try {
        await fetch(`${API_BASE}/vms/${id}/stop`);
        loadVMs();
    } catch (error) {
        console.error('Error stopping VM:', error);
        alert('Error stopping VM');
    }
}

async function deleteVM(name) {
    if (confirm(`Delete VM ${name}?`)) {
        try {
            await fetch(`${API_BASE}/vms/${name}`, { method: 'DELETE' });
            loadVMs();
        } catch (error) {
            console.error('Error deleting VM:', error);
            alert('Error deleting VM');
        }
    }
}

function openVNC(vm_name) {
    fetch(`${API_BASE}/console/${vm_name}`)
        .then(response => response.json())
        .then(data => {
            if (data.url) {
                window.open(data.url);
            } else {
                alert(data.error || 'Error opening console');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error opening console');
        });
}

document.getElementById('createVMForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const name = document.getElementById('name').value;
    const memory = document.getElementById('memory').value;
    const disk_size = document.getElementById('disk_size').value;
    const iso = document.getElementById('iso').value;
    
    try {
        const response = await fetch(`${API_BASE}/vms?name=${name}&memory=${memory}&disk_size=${disk_size}&iso=${iso}`, {
            method: 'POST'
        });
        const result = await response.json();
        if (response.ok) {
            alert(result.message);
            loadVMs();
            document.getElementById('createVMForm').reset();
        } else {
            alert(result.error);
        }
    } catch (error) {
        console.error('Error creating VM:', error);
        alert('Error creating VM');
    }
});

// Load VMs on page load
loadVMs();