ray/webui/src/ray-cluster-health.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="ray-cluster-health">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <div class="card">
      <h1>Ray Cluster Health</h1>
      <h2>Clients</h2>
      <vaadin-grid id="local-schedulers">
        <table>
          <colgroup>
            <col name="local scheduler ID"/>
            <col name="node ip address"/>
            <col name="time since heartbeat"/>
          </colgroup>
        </table>
      </vaadin-grid>
    </div>
  </template>

  <script>
    var backend_address = "ws://127.0.0.1:8888";

    Polymer({
      is: 'ray-cluster-health',
      ready: function() {

        var self = this;
        var socket = new WebSocket(backend_address);

        var local_schedulers = Polymer.dom(this.root).querySelector("#local-schedulers");
        socket.onopen = function() {
          socket.send(JSON.stringify({"command": "get-heartbeats"}));
        }

        socket.onmessage = function(messageEvent) {
          var heartbeat_info = JSON.parse(messageEvent.data);
          local_schedulers.items = heartbeat_info;
          // TODO(rkn): Figure out how to make the rows that correspond to dead
          // nodes appear red.
        }

      }
    });
  </script>
</dom-module>