first commit
This commit is contained in:
Stefan Hacker
@@ -0,0 +1,260 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ server.name }} - VPN-Server - mGuard VPN{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<nav aria-label="breadcrumb" class="mb-3">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/vpn-servers">VPN-Server</a></li>
|
||||
<li class="breadcrumb-item active">{{ server.name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>
|
||||
{% if server.status.value == 'running' %}
|
||||
<span class="status-indicator online"></span>
|
||||
{% else %}
|
||||
<span class="status-indicator offline"></span>
|
||||
{% endif %}
|
||||
{{ server.name }}
|
||||
{% if server.is_primary %}
|
||||
<span class="badge bg-primary">Primär</span>
|
||||
{% endif %}
|
||||
{% if server.protocol.value == 'udp' %}
|
||||
<span class="badge badge-udp">UDP</span>
|
||||
{% else %}
|
||||
<span class="badge badge-tcp">TCP</span>
|
||||
{% endif %}
|
||||
</h1>
|
||||
<div>
|
||||
<a href="/vpn-servers/{{ server.id }}/clients" class="btn btn-outline-primary">
|
||||
<i class="bi bi-people"></i> Clients ({{ status.connected_clients or 0 }})
|
||||
</a>
|
||||
<a href="/vpn-servers/{{ server.id }}/edit" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-pencil"></i> Bearbeiten
|
||||
</a>
|
||||
<form action="/vpn-servers/{{ server.id }}/delete" method="post" class="d-inline"
|
||||
onsubmit="return confirm('VPN-Server wirklich löschen?');">
|
||||
<button type="submit" class="btn btn-outline-danger">
|
||||
<i class="bi bi-trash"></i> Löschen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Status Card -->
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-activity"></i> Status</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-sm-5">Status</dt>
|
||||
<dd class="col-sm-7">
|
||||
{% if server.status.value == 'running' %}
|
||||
<span class="badge bg-success">Läuft</span>
|
||||
{% elif server.status.value == 'stopped' %}
|
||||
<span class="badge bg-secondary">Gestoppt</span>
|
||||
{% elif server.status.value == 'starting' %}
|
||||
<span class="badge bg-warning">Startet...</span>
|
||||
{% elif server.status.value == 'error' %}
|
||||
<span class="badge bg-danger">Fehler</span>
|
||||
{% else %}
|
||||
<span class="badge bg-light text-dark">{{ server.status.value }}</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-5">Verbundene Clients</dt>
|
||||
<dd class="col-sm-7">{{ status.connected_clients or 0 }}</dd>
|
||||
|
||||
<dt class="col-sm-5">Letzte Prüfung</dt>
|
||||
<dd class="col-sm-7">
|
||||
{{ server.last_status_check.strftime('%d.%m.%Y %H:%M') if server.last_status_check else '-' }}
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-5">Container</dt>
|
||||
<dd class="col-sm-7"><code>{{ server.docker_container_name or '-' }}</code></dd>
|
||||
|
||||
<dt class="col-sm-5">Management-Port</dt>
|
||||
<dd class="col-sm-7">{{ server.management_port }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Card -->
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-hdd-network"></i> Netzwerk</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-sm-5">Adresse</dt>
|
||||
<dd class="col-sm-7"><code>{{ server.hostname }}:{{ server.port }}</code></dd>
|
||||
|
||||
<dt class="col-sm-5">Protokoll</dt>
|
||||
<dd class="col-sm-7">{{ server.protocol.value.upper() }}</dd>
|
||||
|
||||
<dt class="col-sm-5">VPN-Netzwerk</dt>
|
||||
<dd class="col-sm-7">{{ server.vpn_network }}/{{ server.vpn_netmask }}</dd>
|
||||
|
||||
<dt class="col-sm-5">Max Clients</dt>
|
||||
<dd class="col-sm-7">{{ server.max_clients }}</dd>
|
||||
|
||||
<dt class="col-sm-5">Keepalive</dt>
|
||||
<dd class="col-sm-7">{{ server.keepalive_interval }}s / {{ server.keepalive_timeout }}s</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Security Card -->
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-shield-lock"></i> Sicherheit</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-sm-5">CA</dt>
|
||||
<dd class="col-sm-7">
|
||||
<a href="/ca/{{ server.certificate_authority.id }}">
|
||||
{{ server.certificate_authority.name }}
|
||||
</a>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-5">Cipher</dt>
|
||||
<dd class="col-sm-7">{{ server.cipher.value }}</dd>
|
||||
|
||||
<dt class="col-sm-5">Auth</dt>
|
||||
<dd class="col-sm-7">{{ server.auth.value }}</dd>
|
||||
|
||||
<dt class="col-sm-5">TLS Version</dt>
|
||||
<dd class="col-sm-7">>= {{ server.tls_version_min }}</dd>
|
||||
|
||||
<dt class="col-sm-5">TLS-Auth</dt>
|
||||
<dd class="col-sm-7">
|
||||
{% if server.tls_auth_enabled %}
|
||||
<span class="badge bg-success">Aktiviert</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Deaktiviert</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-5">Kompression</dt>
|
||||
<dd class="col-sm-7">{{ server.compression.value }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profiles Card -->
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0"><i class="bi bi-person-vcard"></i> VPN-Profile</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if server.vpn_profiles %}
|
||||
<ul class="list-group list-group-flush">
|
||||
{% for profile in server.vpn_profiles[:10] %}
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||||
<span>
|
||||
<a href="/gateways/{{ profile.gateway_id }}/profiles/{{ profile.id }}">
|
||||
{{ profile.gateway.name }} - {{ profile.name }}
|
||||
</a>
|
||||
</span>
|
||||
{% if profile.status.value == 'active' %}
|
||||
<span class="badge bg-success">Aktiv</span>
|
||||
{% elif profile.status.value == 'provisioned' %}
|
||||
<span class="badge bg-info">Provisioniert</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ profile.status.value }}</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if server.vpn_profiles|length > 10 %}
|
||||
<p class="text-muted small mt-2 mb-0">... und {{ server.vpn_profiles|length - 10 }} weitere</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="text-muted mb-0">Keine Profile verwenden diesen Server.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server Log -->
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="bi bi-terminal"></i> Server-Log</h5>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="refreshLog()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Aktualisieren
|
||||
</button>
|
||||
<a href="/api/internal/vpn-servers/{{ server.id }}/logs/raw?lines=500"
|
||||
class="btn btn-sm btn-outline-primary" target="_blank">
|
||||
<i class="bi bi-download"></i> Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="server-log" class="bg-dark text-light p-3"
|
||||
style="max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 12px;">
|
||||
<div class="text-center py-4">
|
||||
<div class="spinner-border spinner-border-sm text-light" role="status">
|
||||
<span class="visually-hidden">Laden...</span>
|
||||
</div>
|
||||
<span class="ms-2">Log wird geladen...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
async function refreshLog() {
|
||||
const container = document.getElementById('server-log');
|
||||
try {
|
||||
const response = await fetch('/api/internal/vpn-servers/{{ server.id }}/logs?lines=100');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.lines && data.lines.length > 0) {
|
||||
container.innerHTML = data.lines.map(line => {
|
||||
// Color-code log levels
|
||||
let lineClass = '';
|
||||
if (line.includes('ERROR') || line.includes('error')) lineClass = 'text-danger';
|
||||
else if (line.includes('WARN') || line.includes('warning')) lineClass = 'text-warning';
|
||||
else if (line.includes('INFO')) lineClass = 'text-info';
|
||||
return `<div class="${lineClass}">${escapeHtml(line)}</div>`;
|
||||
}).join('');
|
||||
container.scrollTop = container.scrollHeight;
|
||||
} else {
|
||||
container.innerHTML = '<div class="text-muted">Keine Log-Einträge vorhanden</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
container.innerHTML = `<div class="text-danger">Fehler beim Laden: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Load log on page load
|
||||
document.addEventListener('DOMContentLoaded', refreshLog);
|
||||
|
||||
// Auto-refresh every 10 seconds
|
||||
setInterval(refreshLog, 10000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user