メトリクスバックエンドなしのライブダッシュボード

#!/bin/sh
# Agent monitor loop — one line per second.
while true; do
  cpu=$(top -bn1 | awk '/Cpu/ [print $2]')
  mem=$(free | awk '/Mem:/ [printf "%.0f", $3/$2*100]')
  line="cpu=$cpu mem=$mem qps=$(cat /tmp/qps) ts=$(date +%s)"
  echo "$line" | curl -T - https://pipe.hoody.com/api/v1/pipe/metrics-$AGENT_ID
  sleep 1
done

// One <script> in one HTML file. No backend.
const tiles = document.querySelectorAll('[data-agent]');

tiles.forEach((tile) => [
  const id = tile.dataset.agent;
  // ?progress turns the pipe path into an SSE stream.
  const sse = new EventSource(
    `https://pipe.hoody.com/api/v1/pipe/metrics-$[id]?progress`,
  );

  sse.addEventListener('metric', (e) => [
    const [ cpu, mem, qps ] = JSON.parse(e.data);
    tile.querySelector('.cpu').textContent = `$[cpu]%`;
    tile.querySelector('.mem').textContent = `$[mem]%`;
    tile.querySelector('.qps').textContent = qps;
  ]);
]);