From: peusterm Date: Thu, 12 Jan 2017 18:08:34 +0000 (+0100) Subject: dashboard prototype X-Git-Tag: v3.1~49^2~1 X-Git-Url: https://osm.etsi.org/gitweb/?a=commitdiff_plain;h=f14b02a71fa09c206cdaee9140d274e253496c27;p=osm%2Fvim-emu.git dashboard prototype --- diff --git a/dashboard/css/main.css b/dashboard/css/main.css index d33299a..7b10dbc 100644 --- a/dashboard/css/main.css +++ b/dashboard/css/main.css @@ -15,7 +15,18 @@ body { .tbl-head { font-weight: bold; border-bottom: 1px solid #2c3e50; - background-color: #1a242f; + background-color: #c9ced3; +} + +.tbl-head > td { + padding-top: 4px; + padding-bottom: 4px; +} + +.tbl-row > td { + padding-top: 4px; + padding-bottom: 4px; + } .spacer { diff --git a/dashboard/index.html b/dashboard/index.html index 350e284..3c31bec 100644 --- a/dashboard/index.html +++ b/dashboard/index.html @@ -15,7 +15,7 @@ - + @@ -58,7 +58,7 @@
http:// - +
@@ -72,23 +72,9 @@
-
Emulated Datacenters 0Lateness: -
+
Emulated Datacenters  0Lateness: -
- - - - - - - - - - - - - - - +
LabelInt. NameSwitchNum. ContainersMetadata Items
sonata-pop1dc1dc1.s120
@@ -96,33 +82,11 @@
-
Running Containers 0Lateness: -
+
Running Containers  0Lateness: -
- - - - - - - - - - - - - - - - - - - - - - +
DatacenterContainerImagedocker0Status
sonata-pop1vnf1mpeuster/firewall172.10.4.12running
sonata-pop2vnf3mpeuster/l4_fw172.10.4.13running
-
(c) 2017 by SONATA Consortium and Paderborn University
diff --git a/dashboard/js/main.js b/dashboard/js/main.js index 928adf7..71741f2 100644 --- a/dashboard/js/main.js +++ b/dashboard/js/main.js @@ -1,83 +1,173 @@ var API_HOST = "http://127.0.0.1:5001"; -var ERROR_ALERT = true; +var ERROR_ALERT = false; var TIMESTAMP = 0; +var CONNECTED = false; +var LATENESS_UPDATE_INTERVAL = 50; +var DATA_UPDATE_INTERVAL = 1000 * 10; +var LAST_UPDATE_TIMESTAMP_CONTAINER = 0; +var LAST_UPDATE_TIMESTAMP_DATACENTER = 0; + + +function update_lateness_loop() { + lateness_datacenter= (Date.now() - LAST_UPDATE_TIMESTAMP_DATACENTER) / 1000; + $("#lbl_lateness_datacenter").text("Lateness: " + Number(lateness_datacenter).toPrecision(3) + "s"); + lateness_container= (Date.now() - LAST_UPDATE_TIMESTAMP_CONTAINER) / 1000; + $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container).toPrecision(3) + "s"); + // loop while connected + if(CONNECTED) + setTimeout(update_lateness_loop, LATENESS_UPDATE_INTERVAL) +} + +function errorAjaxConnection() +{ + // only do once + if(!ERROR_ALERT) + { + ERROR_ALERT = true; + // show message + alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() { + // callback + ERROR_ALERT = false; + }); + } +} -function updateMessageTable(msg_list) { - +function update_table_datacenter(data) +{ + console.debug(data) + // clear table + $("#table_datacenter").empty(); + // header + $("#table_datacenter").append('LabelInt. NameSwitchNum. ContainersMetadata Items'); + // fill table + $.each(data, function(i, item) { + var row_str = ""; + row_str += ''; + row_str += '' + item.label + '1'; + row_str += '' + item.internalname + ''; + row_str += '' + item.switch + ''; + row_str += '' + item.n_running_containers + ''; + row_str += '' + Object.keys(item.metadata).length + ''; + row_str += ''; + $("#table_datacenter").append(row_str); + }); + $("#lbl_datacenter_count").text(data.length); + // update lateness counter + LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now(); } -function updateMessageCount(msg_list) { - $("#lbl_msg_count").text(msg_list.length); + +function update_table_container(data) +{ + console.debug(data) + // clear table + $("#table_container").empty(); + // header + $("#table_container").append('DatacenterContainerImagedocker0Status'); + // fill table + $.each(data, function(i, item) { + var row_str = ""; + row_str += ''; + row_str += '' + item[1].datacenter + ''; + row_str += '' + item[0] + ''; + row_str += '' + item[1].image + ''; + row_str += '' + item[1].docker_network + ''; + if(item[1].state.Status == "running") + row_str += 'running'; + else + row_str += 'stopped'; + row_str += ''; + $("#table_container").append(row_str); + }); + $("#lbl_container_count").text(data.length); + // update lateness counter + LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now(); } -function fetchMessages() { - + +function fetch_datacenter() +{ + // do HTTP request and trigger gui update on success + var request_url = API_HOST + "/restapi/datacenter"; + console.debug("fetching from: " + request_url); + $.getJSON(request_url, update_table_datacenter); } -function autoFetchMessages() { - fetchMessages(); - // do periodic update - if(AUTO_REFRESH) - setTimeout(autoFetchMessages, AUTO_REFRESH_INTERVAL); +function fetch_container() +{ + // do HTTP request and trigger gui update on success + var request_url = API_HOST + "/restapi/compute"; + console.debug("fetching from: " + request_url); + $.getJSON(request_url, update_table_container); } -function updateLateness() { - lateness = (Date.now() - LAST_UPDATE_TIMESTAMP) / 1000; - $("#lbl_lateness").text("Lateness: " + Number(lateness).toPrecision(3) + "s") - setTimeout(updateLateness, LATENESS_UPDATE_INTERVAL) + +function fetch_loop() +{ + // only fetch if we are connected + if(!CONNECTED) + return; + + // download data + fetch_datacenter(); + fetch_container(); + + // loop while connected + if(CONNECTED) + setTimeout(fetch_loop, DATA_UPDATE_INTERVAL); } -function errorAjaxConnection() + +function connect() { - // only do once - if(!ERROR_ALERT) - { - ERROR_ALERT = true; - // show message - bootbox.alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() { - // callback - ERROR_ALERT = false; - }); - } + console.info("connect()"); + // get host address + API_HOST = "http://" + $("#text_api_host").val(); + console.debug("API address: " + API_HOST); + // reset data + LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now(); + LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now(); + CONNECTED = true; + // restart lateness counter + update_lateness_loop(); + // restart data fetch loop + fetch_loop(); + // gui updates + $("#btn_disconnect").removeClass("disabled"); + $("#btn_connect").addClass("disabled"); } -function change_auto_refresh(event) +function disconnect() { - console.debug("trigger btn_auto_refresh"); - AUTO_REFRESH = !AUTO_REFRESH; - if(AUTO_REFRESH) { - $("#btn_autorefresh").addClass("active"); - autoFetchMessages(); - } - else { - $("#btn_autorefresh").removeClass("active"); - } + console.info("disconnect()"); + CONNECTED = false; + // gui updates + $("#btn_connect").removeClass("disabled"); + $("#btn_disconnect").addClass("disabled"); } $(document).ready(function(){ console.info("document ready"); - // setup global connection error handling - $.ajaxSetup({ - "error": errorAjaxConnection - }); + // setup global connection error handling + $.ajaxSetup({ + "error": errorAjaxConnection + }); // add listeners - //TODO - - // activate message fetching - autoFetchMessages(); - LAST_UPDATE_TIMESTAMP = Date.now(); - updateLateness(); - + $("#btn_connect").click(connect); + $("#btn_disconnect").click(disconnect); - // refresh on window focus + // additional refresh on window focus $(window).focus(function () { - // TODO observe if this works well - fetchMessages(); + if(CONNECTED) + { + fetch_datacenter(); + fetch_container(); + } }); }); diff --git a/dashboard/son-emu-dashboard-screenshot.png b/dashboard/son-emu-dashboard-screenshot.png new file mode 100644 index 0000000..8274984 Binary files /dev/null and b/dashboard/son-emu-dashboard-screenshot.png differ