mirror of
https://git.alemi.dev/server-monitor.git
synced 2024-11-14 11:39:24 +01:00
105 lines
2.7 KiB
HTML
105 lines
2.7 KiB
HTML
<title>sysload::alemi.dev</title>
|
|
<style>
|
|
body {
|
|
background-color: #111111;
|
|
}
|
|
.full-size {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<canvas id="#chart" class="full-size"></canvas>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
function randomStr(len) {
|
|
let text = "";
|
|
const charset = "abcdefghijklmnopqrstuvwxyz0123456789";
|
|
for (let i = 0; i < len; i++) {
|
|
text += charset.charAt(Math.floor(Math.random() * charset.length));
|
|
}
|
|
return text;
|
|
}
|
|
|
|
const ctx = document.getElementById('#chart');
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const interval = urlParams.get("interval") || 30;
|
|
const samples = urlParams.get("samples") || 100;
|
|
const apiHost = urlParams.get("host") || "alemi.dev";
|
|
const deltaSession = urlParams.get("session") || randomStr(16);
|
|
|
|
Chart.defaults.backgroundColor = '#111111';
|
|
Chart.defaults.borderColor = '#777777';
|
|
Chart.defaults.color = '#DDD';
|
|
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
label: 'CPU (%)',
|
|
data: [],
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'RAM (%)',
|
|
data: [],
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'TX (MB)',
|
|
data: [],
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'RX (MB)',
|
|
data: [],
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'R (10 MB)',
|
|
data: [],
|
|
tension: 0.1,
|
|
},
|
|
{
|
|
label: 'W (10 MB)',
|
|
data: [],
|
|
tension: 0.1,
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
}
|
|
});
|
|
|
|
fetch(`https://api.${apiHost}/load?session=${deltaSession}`); // prime delta counters
|
|
|
|
setInterval(async () => {
|
|
const response = await fetch(`https://api.${apiHost}/load?session=${deltaSession}`);
|
|
const sysstat = await response.json();
|
|
chart.data.labels.push(new Date().toLocaleTimeString());
|
|
chart.data.datasets[0].data.push(sysstat.cpu);
|
|
chart.data.datasets[1].data.push(sysstat.mem);
|
|
chart.data.datasets[2].data.push(sysstat.net.tx);
|
|
chart.data.datasets[3].data.push(sysstat.net.rx);
|
|
chart.data.datasets[4].data.push(sysstat.disk.r / 10);
|
|
chart.data.datasets[5].data.push(sysstat.disk.w / 10);
|
|
|
|
if (chart.data.labels.length > samples) {
|
|
chart.data.labels.splice(0, chart.data.labels.length - samples);
|
|
}
|
|
for (let i = 0; i < 6; i++) {
|
|
if (chart.data.datasets[i].data.length > samples) {
|
|
chart.data.datasets[i].data.splice(0, chart.data.datasets[i].data.length - samples);
|
|
}
|
|
}
|
|
chart.update();
|
|
}, interval * 1000);
|
|
</script>
|