"feat: Added debug server and related components for improved development experience"
This commit is contained in:
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
Reference in New Issue
Block a user