From ef8d68b01d70ddc202b2e8af656a273ad2d432eb Mon Sep 17 00:00:00 2001
From: stevenvanrossem <steven.vanrossem@intec.ugent.be>
Date: Thu, 4 May 2017 14:09:36 +0200
Subject: [PATCH] update dashboard to display ip adresses

---
 src/emuvim/dashboard/css/main.css | 19 ++++++++++++++++
 src/emuvim/dashboard/js/graph.js  | 20 -----------------
 src/emuvim/dashboard/js/main.js   | 36 +++++++++++++++++++++----------
 3 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/emuvim/dashboard/css/main.css b/src/emuvim/dashboard/css/main.css
index 7b10dbc..22cff1b 100755
--- a/src/emuvim/dashboard/css/main.css
+++ b/src/emuvim/dashboard/css/main.css
@@ -26,9 +26,28 @@ body {
 .tbl-row > td {
     padding-top: 4px;
     padding-bottom: 4px;
+    vertical-align: top;
+    border-top: 1pt solid black;
 
 }
 
 .spacer {
     height: 20px;
 }
+
+.interface_table {
+    width: 350px;
+}
+
+
+.interface_port {
+   width: 150px;
+}
+
+.interface_name {
+   width: 100px;
+}
+
+.interface_ip {
+   width: 100px;
+}
\ No newline at end of file
diff --git a/src/emuvim/dashboard/js/graph.js b/src/emuvim/dashboard/js/graph.js
index daf4e4a..5858833 100755
--- a/src/emuvim/dashboard/js/graph.js
+++ b/src/emuvim/dashboard/js/graph.js
@@ -12,7 +12,6 @@ var force = d3.layout.force()
     .charge(-100)
     .size([width, height]);
 
-//d3.json("js/graph.json", function(error, json) {
 d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json) {
   if (error) throw error;
 
@@ -31,14 +30,7 @@ d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json)
       .enter().append("g")
       .attr("class", "node")
       .call(force.drag)
-      .on("click", click);
 
-  //node.append("image")
-  //    .attr("xlink:href", "https://github.com/favicon.ico")
-  //    .attr("x", -8)
-  //    .attr("y", -8)
-  //    .attr("width", 16)
-  //    .attr("height", 16);
   node.append("circle")
     .attr("r", 10)
     .style("fill", function(d) { return color(d.group); });
@@ -57,17 +49,5 @@ d3.json("http://127.0.0.1:5001/restapi/network/d3jsgraph", function(error, json)
     node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
   });
 
-  // action to take on mouse click
-  function click() {
-      d3.select(this).select("text").transition()
-          .duration(750)
-          .attr("x", 22)
-          .style("stroke", "lightsteelblue")
-          .style("stroke-width", ".5px")
-          .style("font", "20px sans-serif");
-      d3.select(this).select("circle").transition()
-          .duration(750)
-          .attr("r", 16);
-  }
 
 });
\ No newline at end of file
diff --git a/src/emuvim/dashboard/js/main.js b/src/emuvim/dashboard/js/main.js
index 0fb707d..116bf25 100755
--- a/src/emuvim/dashboard/js/main.js
+++ b/src/emuvim/dashboard/js/main.js
@@ -66,27 +66,41 @@ function update_table_container(data)
     // clear table
     $("#table_container").empty();
     // header
-    $("#table_container").append('<tr class="tbl-head"><td>Datacenter</td><td>Container</td><td>Image</td><td>docker0</td><td>Status</td></tr>');
+    $("#table_container").append('<tr class="tbl-head"><td>Datacenter</td><td>Container</td><td>Image</td><td>docker0</td><td>Networking [datacenter port | interface | ip]</td></tr>');
     // fill table
     $.each(data, function(i, item) {
         var row_str = "";
-        row_str += '<tr class="tbl-row clickable_row" id="container_row_' + i +'">';
+        row_str += '<tr class="tbl-row clickable_row" id="container_row_' + item[0] +'">';
         row_str += '<td>' + item[1].datacenter + '</td>';
         row_str += '<td>' + item[0] + '</td>';
         row_str += '<td>' + item[1].image + '</td>';
-        row_str += '<td><code>' + item[1].docker_network + '<code></td>';
-        if(item[1].state.Status == "running")
-            row_str += '<td><span class="label label-success">running</span></td>';
-        else
-            row_str += '<td><span class="label label-danger">stopped</span></td>';
-        row_str += '<tr>';
-	$("#table_container").append(row_str);
+        row_str += '<td><code>' + item[1].docker_network + '</code></td>';
+        row_str += '<td><table class="interface_table" id="network_list_' + item[0] + '">';
+        //row_str += build_network_table(item[1].network, item[0]);
+        row_str += '</table></td>';
+        row_str += '</tr>';
+	    $("#table_container").append(row_str);
+	    build_network_table(item[1].network, item[0]);
     });
     $("#lbl_container_count").text(data.length);
     // update lateness counter
     LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 }
 
+function build_network_table(network_list, id)
+{
+    console.debug('network list ' + id)
+    console.debug(network_list)
+    var row_str = "";
+    network_list.forEach(function(interface) {
+        row_str += '<tr class="interface_row">';
+        row_str += '<td class="interface_port">' + interface.dc_portname + '</td>';
+        row_str += '<td class="interface name">' + interface.intf_name + '</td>';
+        row_str += '<td class="interface_ip">' + interface.ip + '</td>';
+        row_str += '</tr>';
+    });
+    $("#network_list_" + id).append(row_str)
+}
 
 function fetch_datacenter()
 {
@@ -171,8 +185,8 @@ $(document).ready(function(){
     $("#btn_connect").click(connect);
     $("#btn_disconnect").click(disconnect);
     */
-    setTimeout(fetch_datacenter, 1000);//fetch_datacenter();
-    setTimeout(fetch_container, 2000);//fetch_container();
+    setTimeout(fetch_datacenter, 500);//fetch_datacenter();
+    setTimeout(fetch_container, 1000);//fetch_container();
 
 
     // additional refresh on window focus
-- 
2.17.1