ray/webui/src/ray-recent-tasks.html

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

<script src="recent-tasks.js"></script>

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

        padding: 10px;
      }
      rect:hover
      {
        opacity: 0.5;
      }

    </style>

    <div class="card">
      <h1>Ray Recent Tasks</h1>
      <input value=100 id="input_num_tasks"></input>
      <button id="refresh_button">Refresh</button>
      <br></br>

      <div id="all_recent_tasks"></div>

    </div>
  </template>

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

    Polymer({
      is: 'ray-recent-tasks',
      ready: function() {

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

        socket.onopen = function() {
          socket.send(JSON.stringify({"command": "get-recent-tasks", "num": 100}));
        }

        socket.onmessage = function(messageEvent) {
          var task_info = JSON.parse(messageEvent.data);
          console.log(task_info.num_tasks);
          if (task_info["num_tasks"] == 0) {
            console.log("No tasks yet.");
            return;
          }
          recent_tasks = new RecentTasks(self.$.all_recent_tasks);
          recent_tasks.draw_new_tasks(task_info, self.offsetWidth - 100);
        }

        socket.onclose = function(closeEvent) {
          console.log(closeEvent)
        }

        d3.select(this.$.refresh_button)
            .on("click", function () {
              recent_tasks.erase();
              var num_tasks_to_get = self.$.input_num_tasks.value;
              socket.send(JSON.stringify({"command": "get-recent-tasks", "num": parseInt(num_tasks_to_get)}));
            });
      },

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