hypermc/my-mc-stats-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Jump node

Browse Source
This commit is contained in:
MCHost
2025-07-03 17:45:19 -04:00
parent c94eae5d4d
commit 60c969c6f7
2 changed files with 356 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
status.html
View File

@ -23,6 +23,12 @@
width: 100%;
max-width: 1200px;
}
.no-data {
text-align: center;
color: #fb7185;
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
</head>
<body>
@ -136,6 +142,44 @@
</div>
</div>
</section>
<section class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">
Jump Node Stats</h2>
<div id="jump-no-data" class="no-data" style="display: none;">No Jump Node data available</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Uptime</h3>
<p class="text-lg opacity-90" id="jump-uptime">0 days</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">AI Anomaly Count</h3>
<p class="text-lg opacity-90" id="jump-ai-anomaly-count">0</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Disk Usage</h3>
<p class="text-lg opacity-90" id="jump-disk-usage">0 GB</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Free Disk</h3>
<p class="text-lg opacity-90" id="jump-free-disk">0 GB</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">CPU Usage</h3>
<canvas id="jump-cpu-chart"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Network Traffic</h3>
<canvas id="jump-net-chart"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Disk I/O</h3>
<canvas id="jump-disk-chart"></canvas>
</div>
</div>
</section>
</main>
<footer class="bg-gray-900/20 backdrop-filter backdrop-blur-xl py-8 text-center relative z-10">
@ -152,12 +196,14 @@
let dockerNetHistory = [];
let netHistory = [];
let diskHistory = [];
let jumpNetHistory = [];
let jumpDiskHistory = [];
const MAX_POINTS = 10;
const SMOOTHING_WINDOW = 3;
// Helper to smooth data
function smoothData(data, windowSize) {
if (data.length < windowSize) return data;
if (!data || data.length < windowSize) return data || [];
return data.map((_, i) => {
const start = Math.max(0, i - windowSize + 1);
const slice = data.slice(start, i + 1);
@ -173,6 +219,12 @@
return { value: bytes.toFixed(2), unit: 'B/s' };
}
// Helper to format uptime in days
function formatUptime(seconds) {
const days = Math.floor(seconds / (60 * 60 * 24));
return `${days} days`;
}
// Initialize Chart.js charts
function initCharts() {
if (typeof Chart === 'undefined') {
@ -185,7 +237,10 @@
cpu: document.getElementById('cpu-chart'),
ram: document.getElementById('ram-chart'),
net: document.getElementById('net-chart'),
disk: document.getElementById('disk-chart')
disk: document.getElementById('disk-chart'),
jumpCpu: document.getElementById('jump-cpu-chart'),
jumpNet: document.getElementById('jump-net-chart'),
jumpDisk: document.getElementById('jump-disk-chart')
};
for (const [key, canvas] of Object.entries(canvases)) {
@ -322,11 +377,88 @@
}
});
charts.jumpCpu = new Chart(canvases.jumpCpu.getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [
{ label: 'User (%)', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'System (%)', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
]
},
options: {
...commonOptions,
scales: {
y: {
...commonOptions.scales.y,
max: 100,
title: { display: true, text: 'Usage (%)', color: '#e5e7eb' }
},
x: commonOptions.scales.x
}
}
});
charts.jumpNet = new Chart(canvases.jumpNet.getContext('2d'), {
type: 'bar',
data: {
labels: [],
datasets: [
{ label: 'Received', data: [], backgroundColor: '#38bdf8', stack: 'Stack 0' },
{ label: 'Sent', data: [], backgroundColor: '#fb7185', stack: 'Stack 0' }
]
},
options: {
...commonOptions,
scales: {
y: {
...commonOptions.scales.y,
stacked: true,
title: { display: true, text: 'Speed', color: '#e5e7eb' }
},
x: {
...commonOptions.scales.x,
stacked: true
}
}
}
});
charts.jumpDisk = new Chart(canvases.jumpDisk.getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [
{ label: 'Read', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'Write', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
]
},
options: {
...commonOptions,
scales: {
y: {
...commonOptions.scales.y,
title: { display: true, text: 'Speed', color: '#e5e7eb' }
},
x: commonOptions.scales.x
}
}
});
console.log('Charts initialized successfully.');
}
// Update UI with data
function updateUI(data) {
if (!data) {
console.error('Received empty WebSocket data.');
return;
}
// Log full payload for debugging
console.debug('Received WebSocket payload:', JSON.stringify(data, null, 2));
// Initialize defaults for missing data
if (!data.docker) {
console.warn('Missing docker data.');
data.docker = {};
@ -335,6 +467,22 @@
console.warn('Missing netdata data.');
data.netdata = { cpu: [], ram: [], net: [], disk: [], disk_space: [], anomaly: [] };
}
if (!data.jumpNode) {
console.warn('Missing jump node data.');
data.jumpNode = { cpu: [], ram: [], net: [], disk: [], anomaly: [], disk_space: [], uptime: [] };
}
// Show/hide no-data message for Jump Node
const jumpNoData = document.getElementById('jump-no-data');
const hasJumpData = data.jumpNode && (
(data.jumpNode.cpu && data.jumpNode.cpu.length > 0) ||
(data.jumpNode.net && data.jumpNode.net.length > 0) ||
(data.jumpNode.disk && data.jumpNode.disk.length > 0) ||
(data.jumpNode.anomaly && data.jumpNode.anomaly.length > 0) ||
(data.jumpNode.disk_space && data.jumpNode.disk_space.length > 0) ||
(data.jumpNode.uptime && data.jumpNode.uptime.length > 0)
);
jumpNoData.style.display = hasJumpData ? 'none' : 'block';
// Update Docker stats
document.getElementById('total-containers').textContent = data.docker.totalContainers || 0;
@ -354,6 +502,20 @@
const latestAnomaly = anomalyData.length > 0 ? anomalyData[anomalyData.length - 1] : null;
document.getElementById('ai-fault-count').textContent = latestAnomaly ? `${latestAnomaly.anomalous}` : '0';
// Update Jump Node stats
const jumpDiskSpaceData = data.jumpNode.disk_space || [];
const latestJumpDiskSpace = jumpDiskSpaceData.length > 0 ? jumpDiskSpaceData[jumpDiskSpaceData.length - 1] : null;
document.getElementById('jump-disk-usage').textContent = latestJumpDiskSpace ? `${latestJumpDiskSpace.used.toFixed(2)} GB` : '0 GB';
document.getElementById('jump-free-disk').textContent = latestJumpDiskSpace ? `${latestJumpDiskSpace.avail.toFixed(2)} GB` : '0 GB';
const jumpAnomalyData = data.jumpNode.anomaly || [];
const latestJumpAnomaly = jumpAnomalyData.length > 0 ? jumpAnomalyData[jumpAnomalyData.length - 1] : null;
document.getElementById('jump-ai-anomaly-count').textContent = latestJumpAnomaly ? `${latestJumpAnomaly.anomalous}` : '0';
const jumpUptimeData = data.jumpNode.uptime || [];
const latestJumpUptime = jumpUptimeData.length > 0 ? jumpUptimeData[jumpUptimeData.length - 1] : null;
document.getElementById('jump-uptime').textContent = latestJumpUptime ? formatUptime(latestJumpUptime.uptime) : '0 days';
// Update container tables
const cpuTable = document.getElementById('cpu-table');
const memoryTable = document.getElementById('memory-table');
@ -413,6 +575,35 @@
}
}
// Update Jump Node network and disk history
if (data.jumpNode.net?.length) {
const latestNet = data.jumpNode.net[data.jumpNode.net.length - 1];
jumpNetHistory.push({
time: latestNet.time,
received: Math.abs(latestNet.received),
sent: Math.abs(latestNet.sent)
});
if (jumpNetHistory.length > MAX_POINTS) {
jumpNetHistory.shift();
}
} else {
console.debug('No jump node network data available.');
}
if (data.jumpNode.disk?.length) {
const latestDisk = data.jumpNode.disk[data.jumpNode.disk.length - 1];
jumpDiskHistory.push({
time: latestDisk.time,
in: Math.abs(latestDisk.in),
out: Math.abs(latestDisk.out)
});
if (jumpDiskHistory.length > MAX_POINTS) {
jumpDiskHistory.shift();
}
} else {
console.debug('No jump node disk data available.');
}
// Update charts with smoothing and dynamic units
const defaultLabels = Array(MAX_POINTS).fill(0).map((_, i) => i);
const defaultData = Array(MAX_POINTS).fill(0);
@ -473,6 +664,47 @@
charts.disk.options.scales.y.title.text = unitInfo.unit;
charts.disk.update();
}
if (charts.jumpCpu) {
const userData = smoothData(data.jumpNode.cpu?.map(d => d.user) || [], SMOOTHING_WINDOW);
const systemData = smoothData(data.jumpNode.cpu?.map(d => d.system) || [], SMOOTHING_WINDOW);
charts.jumpCpu.data.labels = data.jumpNode.cpu?.length ? data.jumpNode.cpu.map((_, i) => i) : defaultLabels;
charts.jumpCpu.data.datasets[0].data = userData.length ? userData : defaultData;
charts.jumpCpu.data.datasets[1].data = systemData.length ? systemData : defaultData;
charts.jumpCpu.update();
} else {
console.debug('Jump CPU chart not initialized.');
}
if (charts.jumpNet) {
const maxVal = Math.max(...jumpNetHistory.map(d => Math.max(d.received, d.sent)), 1);
const unitInfo = formatBytes(maxVal);
const scale = unitInfo.unit === 'GB/s' ? 1e9 : unitInfo.unit === 'MB/s' ? 1e6 : unitInfo.unit === 'KB/s' ? 1e3 : 1;
const receivedData = smoothData(jumpNetHistory.map(d => d.received / scale), SMOOTHING_WINDOW);
const sentData = smoothData(jumpNetHistory.map(d => d.sent / scale), SMOOTHING_WINDOW);
charts.jumpNet.data.labels = jumpNetHistory.length ? jumpNetHistory.map((_, i) => i) : defaultLabels;
charts.jumpNet.data.datasets[0].data = receivedData.length ? receivedData : defaultData;
charts.jumpNet.data.datasets[1].data = sentData.length ? sentData : defaultData;
charts.jumpNet.options.scales.y.title.text = unitInfo.unit;
charts.jumpNet.update();
} else {
console.debug('Jump Network chart not initialized.');
}
if (charts.jumpDisk) {
const maxVal = Math.max(...jumpDiskHistory.map(d => Math.max(d.in, d.out)), 1);
const unitInfo = formatBytes(maxVal);
const scale = unitInfo.unit === 'GB/s' ? 1e9 : unitInfo.unit === 'MB/s' ? 1e6 : unitInfo.unit === 'KB/s' ? 1e3 : 1;
const inData = smoothData(jumpDiskHistory.map(d => d.in / scale), SMOOTHING_WINDOW);
const outData = smoothData(jumpDiskHistory.map(d => d.out / scale), SMOOTHING_WINDOW);
charts.jumpDisk.data.labels = jumpDiskHistory.length ? jumpDiskHistory.map((_, i) => i) : defaultLabels;
charts.jumpDisk.data.datasets[0].data = inData.length ? inData : defaultData;
charts.jumpDisk.data.datasets[1].data = outData.length ? outData : defaultData;
charts.jumpDisk.options.scales.y.title.text = unitInfo.unit;
charts.jumpDisk.update();
} else {
console.debug('Jump Disk chart not initialized.');
}
}
ws.onmessage = (event) => {