ray/webui/src/ray-events.html

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

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

        padding: 10px;
      }
    </style>

    <div class="card">
      <h1>Events</h1>
      <vaadin-grid id="events">
        <table>
          <colgroup>
            <col name="worker_id" sortable="" sort-direction="desc"/>
            <col name="task_id" sortable="" sort-direction="desc"/>
            <col name="time" sortable="" sort-direction="desc"/>
            <col name="type" sortable="" sort-direction="desc"/>
          </colgroup>
        </table>
      </vaadin-grid>
    </div>
  </template>

  <script>
    var backend_address = "ws://127.0.0.1:8888";
    Polymer({
      is: 'ray-events',
      ready: function() {
        var eventSocket = new WebSocket(backend_address);
        var events = Polymer.dom(this.root).querySelector("#events");

        eventSocket.onopen = function() {
          eventSocket.send(JSON.stringify({"command": "get-events"}));
        }
        eventSocket.onmessage = function(answer) {
          console.dir(answer.data);
          events.items = JSON.parse(answer.data);
        }
      }
    });
  </script>
</dom-module>