src/emuvim/dashboard/js/main.js

   1 /*
   2  Copyright (c) 2017 SONATA-NFV and Paderborn University
   3  ALL RIGHTS RESERVED.
   4
   5  Licensed under the Apache License, Version 2.0 (the "License");
   6  you may not use this file except in compliance with the License.
   7  You may obtain a copy of the License at
   8
   9     http://www.apache.org/licenses/LICENSE-2.0
  10
  11  Unless required by applicable law or agreed to in writing, software
  12  distributed under the License is distributed on an "AS IS" BASIS,
  13  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  See the License for the specific language governing permissions and
  15  limitations under the License.
  16
  17  Neither the name of the SONATA-NFV, Paderborn University
  18  nor the names of its contributors may be used to endorse or promote
  19  products derived from this software without specific prior written
  20  permission.
  21
  22  This work has been performed in the framework of the SONATA project,
  23  funded by the European Commission under Grant number 671517 through
  24  the Horizon 2020 and 5G-PPP programmes. The authors would like to
  25  acknowledge the contributions of their colleagues of the SONATA
  26  partner consortium (www.sonata-nfv.eu).
  27 */
  28 var API_HOST = "http://127.0.0.1:5001";
  29 var ERROR_ALERT = false;
  30 var TIMESTAMP = 0;
  31 var CONNECTED = false;
  32 var LATENESS_UPDATE_INTERVAL = 50;
  33 var DATA_UPDATE_INTERVAL = 1000 * 10;
  34 var LAST_UPDATE_TIMESTAMP_CONTAINER = 0;
  35 var LAST_UPDATE_TIMESTAMP_DATACENTER = 0;
  36
  37
  38 function update_lateness_loop() {
  39     lateness_datacenter= (Date.now() - LAST_UPDATE_TIMESTAMP_DATACENTER) / 1000;
  40     $("#lbl_lateness_datacenter").text("Lateness: " + Number(lateness_datacenter).toPrecision(3) + "s");
  41     lateness_container= (Date.now() - LAST_UPDATE_TIMESTAMP_CONTAINER) / 1000;
  42     $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container).toPrecision(3) + "s");
  43     // loop while connected
  44     if(CONNECTED)
  45         setTimeout(update_lateness_loop, LATENESS_UPDATE_INTERVAL)
  46 }
  47
  48
  49 function errorAjaxConnection()
  50 {
  51     // only do once
  52     if(!ERROR_ALERT)
  53     {
  54         ERROR_ALERT = true;
  55         // show message
  56         alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() {
  57             // callback
  58             ERROR_ALERT = false;
  59         });
  60     }
  61 }
  62
  63
  64 function update_table_datacenter(data)
  65 {
  66     console.debug(data)
  67     // clear table
  68     $("#table_datacenter").empty();
  69     // header
  70     $("#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>');
  71     // fill table
  72     $.each(data, function(i, item) {
  73         var row_str = "";
  74         row_str += '<tr class="tbl-row clickable_row" id="datacenter_row_' + i +'">';
  75         row_str += '<td>' + item.label + '1</td>';
  76         row_str += '<td>' + item.internalname + '</td>';
  77         row_str += '<td>' + item.switch + '</td>';
  78         row_str += '<td><span class="badge">' + item.n_running_containers + '</span></td>';
  79         //row_str += '<td><span class="badge">' + Object.keys(item.metadata).length + '</span></td>';
  80         row_str += '<td>' + item.vnf_list + '</span></td>';
  81         row_str += '<tr>';
  82         $("#table_datacenter").append(row_str);
  83     });
  84     $("#lbl_datacenter_count").text(data.length);
  85     // update lateness counter
  86     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
  87 }
  88
  89
  90 function update_table_container(data)
  91 {
  92     console.debug(data)
  93     // clear table
  94     $("#table_container").empty();
  95     // header
  96     $("#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>');
  97     // fill table
  98     $.each(data, function(i, item) {
  99         var row_str = "";
 100         row_str += '<tr class="tbl-row clickable_row" id="container_row_' + item[0] +'">';
 101         row_str += '<td>' + item[1].datacenter + '</td>';
 102         row_str += '<td>' + item[0] + '</td>';
 103         row_str += '<td>' + item[1].image + '</td>';
 104         row_str += '<td><code>' + item[1].docker_network + '</code></td>';
 105         row_str += '<td><table class="interface_table" id="network_list_' + item[0] + '">';
 106         //row_str += build_network_table(item[1].network, item[0]);
 107         row_str += '</table></td>';
 108         row_str += '</tr>';
 109             $("#table_container").append(row_str);
 110             build_network_table(item[1].network, item[0]);
 111     });
 112     $("#lbl_container_count").text(data.length);
 113     $("#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>')
 114     // update lateness counter
 115     LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 116 }
 117
 118 function build_network_table(network_list, id)
 119 {
 120     console.debug('network list ' + id)
 121     console.debug(network_list)
 122     var row_str = "";
 123     network_list.forEach(function(interface) {
 124         row_str += '<tr class="interface_row">';
 125         row_str += '<td class="interface_port">' + interface.dc_portname + '</td>';
 126         row_str += '<td class="interface_name">' + interface.intf_name + '</td>';
 127         row_str += '<td class="interface_ip">' + interface.ip + '</td>';
 128         row_str += '<td class="interface_mac">' + interface.mac + '</td>';
 129         row_str += '</tr>';
 130     });
 131     $("#network_list_" + id).append(row_str)
 132 }
 133
 134 function fetch_datacenter()
 135 {
 136     // do HTTP request and trigger gui update on success
 137     var request_url = API_HOST + "/restapi/datacenter";
 138     console.debug("fetching from: " + request_url);
 139     $.getJSON(request_url,  update_table_datacenter);
 140 }
 141
 142
 143 function fetch_container()
 144 {
 145     // do HTTP request and trigger gui update on success
 146     var request_url = API_HOST + "/restapi/compute";
 147     console.debug("fetching from: " + request_url);
 148     $.getJSON(request_url,  update_table_container);
 149 }
 150
 151
 152 function fetch_d3graph()
 153 {
 154     // do HTTP request and trigger gui update on success
 155     var request_url = API_HOST + "/restapi/network/d3jsgraph";
 156     console.debug("fetching from: " + request_url);
 157     //$.getJSON(request_url,  update_graph);
 158 }
 159
 160 function fetch_loop()
 161 {
 162     // only fetch if we are connected
 163     if(!CONNECTED)
 164         return;
 165
 166     // download data
 167     fetch_datacenter();
 168     fetch_container();
 169
 170     // loop while connected
 171     if(CONNECTED)
 172         setTimeout(fetch_loop, DATA_UPDATE_INTERVAL);
 173 }
 174
 175
 176 function connect()
 177 {
 178     console.info("connect()");
 179     // get host address
 180     API_HOST = "http://" + $("#text_api_host").val();
 181     console.debug("API address: " + API_HOST);
 182     // reset data
 183     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
 184     LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 185     CONNECTED = true;
 186     // restart lateness counter
 187     update_lateness_loop();
 188     // restart data fetch loop
 189     fetch_loop();
 190     // gui updates
 191     $("#btn_disconnect").removeClass("disabled");
 192     $("#btn_connect").addClass("disabled");
 193 }
 194
 195 function disconnect()
 196 {
 197     console.info("disconnect()");
 198     CONNECTED = false;
 199      // gui updates
 200     $("#btn_connect").removeClass("disabled");
 201     $("#btn_disconnect").addClass("disabled");
 202 }
 203
 204
 205 $(document).ready(function(){
 206     console.info("document ready");
 207     // setup global connection error handling
 208     /*
 209     $.ajaxSetup({
 210         "error": errorAjaxConnection
 211     });
 212
 213     // add listeners
 214     $("#btn_connect").click(connect);
 215     $("#btn_disconnect").click(disconnect);
 216     */
 217     setTimeout(fetch_datacenter, 500);//fetch_datacenter();
 218     setTimeout(fetch_container, 1000);//fetch_container();
 219
 220
 221     // additional refresh on window focus
 222     $(window).focus(function () {
 223         if(CONNECTED)
 224         {
 225             fetch_datacenter();
 226             fetch_container();
 227         }
 228     });
 229
 230 });