// clear table
$("#table_datacenter").empty();
// header
- $("#table_datacenter").append('<tr class="tbl-head"><td>Label</td><td>Int. Name</td><td>Switch</td><td>Num. Containers</td><td>Metadata Items</td></tr>');
+ $("#table_datacenter").append('<tr class="tbl-head"><td>Label</td><td>Int. Name</td><td>Switch</td><td>Num. Containers</td><td>VNFs</td></tr>');
// fill table
$.each(data, function(i, item) {
var row_str = "";
row_str += '<td>' + item.internalname + '</td>';
row_str += '<td>' + item.switch + '</td>';
row_str += '<td><span class="badge">' + item.n_running_containers + '</span></td>';
- row_str += '<td><span class="badge">' + Object.keys(item.metadata).length + '</span></td>';
+ //row_str += '<td><span class="badge">' + Object.keys(item.metadata).length + '</span></td>';
+ row_str += '<td>' + item.vnf_list + '</span></td>';
row_str += '<tr>';
$("#table_datacenter").append(row_str);
});
// 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()
{
}
+function fetch_d3graph()
+{
+ // do HTTP request and trigger gui update on success
+ var request_url = API_HOST + "/restapi/network/d3jsgraph";
+ console.debug("fetching from: " + request_url);
+ //$.getJSON(request_url, update_graph);
+}
+
function fetch_loop()
{
// only fetch if we are connected
$(document).ready(function(){
console.info("document ready");
// setup global connection error handling
+ /*
$.ajaxSetup({
"error": errorAjaxConnection
});
// add listeners
$("#btn_connect").click(connect);
$("#btn_disconnect").click(disconnect);
+ */
+ setTimeout(fetch_datacenter, 500);//fetch_datacenter();
+ setTimeout(fetch_container, 1000);//fetch_container();
+
// additional refresh on window focus
$(window).focus(function () {