لوحة معلومات حية بلا خلفية تخزين للقياسات

#!/bin/sh
# حلقة مراقب الوكيل — سطر واحد لكل ثانية.
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

// <script> واحد في ملف HTML واحد. بلا خادم.
const tiles = document.querySelectorAll('[data-agent]');

tiles.forEach((tile) => [
  const id = tile.dataset.agent;
  // ?progress يحول مسار الأنبوب إلى تدفق SSE.
  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;
  ]);
]);