"feat: Added debug server and related components for improved development experience"
This commit is contained in:
617
backend/debug-server/static/css/debug-dashboard.css
Normal file
617
backend/debug-server/static/css/debug-dashboard.css
Normal file
@@ -0,0 +1,617 @@
|
||||
/* Debug-Dashboard CSS */
|
||||
|
||||
/* Reset und Basis-Stile */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f5f7fa;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: #2c3e50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.page-header {
|
||||
background-color: #2c3e50;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.last-update {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dashboard-section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Karten */
|
||||
.card {
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #f1f5f9;
|
||||
padding: 15px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Statistik-Karten */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: #f8fafc;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
min-width: 150px;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
margin: 0 5px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9em;
|
||||
color: #64748b;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
/* Charts */
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-container.small {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
/* Formularelemente */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
flex: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group-append .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #10b981;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #059669;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #f59e0b;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #d97706;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #ef4444;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Status-Anzeigen */
|
||||
.status {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.status-good {
|
||||
background-color: #d1fae5;
|
||||
color: #064e3b;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: #fff7ed;
|
||||
color: #7c2d12;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
background-color: #fee2e2;
|
||||
color: #7f1d1d;
|
||||
}
|
||||
|
||||
/* Nachrichten */
|
||||
.message {
|
||||
display: none;
|
||||
padding: 15px;
|
||||
margin: 15px 20px;
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-success {
|
||||
background-color: #d1fae5;
|
||||
color: #064e3b;
|
||||
}
|
||||
|
||||
.message-error {
|
||||
background-color: #fee2e2;
|
||||
color: #7f1d1d;
|
||||
}
|
||||
|
||||
/* Systemstatus-Banner */
|
||||
.system-health-banner {
|
||||
display: none;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.system-health-banner.checking {
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
|
||||
.system-health-banner.healthy {
|
||||
background-color: #10b981;
|
||||
}
|
||||
|
||||
.system-health-banner.warning {
|
||||
background-color: #f59e0b;
|
||||
}
|
||||
|
||||
.system-health-banner.critical {
|
||||
background-color: #ef4444;
|
||||
}
|
||||
|
||||
.health-icon {
|
||||
font-size: 1.5em;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.health-status {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.health-status-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.health-details {
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.health-good {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.health-warning {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.health-critical {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Tabellen */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
border-bottom-color: #3b82f6;
|
||||
color: #3b82f6;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Docker-Container */
|
||||
.container-row {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.container-row.running {
|
||||
border-left: 3px solid #10b981;
|
||||
}
|
||||
|
||||
.container-row.exited {
|
||||
border-left: 3px solid #ef4444;
|
||||
}
|
||||
|
||||
.container-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.container-image {
|
||||
font-size: 0.9em;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.container-running {
|
||||
color: #064e3b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Logs und Terminal-Ausgabe */
|
||||
.logs-container {
|
||||
background-color: #1e293b;
|
||||
color: #e2e8f0;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin-top: 15px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.log-placeholder {
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background-color: #334155;
|
||||
margin: -15px -15px 10px -15px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
margin-bottom: 2px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.log-warning {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.log-info {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.log-debug {
|
||||
color: #a3e635;
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
pre.ping-output,
|
||||
pre.traceroute-output,
|
||||
pre.dns-output {
|
||||
background-color: #1e293b;
|
||||
color: #e2e8f0;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
}
|
||||
|
||||
/* Netzwerkschnittstellen */
|
||||
.interface-item {
|
||||
background-color: #f8fafc;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.interface-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.interface-mac {
|
||||
font-family: monospace;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.interface-ips h4,
|
||||
.interface-stats h4 {
|
||||
color: #475569;
|
||||
font-size: 1em;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ip-item {
|
||||
padding: 8px;
|
||||
background-color: #f1f5f9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Ergebnisse-Container */
|
||||
.results-container {
|
||||
margin-top: 15px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Loading-Anzeige */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.loading::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-top-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
animation: spinner 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Error-Anzeige */
|
||||
.error {
|
||||
color: #ef4444;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
/* Log-Analyse */
|
||||
.error-list,
|
||||
.warning-list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error-item,
|
||||
.warning-item {
|
||||
background-color: #fee2e2;
|
||||
border-left: 3px solid #ef4444;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
background-color: #fff7ed;
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
.error-time,
|
||||
.warning-time {
|
||||
font-size: 0.9em;
|
||||
color: #64748b;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
470
backend/debug-server/static/js/debug-charts.js
Normal file
470
backend/debug-server/static/js/debug-charts.js
Normal file
@@ -0,0 +1,470 @@
|
||||
/*
|
||||
* Debug-Charts.js
|
||||
* JavaScript-Funktionen für das Rendering von Diagrammen und Visualisierungen
|
||||
* im MYP Debug-Server.
|
||||
*/
|
||||
|
||||
// Globale Variablen für Charts
|
||||
let cpuUsageChart = null;
|
||||
let memoryUsageChart = null;
|
||||
let networkTrafficChart = null;
|
||||
let diskUsageChart = null;
|
||||
let containerStatusChart = null;
|
||||
|
||||
// Hilfsfunktion zum Formatieren von Bytes
|
||||
function formatBytes(bytes, decimals = 2) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// Aktualisiere Systemdiagramme
|
||||
function updateSystemCharts() {
|
||||
fetch('/api/system/metrics')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// CPU-Nutzung aktualisieren
|
||||
if (cpuUsageChart) {
|
||||
cpuUsageChart.data.labels.push(new Date().toLocaleTimeString());
|
||||
cpuUsageChart.data.datasets[0].data.push(data.cpu_percent);
|
||||
|
||||
// Behalte nur die letzten 30 Datenpunkte
|
||||
if (cpuUsageChart.data.labels.length > 30) {
|
||||
cpuUsageChart.data.labels.shift();
|
||||
cpuUsageChart.data.datasets[0].data.shift();
|
||||
}
|
||||
|
||||
cpuUsageChart.update();
|
||||
}
|
||||
|
||||
// Speichernutzung aktualisieren
|
||||
if (memoryUsageChart) {
|
||||
memoryUsageChart.data.datasets[0].data = [
|
||||
data.memory.used,
|
||||
data.memory.available
|
||||
];
|
||||
memoryUsageChart.update();
|
||||
|
||||
// Aktualisiere die Speicherinfo-Texte
|
||||
document.getElementById('memory-used').textContent = formatBytes(data.memory.used);
|
||||
document.getElementById('memory-available').textContent = formatBytes(data.memory.available);
|
||||
document.getElementById('memory-total').textContent = formatBytes(data.memory.total);
|
||||
}
|
||||
|
||||
// Festplattennutzung aktualisieren
|
||||
if (diskUsageChart && data.disk_usage) {
|
||||
const diskLabels = [];
|
||||
const diskUsed = [];
|
||||
const diskFree = [];
|
||||
|
||||
for (const disk of data.disk_usage) {
|
||||
diskLabels.push(disk.mountpoint);
|
||||
diskUsed.push(disk.used);
|
||||
diskFree.push(disk.free);
|
||||
}
|
||||
|
||||
diskUsageChart.data.labels = diskLabels;
|
||||
diskUsageChart.data.datasets[0].data = diskUsed;
|
||||
diskUsageChart.data.datasets[1].data = diskFree;
|
||||
diskUsageChart.update();
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Fehler beim Abrufen der Systemmetriken:', error));
|
||||
}
|
||||
|
||||
// Initialisiere CPU-Nutzungsdiagramm
|
||||
function initCpuUsageChart() {
|
||||
const ctx = document.getElementById('cpu-usage-chart').getContext('2d');
|
||||
|
||||
cpuUsageChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'CPU-Auslastung (%)',
|
||||
data: [],
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
tension: 0.1,
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Auslastung (%)'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Zeit'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'CPU-Auslastung',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisiere Speichernutzungsdiagramm
|
||||
function initMemoryUsageChart() {
|
||||
const ctx = document.getElementById('memory-usage-chart').getContext('2d');
|
||||
|
||||
memoryUsageChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Verwendet', 'Verfügbar'],
|
||||
datasets: [{
|
||||
data: [0, 0],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.7)',
|
||||
'rgba(75, 192, 192, 0.7)'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Speichernutzung',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisiere Festplattennutzungsdiagramm
|
||||
function initDiskUsageChart() {
|
||||
const ctx = document.getElementById('disk-usage-chart').getContext('2d');
|
||||
|
||||
diskUsageChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Belegt',
|
||||
data: [],
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.7)'
|
||||
},
|
||||
{
|
||||
label: 'Frei',
|
||||
data: [],
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.7)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Laufwerk'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
stacked: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Speicherplatz (Bytes)'
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return formatBytes(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Festplattennutzung',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Aktualisiere Docker-Container-Status
|
||||
function updateContainerStatus() {
|
||||
fetch('/api/docker/status')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const containerTable = document.getElementById('container-table');
|
||||
if (!containerTable) return;
|
||||
|
||||
// Tabelle leeren
|
||||
containerTable.innerHTML = '';
|
||||
|
||||
// Überschriftenzeile
|
||||
const headerRow = document.createElement('tr');
|
||||
['Name', 'Status', 'CPU', 'Speicher', 'Netzwerk', 'Aktionen'].forEach(header => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = header;
|
||||
headerRow.appendChild(th);
|
||||
});
|
||||
containerTable.appendChild(headerRow);
|
||||
|
||||
// Containerdaten
|
||||
data.containers.forEach(container => {
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Name
|
||||
const nameCell = document.createElement('td');
|
||||
nameCell.textContent = container.name;
|
||||
row.appendChild(nameCell);
|
||||
|
||||
// Status
|
||||
const statusCell = document.createElement('td');
|
||||
const statusBadge = document.createElement('span');
|
||||
statusBadge.textContent = container.status;
|
||||
statusBadge.className = container.running ? 'status-badge running' : 'status-badge stopped';
|
||||
statusCell.appendChild(statusBadge);
|
||||
row.appendChild(statusCell);
|
||||
|
||||
// CPU
|
||||
const cpuCell = document.createElement('td');
|
||||
cpuCell.textContent = container.cpu_percent ? `${container.cpu_percent.toFixed(2)}%` : 'N/A';
|
||||
row.appendChild(cpuCell);
|
||||
|
||||
// Speicher
|
||||
const memoryCell = document.createElement('td');
|
||||
memoryCell.textContent = container.memory_usage ? formatBytes(container.memory_usage) : 'N/A';
|
||||
row.appendChild(memoryCell);
|
||||
|
||||
// Netzwerk
|
||||
const networkCell = document.createElement('td');
|
||||
if (container.network_io) {
|
||||
networkCell.innerHTML = `↓ ${formatBytes(container.network_io.rx_bytes)}<br>↑ ${formatBytes(container.network_io.tx_bytes)}`;
|
||||
} else {
|
||||
networkCell.textContent = 'N/A';
|
||||
}
|
||||
row.appendChild(networkCell);
|
||||
|
||||
// Aktionen
|
||||
const actionsCell = document.createElement('td');
|
||||
const actionsDiv = document.createElement('div');
|
||||
actionsDiv.className = 'container-actions';
|
||||
|
||||
// Restart-Button
|
||||
const restartBtn = document.createElement('button');
|
||||
restartBtn.className = 'btn btn-warning btn-sm';
|
||||
restartBtn.innerHTML = '<i class="fas fa-sync"></i>';
|
||||
restartBtn.title = 'Container neustarten';
|
||||
restartBtn.onclick = () => restartContainer(container.id);
|
||||
actionsDiv.appendChild(restartBtn);
|
||||
|
||||
// Logs-Button
|
||||
const logsBtn = document.createElement('button');
|
||||
logsBtn.className = 'btn btn-info btn-sm';
|
||||
logsBtn.innerHTML = '<i class="fas fa-list-alt"></i>';
|
||||
logsBtn.title = 'Container-Logs anzeigen';
|
||||
logsBtn.onclick = () => showContainerLogs(container.id);
|
||||
actionsDiv.appendChild(logsBtn);
|
||||
|
||||
actionsCell.appendChild(actionsDiv);
|
||||
row.appendChild(actionsCell);
|
||||
|
||||
containerTable.appendChild(row);
|
||||
});
|
||||
|
||||
// Container-Status-Diagramm aktualisieren
|
||||
updateContainerStatusChart(data.containers);
|
||||
})
|
||||
.catch(error => console.error('Fehler beim Abrufen der Docker-Informationen:', error));
|
||||
}
|
||||
|
||||
// Initialisiere Container-Status-Diagramm
|
||||
function initContainerStatusChart() {
|
||||
const ctx = document.getElementById('container-status-chart').getContext('2d');
|
||||
|
||||
containerStatusChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['Aktiv', 'Inaktiv'],
|
||||
datasets: [{
|
||||
data: [0, 0],
|
||||
backgroundColor: [
|
||||
'rgba(75, 192, 192, 0.7)',
|
||||
'rgba(255, 99, 132, 0.7)'
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Container-Status',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Aktualisiere Container-Status-Diagramm
|
||||
function updateContainerStatusChart(containers) {
|
||||
if (!containerStatusChart) return;
|
||||
|
||||
const running = containers.filter(c => c.running).length;
|
||||
const stopped = containers.filter(c => !c.running).length;
|
||||
|
||||
containerStatusChart.data.datasets[0].data = [running, stopped];
|
||||
containerStatusChart.update();
|
||||
}
|
||||
|
||||
// Container neustarten
|
||||
function restartContainer(containerId) {
|
||||
fetch(`/api/docker/restart/${containerId}`, {
|
||||
method: 'POST'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showMessage('Container wird neugestartet...', false);
|
||||
// Nach kurzer Verzögerung aktualisieren
|
||||
setTimeout(updateContainerStatus, 2000);
|
||||
} else {
|
||||
showMessage('Fehler beim Neustarten des Containers: ' + data.message, true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler beim Neustarten des Containers', true);
|
||||
console.error('Fehler beim Neustarten des Containers:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Container-Logs anzeigen
|
||||
function showContainerLogs(containerId) {
|
||||
fetch(`/api/docker/logs/${containerId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.logs) {
|
||||
// Modal erstellen und anzeigen
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Container-Logs: ${data.container_name}</h3>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre>${data.logs}</pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Modal schließen, wenn auf X geklickt wird
|
||||
modal.querySelector('.close').onclick = function() {
|
||||
document.body.removeChild(modal);
|
||||
};
|
||||
|
||||
// Modal schließen, wenn außerhalb geklickt wird
|
||||
window.onclick = function(event) {
|
||||
if (event.target === modal) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
};
|
||||
|
||||
// Modal anzeigen
|
||||
modal.style.display = 'block';
|
||||
} else {
|
||||
showMessage('Keine Logs verfügbar', true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler beim Abrufen der Container-Logs', true);
|
||||
console.error('Fehler beim Abrufen der Container-Logs:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// Zeige Fehlermeldung oder Erfolgsmeldung
|
||||
function showMessage(message, isError = false) {
|
||||
const messageEl = document.getElementById('message');
|
||||
if (messageEl) {
|
||||
messageEl.textContent = message;
|
||||
messageEl.className = isError ? 'message message-error' : 'message message-success';
|
||||
messageEl.style.display = 'block';
|
||||
|
||||
// Verstecke Nachricht nach 5 Sekunden
|
||||
setTimeout(() => {
|
||||
messageEl.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisiere alle Diagramme
|
||||
function initAllCharts() {
|
||||
// Überprüfe, ob Chart.js geladen ist
|
||||
if (typeof Chart !== 'undefined') {
|
||||
if (document.getElementById('cpu-usage-chart')) {
|
||||
initCpuUsageChart();
|
||||
}
|
||||
|
||||
if (document.getElementById('memory-usage-chart')) {
|
||||
initMemoryUsageChart();
|
||||
}
|
||||
|
||||
if (document.getElementById('disk-usage-chart')) {
|
||||
initDiskUsageChart();
|
||||
}
|
||||
|
||||
if (document.getElementById('container-status-chart')) {
|
||||
initContainerStatusChart();
|
||||
}
|
||||
|
||||
// Initialen Datenabruf starten
|
||||
updateSystemCharts();
|
||||
updateContainerStatus();
|
||||
|
||||
// Regelmäßige Aktualisierung der Diagramme
|
||||
setInterval(updateSystemCharts, 5000); // Alle 5 Sekunden aktualisieren
|
||||
setInterval(updateContainerStatus, 10000); // Alle 10 Sekunden aktualisieren
|
||||
} else {
|
||||
console.error('Chart.js konnte nicht geladen werden.');
|
||||
}
|
||||
}
|
||||
|
||||
// Automatischer Start beim Laden der Seite
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initAllCharts();
|
||||
});
|
||||
1234
backend/debug-server/static/js/debug-dashboard.js
Normal file
1234
backend/debug-server/static/js/debug-dashboard.js
Normal file
File diff suppressed because it is too large
Load Diff
444
backend/debug-server/templates/dashboard.html
Normal file
444
backend/debug-server/templates/dashboard.html
Normal file
@@ -0,0 +1,444 @@
|
||||
<!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>
|
||||
261
backend/debug-server/templates/debug.html
Normal file
261
backend/debug-server/templates/debug.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MYP Debug Server</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.section {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #34495e;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
.btn-success {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
.btn-warning {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
.btn-warning:hover {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
.status {
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.status-good {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.status-warning {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
.status-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
.interface-item {
|
||||
background-color: #f8f9fa;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
.message {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.message-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.message-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>MYP Debug Server</h1>
|
||||
<p>Letzte Aktualisierung: {{ last_check }}</p>
|
||||
|
||||
<div id="message" class="message"></div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Netzwerkkonfiguration</h2>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Verbindungsstatus</h2>
|
||||
|
||||
<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 class="section">
|
||||
<h2>Netzwerkschnittstellen</h2>
|
||||
{% for interface in interfaces %}
|
||||
<div class="interface-item">
|
||||
<strong>{{ interface.name }}</strong>: {{ interface.address }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showMessage(message, isError = false) {
|
||||
const messageEl = document.getElementById('message');
|
||||
messageEl.textContent = message;
|
||||
messageEl.className = isError ? 'message message-error' : 'message message-success';
|
||||
messageEl.style.display = 'block';
|
||||
|
||||
// Verstecke Nachricht nach 5 Sekunden
|
||||
setTimeout(() => {
|
||||
messageEl.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function getFormData() {
|
||||
return {
|
||||
backend_hostname: document.getElementById('backend_hostname').value,
|
||||
backend_port: document.getElementById('backend_port').value,
|
||||
frontend_hostname: document.getElementById('frontend_hostname').value,
|
||||
frontend_port: document.getElementById('frontend_port').value
|
||||
};
|
||||
}
|
||||
|
||||
function testConnection() {
|
||||
const formData = getFormData();
|
||||
const data = new FormData();
|
||||
|
||||
for (const key in formData) {
|
||||
data.append(key, formData[key]);
|
||||
}
|
||||
|
||||
fetch('/test-connection', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
let message = 'Backend: ';
|
||||
message += data.results.backend.ping ? 'Ping OK' : 'Ping fehlgeschlagen';
|
||||
message += ', ';
|
||||
message += data.results.backend.connection ? 'Verbindung OK' : 'Keine Verbindung';
|
||||
|
||||
message += ' | Frontend: ';
|
||||
message += data.results.frontend.ping ? 'Ping OK' : 'Ping fehlgeschlagen';
|
||||
message += ', ';
|
||||
message += data.results.frontend.connection ? 'Verbindung OK' : 'Keine Verbindung';
|
||||
|
||||
showMessage(message, !(data.results.backend.connection && data.results.frontend.connection));
|
||||
} else {
|
||||
showMessage(data.message, true);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler bei der Verbindungsprüfung: ' + error, true);
|
||||
});
|
||||
}
|
||||
|
||||
function saveConfig() {
|
||||
const formData = getFormData();
|
||||
const data = new FormData();
|
||||
|
||||
for (const key in formData) {
|
||||
data.append(key, formData[key]);
|
||||
}
|
||||
|
||||
fetch('/save-config', {
|
||||
method: 'POST',
|
||||
body: data
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showMessage(data.message, !data.success);
|
||||
if (data.success) {
|
||||
// Aktualisiere die Seite nach erfolgreicher Speicherung
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 1500);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler beim Speichern: ' + error, true);
|
||||
});
|
||||
}
|
||||
|
||||
function syncFrontend() {
|
||||
fetch('/sync-frontend', {
|
||||
method: 'POST'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
showMessage(data.message, !data.success);
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Fehler bei der Frontend-Synchronisierung: ' + error, true);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user