wmantly
70c71161f3
- FastAPI backend with full Proxmox VE API integration - ISO builder using proxmox-auto-install-assistant - Premium dark-mode SPA frontend with glassmorphism design - VM lifecycle management (create, start, stop, destroy) - Build pipeline tracking with real-time logs - Deployment automation for custom auto-installer ISOs - Production deployment script (setup.sh + systemd) - Comprehensive README with API documentation
353 lines
15 KiB
HTML
353 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Sovereign Orchestrator — Automated VM provisioning and ISO generation platform by Theta42.">
|
|
<meta name="keywords" content="sovereign, orchestrator, VM, ISO, provisioning, automation, Theta42, Proxmox">
|
|
<meta name="author" content="Theta42">
|
|
<meta name="theme-color" content="#0a0e1a">
|
|
<meta property="og:title" content="Sovereign Orchestrator">
|
|
<meta property="og:description" content="Automated VM provisioning and ISO generation platform.">
|
|
<meta property="og:type" content="website">
|
|
<title>Sovereign ✦ Orchestrator</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Toast Container -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<nav class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<span class="logo-icon">✦</span>
|
|
<div class="logo-text">
|
|
<span class="logo-title">Sovereign</span>
|
|
<span class="logo-subtitle">Orchestrator</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul class="nav-list">
|
|
<li>
|
|
<a href="#dashboard" class="nav-link active" data-section="dashboard">
|
|
<span class="nav-icon">📊</span>
|
|
<span class="nav-label">Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#iso-builder" class="nav-link" data-section="iso-builder">
|
|
<span class="nav-icon">💿</span>
|
|
<span class="nav-label">ISO Builder</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#deployments" class="nav-link" data-section="deployments">
|
|
<span class="nav-icon">🚀</span>
|
|
<span class="nav-label">Deployments</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#vm-control" class="nav-link" data-section="vm-control">
|
|
<span class="nav-icon">🖥️</span>
|
|
<span class="nav-label">VM Control</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="sidebar-footer">
|
|
<div class="status-badge" id="system-status-badge">
|
|
<span class="pulse-dot"></span>
|
|
<span class="status-text">Connecting…</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile Hamburger -->
|
|
<button class="mobile-toggle" id="mobile-toggle" aria-label="Toggle navigation">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content" id="main-content">
|
|
|
|
<!-- ==================== DASHBOARD ==================== -->
|
|
<section class="section active" id="section-dashboard">
|
|
<div class="section-header">
|
|
<h1 class="section-title">Dashboard</h1>
|
|
<p class="section-subtitle">System overview and quick actions</p>
|
|
</div>
|
|
|
|
<!-- Status Cards Row -->
|
|
<div class="status-cards-grid">
|
|
<div class="glass-card status-card">
|
|
<div class="status-card-icon blue">📊</div>
|
|
<div class="status-card-body">
|
|
<span class="status-card-label">System Status</span>
|
|
<span class="status-card-value" id="dash-system-status">—</span>
|
|
</div>
|
|
<div class="status-card-indicator" id="dash-status-indicator">
|
|
<span class="pulse-dot"></span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card status-card">
|
|
<div class="status-card-icon cyan">💿</div>
|
|
<div class="status-card-body">
|
|
<span class="status-card-label">ISOs Available</span>
|
|
<span class="status-card-value" id="dash-iso-count">—</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card status-card">
|
|
<div class="status-card-icon emerald">🚀</div>
|
|
<div class="status-card-body">
|
|
<span class="status-card-label">Total Builds</span>
|
|
<span class="status-card-value" id="dash-build-count">—</span>
|
|
</div>
|
|
</div>
|
|
<div class="glass-card status-card">
|
|
<div class="status-card-icon amber">⚡</div>
|
|
<div class="status-card-body">
|
|
<span class="status-card-label">Active VMs</span>
|
|
<span class="status-card-value" id="dash-vm-count">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<h2 class="sub-heading">Quick Actions</h2>
|
|
<div class="quick-actions-grid">
|
|
<button class="glass-card action-card" data-goto="iso-builder">
|
|
<span class="action-icon">💿</span>
|
|
<span class="action-title">Build ISO</span>
|
|
<span class="action-desc">Generate a custom auto-installer</span>
|
|
</button>
|
|
<button class="glass-card action-card" data-goto="deployments">
|
|
<span class="action-icon">🚀</span>
|
|
<span class="action-title">Deploy VM</span>
|
|
<span class="action-desc">Launch a new virtual machine</span>
|
|
</button>
|
|
<button class="glass-card action-card" data-goto="vm-control">
|
|
<span class="action-icon">🖥️</span>
|
|
<span class="action-title">Manage VMs</span>
|
|
<span class="action-desc">Start, stop, or inspect VMs</span>
|
|
</button>
|
|
<button class="glass-card action-card" onclick="App.refreshAll()">
|
|
<span class="action-icon">🔄</span>
|
|
<span class="action-title">Refresh All</span>
|
|
<span class="action-desc">Reload status and build data</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Recent Builds Timeline -->
|
|
<h2 class="sub-heading">Recent Builds</h2>
|
|
<div class="glass-card timeline-card">
|
|
<div id="recent-builds-timeline" class="timeline">
|
|
<div class="empty-state">
|
|
<span class="empty-icon">📦</span>
|
|
<p>No builds yet. Generate your first ISO to get started.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== ISO BUILDER ==================== -->
|
|
<section class="section" id="section-iso-builder">
|
|
<div class="section-header">
|
|
<h1 class="section-title">💿 ISO Builder</h1>
|
|
<p class="section-subtitle">Generate a custom auto-installer ISO image</p>
|
|
</div>
|
|
|
|
<form id="iso-form" class="iso-form" autocomplete="off">
|
|
<div class="glass-card form-card">
|
|
<h3 class="form-group-title">🌐 System Configuration</h3>
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label for="iso-fqdn">Fully Qualified Domain Name</label>
|
|
<input type="text" id="iso-fqdn" name="fqdn" placeholder="host.example.com" required>
|
|
<span class="field-hint">The FQDN for the target system</span>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="iso-keyboard">Keyboard Layout</label>
|
|
<input type="text" id="iso-keyboard" name="keyboard_layout" placeholder="us" value="us">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="iso-country">Country</label>
|
|
<input type="text" id="iso-country" name="country" placeholder="US" value="US">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="iso-timezone">Timezone</label>
|
|
<input type="text" id="iso-timezone" name="timezone" placeholder="America/New_York" value="America/New_York">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card form-card">
|
|
<h3 class="form-group-title">🔐 Security</h3>
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label for="iso-email">Admin Email</label>
|
|
<input type="email" id="iso-email" name="email" placeholder="admin@example.com" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="iso-root-password">Root Password</label>
|
|
<input type="password" id="iso-root-password" name="root_password" placeholder="••••••••" required>
|
|
</div>
|
|
<div class="form-field full-width">
|
|
<label for="iso-ssh-keys">SSH Authorized Keys</label>
|
|
<textarea id="iso-ssh-keys" name="ssh_keys" rows="3" placeholder="ssh-ed25519 AAAA... user@host"></textarea>
|
|
<span class="field-hint">One key per line</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="glass-card form-card">
|
|
<h3 class="form-group-title">💾 Storage & Network</h3>
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label for="iso-network">Network Source</label>
|
|
<select id="iso-network" name="network_source">
|
|
<option value="dhcp">DHCP (Automatic)</option>
|
|
<option value="static">Static IP</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="iso-filesystem">Filesystem</label>
|
|
<select id="iso-filesystem" name="filesystem">
|
|
<option value="ext4">ext4</option>
|
|
<option value="zfs">ZFS</option>
|
|
<option value="xfs">XFS</option>
|
|
<option value="btrfs">Btrfs</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field full-width">
|
|
<label for="iso-disks">Disk List</label>
|
|
<input type="text" id="iso-disks" name="disk_list" placeholder="/dev/sda, /dev/sdb">
|
|
<span class="field-hint">Comma-separated disk device paths</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary btn-lg" id="iso-submit-btn">
|
|
<span class="btn-icon">💿</span>
|
|
<span class="btn-text">Generate ISO</span>
|
|
<span class="btn-spinner" hidden></span>
|
|
</button>
|
|
<button type="reset" class="btn btn-ghost">Clear Form</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Build Log Viewer -->
|
|
<div class="glass-card terminal-card" id="build-log-card" hidden>
|
|
<div class="terminal-header">
|
|
<div class="terminal-dots">
|
|
<span class="dot red"></span><span class="dot yellow"></span><span class="dot green"></span>
|
|
</div>
|
|
<span class="terminal-title">Build Log</span>
|
|
<button class="terminal-close" onclick="document.getElementById('build-log-card').hidden=true">✕</button>
|
|
</div>
|
|
<pre class="terminal-body" id="build-log-output"></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== DEPLOYMENTS ==================== -->
|
|
<section class="section" id="section-deployments">
|
|
<div class="section-header">
|
|
<h1 class="section-title">🚀 Deployments</h1>
|
|
<p class="section-subtitle">Deploy virtual machines with generated ISOs</p>
|
|
</div>
|
|
|
|
<div class="deploy-layout">
|
|
<!-- Deploy Form -->
|
|
<div class="glass-card form-card">
|
|
<h3 class="form-group-title">⚙️ VM Configuration</h3>
|
|
<form id="deploy-form" autocomplete="off">
|
|
<div class="form-grid">
|
|
<div class="form-field">
|
|
<label for="deploy-vmid">VM ID</label>
|
|
<input type="number" id="deploy-vmid" name="vmid" placeholder="100" required min="100">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="deploy-node">Proxmox Node</label>
|
|
<input type="text" id="deploy-node" name="node" placeholder="pve" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="deploy-cores">CPU Cores</label>
|
|
<input type="number" id="deploy-cores" name="cores" placeholder="2" value="2" min="1" max="128">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="deploy-memory">Memory (MB)</label>
|
|
<input type="number" id="deploy-memory" name="memory" placeholder="2048" value="2048" min="256" step="256">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="deploy-disk">Disk Size (GB)</label>
|
|
<input type="number" id="deploy-disk" name="disk_size" placeholder="32" value="32" min="8">
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="deploy-iso">ISO Image</label>
|
|
<select id="deploy-iso" name="iso">
|
|
<option value="">Select an ISO…</option>
|
|
</select>
|
|
<span class="field-hint">Choose a previously built ISO</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary btn-lg" id="deploy-submit-btn">
|
|
<span class="btn-icon">🚀</span>
|
|
<span class="btn-text">Deploy VM</span>
|
|
<span class="btn-spinner" hidden></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Builds List -->
|
|
<div class="glass-card">
|
|
<h3 class="form-group-title">📋 Build History</h3>
|
|
<div id="builds-list" class="builds-list">
|
|
<div class="empty-state">
|
|
<span class="empty-icon">📦</span>
|
|
<p>No builds found.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== VM CONTROL ==================== -->
|
|
<section class="section" id="section-vm-control">
|
|
<div class="section-header">
|
|
<h1 class="section-title">🖥️ VM Control</h1>
|
|
<p class="section-subtitle">Manage and monitor your virtual machines</p>
|
|
</div>
|
|
|
|
<!-- VM Lookup -->
|
|
<div class="glass-card form-card vm-lookup-card">
|
|
<h3 class="form-group-title">🔍 VM Lookup</h3>
|
|
<div class="vm-lookup-row">
|
|
<div class="form-field">
|
|
<input type="number" id="vm-lookup-id" placeholder="Enter VM ID…" min="100">
|
|
</div>
|
|
<button class="btn btn-primary" id="vm-lookup-btn">
|
|
<span class="btn-icon">🔍</span>
|
|
<span class="btn-text">Lookup</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VM Cards Grid -->
|
|
<div id="vm-cards-grid" class="vm-cards-grid">
|
|
<div class="empty-state">
|
|
<span class="empty-icon">🖥️</span>
|
|
<p>Enter a VM ID above to view its status and controls.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|