<!doctype html> <html lang=“en”> <head>

<title>Digital Fabric Executive</title>
<style>
  .hidden { display: none }
</style>

</head> <body>

<h1>Digital Fabric Executive</h1>
<script>
  function updateStats(update) {
    for (let k in update.service) {
      let v = update.service[k];
      let e = document.querySelector('#' + k);
      if (e) e.innerText = v;
    }
    for (let k in update.machine) {
      let v = update.machine[k];
      let e = document.querySelector('#' + k);
      if (e) e.innerText = v;
    }
  }

  function connect() {
    console.log("connecting...");
    window.eventSource = new EventSource("/stream/stats");

    window.eventSource.onopen = function(e) {
      console.log("connected");
      document.querySelector('#status').innerText = 'connected';
      document.querySelector('#stats').className = '';
      return false;
    }

    window.eventSource.onmessage = function(e) {
      console.log("message", e.data);
      updateStats(JSON.parse(e.data));
    }

    window.eventSource.onerror = function(e) {
      console.log("error", e);
      document.querySelector('#status').innerText = 'disconnected';
      document.querySelector('#stats').className = 'hidden';
      window.eventSource.close();
      window.eventSource = null;
      setTimeout(connect, 5000);
    }
  };

  window.onload = connect;
</script>
<h2 id="status"></h2>
<div id="stats" class="hidden">
  <h2>Service</h2>
  <p>Request rate: <span id="http_request_rate"></span></p>
  <p>Error rate: <span id="error_rate"></span></p>
  <p>Average Latency: <span id="average_latency"></span>s</p>
  <p>Connected agents: <span id="agent_count"></span></p>
  <p>Connected clients: <span id="connection_count"></span></p>
  <p>Concurrent requests: <span id="concurrent_requests"></span></p>

  <h2>Machine</h2>
  <p>CPU utilization: <span id="cpu_utilization"></span>%</p>
  <p>Free memory: <span id="mem_free"></span>MB</p>
  <p>Load average: <span id="load_avg"></span></p>
</div>

</body> </html>