444 lines
18 KiB
HTML
444 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MYP Debug Dashboard</title>
|
|
|
|
<!-- CSS Stylesheets -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/debug-dashboard.css') }}">
|
|
|
|
<!-- JavaScript Libraries -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="message" class="message"></div>
|
|
|
|
<div class="page-header">
|
|
<h1>MYP Debug Dashboard</h1>
|
|
<div class="last-update">
|
|
Letzte Aktualisierung: {{ last_check }}
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn btn-refresh" onclick="refreshPage()"><i class="fas fa-sync-alt"></i> Aktualisieren</button>
|
|
<button class="btn btn-health" onclick="checkHealth()"><i class="fas fa-heartbeat"></i> Systemstatus prüfen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="system-health-banner" id="systemHealthBanner" style="display: none;">
|
|
<div class="health-icon"><i class="fas fa-spinner fa-spin"></i></div>
|
|
<div class="health-status">Systemstatus wird geprüft...</div>
|
|
</div>
|
|
|
|
<div class="dashboard-container">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-server"></i> Systemübersicht
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-label">CPU-Auslastung</div>
|
|
<div class="stat-value" id="cpu-percent">-</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-label">RAM-Auslastung</div>
|
|
<div class="stat-value" id="memory-percent">-</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-label">Aktive Container</div>
|
|
<div class="stat-value" id="active-containers">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="cpu-usage-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-microchip"></i> Speichernutzung
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart-container">
|
|
<canvas id="memory-usage-chart"></canvas>
|
|
</div>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Verwendet</div>
|
|
<div class="stat-value" id="memory-used">-</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-label">Verfügbar</div>
|
|
<div class="stat-value" id="memory-available">-</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-label">Gesamt</div>
|
|
<div class="stat-value" id="memory-total">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-section">
|
|
<h2><i class="fas fa-hdd"></i> Festplattennutzung</h2>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="disk-usage-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-section">
|
|
<h2><i class="fas fa-network-wired"></i> Netzwerkkonfiguration</h2>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Verbindungsstatus
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>Backend</h3>
|
|
<div class="status {{ 'status-good' if 'Verbunden' in backend_status else 'status-error' }}">
|
|
{{ backend_status }}
|
|
</div>
|
|
|
|
<h3>Frontend</h3>
|
|
<div class="status {{ 'status-good' if 'Verbunden' in frontend_status else 'status-error' }}">
|
|
{{ frontend_status }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-cogs"></i> Netzwerkkonfiguration
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="configForm">
|
|
<div class="form-group">
|
|
<label for="backend_hostname">Backend Hostname/IP:</label>
|
|
<input type="text" id="backend_hostname" name="backend_hostname" value="{{ config.backend_hostname }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="backend_port">Backend Port:</label>
|
|
<input type="text" id="backend_port" name="backend_port" value="{{ config.backend_port }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="frontend_hostname">Frontend Hostname/IP:</label>
|
|
<input type="text" id="frontend_hostname" name="frontend_hostname" value="{{ config.frontend_hostname }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="frontend_port">Frontend Port:</label>
|
|
<input type="text" id="frontend_port" name="frontend_port" value="{{ config.frontend_port }}">
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" class="btn" onclick="testConnection()">Verbindung testen</button>
|
|
<button type="button" class="btn btn-success" onclick="saveConfig()">Konfiguration speichern</button>
|
|
<button type="button" class="btn btn-warning" onclick="syncFrontend()">Frontend synchronisieren</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-section">
|
|
<h2><i class="fab fa-docker"></i> Docker-Container</h2>
|
|
|
|
<div class="dashboard-container">
|
|
<div class="card">
|
|
<div class="card-header">Container-Status</div>
|
|
<div class="card-body">
|
|
<div class="chart-container small">
|
|
<canvas id="container-status-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">Docker-Info</div>
|
|
<div class="card-body">
|
|
<table>
|
|
<tr>
|
|
<th>Version</th>
|
|
<td id="docker-version">-</td>
|
|
</tr>
|
|
<tr>
|
|
<th>API-Version</th>
|
|
<td id="docker-api-version">-</td>
|
|
</tr>
|
|
<tr>
|
|
<th>OS</th>
|
|
<td id="docker-os">-</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Status</th>
|
|
<td id="docker-status">-</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">Container-Liste</div>
|
|
<div class="card-body">
|
|
<div class="filter-bar">
|
|
<input type="text" id="container-filter" placeholder="Container filtern..." oninput="filterContainers()">
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="refreshContainers()"><i class="fas fa-sync-alt"></i> Aktualisieren</button>
|
|
<button class="btn" onclick="expandAllContainers()"><i class="fas fa-expand-alt"></i> Alle erweitern</button>
|
|
<button class="btn" onclick="collapseAllContainers()"><i class="fas fa-compress-alt"></i> Alle einklappen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="container-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>CPU</th>
|
|
<th>Speicher</th>
|
|
<th>Netzwerk</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="6">Lade Container-Informationen...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">Docker-Logs Analyse</div>
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="log-container-select">Container auswählen:</label>
|
|
<select id="log-container-select">
|
|
<option value="">-- Container auswählen --</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="log-filter">Log-Filter:</label>
|
|
<input type="text" id="log-filter" placeholder="Nach Text filtern...">
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="loadContainerLogs()"><i class="fas fa-search"></i> Logs laden</button>
|
|
<button class="btn" onclick="downloadContainerLogs()"><i class="fas fa-download"></i> Logs herunterladen</button>
|
|
</div>
|
|
|
|
<div class="logs-container" id="container-logs">
|
|
<div class="log-placeholder">Container auswählen, um Logs anzuzeigen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-section">
|
|
<h2><i class="fas fa-network-wired"></i> Netzwerkschnittstellen</h2>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Netzwerkschnittstellen
|
|
<button class="btn btn-sm" onclick="refreshNetworkInterfaces()"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
<div class="card-body" id="network-interfaces">
|
|
<div class="loading">Lade Netzwerkschnittstellen...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Aktive Verbindungen
|
|
<button class="btn btn-sm" onclick="refreshActiveConnections()"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
<div class="card-body">
|
|
<table id="connections-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Lokale Adresse</th>
|
|
<th>Remote-Adresse</th>
|
|
<th>Status</th>
|
|
<th>Prozess</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="4">Lade aktive Verbindungen...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Routing-Tabelle
|
|
<button class="btn btn-sm" onclick="loadRouteTable()"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre id="route-table">Lade Routing-Tabelle...</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-section">
|
|
<h2><i class="fas fa-exclamation-triangle"></i> Diagnose-Tools</h2>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="ping">Ping-Test</div>
|
|
<div class="tab" data-tab="traceroute">Traceroute</div>
|
|
<div class="tab" data-tab="dns">DNS-Abfrage</div>
|
|
<div class="tab" data-tab="port-scan">Port-Scan</div>
|
|
<div class="tab" data-tab="logs">Log-Analyse</div>
|
|
</div>
|
|
|
|
<div class="tab-content active" id="ping-tab">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="ping-host">Host:</label>
|
|
<div class="input-group">
|
|
<input type="text" id="ping-host" placeholder="z.B. example.com oder 192.168.1.1">
|
|
<div class="input-group-append">
|
|
<button class="btn" onclick="pingHost()">Ping</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ping-result" class="status">
|
|
Führen Sie einen Ping-Test durch, um Ergebnisse zu sehen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="traceroute-tab">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="traceroute-host">Host:</label>
|
|
<div class="input-group">
|
|
<input type="text" id="traceroute-host" placeholder="z.B. example.com oder 192.168.1.1">
|
|
<div class="input-group-append">
|
|
<button class="btn" onclick="tracerouteHost()">Traceroute</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="traceroute-result" class="status">
|
|
Führen Sie einen Traceroute-Test durch, um Ergebnisse zu sehen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="dns-tab">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="dns-host">Host:</label>
|
|
<div class="input-group">
|
|
<input type="text" id="dns-host" placeholder="z.B. example.com">
|
|
<div class="input-group-append">
|
|
<button class="btn" onclick="dnsLookup()">DNS-Abfrage</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dns-result" class="status">
|
|
Führen Sie eine DNS-Abfrage durch, um Ergebnisse zu sehen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="port-scan-tab">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="port-scan-host">Host:</label>
|
|
<input type="text" id="port-scan-host" placeholder="z.B. example.com oder 192.168.1.1">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="port-scan-range">Port-Bereich:</label>
|
|
<input type="text" id="port-scan-range" placeholder="z.B. 1-1024" value="1-1024">
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="startPortScan()">Port-Scan starten</button>
|
|
<button class="btn" onclick="checkPortScanStatus()">Status prüfen</button>
|
|
</div>
|
|
|
|
<div id="port-scan-status" class="status">
|
|
Kein Port-Scan aktiv.
|
|
</div>
|
|
|
|
<div id="port-scan-results" class="results-container">
|
|
<table id="port-scan-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Port</th>
|
|
<th>Status</th>
|
|
<th>Dienst</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="logs-tab">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="form-group">
|
|
<label for="log-type">Log-Typ:</label>
|
|
<select id="log-type">
|
|
<option value="backend">Backend-Logs</option>
|
|
<option value="frontend">Frontend-Logs</option>
|
|
<option value="debug">Debug-Server-Logs</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="log-lines">Anzahl Zeilen:</label>
|
|
<input type="number" id="log-lines" value="100" min="10" max="1000">
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button class="btn" onclick="loadLogs()">Logs laden</button>
|
|
<button class="btn" onclick="analyzeLogs()">Logs analysieren</button>
|
|
</div>
|
|
|
|
<div class="logs-container" id="log-content">
|
|
<div class="log-placeholder">Wählen Sie einen Log-Typ und klicken Sie auf "Logs laden"</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript Code -->
|
|
<script src="{{ url_for('static', filename='js/debug-dashboard.js') }}"></script>
|
|
</body>
|
|
</html> |