Visualize recent tasks in timeline. (#240)

webui/src/ray-app.html

@@ -75,6 +75,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           <a name="tasks" href="/tasks">Tasks</a>
           <a name="events" href="/events">Events</a>
           <a name="timeline" href="/timeline">Timeline</a>
+          <a name="recent-tasks" href="/recent-tasks">Recent Tasks</a>
         </iron-selector>
       </app-drawer>
 
@@ -98,6 +99,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           <ray-tasks name="tasks"></ray-tasks>
           <ray-events name="events"></ray-events>
           <ray-timeline name="timeline"></ray-timeline>
+          <ray-recent-tasks name="recent-tasks"></ray-recent-tasks>
           <ray-view404 name="view404"></ray-view404>
         </iron-pages>
       </app-header-layout>

webui/src/ray-recent-tasks.html

@@ -0,0 +1,76 @@
+<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>
+      <svg id="recent_tasks"></svg>
+    </div>
+  </template>
+
+  <script>
+    var redis_address = "ws://127.0.0.1:8888";
+
+    var width = 1000,
+        height = 500,
+        row_height = 50,
+        num_workers = 8;
+
+    Polymer({
+      is: 'ray-recent-tasks',
+      ready: function() {
+
+        var self = this;
+        var socket = new WebSocket(redis_address);
+
+        recent_tasks = new RecentTasks(self.$.recent_tasks, {
+          "width": width, "height": height,
+        });
+
+        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.draw_new_tasks(task_info);
+        }
+
+        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>

webui/src/recent-tasks.js

@@ -0,0 +1,74 @@
+RecentTasks = function(elem, options) {
+  var self = this;
+
+  this.options = options;
+  var barHeight = 25;
+
+  var svg = d3.select(elem)
+      .attr("width", this.options.width)
+      .attr("height", this.options.height);
+
+  this.draw_new_tasks = function(task_info) {
+    this.task_info = task_info;
+    var x = d3.scaleLinear()
+        .domain([task_info.min_time, task_info.max_time])
+        .range([-1, width + 1]);
+
+    var xAxis = d3.axisBottom(x)
+        .tickSize(-height);
+
+    var gx = svg.append("g")
+        .attr("class", "axis axis--x")
+        .attr("transform", "translate(0," + (height - 10) + ")")
+        .call(xAxis);
+
+    var task_rects = svg.append("g").attr("class", "task_rects");
+    var get_arguments_rects = svg.append("g").attr("class", "get_arguments_rects");
+    var execute_rects = svg.append("g").attr("class", "execute_rects");
+    var store_outputs_rects = svg.append("g").attr("class", "store_outputs_rects");
+
+    task_rects.selectAll("rect")
+        .data(this.task_info.task_data)
+      .enter()
+      .append("rect")
+        .attr("x", function (d) { return x(d.task[0]); })
+        .attr("y", function (d) { return (d.worker_index + 1) * barHeight; })
+        .attr("width", function (d) { return x(d.task[1]) - x(d.task[0]); })
+        .attr("height", function (d) { return barHeight - 1; })
+        .attr("fill", "orange")
+
+    get_arguments_rects.selectAll("rect")
+        .data(this.task_info.task_data)
+      .enter()
+      .append("rect")
+        .attr("x", function (d) { return x(d.get_arguments[0]); })
+        .attr("y", function (d) { return (d.worker_index + 1) * barHeight + 1; })
+        .attr("width", function (d) { return x(d.get_arguments[1]) - x(d.get_arguments[0]); })
+        .attr("height", function (d) { return barHeight - 3; })
+        .attr("fill", "black")
+
+    execute_rects.selectAll("rect")
+        .data(this.task_info.task_data)
+      .enter()
+      .append("rect")
+        .attr("x", function (d) { return x(d.execute[0]); })
+        .attr("y", function (d) { return (d.worker_index + 1) * barHeight + 1; })
+        .attr("width", function (d) { return x(d.execute[1]) - x(d.execute[0]); })
+        .attr("height", function (d) { return barHeight - 3; })
+        .attr("fill", "blue")
+
+    store_outputs_rects.selectAll("rect")
+        .data(this.task_info.task_data)
+      .enter()
+      .append("rect")
+        .attr("x", function (d) { return x(d.store_outputs[0]); })
+        .attr("y", function (d) { return (d.worker_index + 1) * barHeight + 1; })
+        .attr("width", function (d) { return x(d.store_outputs[1]) - x(d.store_outputs[0]); })
+        .attr("height", function (d) { return barHeight - 3; })
+        .attr("fill", "green")
+  }
+
+  this.erase = function() {
+    svg.selectAll("g").remove()
+  }
+}