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

first commit

Browse Source
This commit is contained in:
MCHost
2025-07-03 05:51:59 -04:00
commit 257406e32c
6 changed files with 835 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

497
status.html Normal file
View File

@ -0,0 +1,497 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My-MC.Link Status</title>
<link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
<link href="https://my-mc.link/css/style_min.css?p=4" rel="stylesheet">
<link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<style>
table th, table td {
text-align: center !important;
}
.container-table {
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 100%;
}
.container-table table {
width: 100%;
max-width: 1200px;
}
</style>
</head>
<body>
<!-- Particle Effects -->
<div class="particle" style="left: 10%; top: 20%; animation-delay: 0s;"></div>
<div class="particle large" style="left: 30%; top: 50%; animation-delay: 2s;"></div>
<div class="particle" style="left: 50%; top: 30%; animation-delay: 4s;"></div>
<div class="particle large" style="left: 70%; top: 60%; animation-delay: 6s;"></div>
<div class="particle" style="left: 20%; top: 80%; animation-delay: 8s;"></div>
<header class="header-bg py-16 text-center relative z-10">
<div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div>
<h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
My-MC.Link Status</h1>
<p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Real-Time System & Docker Monitoring</p>
</div>
<a href="https://my-mc.link" class="btn-minecraft text-base self-center">Back to Home</a>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-10">
<section class="section-bg p-8 sm:p-10 mb-12">
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
Docker Environment Overview</h2>
<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">Running Containers</h3>
<p class="text-lg opacity-90" id="running-containers">0</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Total Containers</h3>
<p class="text-lg opacity-90" id="total-containers">0</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Total CPU Usage</h3>
<p class="text-lg opacity-90" id="total-cpu">0%</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Total RAM Usage</h3>
<p class="text-lg opacity-90" id="total-ram">0 GB</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">Holesail Processes</h3>
<p class="text-lg opacity-90" id="holesail-processes">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="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="free-disk">0 GB</p>
</div>
<div class="feature-card tilt-card">
<h3 class="text-xl minecraft-font mb-3 text-teal-400">AI Fault Monitor Count</h3>
<p class="text-lg opacity-90" id="ai-fault-count">0</p>
</div>
</div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Docker Network Traffic</h3>
<canvas id="docker-net-chart" class="mb-8"></canvas>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Minecraft Containers (Sorted by CPU)</h3>
<div class="container-table">
<table class="w-full text-sm text-gray-200 mb-8">
<thead class="text-xs uppercase bg-gray-800">
<tr>
<th class="px-6 py-3">Name</th>
<th class="px-6 py-3">CPU Usage (%)</th>
<th class="px-6 py-3">Memory Usage (MB)</th>
<th class="px-6 py-3">State</th>
</tr>
</thead>
<tbody id="cpu-table"></tbody>
</table>
</div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Minecraft Containers (Sorted by Memory)</h3>
<div class="container-table">
<table class="w-full text-sm text-gray-200">
<thead class="text-xs uppercase bg-gray-800">
<tr>
<th class="px-6 py-3">Name</th>
<th class="px-6 py-3">CPU Usage (%)</th>
<th class="px-6 py-3">Memory Usage (MB)</th>
<th class="px-6 py-3">State</th>
</tr>
</thead>
<tbody id="memory-table"></tbody>
</table>
</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">
Host System Metrics</h2>
<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="cpu-chart"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">RAM Usage</h3>
<canvas id="ram-chart"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Network Traffic</h3>
<canvas id="net-chart"></canvas>
</div>
<div>
<h3 class="text-xl minecraft-font mb-6 text-teal-400 text-center">Disk I/O</h3>
<canvas id="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">
<p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>
<p class="text-sm opacity-90 mt-3">
Powered by <a href="https://holesail.io" class="underline" target="_blank">Holesail</a> with services
donated by <a href="https://raven-scott.fyi" class="underline">SNXRaven</a>
</p>
</footer>
<script>
const ws = new WebSocket('wss://' + window.location.host);
const charts = {};
let dockerNetHistory = [];
let netHistory = [];
let diskHistory = [];
const MAX_POINTS = 10;
const SMOOTHING_WINDOW = 3;
// Helper to smooth data
function smoothData(data, windowSize) {
if (data.length < windowSize) return data;
return data.map((_, i) => {
const start = Math.max(0, i - windowSize + 1);
const slice = data.slice(start, i + 1);
return slice.reduce((sum, val) => sum + parseFloat(val), 0) / slice.length;
});
}
// Helper to format bytes dynamically (mirrors system-status.js)
function formatBytes(bytes) {
if (bytes >= 1e9) return { value: (bytes / 1e9).toFixed(2), unit: 'GB/s' };
if (bytes >= 1e6) return { value: (bytes / 1e6).toFixed(2), unit: 'MB/s' };
if (bytes >= 1e3) return { value: (bytes / 1e3).toFixed(2), unit: 'KB/s' };
return { value: bytes.toFixed(2), unit: 'B/s' };
}
// Initialize Chart.js charts
function initCharts() {
if (typeof Chart === 'undefined') {
console.error('Chart.js failed to load.');
return;
}
const canvases = {
dockerNet: document.getElementById('docker-net-chart'),
cpu: document.getElementById('cpu-chart'),
ram: document.getElementById('ram-chart'),
net: document.getElementById('net-chart'),
disk: document.getElementById('disk-chart')
};
for (const [key, canvas] of Object.entries(canvases)) {
if (!canvas || !canvas.getContext) {
console.error(`Canvas element for ${key} not found or invalid.`);
return;
}
}
const commonOptions = {
responsive: true,
animation: { duration: 500, easing: 'linear' },
scales: {
y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.1)' } },
x: { grid: { display: false } }
},
plugins: {
tooltip: { mode: 'index', intersect: false },
legend: { labels: { color: '#e5e7eb' } }
}
};
charts.dockerNet = new Chart(canvases.dockerNet.getContext('2d'), {
type: 'bar',
data: {
labels: [],
datasets: [
{ label: 'In', data: [], backgroundColor: '#38bdf8', stack: 'Stack 0' },
{ label: 'Out', 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.cpu = new Chart(canvases.cpu.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.ram = new Chart(canvases.ram.getContext('2d'), {
type: 'line',
data: {
labels: [],
datasets: [
{ label: 'Used (MB)', data: [], borderColor: '#38bdf8', fill: false, tension: 0.3 },
{ label: 'Free (MB)', data: [], borderColor: '#fb7185', fill: false, tension: 0.3 }
]
},
options: {
...commonOptions,
scales: {
y: {
...commonOptions.scales.y,
title: { display: true, text: 'Memory (MB)', color: '#e5e7eb' }
},
x: commonOptions.scales.x
}
}
});
charts.net = new Chart(canvases.net.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.disk = new Chart(canvases.disk.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.docker) {
console.warn('Missing docker data.');
data.docker = {};
}
if (!data.netdata) {
console.warn('Missing netdata data.');
data.netdata = { cpu: [], ram: [], net: [], disk: [], disk_space: [], anomaly: [] };
}
// Update Docker stats
document.getElementById('total-containers').textContent = data.docker.totalContainers || 0;
document.getElementById('running-containers').textContent = data.docker.runningContainers || 0;
document.getElementById('total-cpu').textContent = `${data.docker.totalCpu || 0}%`;
document.getElementById('total-ram').textContent = `${data.docker.totalMemory || 0} GB`;
document.getElementById('holesail-processes').textContent = data.holesailProcessCount || 0;
// Update Disk Usage and Free Disk
const diskSpaceData = data.netdata.disk_space || [];
const latestDiskSpace = diskSpaceData.length > 0 ? diskSpaceData[diskSpaceData.length - 1] : null;
document.getElementById('disk-usage').textContent = latestDiskSpace ? `${latestDiskSpace.used.toFixed(2)} GB` : '0 GB';
document.getElementById('free-disk').textContent = latestDiskSpace ? `${latestDiskSpace.avail.toFixed(2)} GB` : '0 GB';
// Update AI Fault Monitor Count
const anomalyData = data.netdata.anomaly || [];
const latestAnomaly = anomalyData.length > 0 ? anomalyData[anomalyData.length - 1] : null;
document.getElementById('ai-fault-count').textContent = latestAnomaly ? `${latestAnomaly.anomalous}` : '0';
// Update container tables
const cpuTable = document.getElementById('cpu-table');
const memoryTable = document.getElementById('memory-table');
cpuTable.innerHTML = data.docker.sortedByCpu?.map(c => `
<tr>
<td class="px-6 py-4">${c.name}</td>
<td class="px-6 py-4">${c.cpu}%</td>
<td class="px-6 py-4">${c.memory} MB</td>
<td class="px-6 py-4">${c.state}</td>
</tr>
`).join('') || '';
memoryTable.innerHTML = data.docker.sortedByMemory?.map(c => `
<tr>
<td class="px-6 py-4">${c.name}</td>
<td class="px-6 py-4">${c.cpu}%</td>
<td class="px-6 py-4">${c.memory} MB</td>
<td class="px-6 py-4">${c.state}</td>
</tr>
`).join('') || '';
// Update Docker network chart
if (data.docker.totalNetwork) {
const networkData = {
time: data.docker.totalNetwork.time || Math.floor(Date.now() / 1000),
in: parseFloat(data.docker.totalNetwork.received.value) * (data.docker.totalNetwork.received.unit === 'GB/s' ? 1e9 : data.docker.totalNetwork.received.unit === 'MB/s' ? 1e6 : data.docker.totalNetwork.received.unit === 'KB/s' ? 1e3 : 1),
out: parseFloat(data.docker.totalNetwork.sent.value) * (data.docker.totalNetwork.sent.unit === 'GB/s' ? 1e9 : data.docker.totalNetwork.sent.unit === 'MB/s' ? 1e6 : data.docker.totalNetwork.sent.unit === 'KB/s' ? 1e3 : 1),
unit: data.docker.totalNetwork.received.unit
};
dockerNetHistory.push(networkData);
if (dockerNetHistory.length > MAX_POINTS) {
dockerNetHistory.shift();
}
}
// Update Netdata network and disk history
if (data.netdata.net?.length) {
const latestNet = data.netdata.net[data.netdata.net.length - 1];
netHistory.push({
time: latestNet.time,
received: Math.abs(latestNet.received),
sent: Math.abs(latestNet.sent)
});
if (netHistory.length > MAX_POINTS) {
netHistory.shift();
}
}
if (data.netdata.disk?.length) {
const latestDisk = data.netdata.disk[data.netdata.disk.length - 1];
diskHistory.push({
time: latestDisk.time,
in: Math.abs(latestDisk.in),
out: Math.abs(latestDisk.out)
});
if (diskHistory.length > MAX_POINTS) {
diskHistory.shift();
}
}
// Update charts with smoothing and dynamic units
const defaultLabels = Array(MAX_POINTS).fill(0).map((_, i) => i);
const defaultData = Array(MAX_POINTS).fill(0);
if (charts.dockerNet) {
const maxVal = Math.max(...dockerNetHistory.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(dockerNetHistory.map(d => d.in / scale), SMOOTHING_WINDOW);
const outData = smoothData(dockerNetHistory.map(d => d.out / scale), SMOOTHING_WINDOW);
charts.dockerNet.data.labels = dockerNetHistory.length ? dockerNetHistory.map((_, i) => i) : defaultLabels;
charts.dockerNet.data.datasets[0].data = inData.length ? inData : defaultData;
charts.dockerNet.data.datasets[1].data = outData.length ? outData : defaultData;
charts.dockerNet.options.scales.y.title.text = unitInfo.unit;
charts.dockerNet.update();
}
if (charts.cpu) {
const userData = smoothData(data.netdata.cpu?.map(d => d.user) || [], SMOOTHING_WINDOW);
const systemData = smoothData(data.netdata.cpu?.map(d => d.system) || [], SMOOTHING_WINDOW);
charts.cpu.data.labels = data.netdata.cpu?.length ? data.netdata.cpu.map((_, i) => i) : defaultLabels;
charts.cpu.data.datasets[0].data = userData.length ? userData : defaultData;
charts.cpu.data.datasets[1].data = systemData.length ? systemData : defaultData;
charts.cpu.update();
}
if (charts.ram) {
const usedData = smoothData(data.netdata.ram?.map(d => d.used) || [], SMOOTHING_WINDOW);
const freeData = smoothData(data.netdata.ram?.map(d => d.free) || [], SMOOTHING_WINDOW);
charts.ram.data.labels = data.netdata.ram?.length ? data.netdata.ram.map((_, i) => i) : defaultLabels;
charts.ram.data.datasets[0].data = usedData.length ? usedData : defaultData;
charts.ram.data.datasets[1].data = freeData.length ? freeData : defaultData;
charts.ram.update();
}
if (charts.net) {
const maxVal = Math.max(...netHistory.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(netHistory.map(d => d.received / scale), SMOOTHING_WINDOW);
const sentData = smoothData(netHistory.map(d => d.sent / scale), SMOOTHING_WINDOW);
charts.net.data.labels = netHistory.length ? netHistory.map((_, i) => i) : defaultLabels;
charts.net.data.datasets[0].data = receivedData.length ? receivedData : defaultData;
charts.net.data.datasets[1].data = sentData.length ? sentData : defaultData;
charts.net.options.scales.y.title.text = unitInfo.unit;
charts.net.update();
}
if (charts.disk) {
const maxVal = Math.max(...diskHistory.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(diskHistory.map(d => d.in / scale), SMOOTHING_WINDOW);
const outData = smoothData(diskHistory.map(d => d.out / scale), SMOOTHING_WINDOW);
charts.disk.data.labels = diskHistory.length ? diskHistory.map((_, i) => i) : defaultLabels;
charts.disk.data.datasets[0].data = inData.length ? inData : defaultData;
charts.disk.data.datasets[1].data = outData.length ? outData : defaultData;
charts.disk.options.scales.y.title.text = unitInfo.unit;
charts.disk.update();
}
}
ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
updateUI(data);
} catch (error) {
console.error('Error parsing WebSocket data:', error);
}
};
ws.onopen = () => {
console.log('WebSocket connected');
initCharts();
};
ws.onclose = () => {
console.log('WebSocket disconnected');
};
</script>
</body>
</html>