927 lines
44 KiB
HTML
927 lines
44 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
{# Macro must be defined BEFORE it is used #}
|
|
{% macro ctr_actions(name) %}
|
|
<button class="ctr-action-btn restart" title="Restart" onclick="ctrAction('{{ name }}','restart',this)">
|
|
<i class="fas fa-rotate-right"></i>
|
|
</button>
|
|
<button class="ctr-action-btn stop" title="Stop" onclick="ctrAction('{{ name }}','stop',this)">
|
|
<i class="fas fa-stop"></i>
|
|
</button>
|
|
<button class="ctr-action-btn start" title="Start" onclick="ctrAction('{{ name }}','start',this)">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
{% endmacro %}
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
DASHBOARD PAGE
|
|
═══════════════════════════════════════════════════════ #}
|
|
<div id="dashboard-page" class="page active">
|
|
|
|
<div class="metrics-row">
|
|
<div class="metric-card cpu">
|
|
<div class="metric-label">CPU USAGE</div>
|
|
<div class="metric-value" id="m-cpu">{{ system.cpu_pct }}<span>%</span></div>
|
|
<div class="gauge-bar"><div class="gauge-fill" id="g-cpu" style="width:{{ system.cpu_pct }}%"></div></div>
|
|
</div>
|
|
<div class="metric-card mem">
|
|
<div class="metric-label">MEMORY</div>
|
|
<div class="metric-value" id="m-mem" style="font-size:16px;">{{ system.memory }}</div>
|
|
<div class="gauge-bar"><div class="gauge-fill" id="g-mem" style="width:{{ system.mem_pct }}%"></div></div>
|
|
</div>
|
|
<div class="metric-card disk">
|
|
<div class="metric-label">DISK /</div>
|
|
<div class="metric-value" id="m-disk" style="font-size:16px;">{{ system.disk }}</div>
|
|
<div class="gauge-bar"><div class="gauge-fill" id="g-disk" style="width:{{ system.disk_pct }}%"></div></div>
|
|
</div>
|
|
<div class="metric-card load">
|
|
<div class="metric-label">LOAD AVG</div>
|
|
<div class="metric-value" id="m-load" style="font-size:16px;">{{ system.load }}</div>
|
|
<div class="gauge-bar"><div class="gauge-fill" id="g-load" style="width:10%"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-chart-line"></i> Overview</div>
|
|
<span class="card-meta">Docker {{ system.docker_v }} · {{ main_server }}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<div class="stat-card"><div class="stat-number" id="stat-total">{{ containers|length }}</div><div class="stat-label">App Containers</div></div>
|
|
<div class="stat-card"><div class="stat-number" id="stat-running">{{ running_count }}</div><div class="stat-label">Running</div></div>
|
|
<div class="stat-card"><div class="stat-number" id="stat-users">{{ users|length }}</div><div class="stat-label">Linux Users</div></div>
|
|
<div class="stat-card"><div class="stat-number" id="stat-local-bk">{{ backups|length }}</div><div class="stat-label">Local Backups</div></div>
|
|
<div class="stat-card"><div class="stat-number" id="stat-vm-bk">{{ vm_backups|length }}</div><div class="stat-label">VM Backups</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-cubes"></i> App Containers</div>
|
|
<div style="display:flex;align-items:center;gap:10px;">
|
|
<span class="card-meta">Auto-refresh 15s</span>
|
|
<button class="btn btn-ghost btn-sm" onclick="toggleExtraColumns('app')" id="app-toggle-btn">
|
|
<i class="fas fa-eye"></i> Show more
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x:auto;">
|
|
<table class="ct-table" id="app-containers-table">
|
|
<thead>
|
|
<tr>
|
|
<th>NAME</th>
|
|
<th>STATUS</th>
|
|
<th>CPU</th>
|
|
<th>MEMORY</th>
|
|
<th>NET I/O</th>
|
|
<th class="col-extra app-extra" style="display:none;">DISK I/O</th>
|
|
<th class="col-extra app-extra" style="display:none;">IMAGE</th>
|
|
<th class="col-extra app-extra" style="display:none;">PORTS</th>
|
|
<th>ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="app-containers-body">
|
|
{% for c in containers %}
|
|
<tr data-ctr="{{ c.name }}">
|
|
<td class="ct-name">{{ c.name }}</td>
|
|
<td>
|
|
{% if 'Up' in c.status %}
|
|
<span class="badge badge-run">Running</span>
|
|
{% else %}
|
|
<span class="badge badge-stop">Stopped</span>
|
|
{% endif %}
|
|
</td>
|
|
<td><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="cpu">—</span></td>
|
|
<td>
|
|
<div class="stat-bar-wrap">
|
|
<div class="stat-bar-bg"><div class="stat-bar-fill" data-ctr="{{ c.name }}" data-stat="mem_bar" style="width:0%"></div></div>
|
|
<span class="stat-pct" data-ctr="{{ c.name }}" data-stat="mem_pct">—</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="net" style="color:var(--cyan)">—</span></td>
|
|
<td class="col-extra app-extra" style="display:none;"><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="block" style="color:var(--yellow)">—</span></td>
|
|
<td class="col-extra app-extra ct-image" style="display:none;">{{ c.image }}</td>
|
|
<td class="col-extra app-extra ct-ports" style="display:none;">{{ c.ports or '—' }}</td>
|
|
<td><div class="action-btns">{{ ctr_actions(c.name) }}</div></td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="9"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
ALL CONTAINERS PAGE
|
|
═══════════════════════════════════════════════════════ #}
|
|
<div id="containers-page" class="page">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-layer-group"></i> All Containers</div>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span class="card-meta" id="all-ctr-meta">—</span>
|
|
<button class="btn btn-ghost btn-sm" onclick="toggleExtraColumns('all')" id="all-toggle-btn">
|
|
<i class="fas fa-eye"></i> Show more
|
|
</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="loadAllContainers()"><i class="fas fa-sync-alt"></i> Refresh</button>
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x:auto;">
|
|
<table class="ct-table">
|
|
<thead>
|
|
<tr>
|
|
<th>NAME</th>
|
|
<th>OWNER</th>
|
|
<th>STATUS</th>
|
|
<th>CPU</th>
|
|
<th>MEMORY</th>
|
|
<th>NET I/O</th>
|
|
<th class="col-extra all-extra" style="display:none;">DISK I/O</th>
|
|
<th class="col-extra all-extra" style="display:none;">IMAGE</th>
|
|
<th class="col-extra all-extra" style="display:none;">PORTS</th>
|
|
<th>ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="all-containers-body">
|
|
<tr><td colspan="10"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
RESTORE PAGE
|
|
═══════════════════════════════════════════════════════ #}
|
|
<div id="restore-page" class="page">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-rotate-right"></i> Restore Configuration</div>
|
|
</div>
|
|
|
|
<div class="restore-form">
|
|
<div class="form-section">
|
|
<div class="form-section-title">STEP 1 — SELECT BACKUP SOURCE</div>
|
|
<div class="radio-group">
|
|
<label class="radio-card">
|
|
<input type="radio" name="backup_source" value="local" checked onchange="updateBackupList()">
|
|
<div class="radio-body">
|
|
<span class="radio-icon">🖥️</span>
|
|
<div>
|
|
<div class="radio-label">Main Server</div>
|
|
<div class="radio-desc"><code>/root/backups/</code></div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="backup_source" value="vm" onchange="updateBackupList()">
|
|
<div class="radio-body">
|
|
<span class="radio-icon">💾</span>
|
|
<div>
|
|
<div class="radio-label">VM Backup Server</div>
|
|
<div class="radio-desc"><code>/backups/main-server/</code></div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="form-group" style="margin-top:14px; max-width:500px;">
|
|
<label class="form-label">BACKUP FILE</label>
|
|
<select id="backup-file-select" class="form-input">
|
|
<optgroup label="Main Server" id="local-options">
|
|
{% for b in backups %}<option value="{{ b }}" data-source="local">{{ b }}</option>{% else %}<option disabled>No local backups</option>{% endfor %}
|
|
</optgroup>
|
|
<optgroup label="VM Backups" id="vm-options" style="display:none;">
|
|
{% for b in vm_backups %}<option value="{{ b }}" data-source="vm">{{ b }}</option>{% else %}<option disabled>No VM backups</option>{% endfor %}
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<div class="form-section-title">STEP 2 — SELECT RESTORE TARGET</div>
|
|
<div class="radio-group">
|
|
<label class="radio-card">
|
|
<input type="radio" name="restore_target" value="local" checked onchange="toggleRemoteFields()">
|
|
<div class="radio-body">
|
|
<span class="radio-icon">🎯</span>
|
|
<div>
|
|
<div class="radio-label">Restore on This Server</div>
|
|
<div class="radio-desc" id="this-server-desc">Loading hostname…</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
<label class="radio-card">
|
|
<input type="radio" name="restore_target" value="remote" onchange="toggleRemoteFields()">
|
|
<div class="radio-body">
|
|
<span class="radio-icon">📡</span>
|
|
<div>
|
|
<div class="radio-label">External Machine</div>
|
|
<div class="radio-desc">via SSH — any IP</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="remote-fields" style="display:none; margin-top:16px; max-width:560px;">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label class="form-label">TARGET IP</label>
|
|
<input type="text" id="remote-ip" class="form-input" placeholder="192.168.x.x or IP">
|
|
</div>
|
|
<div class="form-group" style="max-width:100px;">
|
|
<label class="form-label">SSH PORT</label>
|
|
<input type="text" id="remote-port" class="form-input" value="22">
|
|
</div>
|
|
<div class="form-group" style="max-width:120px;">
|
|
<label class="form-label">SSH USER</label>
|
|
<input type="text" id="remote-user" class="form-input" value="root">
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="margin-top:8px;">
|
|
<label class="form-label">AUTHENTICATION</label>
|
|
<div class="radio-group" style="gap:8px;">
|
|
<label class="radio-card small">
|
|
<input type="radio" name="auth_method" value="key" checked onchange="toggleAuthFields()">
|
|
<div class="radio-body"><span>🔑</span><div class="radio-label">SSH Key</div></div>
|
|
</label>
|
|
<label class="radio-card small">
|
|
<input type="radio" name="auth_method" value="password" onchange="toggleAuthFields()">
|
|
<div class="radio-body"><span>🔒</span><div class="radio-label">Password</div></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="key-field" class="form-group" style="margin-top:8px;">
|
|
<label class="form-label">SSH KEY PATH</label>
|
|
<input type="text" id="ssh-key-path" class="form-input" value="/root/.ssh/contabo-key">
|
|
</div>
|
|
<div id="password-field" class="form-group" style="display:none; margin-top:8px;">
|
|
<label class="form-label">SSH PASSWORD</label>
|
|
<input type="password" id="ssh-password" class="form-input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<button class="btn btn-danger btn-lg" onclick="launchRestore()" id="restore-btn">
|
|
<i class="fas fa-play"></i> Start Restore
|
|
</button>
|
|
<p style="color:var(--text3); font-size:12px; margin-top:8px;">⚠ Healthy running containers are skipped.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="restore-log-wrapper" style="display:none; margin-top:20px;">
|
|
<div class="card-header" style="margin-bottom:10px;">
|
|
<div class="card-title"><i class="fas fa-terminal"></i> Restore Log</div>
|
|
<span class="badge" id="restore-status-badge" style="background:rgba(59,130,246,0.15);color:var(--accent2);">Running…</span>
|
|
</div>
|
|
<div id="restore-log" class="log-console"></div>
|
|
<div style="color:var(--text3);font-size:11px;margin-top:6px;font-family:var(--mono);" id="restore-elapsed"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
BACKUPS PAGE
|
|
═══════════════════════════════════════════════════════ #}
|
|
<div id="backups-page" class="page">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-database"></i> Available Backups</div>
|
|
<button class="btn btn-ghost btn-sm" onclick="refreshBackupsList()"><i class="fas fa-sync-alt"></i> Refresh</button>
|
|
</div>
|
|
<div class="two-col">
|
|
<div>
|
|
<div class="section-header">
|
|
<div class="section-title">🖥️ MAIN SERVER</div>
|
|
<span class="card-meta">/root/backups/</span>
|
|
</div>
|
|
<div class="backup-list" id="local-backup-list">
|
|
{% for b in backups %}
|
|
<div class="backup-item"><span class="backup-name">{{ b }}</span><button class="btn btn-ghost btn-sm" onclick="quickRestore('local','{{ b }}')">↩ Restore</button></div>
|
|
{% else %}
|
|
<div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="section-header">
|
|
<div class="section-title">💾 VM SERVER</div>
|
|
<span class="card-meta">/backups/main-server/</span>
|
|
</div>
|
|
<div class="backup-list" id="vm-backup-list">
|
|
{% for b in vm_backups %}
|
|
<div class="backup-item"><span class="backup-name">{{ b }}</span><button class="btn btn-ghost btn-sm" onclick="quickRestore('vm','{{ b }}')">↩ Restore</button></div>
|
|
{% else %}
|
|
<div class="empty-state"><i class="fas fa-inbox"></i>No VM backups</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
USERS PAGE
|
|
═══════════════════════════════════════════════════════ #}
|
|
<div id="users-page" class="page">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-user-plus"></i> Create New User</div>
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">USERNAME</label>
|
|
<input type="text" id="new-username" class="form-input" placeholder="e.g. secuser2">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">PASSWORD (optional)</label>
|
|
<input type="password" id="new-password" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">DISK SIZE MB (creates dedicated virtual disk)</label>
|
|
<input type="number" id="new-quota" class="form-input" placeholder="e.g. 10240 for 10GB">
|
|
</div>
|
|
<div class="form-group" style="justify-content:flex-end;">
|
|
<label class="form-check" style="margin-bottom:8px;">
|
|
<input type="checkbox" id="new-docker" checked>
|
|
<span>Setup rootless Docker</span>
|
|
</label>
|
|
<button class="btn btn-primary" onclick="createUser()"><i class="fas fa-plus"></i> Create User</button>
|
|
</div>
|
|
</div>
|
|
<div id="create-user-result" class="alert" style="margin-top:14px;"></div>
|
|
<div id="create-user-log" class="log-console" style="display:none; margin-top:12px; max-height:200px;"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-users"></i> System Users</div>
|
|
<button class="btn btn-ghost btn-sm" onclick="loadUsers()"><i class="fas fa-sync-alt"></i> Refresh</button>
|
|
</div>
|
|
<div class="users-grid" id="users-grid">
|
|
{% for u in users %}
|
|
<div class="user-card" onclick="loadUserContainers('{{ u.name }}')">
|
|
<div class="user-card-top">
|
|
<div class="user-avatar" style="background:{{ loop.index | colorize if colorize is defined else '#3b82f6' }}">{{ u.name[0].upper() }}</div>
|
|
<div>
|
|
<div class="user-name">{{ u.name }}</div>
|
|
<div class="user-uid">uid {{ u.uid }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-tags">
|
|
{% if u.has_docker %}<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>{% endif %}
|
|
{% if u.linger %}<span class="user-tag linger">linger</span>{% endif %}
|
|
{% if u.has_vdisk %}<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan);">💾 vdisk</span>{% endif %}
|
|
</div>
|
|
<div class="user-stats">
|
|
<div class="user-stat">Disk: <strong>{{ u.disk_used }}</strong></div>
|
|
<div class="user-stat">Ctrs: <strong>{{ u.container_count }}</strong></div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No non-system users</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="user-detail-panel" style="display:none;">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-cube"></i> <span id="user-detail-title">Containers</span></div>
|
|
<div style="display:flex;gap:8px;">
|
|
<button class="btn btn-ghost btn-sm" style="color:var(--red);" onclick="deleteUser()"><i class="fas fa-trash"></i> Delete</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'">✕</button>
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x:auto;">
|
|
<table class="ct-table">
|
|
<thead><tr><th>NAME</th><th>STATUS</th><th>IMAGE</th><th>PORTS</th></tr></thead>
|
|
<tbody id="user-containers-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div id="user-action-result" class="alert" style="margin-top:14px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
SETTINGS PAGE
|
|
═══════════════════════════════════════════════════════ #}
|
|
<div id="settings-page" class="page">
|
|
<div class="card">
|
|
<div class="card-header"><div class="card-title"><i class="fas fa-sliders"></i> Platform Settings</div></div>
|
|
<div style="max-width:460px; display:flex; flex-direction:column; gap:14px;">
|
|
<div class="form-group"><label class="form-label">MAIN SERVER IP</label><input class="form-input" value="{{ main_server }}" readonly></div>
|
|
<div class="form-group"><label class="form-label">PLATFORM HOST</label><input class="form-input" value="{{ 'Main Server' if running_on_main else 'VM (backup mode)' }}" readonly></div>
|
|
<div class="form-group"><label class="form-label">VM BACKUP PATH</label><input class="form-input" value="/backups/main-server/" readonly></div>
|
|
<div class="form-group"><label class="form-label">MAIN SERVER UPTIME</label><input class="form-input" id="settings-uptime" value="{{ system.uptime }}" readonly></div>
|
|
<div class="form-group"><label class="form-label">DOCKER VERSION</label><input class="form-input" value="{{ system.docker_v }}" readonly></div>
|
|
<button class="btn btn-ghost" onclick="refreshAll()"><i class="fas fa-sync-alt"></i> Refresh</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ═══════════════════════════════════════════════════════
|
|
JAVASCRIPT
|
|
═══════════════════════════════════════════════════════ #}
|
|
<script>
|
|
// ── Fetch and display current hostname in restore target label ───
|
|
(async function() {
|
|
try {
|
|
const r = await fetch('/api/system');
|
|
const d = await r.json();
|
|
const el = document.getElementById('this-server-desc');
|
|
if (el && d.hostname) el.textContent = d.hostname;
|
|
} catch {}
|
|
})();
|
|
|
|
// ── Pages ───────────────────────────────────────────────
|
|
const PAGE_INFO = {
|
|
'dashboard': { title:'Dashboard', sub:'{{ main_server }}' },
|
|
'containers': { title:'All Containers', sub:'main server · all users' },
|
|
'restore': { title:'Restore', sub:'backup → target' },
|
|
'backups': { title:'Backups', sub:'local & VM' },
|
|
'users': { title:'User Management', sub:'linux + docker' },
|
|
'settings': { title:'Settings', sub:'platform config' },
|
|
};
|
|
function showPage(name) {
|
|
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
|
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
|
const page = document.getElementById(name+'-page');
|
|
if (page) page.classList.add('active');
|
|
const nav = document.querySelector(`[data-page="${name}"]`);
|
|
if (nav) nav.classList.add('active');
|
|
const info = PAGE_INFO[name] || {};
|
|
document.getElementById('page-title').textContent = info.title || name;
|
|
document.getElementById('page-subtitle').textContent = info.sub || '';
|
|
if (name === 'containers') loadAllContainers();
|
|
if (name === 'backups') refreshBackupsList();
|
|
if (name === 'users') loadUsers();
|
|
}
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.addEventListener('click', e => { e.preventDefault(); showPage(item.dataset.page); });
|
|
});
|
|
|
|
// ── Collapsible columns ─────────────────────────────────
|
|
const extraState = { app: false, all: false };
|
|
function toggleExtraColumns(prefix) {
|
|
extraState[prefix] = !extraState[prefix];
|
|
const show = extraState[prefix];
|
|
document.querySelectorAll(`.${prefix}-extra`).forEach(el => {
|
|
el.style.display = show ? '' : 'none';
|
|
});
|
|
const btn = document.getElementById(`${prefix}-toggle-btn`);
|
|
if (btn) {
|
|
btn.innerHTML = show
|
|
? '<i class="fas fa-eye-slash"></i> Show less'
|
|
: '<i class="fas fa-eye"></i> Show more';
|
|
}
|
|
}
|
|
|
|
// ── Container action (start/stop/restart) ───────────────
|
|
async function ctrAction(name, action, btn) {
|
|
const origHTML = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
try {
|
|
const r = await fetch('/api/container/action', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, action })
|
|
});
|
|
const d = await r.json();
|
|
btn.innerHTML = d.success ? '<i class="fas fa-check"></i>' : '<i class="fas fa-times"></i>';
|
|
btn.style.opacity = '1';
|
|
setTimeout(() => {
|
|
btn.innerHTML = origHTML;
|
|
btn.disabled = false;
|
|
setTimeout(() => { refreshContainerStats(); loadAllContainers(); }, 2000);
|
|
}, 1500);
|
|
} catch (e) {
|
|
btn.innerHTML = origHTML;
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// ── Server status ────────────────────────────────────────
|
|
async function checkServerStatus() {
|
|
try {
|
|
const r = await fetch('/server/status');
|
|
const d = await r.json();
|
|
const dot = document.getElementById('pulse-dot');
|
|
const text = document.getElementById('server-status-text');
|
|
if (d.status === 'online') {
|
|
dot.className = 'pulse-dot online'; text.textContent = 'Online';
|
|
} else {
|
|
dot.className = 'pulse-dot offline'; text.textContent = 'Offline';
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
// ── System metrics ───────────────────────────────────────
|
|
async function refreshSystemMetrics() {
|
|
try {
|
|
const r = await fetch('/api/system');
|
|
const d = await r.json();
|
|
document.getElementById('m-cpu').innerHTML = d.cpu_pct + '<span>%</span>';
|
|
document.getElementById('m-mem').textContent = d.memory;
|
|
document.getElementById('m-disk').textContent = d.disk;
|
|
document.getElementById('m-load').textContent = d.load;
|
|
document.getElementById('g-cpu').style.width = Math.min(parseFloat(d.cpu_pct)||0, 100)+'%';
|
|
document.getElementById('g-mem').style.width = Math.min(parseFloat(d.mem_pct)||0, 100)+'%';
|
|
document.getElementById('g-disk').style.width = Math.min(parseFloat(d.disk_pct)||0, 100)+'%';
|
|
document.getElementById('uptime-chip').textContent = d.uptime;
|
|
const su = document.getElementById('settings-uptime');
|
|
if (su) su.value = d.uptime;
|
|
// Update "this server" label in restore page with live hostname
|
|
if (d.hostname) {
|
|
const el = document.getElementById('this-server-desc');
|
|
if (el) el.textContent = d.hostname;
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
// ── Container stats (live) ───────────────────────────────
|
|
async function refreshContainerStats() {
|
|
try {
|
|
const r = await fetch('/api/stats');
|
|
const stats = await r.json();
|
|
document.querySelectorAll('[data-stat]').forEach(el => {
|
|
const name = el.dataset.ctr;
|
|
const stat = el.dataset.stat;
|
|
const s = stats[name];
|
|
if (!s) return;
|
|
if (stat === 'cpu') el.textContent = s.cpu || '—';
|
|
if (stat === 'net') el.textContent = s.net || '—';
|
|
if (stat === 'block') el.textContent = s.block || '—';
|
|
if (stat === 'mem_pct') el.textContent = s.mem_pct || '—';
|
|
if (stat === 'mem_bar') {
|
|
const pct = parseFloat(s.mem_pct) || 0;
|
|
el.style.width = Math.min(pct, 100) + '%';
|
|
el.className = 'stat-bar-fill' + (pct > 85 ? ' crit' : pct > 65 ? ' warn' : '');
|
|
}
|
|
});
|
|
} catch {}
|
|
}
|
|
|
|
// ── All containers ───────────────────────────────────────
|
|
function buildActionBtns(name) {
|
|
return `<div class="action-btns">
|
|
<button class="ctr-action-btn restart" title="Restart" onclick="ctrAction('${name}','restart',this)"><i class="fas fa-rotate-right"></i></button>
|
|
<button class="ctr-action-btn stop" title="Stop" onclick="ctrAction('${name}','stop',this)"><i class="fas fa-stop"></i></button>
|
|
<button class="ctr-action-btn start" title="Start" onclick="ctrAction('${name}','start',this)"><i class="fas fa-play"></i></button>
|
|
</div>`;
|
|
}
|
|
|
|
async function loadAllContainers() {
|
|
const body = document.getElementById('all-containers-body');
|
|
const meta = document.getElementById('all-ctr-meta');
|
|
body.innerHTML = '<tr><td colspan="10"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>';
|
|
|
|
try {
|
|
const [ctrRes, statRes] = await Promise.all([
|
|
fetch('/api/containers/all'),
|
|
fetch('/api/stats'),
|
|
]);
|
|
const { containers, running } = await ctrRes.json();
|
|
const stats = await statRes.json();
|
|
|
|
meta.textContent = `${containers.length} total · ${running} running`;
|
|
document.getElementById('nav-badge-containers').textContent = containers.length;
|
|
|
|
if (!containers.length) {
|
|
body.innerHTML = '<tr><td colspan="10"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>';
|
|
return;
|
|
}
|
|
const showExtra = extraState.all;
|
|
body.innerHTML = containers.map(c => {
|
|
const up = c.status.includes('Up');
|
|
const s = stats[c.name] || {};
|
|
const pct = parseFloat(s.mem_pct) || 0;
|
|
const cls = pct > 85 ? 'crit' : pct > 65 ? 'warn' : '';
|
|
const ed = showExtra ? '' : 'display:none;';
|
|
return `<tr>
|
|
<td class="ct-name">${c.name}</td>
|
|
<td class="ct-owner">${c.owner}</td>
|
|
<td>${up ? '<span class="badge badge-run">Running</span>' : '<span class="badge badge-stop">Stopped</span>'}</td>
|
|
<td><span class="stat-pct">${s.cpu||'—'}</span></td>
|
|
<td><div class="stat-bar-wrap">
|
|
<div class="stat-bar-bg"><div class="stat-bar-fill ${cls}" style="width:${Math.min(pct,100)}%"></div></div>
|
|
<span class="stat-pct">${s.mem_pct||'—'}</span>
|
|
</div></td>
|
|
<td><span class="stat-pct" style="color:var(--cyan)">${s.net||'—'}</span></td>
|
|
<td class="col-extra all-extra" style="${ed}"><span class="stat-pct" style="color:var(--yellow)">${s.block||'—'}</span></td>
|
|
<td class="col-extra all-extra ct-image" style="${ed}">${c.image}</td>
|
|
<td class="col-extra all-extra ct-ports" style="${ed}">${c.ports||'—'}</td>
|
|
<td>${buildActionBtns(c.name)}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
} catch (e) {
|
|
body.innerHTML = `<tr><td colspan="10"><div class="empty-state">${e}</div></td></tr>`;
|
|
}
|
|
}
|
|
|
|
// ── Backups ──────────────────────────────────────────────
|
|
async function refreshBackupsList() {
|
|
try {
|
|
const r = await fetch('/api/backups');
|
|
const d = await r.json();
|
|
renderBackupList(d.local, 'local-backup-list', 'local');
|
|
renderBackupList(d.vm, 'vm-backup-list', 'vm');
|
|
document.getElementById('stat-local-bk').textContent = d.local.length;
|
|
document.getElementById('stat-vm-bk').textContent = d.vm.length;
|
|
const lo = document.getElementById('local-options');
|
|
const vo = document.getElementById('vm-options');
|
|
lo.innerHTML = d.local.length
|
|
? d.local.map(b => `<option value="${b}" data-source="local">${b}</option>`).join('')
|
|
: '<option disabled>No local backups</option>';
|
|
vo.innerHTML = d.vm.length
|
|
? d.vm.map(b => `<option value="${b}" data-source="vm">${b}</option>`).join('')
|
|
: '<option disabled>No VM backups</option>';
|
|
} catch {}
|
|
}
|
|
function renderBackupList(items, id, source) {
|
|
const el = document.getElementById(id);
|
|
if (!el) return;
|
|
if (!items || !items.length) { el.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>'; return; }
|
|
el.innerHTML = items.map(b => `
|
|
<div class="backup-item">
|
|
<span class="backup-name">${b}</span>
|
|
<button class="btn btn-ghost btn-sm" onclick="quickRestore('${source}','${b}')">↩ Restore</button>
|
|
</div>`).join('');
|
|
}
|
|
|
|
// ── Users ────────────────────────────────────────────────
|
|
let selectedUser = null;
|
|
const userColors = ['#3b82f6','#a78bfa','#22c55e','#f59e0b','#ef4444','#22d3ee'];
|
|
|
|
async function loadUsers() {
|
|
try {
|
|
const r = await fetch('/api/users');
|
|
const users = await r.json();
|
|
document.getElementById('nav-badge-users').textContent = users.length;
|
|
document.getElementById('stat-users').textContent = users.length;
|
|
const grid = document.getElementById('users-grid');
|
|
if (!users.length) { grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No users</div>'; return; }
|
|
grid.innerHTML = users.map((u, i) => `
|
|
<div class="user-card" onclick="loadUserContainers('${u.name}')">
|
|
<div class="user-card-top">
|
|
<div class="user-avatar" style="background:${userColors[i % userColors.length]}">${u.name[0].toUpperCase()}</div>
|
|
<div><div class="user-name">${u.name}</div><div class="user-uid">uid ${u.uid}</div></div>
|
|
</div>
|
|
<div class="user-tags">
|
|
${u.has_docker ? '<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>' : ''}
|
|
${u.linger ? '<span class="user-tag linger">linger</span>' : ''}
|
|
${u.has_vdisk ? '<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan)">💾 vdisk</span>' : ''}
|
|
</div>
|
|
<div class="user-stats">
|
|
<div class="user-stat">Disk: <strong>${u.disk_used}</strong></div>
|
|
<div class="user-stat">Ctrs: <strong>${u.container_count}</strong></div>
|
|
</div>
|
|
</div>`).join('');
|
|
} catch {}
|
|
}
|
|
|
|
async function loadUserContainers(username) {
|
|
selectedUser = username;
|
|
const panel = document.getElementById('user-detail-panel');
|
|
panel.style.display = '';
|
|
document.getElementById('user-detail-title').textContent = `${username}'s Containers`;
|
|
document.getElementById('user-action-result').className = 'alert';
|
|
const body = document.getElementById('user-containers-body');
|
|
body.innerHTML = '<tr><td colspan="4"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i></div></td></tr>';
|
|
try {
|
|
const r = await fetch(`/api/users/${username}/containers`);
|
|
const ctrs = await r.json();
|
|
if (!ctrs.length) { body.innerHTML = '<tr><td colspan="4"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>'; return; }
|
|
body.innerHTML = ctrs.map(c => {
|
|
const up = c.status.includes('Up');
|
|
return `<tr>
|
|
<td class="ct-name">${c.name}</td>
|
|
<td>${up ? '<span class="badge badge-run">Running</span>' : '<span class="badge badge-stop">Stopped</span>'}</td>
|
|
<td class="ct-image">${c.image}</td>
|
|
<td class="ct-ports">${c.ports||'—'}</td>
|
|
</tr>`;
|
|
}).join('');
|
|
panel.scrollIntoView({ behavior: 'smooth' });
|
|
} catch {}
|
|
}
|
|
|
|
async function createUser() {
|
|
const username = document.getElementById('new-username').value.trim();
|
|
const password = document.getElementById('new-password').value.trim();
|
|
const quota = document.getElementById('new-quota').value.trim();
|
|
const docker = document.getElementById('new-docker').checked;
|
|
if (!username) { showAlert('create-user-result', 'error', 'Username required'); return; }
|
|
const btn = event.target;
|
|
btn.disabled = true; btn.textContent = 'Creating…';
|
|
const logEl = document.getElementById('create-user-log');
|
|
logEl.style.display = ''; logEl.textContent = '⏳ Setting up…\n';
|
|
try {
|
|
const r = await fetch('/api/users/create', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password: password||null, setup_docker: docker, disk_quota_mb: quota ? parseInt(quota) : null })
|
|
});
|
|
const d = await r.json();
|
|
logEl.textContent = d.message || '';
|
|
if (d.success) {
|
|
showAlert('create-user-result', 'success', `✅ User "${username}" created`);
|
|
document.getElementById('new-username').value = '';
|
|
document.getElementById('new-password').value = '';
|
|
document.getElementById('new-quota').value = '';
|
|
loadUsers();
|
|
} else {
|
|
showAlert('create-user-result', 'error', `❌ ${d.message}`);
|
|
}
|
|
} catch (e) { showAlert('create-user-result', 'error', `${e}`); }
|
|
finally { btn.disabled = false; btn.innerHTML = '<i class="fas fa-plus"></i> Create User'; }
|
|
}
|
|
|
|
async function deleteUser() {
|
|
if (!selectedUser) return;
|
|
if (!confirm(`Delete user "${selectedUser}"?`)) return;
|
|
const removeHome = confirm(`Also delete /home/${selectedUser}?`);
|
|
try {
|
|
const r = await fetch('/api/users/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username: selectedUser, remove_home: removeHome })
|
|
});
|
|
const d = await r.json();
|
|
showAlert('user-action-result', d.success ? 'success' : 'error', d.message);
|
|
if (d.success) { document.getElementById('user-detail-panel').style.display='none'; loadUsers(); }
|
|
} catch (e) { showAlert('user-action-result', 'error', `${e}`); }
|
|
}
|
|
|
|
function showAlert(id, type, msg) {
|
|
const el = document.getElementById(id);
|
|
el.className = `alert alert-${type} show`;
|
|
el.textContent = msg;
|
|
}
|
|
|
|
// ── Restore form ─────────────────────────────────────────
|
|
function updateBackupList() {
|
|
const src = document.querySelector('input[name="backup_source"]:checked').value;
|
|
document.getElementById('local-options').style.display = src==='local' ? '' : 'none';
|
|
document.getElementById('vm-options').style.display = src==='vm' ? '' : 'none';
|
|
const sel = document.getElementById('backup-file-select');
|
|
for (let opt of sel.options) {
|
|
if (!opt.disabled && opt.parentElement.style.display !== 'none') { opt.selected = true; break; }
|
|
}
|
|
}
|
|
function toggleRemoteFields() {
|
|
document.getElementById('remote-fields').style.display =
|
|
document.querySelector('input[name="restore_target"]:checked').value === 'remote' ? '' : 'none';
|
|
}
|
|
function toggleAuthFields() {
|
|
const m = document.querySelector('input[name="auth_method"]:checked').value;
|
|
document.getElementById('key-field').style.display = m==='key' ? '' : 'none';
|
|
document.getElementById('password-field').style.display = m==='password' ? '' : 'none';
|
|
}
|
|
function quickRestore(source, filename) {
|
|
showPage('restore');
|
|
document.querySelector(`input[name="backup_source"][value="${source}"]`).checked = true;
|
|
updateBackupList();
|
|
const sel = document.getElementById('backup-file-select');
|
|
for (let opt of sel.options) { if (opt.value === filename) { opt.selected = true; break; } }
|
|
document.querySelector('input[name="restore_target"][value="local"]').checked = true;
|
|
toggleRemoteFields();
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
let currentJobId = null, pollInterval = null;
|
|
|
|
async function launchRestore() {
|
|
const src = document.querySelector('input[name="backup_source"]:checked').value;
|
|
const file = document.getElementById('backup-file-select').value;
|
|
const target = document.querySelector('input[name="restore_target"]:checked').value;
|
|
if (!file || file === 'undefined') { alert('Select a backup file.'); return; }
|
|
|
|
const payload = { backup_source: src, backup_file: file, target };
|
|
if (target === 'remote') {
|
|
payload.remote_ip = document.getElementById('remote-ip').value.trim();
|
|
payload.remote_port = document.getElementById('remote-port').value.trim() || '22';
|
|
payload.remote_user = document.getElementById('remote-user').value.trim() || 'root';
|
|
payload.auth_method = document.querySelector('input[name="auth_method"]:checked').value;
|
|
if (payload.auth_method === 'key')
|
|
payload.ssh_key_path = document.getElementById('ssh-key-path').value.trim();
|
|
else
|
|
payload.ssh_password = document.getElementById('ssh-password').value;
|
|
if (!payload.remote_ip) { alert('Enter target IP.'); return; }
|
|
}
|
|
|
|
const tgtLabel = target === 'local'
|
|
? (document.getElementById('this-server-desc').textContent || 'this server')
|
|
: `${payload.remote_ip}:${payload.remote_port||22}`;
|
|
if (!confirm(`Restore "${file}" → ${tgtLabel}?`)) return;
|
|
|
|
const btn = document.getElementById('restore-btn');
|
|
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting…';
|
|
|
|
document.getElementById('restore-log-wrapper').style.display = '';
|
|
document.getElementById('restore-log').innerHTML = '';
|
|
const badge = document.getElementById('restore-status-badge');
|
|
badge.style = 'background:rgba(59,130,246,0.15);color:var(--accent2)';
|
|
badge.textContent = 'Running…';
|
|
|
|
try {
|
|
const res = await fetch('/restore/start', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload) });
|
|
const data = await res.json();
|
|
if (data.error) { appendLog('❌ '+data.error, 'error'); btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore'; return; }
|
|
currentJobId = data.job_id;
|
|
pollRestore();
|
|
} catch (e) { appendLog('❌ '+e, 'error'); btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore'; }
|
|
}
|
|
|
|
function pollRestore() {
|
|
if (pollInterval) clearInterval(pollInterval);
|
|
let lastLine = 0;
|
|
pollInterval = setInterval(async () => {
|
|
if (!currentJobId) return;
|
|
try {
|
|
const r = await fetch(`/restore/status/${currentJobId}`);
|
|
const d = await r.json();
|
|
d.log.slice(lastLine).forEach(l => appendLog(l));
|
|
lastLine = d.log.length;
|
|
document.getElementById('restore-elapsed').textContent = `⏱ ${d.elapsed}s`;
|
|
if (d.status !== 'running') {
|
|
clearInterval(pollInterval);
|
|
const badge = document.getElementById('restore-status-badge');
|
|
if (d.status === 'done') { badge.style='background:rgba(34,197,94,0.15);color:var(--green)'; badge.textContent='✅ Done'; }
|
|
else { badge.style='background:rgba(239,68,68,0.15);color:var(--red)'; badge.textContent='❌ Error'; }
|
|
const btn = document.getElementById('restore-btn');
|
|
btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore';
|
|
}
|
|
} catch {}
|
|
}, 1500);
|
|
}
|
|
|
|
function appendLog(line, type) {
|
|
const el = document.getElementById('restore-log');
|
|
const div = document.createElement('div');
|
|
div.className = 'log-line';
|
|
if (line.includes('✅')||type==='ok') div.style.color='var(--green)';
|
|
else if (line.includes('❌')||type==='error') div.style.color='var(--red)';
|
|
else if (line.includes('⚠️')) div.style.color='var(--yellow)';
|
|
else if (line.includes('📌')||line.includes('STEP')) div.style.color='var(--accent2)';
|
|
else if (line.includes('📤')||line.includes('🚀')) div.style.color='var(--cyan)';
|
|
div.textContent = line;
|
|
el.appendChild(div);
|
|
el.scrollTop = el.scrollHeight;
|
|
}
|
|
|
|
// ── Global refresh ───────────────────────────────────────
|
|
function refreshAll() {
|
|
const btn = document.querySelector('.icon-btn');
|
|
btn.classList.add('spinning');
|
|
Promise.all([checkServerStatus(), refreshSystemMetrics(), refreshContainerStats()])
|
|
.finally(() => btn.classList.remove('spinning'));
|
|
}
|
|
|
|
// ── Boot ─────────────────────────────────────────────────
|
|
checkServerStatus();
|
|
refreshSystemMetrics();
|
|
refreshContainerStats();
|
|
document.getElementById('nav-badge-users').textContent = '{{ users|length }}';
|
|
document.getElementById('nav-badge-containers').textContent = '{{ containers|length }}';
|
|
setInterval(() => { refreshSystemMetrics(); refreshContainerStats(); }, 15000);
|
|
setInterval(checkServerStatus, 30000);
|
|
</script>
|
|
|
|
<style>
|
|
/* Container action buttons */
|
|
.action-btns { display:flex; gap:5px; align-items:center; }
|
|
.ctr-action-btn {
|
|
width:28px; height:28px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
border-radius:7px; border:none; cursor:pointer;
|
|
font-size:11px;
|
|
transition:background 0.15s, transform 0.1s, opacity 0.15s;
|
|
}
|
|
.ctr-action-btn:hover { transform:scale(1.12); }
|
|
.ctr-action-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
|
|
|
|
.ctr-action-btn.restart {
|
|
background:rgba(59,130,246,0.15); color:var(--accent2);
|
|
}
|
|
.ctr-action-btn.restart:hover { background:rgba(59,130,246,0.3); }
|
|
|
|
.ctr-action-btn.stop {
|
|
background:rgba(239,68,68,0.12); color:var(--red);
|
|
}
|
|
.ctr-action-btn.stop:hover { background:rgba(239,68,68,0.25); }
|
|
|
|
.ctr-action-btn.start {
|
|
background:rgba(34,197,94,0.12); color:var(--green);
|
|
}
|
|
.ctr-action-btn.start:hover { background:rgba(34,197,94,0.25); }
|
|
|
|
[data-theme="light"] .ctr-action-btn.restart { background:rgba(37,99,235,0.08); }
|
|
[data-theme="light"] .ctr-action-btn.stop { background:rgba(220,38,38,0.08); }
|
|
[data-theme="light"] .ctr-action-btn.start { background:rgba(22,163,74,0.08); }
|
|
</style>
|
|
{% endblock %}
|