server-monitor/index.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>