1 var API_HOST
= "http://127.0.0.1:5001";
2 var ERROR_ALERT
= false;
5 var LATENESS_UPDATE_INTERVAL
= 50;
6 var DATA_UPDATE_INTERVAL
= 1000 * 10;
7 var LAST_UPDATE_TIMESTAMP_CONTAINER
= 0;
8 var LAST_UPDATE_TIMESTAMP_DATACENTER
= 0;
11 function update_lateness_loop() {
12 lateness_datacenter
= (Date
.now() - LAST_UPDATE_TIMESTAMP_DATACENTER
) / 1000;
13 $("#lbl_lateness_datacenter").text("Lateness: " + Number(lateness_datacenter
).toPrecision(3) + "s");
14 lateness_container
= (Date
.now() - LAST_UPDATE_TIMESTAMP_CONTAINER
) / 1000;
15 $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container
).toPrecision(3) + "s");
16 // loop while connected
18 setTimeout(update_lateness_loop
, LATENESS_UPDATE_INTERVAL
)
22 function errorAjaxConnection()
29 alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() {
37 function update_table_datacenter(data
)
41 $("#table_datacenter").empty();
43 $("#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>');
45 $.each(data
, function(i
, item
) {
47 row_str
+= '<tr class="tbl-row clickable_row" id="datacenter_row_' + i
+'">';
48 row_str
+= '<td>' + item
.label
+ '1</td>';
49 row_str
+= '<td>' + item
.internalname
+ '</td>';
50 row_str
+= '<td>' + item
.switch + '</td>';
51 row_str
+= '<td><span class="badge">' + item
.n_running_containers
+ '</span></td>';
52 //row_str += '<td><span class="badge">' + Object.keys(item.metadata).length + '</span></td>';
53 row_str
+= '<td>' + item
.vnf_list
+ '</span></td>';
55 $("#table_datacenter").append(row_str
);
57 $("#lbl_datacenter_count").text(data
.length
);
58 // update lateness counter
59 LAST_UPDATE_TIMESTAMP_DATACENTER
= Date
.now();
63 function update_table_container(data
)
67 $("#table_container").empty();
69 $("#table_container").append('<tr class="tbl-head"><td>Datacenter</td><td>Container</td><td>Image</td><td>docker0</td><td>--Networking--<div id="table_network"></div></td></tr>');
71 $.each(data
, function(i
, item
) {
73 row_str
+= '<tr class="tbl-row clickable_row" id="container_row_' + item
[0] +'">';
74 row_str
+= '<td>' + item
[1].datacenter
+ '</td>';
75 row_str
+= '<td>' + item
[0] + '</td>';
76 row_str
+= '<td>' + item
[1].image
+ '</td>';
77 row_str
+= '<td><code>' + item
[1].docker_network
+ '</code></td>';
78 row_str
+= '<td><table class="interface_table" id="network_list_' + item
[0] + '">';
79 //row_str += build_network_table(item[1].network, item[0]);
80 row_str
+= '</table></td>';
82 $("#table_container").append(row_str
);
83 build_network_table(item
[1].network
, item
[0]);
85 $("#lbl_container_count").text(data
.length
);
86 $("#table_network").append('<table class="interface_table"><tr class="interface_row"><td class="interface_port">datacenter port</td><td class="interface_name">interface</td><td class="interface_ip">ip</td><td class="interface_mac">mac</td></tr></table>')
87 // update lateness counter
88 LAST_UPDATE_TIMESTAMP_CONTAINER
= Date
.now();
91 function build_network_table(network_list
, id
)
93 console
.debug('network list ' + id
)
94 console
.debug(network_list
)
96 network_list
.forEach(function(interface) {
97 row_str
+= '<tr class="interface_row">';
98 row_str
+= '<td class="interface_port">' + interface.dc_portname
+ '</td>';
99 row_str
+= '<td class="interface_name">' + interface.intf_name
+ '</td>';
100 row_str
+= '<td class="interface_ip">' + interface.ip
+ '</td>';
101 row_str
+= '<td class="interface_mac">' + interface.mac
+ '</td>';
104 $("#network_list_" + id
).append(row_str
)
107 function fetch_datacenter()
109 // do HTTP request and trigger gui update on success
110 var request_url
= API_HOST
+ "/restapi/datacenter";
111 console
.debug("fetching from: " + request_url
);
112 $.getJSON(request_url
, update_table_datacenter
);
116 function fetch_container()
118 // do HTTP request and trigger gui update on success
119 var request_url
= API_HOST
+ "/restapi/compute";
120 console
.debug("fetching from: " + request_url
);
121 $.getJSON(request_url
, update_table_container
);
125 function fetch_d3graph()
127 // do HTTP request and trigger gui update on success
128 var request_url
= API_HOST
+ "/restapi/network/d3jsgraph";
129 console
.debug("fetching from: " + request_url
);
130 //$.getJSON(request_url, update_graph);
133 function fetch_loop()
135 // only fetch if we are connected
143 // loop while connected
145 setTimeout(fetch_loop
, DATA_UPDATE_INTERVAL
);
151 console
.info("connect()");
153 API_HOST
= "http://" + $("#text_api_host").val();
154 console
.debug("API address: " + API_HOST
);
156 LAST_UPDATE_TIMESTAMP_DATACENTER
= Date
.now();
157 LAST_UPDATE_TIMESTAMP_CONTAINER
= Date
.now();
159 // restart lateness counter
160 update_lateness_loop();
161 // restart data fetch loop
164 $("#btn_disconnect").removeClass("disabled");
165 $("#btn_connect").addClass("disabled");
168 function disconnect()
170 console
.info("disconnect()");
173 $("#btn_connect").removeClass("disabled");
174 $("#btn_disconnect").addClass("disabled");
178 $(document
).ready(function(){
179 console
.info("document ready");
180 // setup global connection error handling
183 "error": errorAjaxConnection
187 $("#btn_connect").click(connect);
188 $("#btn_disconnect").click(disconnect);
190 setTimeout(fetch_datacenter
, 500);//fetch_datacenter();
191 setTimeout(fetch_container
, 1000);//fetch_container();
194 // additional refresh on window focus
195 $(window
).focus(function () {