update dashboard to display ip adresses
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 @@
.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 @@
.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 @@
.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 @@
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 @@
// 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 @@
$("#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