505 lines
18 KiB
JavaScript
505 lines
18 KiB
JavaScript
// DOM-Element-Referenzen
|
|
const navButtons = document.querySelectorAll('.nav-button');
|
|
const panels = document.querySelectorAll('.panel');
|
|
|
|
// Panel-Navigation
|
|
navButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const panelId = button.getAttribute('data-panel');
|
|
|
|
// Aktiven Button und Panel wechseln
|
|
navButtons.forEach(btn => btn.classList.remove('active'));
|
|
panels.forEach(panel => panel.classList.remove('active'));
|
|
|
|
button.classList.add('active');
|
|
document.getElementById(panelId).classList.add('active');
|
|
|
|
// Lade Panel-Daten, wenn sie noch nicht geladen wurden
|
|
if (panelId === 'system' && document.getElementById('system-container').style.display === 'none') {
|
|
loadSystemInfo();
|
|
} else if (panelId === 'network' && document.getElementById('network-container').style.display === 'none') {
|
|
loadNetworkInfo();
|
|
} else if (panelId === 'services' && document.getElementById('services-container').style.display === 'none') {
|
|
loadServicesInfo();
|
|
}
|
|
});
|
|
});
|
|
|
|
// API-Anfragen
|
|
async function fetchData(endpoint) {
|
|
try {
|
|
const response = await fetch(endpoint);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP-Fehler: ${response.status}`);
|
|
}
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error(`Fehler beim Abrufen von ${endpoint}:`, error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// System-Informationen laden
|
|
async function loadSystemInfo() {
|
|
const loader = document.getElementById('system-loader');
|
|
const container = document.getElementById('system-container');
|
|
|
|
loader.style.display = 'block';
|
|
container.style.display = 'none';
|
|
|
|
const data = await fetchData('/api/system');
|
|
if (!data) {
|
|
loader.textContent = 'Fehler beim Laden der Systemdaten';
|
|
return;
|
|
}
|
|
|
|
// Betriebssystem-Info
|
|
document.getElementById('os-info').innerHTML = `
|
|
<p><strong>Plattform:</strong> ${data.os.platform}</p>
|
|
<p><strong>Distribution:</strong> ${data.os.distro}</p>
|
|
<p><strong>Version:</strong> ${data.os.release}</p>
|
|
<p><strong>Architektur:</strong> ${data.os.arch}</p>
|
|
<p><strong>Betriebszeit:</strong> ${data.os.uptime}</p>
|
|
`;
|
|
|
|
// CPU-Info
|
|
document.getElementById('cpu-info').innerHTML = `
|
|
<p><strong>Hersteller:</strong> ${data.cpu.manufacturer}</p>
|
|
<p><strong>Modell:</strong> ${data.cpu.brand}</p>
|
|
<p><strong>Geschwindigkeit:</strong> ${data.cpu.speed} GHz</p>
|
|
<p><strong>Kerne:</strong> ${data.cpu.cores} (${data.cpu.physicalCores} physisch)</p>
|
|
`;
|
|
|
|
// Speicher-Info
|
|
document.getElementById('memory-info').innerHTML = `
|
|
<p><strong>Gesamt:</strong> ${data.memory.total}</p>
|
|
<p><strong>Verwendet:</strong> ${data.memory.used} (${data.memory.usedPercent}%)</p>
|
|
<p><strong>Frei:</strong> ${data.memory.free}</p>
|
|
`;
|
|
|
|
document.getElementById('memory-bar').style.width = `${data.memory.usedPercent}%`;
|
|
document.getElementById('memory-bar').style.backgroundColor = getColorByPercentage(data.memory.usedPercent);
|
|
|
|
// Festplatten-Info
|
|
let diskHTML = '<table><tr><th>Laufwerk</th><th>Typ</th><th>Größe</th><th>Verwendet</th><th>Verfügbar</th><th>Nutzung</th></tr>';
|
|
|
|
data.filesystem.forEach(fs => {
|
|
diskHTML += `
|
|
<tr>
|
|
<td>${fs.mount}</td>
|
|
<td>${fs.type}</td>
|
|
<td>${fs.size}</td>
|
|
<td>${fs.used}</td>
|
|
<td>${fs.available}</td>
|
|
<td>
|
|
<div class="progress-container" style="margin: 0; width: 100%">
|
|
<div class="progress-bar" style="width: ${fs.usePercent}%; background-color: ${getColorByPercentage(fs.usePercent)}"></div>
|
|
</div>
|
|
${fs.usePercent}%
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
diskHTML += '</table>';
|
|
document.getElementById('disk-info').innerHTML = diskHTML;
|
|
|
|
// UI anzeigen
|
|
loader.style.display = 'none';
|
|
container.style.display = 'grid';
|
|
}
|
|
|
|
// Netzwerk-Informationen laden
|
|
async function loadNetworkInfo() {
|
|
const loader = document.getElementById('network-loader');
|
|
const container = document.getElementById('network-container');
|
|
|
|
loader.style.display = 'block';
|
|
container.style.display = 'none';
|
|
|
|
const data = await fetchData('/api/network');
|
|
if (!data) {
|
|
loader.textContent = 'Fehler beim Laden der Netzwerkdaten';
|
|
return;
|
|
}
|
|
|
|
// Netzwerkschnittstellen
|
|
let interfacesHTML = '<table><tr><th>Name</th><th>Status</th><th>IPv4</th><th>IPv6</th><th>MAC</th><th>Typ</th><th>DHCP</th></tr>';
|
|
|
|
data.interfaces.forEach(iface => {
|
|
interfacesHTML += `
|
|
<tr>
|
|
<td>${iface.iface}</td>
|
|
<td><span class="status ${iface.operstate === 'up' ? 'status-online' : 'status-offline'}">${iface.operstate}</span></td>
|
|
<td>${iface.ip4 || '-'}</td>
|
|
<td>${iface.ip6 || '-'}</td>
|
|
<td>${iface.mac || '-'}</td>
|
|
<td>${iface.type || '-'}</td>
|
|
<td>${iface.dhcp ? 'Ja' : 'Nein'}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
interfacesHTML += '</table>';
|
|
document.getElementById('network-interfaces').innerHTML = interfacesHTML;
|
|
|
|
// DNS-Server
|
|
let dnsHTML = '<ul>';
|
|
data.dns.forEach(server => {
|
|
dnsHTML += `<li>${server}</li>`;
|
|
});
|
|
dnsHTML += '</ul>';
|
|
document.getElementById('dns-servers').innerHTML = dnsHTML;
|
|
|
|
// Gateway
|
|
document.getElementById('default-gateway').innerHTML = `<p>${data.gateway || 'Nicht verfügbar'}</p>`;
|
|
|
|
// Netzwerkstatistiken
|
|
let statsHTML = '<table><tr><th>Schnittstelle</th><th>Empfangen</th><th>Gesendet</th><th>Empfangen/s</th><th>Gesendet/s</th></tr>';
|
|
|
|
data.stats.forEach(stat => {
|
|
statsHTML += `
|
|
<tr>
|
|
<td>${stat.iface}</td>
|
|
<td>${stat.rx_bytes}</td>
|
|
<td>${stat.tx_bytes}</td>
|
|
<td>${stat.rx_sec}</td>
|
|
<td>${stat.tx_sec}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
statsHTML += '</table>';
|
|
document.getElementById('network-stats').innerHTML = statsHTML;
|
|
|
|
// UI anzeigen
|
|
loader.style.display = 'none';
|
|
container.style.display = 'grid';
|
|
}
|
|
|
|
// Dienst-Informationen laden
|
|
async function loadServicesInfo() {
|
|
const loader = document.getElementById('services-loader');
|
|
const container = document.getElementById('services-container');
|
|
|
|
loader.style.display = 'block';
|
|
container.style.display = 'none';
|
|
|
|
const data = await fetchData('/api/services');
|
|
if (!data) {
|
|
loader.textContent = 'Fehler beim Laden der Dienstdaten';
|
|
return;
|
|
}
|
|
|
|
// Frontend-Status
|
|
document.getElementById('frontend-status').innerHTML = `
|
|
<p>Status: <span class="status ${data.frontend.status === 'online' ? 'status-online' : 'status-offline'}">${data.frontend.status}</span></p>
|
|
<p><strong>Name:</strong> ${data.frontend.name}</p>
|
|
<p><strong>Host:</strong> ${data.frontend.host}</p>
|
|
<p><strong>Port:</strong> ${data.frontend.port}</p>
|
|
`;
|
|
|
|
// Backend-Status
|
|
document.getElementById('backend-status').innerHTML = `
|
|
<p>Status: <span class="status ${data.backend.status === 'online' ? 'status-online' : 'status-offline'}">${data.backend.status}</span></p>
|
|
<p><strong>Name:</strong> ${data.backend.name}</p>
|
|
<p><strong>Host:</strong> ${data.backend.host}</p>
|
|
<p><strong>Port:</strong> ${data.backend.port}</p>
|
|
`;
|
|
|
|
// Docker-Container
|
|
if (data.docker.containers && data.docker.containers.length > 0) {
|
|
let containersHTML = '<table><tr><th>ID</th><th>Name</th><th>Image</th><th>Status</th><th>Ports</th></tr>';
|
|
|
|
data.docker.containers.forEach(container => {
|
|
containersHTML += `
|
|
<tr>
|
|
<td>${container.id}</td>
|
|
<td>${container.name}</td>
|
|
<td>${container.image}</td>
|
|
<td>${container.status}</td>
|
|
<td>${container.ports}</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
containersHTML += '</table>';
|
|
document.getElementById('docker-container-list').innerHTML = containersHTML;
|
|
} else {
|
|
document.getElementById('docker-container-list').innerHTML = '<p>Keine Docker-Container gefunden</p>';
|
|
}
|
|
|
|
// UI anzeigen
|
|
loader.style.display = 'none';
|
|
container.style.display = 'grid';
|
|
}
|
|
|
|
// Netzwerk-Tools
|
|
document.getElementById('ping-button').addEventListener('click', async () => {
|
|
const hostInput = document.getElementById('ping-host');
|
|
const resultBox = document.getElementById('ping-result');
|
|
const host = hostInput.value.trim();
|
|
|
|
if (!host) {
|
|
resultBox.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein';
|
|
return;
|
|
}
|
|
|
|
resultBox.textContent = 'Ping wird ausgeführt...';
|
|
|
|
const data = await fetchData(`/api/ping/${encodeURIComponent(host)}`);
|
|
if (!data) {
|
|
resultBox.textContent = 'Fehler beim Ausführen des Ping-Befehls';
|
|
return;
|
|
}
|
|
|
|
resultBox.textContent = data.output || data.error || 'Keine Ausgabe';
|
|
});
|
|
|
|
document.getElementById('traceroute-button').addEventListener('click', async () => {
|
|
const hostInput = document.getElementById('traceroute-host');
|
|
const resultBox = document.getElementById('traceroute-result');
|
|
const host = hostInput.value.trim();
|
|
|
|
if (!host) {
|
|
resultBox.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein';
|
|
return;
|
|
}
|
|
|
|
resultBox.textContent = 'Traceroute wird ausgeführt...';
|
|
|
|
const data = await fetchData(`/api/traceroute/${encodeURIComponent(host)}`);
|
|
if (!data) {
|
|
resultBox.textContent = 'Fehler beim Ausführen des Traceroute-Befehls';
|
|
return;
|
|
}
|
|
|
|
resultBox.textContent = data.output || data.error || 'Keine Ausgabe';
|
|
});
|
|
|
|
document.getElementById('nslookup-button').addEventListener('click', async () => {
|
|
const hostInput = document.getElementById('nslookup-host');
|
|
const resultBox = document.getElementById('nslookup-result');
|
|
const host = hostInput.value.trim();
|
|
|
|
if (!host) {
|
|
resultBox.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein';
|
|
return;
|
|
}
|
|
|
|
resultBox.textContent = 'DNS-Abfrage wird ausgeführt...';
|
|
|
|
const data = await fetchData(`/api/nslookup/${encodeURIComponent(host)}`);
|
|
if (!data) {
|
|
resultBox.textContent = 'Fehler beim Ausführen des NSLookup-Befehls';
|
|
return;
|
|
}
|
|
|
|
resultBox.textContent = data.output || data.error || 'Keine Ausgabe';
|
|
});
|
|
|
|
// Echtzeit-Monitoring mit WebSockets
|
|
const socket = io();
|
|
|
|
// CPU- und RAM-Statistiken
|
|
socket.on('system-stats', data => {
|
|
// CPU-Anzeige aktualisieren
|
|
const cpuPercentage = data.cpu.load;
|
|
document.getElementById('cpu-percentage').textContent = `${cpuPercentage}%`;
|
|
document.getElementById('cpu-gauge').style.height = `${cpuPercentage}%`;
|
|
document.getElementById('cpu-gauge').style.backgroundColor = getColorByPercentage(cpuPercentage);
|
|
|
|
// CPU-Kerne anzeigen
|
|
const cpuCoresContainer = document.getElementById('cpu-cores-container');
|
|
|
|
if (cpuCoresContainer.childElementCount === 0) {
|
|
// Erstelle Kern-Anzeigen, falls sie noch nicht existieren
|
|
data.cpu.cores.forEach((load, index) => {
|
|
const coreElement = document.createElement('div');
|
|
coreElement.className = 'cpu-core';
|
|
coreElement.innerHTML = `
|
|
<div class="cpu-core-label">
|
|
<span>Kern ${index}</span>
|
|
<span id="cpu-core-${index}-value">${load}%</span>
|
|
</div>
|
|
<div class="cpu-core-bar">
|
|
<div id="cpu-core-${index}-fill" class="cpu-core-fill" style="width: ${load}%; background-color: ${getColorByPercentage(load)}"></div>
|
|
</div>
|
|
`;
|
|
cpuCoresContainer.appendChild(coreElement);
|
|
});
|
|
} else {
|
|
// Aktualisiere bestehende Kern-Anzeigen
|
|
data.cpu.cores.forEach((load, index) => {
|
|
const valueElement = document.getElementById(`cpu-core-${index}-value`);
|
|
const fillElement = document.getElementById(`cpu-core-${index}-fill`);
|
|
|
|
if (valueElement && fillElement) {
|
|
valueElement.textContent = `${load}%`;
|
|
fillElement.style.width = `${load}%`;
|
|
fillElement.style.backgroundColor = getColorByPercentage(load);
|
|
}
|
|
});
|
|
}
|
|
|
|
// RAM-Anzeige aktualisieren
|
|
const memPercentage = data.memory.usedPercent;
|
|
document.getElementById('memory-percentage').textContent = `${memPercentage}%`;
|
|
document.getElementById('memory-gauge').style.height = `${memPercentage}%`;
|
|
document.getElementById('memory-gauge').style.backgroundColor = getColorByPercentage(memPercentage);
|
|
|
|
document.getElementById('memory-details').innerHTML = `
|
|
<p><strong>Gesamt:</strong> ${formatBytes(data.memory.total)}</p>
|
|
<p><strong>Verwendet:</strong> ${formatBytes(data.memory.used)}</p>
|
|
<p><strong>Frei:</strong> ${formatBytes(data.memory.free)}</p>
|
|
`;
|
|
});
|
|
|
|
// Netzwerkstatistiken
|
|
let networkChart;
|
|
socket.on('network-stats', data => {
|
|
const networkThroughput = document.getElementById('network-throughput');
|
|
let throughputHTML = '';
|
|
|
|
data.stats.forEach(stat => {
|
|
throughputHTML += `
|
|
<div class="network-stat">
|
|
<strong>${stat.iface}:</strong> ↓ ${formatBytes(stat.rx_sec)}/s | ↑ ${formatBytes(stat.tx_sec)}/s
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
networkThroughput.innerHTML = throughputHTML;
|
|
|
|
// Aktualisiere oder erstelle Netzwerk-Chart
|
|
updateNetworkChart(data.stats);
|
|
});
|
|
|
|
// Netzwerk-Chart initialisieren oder aktualisieren
|
|
function updateNetworkChart(stats) {
|
|
const ctx = document.getElementById('network-chart').getContext('2d');
|
|
|
|
if (!networkChart) {
|
|
// Chart initialisieren, wenn er noch nicht existiert
|
|
const labels = [];
|
|
const rxData = [];
|
|
const txData = [];
|
|
|
|
// Fülle anfängliche Daten
|
|
for (let i = 0; i < 20; i++) {
|
|
labels.push('');
|
|
rxData.push(0);
|
|
txData.push(0);
|
|
}
|
|
|
|
networkChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
{
|
|
label: 'Empfangen (Bytes/s)',
|
|
data: rxData,
|
|
borderColor: '#3f51b5',
|
|
backgroundColor: 'rgba(63, 81, 181, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.2,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Gesendet (Bytes/s)',
|
|
data: txData,
|
|
borderColor: '#f44336',
|
|
backgroundColor: 'rgba(244, 67, 54, 0.1)',
|
|
borderWidth: 2,
|
|
tension: 0.2,
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return formatBytes(value, 0);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 300
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
// Chart aktualisieren
|
|
let rxTotal = 0;
|
|
let txTotal = 0;
|
|
|
|
stats.forEach(stat => {
|
|
rxTotal += stat.rx_sec || 0;
|
|
txTotal += stat.tx_sec || 0;
|
|
});
|
|
|
|
// Füge neue Daten hinzu und entferne alte
|
|
networkChart.data.labels.push('');
|
|
networkChart.data.labels.shift();
|
|
|
|
networkChart.data.datasets[0].data.push(rxTotal);
|
|
networkChart.data.datasets[0].data.shift();
|
|
|
|
networkChart.data.datasets[1].data.push(txTotal);
|
|
networkChart.data.datasets[1].data.shift();
|
|
|
|
networkChart.update();
|
|
}
|
|
}
|
|
|
|
// Hilfsfunktionen
|
|
function getColorByPercentage(percent) {
|
|
// Farbverlauf von Grün über Gelb nach Rot
|
|
if (percent < 70) {
|
|
return 'var(--success-color)';
|
|
} else if (percent < 90) {
|
|
return 'var(--warning-color)';
|
|
} else {
|
|
return 'var(--danger-color)';
|
|
}
|
|
}
|
|
|
|
function formatBytes(bytes, decimals = 2) {
|
|
if (bytes === 0) return '0 B';
|
|
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
|
|
}
|
|
|
|
// Initialisierung
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Zeit aktualisieren
|
|
setInterval(() => {
|
|
document.getElementById('current-time').innerHTML = `<strong>Zeitstempel:</strong> ${new Date().toLocaleString('de-DE')}`;
|
|
}, 1000);
|
|
|
|
// Lade Systemdaten, wenn das System-Panel aktiv ist
|
|
if (document.getElementById('system').classList.contains('active')) {
|
|
loadSystemInfo();
|
|
}
|
|
|
|
// Lade Script für Netzwerk-Chart, falls noch nicht geladen
|
|
if (typeof Chart === 'undefined') {
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
|
|
script.onload = () => {
|
|
console.log('Chart.js geladen');
|
|
};
|
|
document.head.appendChild(script);
|
|
}
|
|
});
|