creylopez
/
virtmanager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VirtManager</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">VirtManager</h1>
        
        <div class="row">
            <div class="col-md-8">
                <h2>Virtual Machines</h2>
                <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">
                <h2>Create VM</h2>
                <form id="createVMForm">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="memory" class="form-label">Memory (MiB)</label>
                        <input type="number" class="form-control" id="memory" required>
                    </div>
                    <div class="mb-3">
                        <label for="disk_size" class="form-label">Disk Size (GB)</label>
                        <input type="number" class="form-control" id="disk_size" required>
                    </div>
                    <div class="mb-3">
                        <label for="cpus" class="form-label">CPUs</label>
                        <input type="number" class="form-control" id="cpus" value="1" min="1" required>
                    </div>
                    <div class="mb-3">
                        <label for="iso" class="form-label">ISO File</label>
                        <select class="form-control" id="iso" required>
                            <option value="">Select ISO</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">Create VM</button>
                </form>
                
                <h2 class="mt-4">Set Boot Order</h2>
                <form id="setBootOrderForm">
                    <div class="mb-3">
                        <label for="bootVM" class="form-label">VM Name</label>
                        <select class="form-control" id="bootVM" required>
                            <option value="">Select VM</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="bootOrder" class="form-label">Boot Order (comma separated, e.g. hd,cdrom)</label>
                        <input type="text" class="form-control" id="bootOrder" placeholder="hd,cdrom" required>
                    </div>
                    <button type="submit" class="btn btn-warning">Set Boot Order</button>
                </form>
                
                <h2 class="mt-4">Add Disk to VM</h2>
                <div class="alert alert-warning" role="alert">
                    <strong>⚠️ Importante:</strong>
                    <ul>
                        <li>La máquina virtual <strong>debe estar PARADA</strong> (shut off)</li>
                        <li>El nombre del disco <strong>no puede existir</strong> previamente</li>
                        <li>El disco se agregará automáticamente a la VM</li>
                    </ul>
                </div>
                <form id="addDiskForm">
                    <div class="mb-3">
                        <label for="diskVM" class="form-label">VM Name</label>
                        <select class="form-control" id="diskVM" required>
                            <option value="">Select VM</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="diskName" class="form-label">Disk Name</label>
                        <input type="text" class="form-control" id="diskName" placeholder="e.g., data-disk" required>
                    </div>
                    <div class="mb-3">
                        <label for="diskSize" class="form-label">Disk Size (GB)</label>
                        <input type="number" class="form-control" id="diskSize" min="1" value="10" required>
                    </div>
                    <button type="submit" class="btn btn-info">Add Disk</button>
                </form>
                
                <h2 class="mt-4">Upload ISO</h2>
                <form id="uploadIsoForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="isoFile" class="form-label">Select ISO File</label>
                        <input type="file" class="form-control" id="isoFile" accept=".iso" required>
                    </div>
                    <div class="mb-3" id="progressContainer" style="display: none;">
                        <label for="uploadProgress" class="form-label">Progress</label>
                        <div class="progress">
                            <div class="progress-bar" id="uploadProgress" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-secondary" id="uploadBtn">Upload ISO</button>
                </form>
                
                <h2 class="mt-4">Manage ISOs</h2>
                <button class="btn btn-info mb-3" onclick="loadISOs()">Refresh ISOs</button>
                <table class="table table-striped" id="isoTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="isoTableBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal para información de VM -->
    <div class="modal fade" id="infoModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Información de VM</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="infoModalBody">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/app.js"></script>
</body>
</html>