ray/webui/src/ray-objects.html

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

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

        padding: 10px;
      }
    </style>

    <div class="card">
      <h1>Objects</h1>
      <vaadin-grid id="objects">
        <table>
          <colgroup>
            <col name="object_id" sortable="" sort-direction="desc"/>
            <col name="data_size" sortable="" sort-direction="desc"/>
            <col name="hash" sortable="" sort-direction="desc"/>
          </colgroup>
        </table>
      </vaadin-grid>
    </div>
  </template>

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

        objectSocket.onopen = function() {
          objectSocket.send(JSON.stringify({"command": "get-objects"}));
        }
        objectSocket.onmessage = function(answer) {
          objects.items = JSON.parse(answer.data);
        }

        objects.addEventListener('selected-items-changed', function() {
          var index = this.selection.selected();
          if (index != undefined && this.items != undefined && this.items[index] != undefined) {
            var id = this.items[index]["object_id"];
            objectInfoSocket.send(JSON.stringify({"command": "get-object-info", "object_id": id}));
            objectInfoSocket.onmessage = function(answer) {
              console.log(answer.data);
            }
          }
        }.bind(objects));
      }
    });
  </script>
</dom-module>