alemi/server-monitor
1
0
Fork 0
mirror of https://git.alemi.dev/server-monitor.git synced 2024-11-14 03:29:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: added super simple html chart polling api

Browse source 
it's the one i'm using from my site
This commit is contained in:
əlemi 2023-12-04 00:41:52 +01:00
parent 0d30cbe24f
commit ef546f9c66
Signed by: alemi
GPG key ID: A4895B84D311642C
1 changed files with 105 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
index.html Normal file
View file

@ -0,0 +1,105 @@
<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>