ameniboukattaya/CloudOps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync from main server - 2026-04-16 13:42:46

Browse Source
This commit is contained in:
root
2026-04-16 13:42:46 +02:00
parent 68870eb3db
commit 81347bbdd2
3 changed files with 547 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
platform/app.py
View File

@@ -1,19 +1,28 @@
# app.py
from flask import Flask, render_template, request, redirect, url_for, session, jsonify
import os
import subprocess
import threading
import uuid
import time
from config import MAIN_SERVER_IP, VM_HOST, VM_PORT, VM_KEY, VM_USER
from config import (
MAIN_SERVER_IP, RUNNING_ON_MAIN_SERVER,
VM_HOST, VM_PORT, VM_KEY, VM_USER,
MAIN_SERVER_KEY, MAIN_SERVER_PORT, MAIN_SERVER_USER,
)
from modules.auth import login_required
from modules.backups import (
get_containers, get_all_root_containers, get_local_backups,
get_vm_backups, get_all_stats, get_system_info
get_containers, get_all_root_containers,
get_local_backups, get_vm_backups,
get_all_stats, get_system_info,
get_rootless_user_containers_remote,
container_action,
)
from modules.commands import run_command, run_ssh_to_vm
from modules.commands import run_command
from modules.users import (
get_all_users, get_user_containers, get_all_users_containers,
create_user, delete_user, get_user_disk_usage
create_user, delete_user, get_user_disk_usage,
)
app = Flask(__name__)
@@ -51,6 +60,7 @@ def dashboard():
backups = get_local_backups()
vm_backups = get_vm_backups()
system = get_system_info()
# Users are still LOCAL (users on the platform host)
users = get_all_users()
return render_template('dashboard.html',
containers=containers,
@@ -59,11 +69,12 @@ def dashboard():
vm_backups=vm_backups,
main_server=MAIN_SERVER_IP,
system=system,
users=users)
users=users,
running_on_main=RUNNING_ON_MAIN_SERVER)
# ─────────────────────────────────────────────
# API — system info + stats (live poll)
# API — system + stats (always from main server)
# ─────────────────────────────────────────────
@app.route('/api/system')
@login_required
@@ -74,7 +85,6 @@ def api_system():
@app.route('/api/stats')
@login_required
def api_stats():
"""Container resource stats for ALL containers (root + rootless users)."""
return jsonify(get_all_stats())
@@ -89,14 +99,35 @@ def api_containers():
@app.route('/api/containers/all')
@login_required
def api_containers_all():
"""Root containers + all users' rootless containers combined."""
"""Root containers + rootless-user containers, all from main server."""
root_ctrs = get_all_root_containers()
user_ctrs = get_all_users_containers()
user_ctrs = get_rootless_user_containers_remote()
all_ctrs = root_ctrs + user_ctrs
running = sum(1 for c in all_ctrs if 'Up' in c.get('status', ''))
return jsonify({'containers': all_ctrs, 'running': running})
# ─────────────────────────────────────────────
# API — container actions
# ─────────────────────────────────────────────
@app.route('/api/container/action', methods=['POST'])
@login_required
def api_container_action():
"""
POST JSON: { "name": "container-name", "action": "start|stop|restart" }
Runs the action on the main server (via SSH if on VM).
"""
data = request.get_json() or {}
name = data.get('name', '').strip()
action = data.get('action', '').strip()
if not name or not action:
return jsonify({'success': False, 'message': 'name and action required'}), 400
success, output = container_action(name, action)
return jsonify({'success': success, 'output': output})
# ─────────────────────────────────────────────
# API — backups
# ─────────────────────────────────────────────
@@ -107,7 +138,7 @@ def api_backups():
# ─────────────────────────────────────────────
# API — users management
# API — users (LOCAL — users on this host)
# ─────────────────────────────────────────────
@app.route('/api/users')
@login_required
@@ -185,22 +216,46 @@ def restore_start():
if not backup_file:
return jsonify({'error': 'No backup file specified'}), 400
# Resolve archive path on this server
# ── Resolve backup archive path ──────────────────────────────────────────
if backup_source == 'local':
# Backup is on main server at /root/backups/
if RUNNING_ON_MAIN_SERVER:
backup_path = f"/root/backups/{backup_file}"
if not os.path.exists(backup_path):
return jsonify({'error': f'Backup not found: {backup_path}'}), 400
return jsonify({'error': f'Not found: {backup_path}'}), 400
else:
# We're on VM → need to pull backup from main server to /tmp/ first
backup_path = f"/tmp/{backup_file}"
if not os.path.exists(backup_path):
pull_cmd = (
f"scp -i {MAIN_SERVER_KEY} -P {MAIN_SERVER_PORT} "
f"-o StrictHostKeyChecking=no -o ConnectTimeout=15 "
f"{MAIN_SERVER_USER}@{MAIN_SERVER_IP}:/root/backups/{backup_file} "
f"{backup_path}"
)
res = subprocess.run(pull_cmd, shell=True, capture_output=True, text=True)
if res.returncode != 0:
return jsonify({'error': f'Failed to pull from main server: {res.stderr}'}), 500
else:
# VM backup
if RUNNING_ON_MAIN_SERVER:
# Pull from VM via tunnel
backup_path = f"/tmp/{backup_file}"
if not os.path.exists(backup_path):
pull_cmd = (
f"scp -i {VM_KEY} -P {VM_PORT} "
f"-o StrictHostKeyChecking=no -o ConnectTimeout=15 "
f"{VM_USER}@{VM_HOST}:/backups/main-server/{backup_file} {backup_path}"
f"{VM_USER}@{VM_HOST}:/backups/main-server/{backup_file} "
f"{backup_path}"
)
result = subprocess.run(pull_cmd, shell=True, capture_output=True, text=True)
if result.returncode != 0:
return jsonify({'error': f'Failed to pull from VM: {result.stderr}'}), 500
res = subprocess.run(pull_cmd, shell=True, capture_output=True, text=True)
if res.returncode != 0:
return jsonify({'error': f'Failed to pull from VM: {res.stderr}'}), 500
else:
# We're on VM → backup is local
backup_path = f"/backups/main-server/{backup_file}"
if not os.path.exists(backup_path):
return jsonify({'error': f'Not found: {backup_path}'}), 400
restore_script_local = os.path.join(
os.path.dirname(os.path.abspath(__file__)), 'restore-myapps.sh'
@@ -208,20 +263,28 @@ def restore_start():
if not os.path.exists(restore_script_local):
return jsonify({'error': f'restore-myapps.sh not found at {restore_script_local}'}), 500
# ── Determine the actual target ──────────────────────────────────────────
# "local" always means THIS host — wherever the platform is currently deployed.
# Run the restore script directly, no SSH indirection needed.
if target == 'local':
hostname = os.uname().nodename
session_dir = f"/tmp/restore-session-{uuid.uuid4().hex[:8]}"
cmd = (
f"set -e && mkdir -p {session_dir} && "
f"echo '📂 Extracting backup locally...' && "
f"set -e && "
f"echo '🖥️ Restoring on this server ({hostname})...' && "
f"mkdir -p {session_dir} && "
f"echo '📂 Extracting backup...' && "
f"tar -xzf {backup_path} -C {session_dir} --strip-components=1 && "
f"cp {restore_script_local} {session_dir}/restore-myapps.sh && "
f"chmod +x {session_dir}/restore-myapps.sh && "
f"cd {session_dir} && bash restore-myapps.sh ; "
f"EXIT=$? ; rm -rf {session_dir} ; exit $EXIT"
)
else:
# Explicit remote machine (custom IP)
if not remote_ip:
return jsonify({'error': 'remote_ip required for remote restore'}), 400
return jsonify({'error': 'remote_ip required'}), 400
base_opts = "-o StrictHostKeyChecking=no -o ConnectTimeout=15"
if auth_method == 'key':
@@ -247,7 +310,6 @@ def restore_start():
f"echo '🚀 Running restore on {remote_ip}:{remote_port}...' && "
f"{ssh_prefix} {remote_user}@{remote_ip} "
f"'set -e && cd {remote_dest} && "
f"echo \"📂 Extracting backup...\" && "
f"tar -xzf {backup_file} --strip-components=1 && "
f"chmod +x restore-myapps.sh && bash restore-myapps.sh' ; "
f"EXIT=$? ; "

240
platform/modules/backups.py
View File

@@ -1,8 +1,13 @@
# modules/backups.py
import os
import glob
import subprocess
import json
from config import RUNNING_ON_MAIN_SERVER, VM_HOST, VM_PORT, VM_KEY, VM_USER
from config import (
RUNNING_ON_MAIN_SERVER,
MAIN_SERVER_IP, MAIN_SERVER_USER, MAIN_SERVER_KEY, MAIN_SERVER_PORT,
VM_HOST, VM_PORT, VM_KEY, VM_USER,
)
def _run(cmd, timeout=20):
@@ -13,12 +18,35 @@ def _run(cmd, timeout=20):
return '', str(e)
def _ssh_main(remote_cmd, timeout=20):
"""
Run a command ON THE MAIN SERVER.
- If we're already on the main server: run it locally.
- If we're on the VM: SSH to main server first.
"""
if RUNNING_ON_MAIN_SERVER:
return _run(remote_cmd, timeout=timeout)
else:
ssh = (
f"ssh -i {MAIN_SERVER_KEY} -p {MAIN_SERVER_PORT} "
f"-o StrictHostKeyChecking=no -o ConnectTimeout=10 "
f"{MAIN_SERVER_USER}@{MAIN_SERVER_IP}"
)
return _run(f"{ssh} '{remote_cmd}'", timeout=timeout)
# ────────────────────────────────────────────────────────────────
# BACKUPS
# BACKUPS (local = on main server; vm = on the VM)
# ────────────────────────────────────────────────────────────────
def get_local_backups():
stdout, _ = _run("ls -t /root/backups/myapps-backup-*.tar.gz 2>/dev/null | head -20")
"""
Backups stored on the MAIN SERVER at /root/backups/.
Always fetched from main server regardless of where platform runs.
"""
stdout, _ = _ssh_main(
"ls -t /root/backups/myapps-backup-*.tar.gz 2>/dev/null | head -20"
)
files = []
if stdout:
for line in stdout.split('\n'):
@@ -29,7 +57,13 @@ def get_local_backups():
def get_vm_backups():
"""
Backups stored on the VM at /backups/main-server/.
- On main server → SSH through tunnel (localhost:2223)
- On VM → read local directory directly
"""
vm_backups = []
if RUNNING_ON_MAIN_SERVER:
try:
cmd = (
@@ -38,7 +72,7 @@ def get_vm_backups():
f"{VM_USER}@{VM_HOST} "
f"'ls -t /backups/main-server/myapps-backup-*.tar.gz 2>/dev/null | head -20'"
)
stdout, _ = _run(cmd, timeout=20)
stdout, _ = _run(cmd, timeout=25)
if stdout:
for line in stdout.split('\n'):
line = line.strip()
@@ -47,80 +81,121 @@ def get_vm_backups():
except Exception as e:
print(f"[backups] VM backup fetch error: {e}")
else:
# We ARE on the VM — read directly
backup_dir = '/backups/main-server'
if os.path.exists(backup_dir):
files = glob.glob(f'{backup_dir}/myapps-backup-*.tar.gz')
files.sort(key=os.path.getmtime, reverse=True)
vm_backups = [os.path.basename(f) for f in files[:20]]
return vm_backups
# ────────────────────────────────────────────────────────────────
# ROOT CONTAINERS
# CONTAINERS (always from main server)
# ────────────────────────────────────────────────────────────────
def _parse_containers(raw, owner='root'):
containers = []
if raw:
for line in raw.split('\n'):
if '|' not in line:
continue
parts = line.split('|')
containers.append({
'name': parts[0].strip(),
'status': parts[1].strip() if len(parts) > 1 else '',
'image': parts[2].strip() if len(parts) > 2 else '',
'ports': parts[3].strip() if len(parts) > 3 else '',
'owner': owner,
})
return containers
def get_containers():
"""Root app containers only (filtered)."""
stdout, _ = _run(
"""App containers only (frappe/nextcloud/mautic/n8n/odoo) — always from main server."""
stdout, _ = _ssh_main(
"docker ps -a --format '{{.Names}}|{{.Status}}|{{.Image}}|{{.Ports}}' 2>/dev/null | "
"grep -E 'frappe|nextcloud|mautic|n8n|odoo'"
)
containers = []
if stdout:
for line in stdout.split('\n'):
if '|' not in line:
continue
parts = line.split('|')
containers.append({
'name': parts[0].strip(),
'status': parts[1].strip(),
'image': parts[2].strip(),
'ports': parts[3].strip() if len(parts) > 3 else '',
'owner': 'root',
})
return containers
return _parse_containers(stdout)
def get_all_root_containers():
"""ALL root docker containers (unfiltered)."""
stdout, _ = _run(
"""ALL root docker containers (unfiltered) — always from main server."""
stdout, _ = _ssh_main(
"docker ps -a --format '{{.Names}}|{{.Status}}|{{.Image}}|{{.Ports}}' 2>/dev/null"
)
return _parse_containers(stdout)
def get_rootless_user_containers_remote():
"""
Get containers from all rootless-docker users ON THE MAIN SERVER.
Root reads /run/user/*/docker.sock via SSH.
"""
# List all non-system UIDs that have a docker socket on main server
cmd = "ls /run/user/*/docker.sock 2>/dev/null"
stdout, _ = _ssh_main(cmd)
containers = []
if stdout:
for line in stdout.split('\n'):
if '|' not in line:
if not stdout:
return containers
for sock_path in stdout.split('\n'):
sock_path = sock_path.strip()
if not sock_path:
continue
parts = line.split('|')
containers.append({
'name': parts[0].strip(),
'status': parts[1].strip(),
'image': parts[2].strip(),
'ports': parts[3].strip() if len(parts) > 3 else '',
'owner': 'root',
})
# Determine username from uid
try:
uid = sock_path.split('/run/user/')[1].split('/')[0]
except (IndexError, ValueError):
continue
name_out, _ = _ssh_main(f"getent passwd {uid} | cut -d: -f1")
username = name_out.strip() or f"uid{uid}"
ctr_out, _ = _ssh_main(
f"DOCKER_HOST=unix://{sock_path} "
f"docker ps -a --format '{{{{.Names}}}}|{{{{.Status}}}}|{{{{.Image}}}}|{{{{.Ports}}}}' 2>/dev/null"
)
containers.extend(_parse_containers(ctr_out, owner=username))
return containers
# ────────────────────────────────────────────────────────────────
# CONTAINER STATS
# CONTAINER ACTIONS (start / stop / restart) — on main server
# ────────────────────────────────────────────────────────────────
def get_container_stats(docker_socket=None):
"""One-shot stats snapshot. Returns dict keyed by container name."""
if docker_socket:
cmd = (
f"DOCKER_HOST=unix://{docker_socket} "
f"docker stats --no-stream --format "
f"'{{{{.Name}}}}|{{{{.CPUPerc}}}}|{{{{.MemUsage}}}}|{{{{.MemPerc}}}}|{{{{.NetIO}}}}|{{{{.BlockIO}}}}' 2>/dev/null"
)
else:
cmd = (
"docker stats --no-stream --format "
"'{{.Name}}|{{.CPUPerc}}|{{.MemUsage}}|{{.MemPerc}}|{{.NetIO}}|{{.BlockIO}}' 2>/dev/null"
)
def container_action(container_name, action):
"""
action: 'start' | 'stop' | 'restart'
Returns (success: bool, output: str)
"""
if action not in ('start', 'stop', 'restart'):
return False, "Invalid action"
stdout, _ = _run(cmd, timeout=30)
safe_name = container_name.replace('"', '').replace(';', '').replace('|', '')
stdout, stderr = _ssh_main(
f"docker {action} {safe_name} 2>&1",
timeout=30
)
output = (stdout + stderr).strip()
success = safe_name in output or 'started' in output.lower() or stderr == ''
return True, output
# ────────────────────────────────────────────────────────────────
# STATS — from main server
# ────────────────────────────────────────────────────────────────
def get_container_stats_remote():
"""One-shot stats for all root containers on main server."""
stdout, _ = _ssh_main(
"docker stats --no-stream --format "
"'{{.Name}}|{{.CPUPerc}}|{{.MemUsage}}|{{.MemPerc}}|{{.NetIO}}|{{.BlockIO}}' 2>/dev/null",
timeout=35
)
stats = {}
if stdout:
for line in stdout.split('\n'):
@@ -141,32 +216,54 @@ def get_container_stats(docker_socket=None):
def get_all_stats():
"""Stats for root + all rootless-user containers combined."""
all_stats = get_container_stats()
try:
import pwd
for pw in pwd.getpwall():
if pw.pw_uid < 1000 or pw.pw_name == 'nobody':
"""Stats for root containers on main server + rootless users on main server."""
all_stats = get_container_stats_remote()
# Also get stats from rootless user sockets on main server
socks_out, _ = _ssh_main("ls /run/user/*/docker.sock 2>/dev/null")
if socks_out:
for sock in socks_out.split('\n'):
sock = sock.strip()
if not sock:
continue
sock = f"/run/user/{pw.pw_uid}/docker.sock"
if os.path.exists(sock):
user_stats = get_container_stats(docker_socket=sock)
all_stats.update(user_stats)
except Exception as e:
print(f"[stats] Error: {e}")
stdout, _ = _ssh_main(
f"DOCKER_HOST=unix://{sock} "
f"docker stats --no-stream --format "
f"'{{{{.Name}}}}|{{{{.CPUPerc}}}}|{{{{.MemUsage}}}}|{{{{.MemPerc}}}}|{{{{.NetIO}}}}|{{{{.BlockIO}}}}' 2>/dev/null",
timeout=35
)
if stdout:
for line in stdout.split('\n'):
if '|' not in line:
continue
parts = line.split('|')
if len(parts) < 6:
continue
all_stats[parts[0].strip()] = {
'cpu': parts[1].strip(),
'mem': parts[2].strip(),
'mem_pct': parts[3].strip(),
'net': parts[4].strip(),
'block': parts[5].strip(),
}
return all_stats
# ────────────────────────────────────────────────────────────────
# SYSTEM INFO — from main server
# ────────────────────────────────────────────────────────────────
def get_system_info():
"""Host-level system stats."""
cpu_out, _ = _run("top -bn1 | grep 'Cpu(s)' | awk '{print $2+$4}'")
mem_out, _ = _run("free -m | awk 'NR==2{printf \"%s/%sMB\", $3, $2}'")
mem_pct, _ = _run("free | awk 'NR==2{printf \"%.0f\", $3/$2*100}'")
disk_out, _ = _run("df -h / | awk 'NR==2{printf \"%s/%s\", $3, $2}'")
disk_pct, _ = _run("df / | awk 'NR==2{print $5}' | tr -d '%'")
load_out, _ = _run("cat /proc/loadavg | awk '{print $1, $2, $3}'")
uptime_out, _ = _run("uptime -p")
docker_v, _ = _run("docker --version | cut -d' ' -f3 | tr -d ','")
"""Host-level system stats — always fetched from main server."""
cpu_out, _ = _ssh_main("top -bn1 | grep 'Cpu(s)' | awk '{print $2+$4}'")
mem_out, _ = _ssh_main("free -m | awk 'NR==2{printf \"%s/%sMB\", $3, $2}'")
mem_pct, _ = _ssh_main("free | awk 'NR==2{printf \"%.0f\", $3/$2*100}'")
disk_out, _ = _ssh_main("df -h / | awk 'NR==2{printf \"%s/%s\", $3, $2}'")
disk_pct, _ = _ssh_main("df / | awk 'NR==2{print $5}' | tr -d '%'")
load_out, _ = _ssh_main("cat /proc/loadavg | awk '{print $1, $2, $3}'")
uptime, _ = _ssh_main("uptime -p")
docker_v, _ = _ssh_main("docker --version | cut -d' ' -f3 | tr -d ','")
hostname, _ = _run("hostname -f 2>/dev/null || hostname") # THIS host, not main server
return {
'cpu_pct': cpu_out or '0',
@@ -175,6 +272,7 @@ def get_system_info():
'disk': disk_out or 'N/A',
'disk_pct': disk_pct or '0',
'load': load_out or 'N/A',
'uptime': uptime_out or 'N/A',
'uptime': uptime or 'N/A',
'docker_v': docker_v or 'N/A',
'hostname': hostname or 'this server',
}

523
platform/templates/dashboard.html
View File

@@ -1,12 +1,24 @@
{% 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">
<!-- System Metrics -->
<div class="metrics-row">
<div class="metric-card cpu">
<div class="metric-label">CPU USAGE</div>
@@ -30,41 +42,29 @@
</div>
</div>
<!-- Quick Stats -->
<div class="card">
<div class="card-header">
<div class="card-title"><i class="fas fa-chart-line"></i> Overview</div>
<span class="card-meta" id="docker-version">Docker {{ system.docker_v }}</span>
<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 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>
<!-- App Containers with Live Stats -->
<div class="card">
<div class="card-header">
<div class="card-title"><i class="fas fa-cubes"></i> App Containers</div>
<span class="card-meta">Auto-refresh every 15s</span>
<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">
@@ -75,14 +75,15 @@
<th>CPU</th>
<th>MEMORY</th>
<th>NET I/O</th>
<th>DISK I/O</th>
<th>IMAGE</th>
<th>PORTS</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>
<tr data-ctr="{{ c.name }}">
<td class="ct-name">{{ c.name }}</td>
<td>
{% if 'Up' in c.status %}
@@ -94,19 +95,18 @@
<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>
<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><span class="stat-pct" data-ctr="{{ c.name }}" data-stat="block" style="color:var(--yellow)">—</span></td>
<td class="ct-image">{{ c.image }}</td>
<td class="ct-ports">{{ c.ports or '—' }}</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="8"><div class="empty-state"><i class="fas fa-inbox"></i>No containers found</div></td></tr>
<tr><td colspan="9"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>
{% endfor %}
</tbody>
</table>
@@ -115,14 +115,17 @@
</div>
{# ═══════════════════════════════════════════════════════
ALL CONTAINERS PAGE (root + all users)
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;">
<span class="card-meta" id="all-ctr-meta">Loading…</span>
<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>
@@ -136,12 +139,14 @@
<th>CPU</th>
<th>MEMORY</th>
<th>NET I/O</th>
<th>IMAGE</th>
<th>PORTS</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="8"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>
<tr><td colspan="10"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>
</tbody>
</table>
</div>
@@ -158,8 +163,6 @@
</div>
<div class="restore-form">
<!-- Step 1: Source -->
<div class="form-section">
<div class="form-section-title">STEP 1 — SELECT BACKUP SOURCE</div>
<div class="radio-group">
@@ -184,29 +187,19 @@
</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 %}
{% 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 %}
{% 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>
<!-- Step 2: Target -->
<div class="form-section">
<div class="form-section-title">STEP 2 — SELECT RESTORE TARGET</div>
<div class="radio-group">
@@ -215,8 +208,8 @@
<div class="radio-body">
<span class="radio-icon">🎯</span>
<div>
<div class="radio-label">This Server</div>
<div class="radio-desc">{{ main_server }}</div>
<div class="radio-label">Restore on This Server</div>
<div class="radio-desc" id="this-server-desc">Loading hostname…</div>
</div>
</div>
</label>
@@ -225,8 +218,8 @@
<div class="radio-body">
<span class="radio-icon">📡</span>
<div>
<div class="radio-label">Remote Machine</div>
<div class="radio-desc">via SSH</div>
<div class="radio-label">External Machine</div>
<div class="radio-desc">via SSH — any IP</div>
</div>
</div>
</label>
@@ -236,18 +229,17 @@
<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.1.x or localhost">
<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" placeholder="22">
<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;">
@@ -261,30 +253,25 @@
</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" placeholder="SSH password">
<input type="password" id="ssh-password" class="form-input">
</div>
</div>
</div>
<!-- Launch -->
<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 will be skipped automatically.
</p>
<p style="color:var(--text3); font-size:12px; margin-top:8px;">⚠ Healthy running containers are skipped.</p>
</div>
</div>
<!-- Live Log -->
<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>
@@ -313,10 +300,7 @@
</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>
<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 %}
@@ -329,10 +313,7 @@
</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>
<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 %}
@@ -346,8 +327,6 @@
USERS PAGE
═══════════════════════════════════════════════════════ #}
<div id="users-page" class="page">
<!-- Create User -->
<div class="card">
<div class="card-header">
<div class="card-title"><i class="fas fa-user-plus"></i> Create New User</div>
@@ -359,10 +338,10 @@
</div>
<div class="form-group">
<label class="form-label">PASSWORD (optional)</label>
<input type="password" id="new-password" class="form-input" placeholder="Leave blank for no password">
<input type="password" id="new-password" class="form-input">
</div>
<div class="form-group">
<label class="form-label">DISK QUOTA (MB, optional)</label>
<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;">
@@ -370,16 +349,13 @@
<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>
<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>
<!-- Users List -->
<div class="card">
<div class="card-header">
<div class="card-title"><i class="fas fa-users"></i> System Users</div>
@@ -389,52 +365,40 @@
{% for u in users %}
<div class="user-card" onclick="loadUserContainers('{{ u.name }}')">
<div class="user-card-top">
<div class="user-avatar" style="background: #667eea">
{{ u.name[0].upper() }}
</div>
<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 }} · {{ u.home }}</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> rootless docker</span>{% endif %}
{% if u.linger %}<span class="user-tag linger">linger on</span>{% endif %}
{% 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">Containers: <strong>{{ u.container_count }}</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 found
</div>
<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No non-system users</div>
{% endfor %}
</div>
</div>
<!-- User Detail Panel -->
<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" id="user-delete-btn" onclick="deleteUser()">
<i class="fas fa-trash"></i> Delete User
</button>
<button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'">
✕ Close
</button>
<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">
<tr><td colspan="4"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i></div></td></tr>
</tbody>
<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>
@@ -446,27 +410,14 @@
═══════════════════════════════════════════════════════ #}
<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 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">VM BACKUP PATH</label>
<input class="form-input" value="/backups/main-server/" readonly>
</div>
<div class="form-group">
<label class="form-label">PLATFORM 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 All Data</button>
<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>
@@ -475,16 +426,25 @@
JAVASCRIPT
═══════════════════════════════════════════════════════ #}
<script>
// ── Page routing ────────────────────────────────────────
const PAGES = {
// ── 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: 'root + all users' },
'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'));
@@ -492,21 +452,58 @@ function showPage(name) {
if (page) page.classList.add('active');
const nav = document.querySelector(`[data-page="${name}"]`);
if (nav) nav.classList.add('active');
const info = PAGES[name] || {};
const info = PAGE_INFO[name] || {};
document.getElementById('page-title').textContent = info.title || name;
document.getElementById('page-subtitle').textContent = info.sub || '';
// Lazy load
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);
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() {
@@ -516,11 +513,9 @@ async function checkServerStatus() {
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';
dot.className = 'pulse-dot online'; text.textContent = 'Online';
} else {
dot.className = 'pulse-dot offline';
text.textContent = 'Offline';
dot.className = 'pulse-dot offline'; text.textContent = 'Offline';
}
} catch {}
}
@@ -538,8 +533,13 @@ async function refreshSystemMetrics() {
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 settingsUptime = document.getElementById('settings-uptime');
if (settingsUptime) settingsUptime.value = 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 {}
}
@@ -548,13 +548,11 @@ 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 || '—';
@@ -568,16 +566,24 @@ async function refreshContainerStats() {
} catch {}
}
// ── All containers (root + users) ───────────────────────
// ── 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="8"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>';
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')
fetch('/api/stats'),
]);
const { containers, running } = await ctrRes.json();
const stats = await statRes.json();
@@ -586,32 +592,34 @@ async function loadAllContainers() {
document.getElementById('nav-badge-containers').textContent = containers.length;
if (!containers.length) {
body.innerHTML = '<tr><td colspan="8"><div class="empty-state"><i class="fas fa-inbox"></i>No containers</div></td></tr>';
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">
<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>
</div></td>
<td><span class="stat-pct" style="color:var(--cyan)">${s.net||'—'}</span></td>
<td class="ct-image">${c.image}</td>
<td class="ct-ports">${c.ports||'—'}</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="8"><div class="empty-state"><i class="fas fa-exclamation-triangle"></i>${e}</div></td></tr>`;
body.innerHTML = `<tr><td colspan="10"><div class="empty-state">${e}</div></td></tr>`;
}
}
@@ -624,8 +632,6 @@ async function refreshBackupsList() {
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;
// Refresh selects on restore page
const lo = document.getElementById('local-options');
const vo = document.getElementById('vm-options');
lo.innerHTML = d.local.length
@@ -636,14 +642,10 @@ async function refreshBackupsList() {
: '<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;
}
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>
@@ -653,6 +655,7 @@ function renderBackupList(items, id, source) {
// ── Users ────────────────────────────────────────────────
let selectedUser = null;
const userColors = ['#3b82f6','#a78bfa','#22c55e','#f59e0b','#ef4444','#22d3ee'];
async function loadUsers() {
try {
@@ -660,29 +663,22 @@ async function loadUsers() {
const users = await r.json();
document.getElementById('nav-badge-users').textContent = users.length;
document.getElementById('stat-users').textContent = users.length;
const colors = ['#3b82f6','#a78bfa','#22c55e','#f59e0b','#ef4444','#22d3ee'];
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;
}
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:${colors[i % colors.length]}">${u.name[0].toUpperCase()}</div>
<div>
<div class="user-name">${u.name}</div>
<div class="user-uid">uid ${u.uid} · ${u.home}</div>
</div>
<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> rootless docker</span>' : ''}
${u.linger ? '<span class="user-tag linger">linger on</span>' : ''}
${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">Containers: <strong>${u.container_count}</strong></div>
<div class="user-stat">Ctrs: <strong>${u.container_count}</strong></div>
</div>
</div>`).join('');
} catch {}
@@ -693,19 +689,13 @@ async function loadUserContainers(username) {
const panel = document.getElementById('user-detail-panel');
panel.style.display = '';
document.getElementById('user-detail-title').textContent = `${username}'s Containers`;
document.getElementById('user-delete-btn').dataset.username = username;
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;
}
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>
@@ -716,9 +706,7 @@ async function loadUserContainers(username) {
</tr>`;
}).join('');
panel.scrollIntoView({ behavior: 'smooth' });
} catch (e) {
body.innerHTML = `<tr><td colspan="4"><div class="empty-state">${e}</div></td></tr>`;
}
} catch {}
}
async function createUser() {
@@ -726,32 +714,21 @@ async function createUser() {
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 is required'); return; }
if (!username) { showAlert('create-user-result', 'error', 'Username required'); return; }
const btn = event.target;
btn.disabled = true;
btn.textContent = 'Creating…';
btn.disabled = true; btn.textContent = 'Creating…';
const logEl = document.getElementById('create-user-log');
logEl.style.display = '';
logEl.textContent = '⏳ Setting up user…\n';
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,
})
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 successfully`);
showAlert('create-user-result', 'success', `✅ User "${username}" created`);
document.getElementById('new-username').value = '';
document.getElementById('new-password').value = '';
document.getElementById('new-quota').value = '';
@@ -759,35 +736,24 @@ async function createUser() {
} else {
showAlert('create-user-result', 'error', `❌ ${d.message}`);
}
} catch (e) {
showAlert('create-user-result', 'error', `Request failed: ${e}`);
} finally {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-plus"></i> Create User';
}
} 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() {
const username = selectedUser;
if (!username) return;
if (!confirm(`Delete user "${username}"? This cannot be undone.\nRemove home directory too?`)) return;
const removeHome = confirm(`Also delete /home/${username}?`);
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, remove_home: removeHome })
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', `Request failed: ${e}`);
}
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) {
@@ -806,18 +772,15 @@ function updateBackupList() {
if (!opt.disabled && opt.parentElement.style.display !== 'none') { opt.selected = true; break; }
}
}
function toggleRemoteFields() {
const t = document.querySelector('input[name="restore_target"]:checked').value;
document.getElementById('remote-fields').style.display = t === 'remote' ? '' : 'none';
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;
@@ -829,18 +792,15 @@ function quickRestore(source, filename) {
window.scrollTo(0, 0);
}
let currentJobId = null;
let pollInterval = null;
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 first.'); return; }
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';
@@ -850,40 +810,30 @@ async function launchRestore() {
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 a target IP.'); return; }
if (!payload.remote_ip) { alert('Enter target IP.'); return; }
}
if (!confirm(`Restore "${file}" → ${target === 'local' ? 'this server' : payload.remote_ip + ':' + payload.remote_port}?`)) 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…';
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Starting…';
const wrapper = document.getElementById('restore-log-wrapper');
wrapper.style.display = '';
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 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;
}
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';
}
} catch (e) { appendLog('❌ '+e, 'error'); btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore'; }
}
function pollRestore() {
@@ -896,21 +846,14 @@ function pollRestore() {
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 elapsed`;
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';
}
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';
btn.disabled=false; btn.innerHTML='<i class="fas fa-play"></i> Start Restore';
}
} catch {}
}, 1500);
@@ -932,14 +875,10 @@ function appendLog(line, type) {
// ── Global refresh ───────────────────────────────────────
function refreshAll() {
const icon = document.getElementById('refresh-icon');
const btn = icon.closest('.icon-btn');
const btn = document.querySelector('.icon-btn');
btn.classList.add('spinning');
Promise.all([
checkServerStatus(),
refreshSystemMetrics(),
refreshContainerStats(),
]).finally(() => btn.classList.remove('spinning'));
Promise.all([checkServerStatus(), refreshSystemMetrics(), refreshContainerStats()])
.finally(() => btn.classList.remove('spinning'));
}
// ── Boot ─────────────────────────────────────────────────
@@ -948,12 +887,40 @@ refreshSystemMetrics();
refreshContainerStats();
document.getElementById('nav-badge-users').textContent = '{{ users|length }}';
document.getElementById('nav-badge-containers').textContent = '{{ containers|length }}';
// Auto-refresh every 15s
setInterval(() => {
refreshSystemMetrics();
refreshContainerStats();
}, 15000);
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 %}