Vuelvo a formato tabla

README.md

@@ -17,7 +17,8 @@ Asegúrate de que libvirt esté instalado y configurado:
 
 ```bash
 sudo apt update
-sudo apt install -y libvirt-daemon-system libvirt-dev pkg-config python3-libvirt python3-gi novnc websockify
+sudo apt install -y libvirt-daemon-system libvirt-dev pkg-config python3-libvirt novnc websockify
+sudo apt install python3-pip python3.12-venv
 ```
 
 Crea el directorio para ISOs (opcional, se crea automáticamente):
@@ -34,6 +35,7 @@ sudo mkdir -p /var/lib/libvirt/images/isos
    ```bash
    python3 -m venv venv
    source venv/bin/activate
+   pip install libvirt-python
    ```
 
 3. Instala las dependencias de Python:

static/app.js

@@ -66,7 +66,7 @@ async function loadISOsForSelect() {
     }
 }
 
-/* Load VMs and populate the table 
+/* Load VMs and populate the table */
 async function loadVMs() {
     try {
         const response = await fetch(`${API_BASE}/vms`);
@@ -98,43 +98,7 @@ async function loadVMs() {
         alert('Error loading VMs');
     }
 }
-*/
 
-async function loadVMsCard() {
-    try {
-        const response = await fetch(`${API_BASE}/vms`);
-        const data = await response.json();
-        const columna = document.getElementById('vmCard');
-        columna.innerHTML = '';
-        // const select = document.getElementById('bootVM');
-        //select.innerHTML = '<option value="">Select VM</option>';
-
-        data.vms.forEach(vm => {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.style.width = '18rem';
-
-            const cardbody = document.createElement('div');
-            cardbody.className = 'card-body';
-            card.appendChild(cardbody);
-            columna.appendChild(card);
-
-            cardbody.innerHTML = `
-                <h6>${vm.id} - ${vm.name} <span class="badge ${getStateClass(vm.state)}">${vm.state}</span></h6>
-                <button class="btn btn-sm btn-success" onclick="startVM('${vm.name}')">Lanzar</button>
-                <button class="btn btn-sm btn-warning" onclick="stopVM('${vm.name}')">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>` : ''}
-            `;
-            card.appendChild(cardbody);
-            //select.innerHTML += `<option value="${vm.name}">${vm.name}</option>`;
-        });
-        //loadISOsForSelect();  // Load ISOs after loading VMs
-    } catch (error) {
-        console.error('Error loading VMs:', error);
-        alert('Error loading VMs');
-    }
-}
 
 
 async function startVM(name) {
@@ -274,6 +238,5 @@ document.getElementById('uploadIsoForm').addEventListener('submit', async (e) =>
 });
 
 // Load VMs on page load
-//loadVMs();
-loadVMsCard();
+loadVMs();
 loadISOs();

static/index.html

@@ -13,11 +13,19 @@
         <div class="row">
             <div class="col-md-8">
                 <h2>Virtual Machines</h2>
-                <button class="btn btn-primary mb-3" onclick="loadVMsCard()">Refresh</button>
-            </div>
-
-            <div class="col-md-8"  id="vmCard">
-
+                <button class="btn btn-primary mb-3" onclick="loadVMs()">Refresh</button>
+                <table class="table table-striped" id="vmTable">
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Name</th>
+                            <th>State</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="vmTableBody">
+                    </tbody>
+                </table>
             </div>
             
             <div class="col-md-4">