src/emuvim/dashboard/js/main.js

   1 var API_HOST = "http://127.0.0.1:5001";
   2 var ERROR_ALERT = false;
   3 var TIMESTAMP = 0;
   4 var CONNECTED = 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;
   9
  10
  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
  17     if(CONNECTED)
  18         setTimeout(update_lateness_loop, LATENESS_UPDATE_INTERVAL)
  19 }
  20
  21
  22 function errorAjaxConnection()
  23 {
  24     // only do once
  25     if(!ERROR_ALERT)
  26     {
  27         ERROR_ALERT = true;
  28         // show message
  29         alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() {
  30             // callback
  31             ERROR_ALERT = false;
  32         });
  33     }
  34 }
  35
  36
  37 function update_table_datacenter(data)
  38 {
  39     console.debug(data)
  40     // clear table
  41     $("#table_datacenter").empty();
  42     // header
  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>');
  44     // fill table
  45     $.each(data, function(i, item) {
  46         var row_str = "";
  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>';
  54         row_str += '<tr>';
  55         $("#table_datacenter").append(row_str);
  56     });
  57     $("#lbl_datacenter_count").text(data.length);
  58     // update lateness counter
  59     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
  60 }
  61
  62
  63 function update_table_container(data)
  64 {
  65     console.debug(data)
  66     // clear table
  67     $("#table_container").empty();
  68     // header
  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>');
  70     // fill table
  71     $.each(data, function(i, item) {
  72         var row_str = "";
  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>';
  81         row_str += '</tr>';
  82             $("#table_container").append(row_str);
  83             build_network_table(item[1].network, item[0]);
  84     });
  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();
  89 }
  90
  91 function build_network_table(network_list, id)
  92 {
  93     console.debug('network list ' + id)
  94     console.debug(network_list)
  95     var row_str = "";
  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>';
 102         row_str += '</tr>';
 103     });
 104     $("#network_list_" + id).append(row_str)
 105 }
 106
 107 function fetch_datacenter()
 108 {
 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);
 113 }
 114
 115
 116 function fetch_container()
 117 {
 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);
 122 }
 123
 124
 125 function fetch_d3graph()
 126 {
 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);
 131 }
 132
 133 function fetch_loop()
 134 {
 135     // only fetch if we are connected
 136     if(!CONNECTED)
 137         return;
 138
 139     // download data
 140     fetch_datacenter();
 141     fetch_container();
 142
 143     // loop while connected
 144     if(CONNECTED)
 145         setTimeout(fetch_loop, DATA_UPDATE_INTERVAL);
 146 }
 147
 148
 149 function connect()
 150 {
 151     console.info("connect()");
 152     // get host address
 153     API_HOST = "http://" + $("#text_api_host").val();
 154     console.debug("API address: " + API_HOST);
 155     // reset data
 156     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
 157     LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 158     CONNECTED = true;
 159     // restart lateness counter
 160     update_lateness_loop();
 161     // restart data fetch loop
 162     fetch_loop();
 163     // gui updates
 164     $("#btn_disconnect").removeClass("disabled");
 165     $("#btn_connect").addClass("disabled");
 166 }
 167
 168 function disconnect()
 169 {
 170     console.info("disconnect()");
 171     CONNECTED = false;
 172      // gui updates
 173     $("#btn_connect").removeClass("disabled");
 174     $("#btn_disconnect").addClass("disabled");
 175 }
 176
 177
 178 $(document).ready(function(){
 179     console.info("document ready");
 180     // setup global connection error handling
 181     /*
 182     $.ajaxSetup({
 183         "error": errorAjaxConnection
 184     });
 185
 186     // add listeners
 187     $("#btn_connect").click(connect);
 188     $("#btn_disconnect").click(disconnect);
 189     */
 190     setTimeout(fetch_datacenter, 500);//fetch_datacenter();
 191     setTimeout(fetch_container, 1000);//fetch_container();
 192
 193
 194     // additional refresh on window focus
 195     $(window).focus(function () {
 196         if(CONNECTED)
 197         {
 198             fetch_datacenter();
 199             fetch_container();
 200         }
 201     });
 202
 203 });