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 = "";  // set to a remote url if dashboard is not served by REST API server
  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; // 30 seconds
  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(2) + "s");
  41     lateness_container= (Date.now() - LAST_UPDATE_TIMESTAMP_CONTAINER) / 1000;
  42     $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container).toPrecision(2) + "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("API request failed. Is the emulator running?", function() {
  57         //    // callback
  58         //    ERROR_ALERT = false;
  59         //});
  60     }
  61     CONNECTED = false;
  62     console.error("API request failed. Is the emulator running?")
  63 }
  64
  65
  66 function update_table_datacenter(data)
  67 {
  68     console.debug(data)
  69     // clear table
  70     $("#table_datacenter").empty();
  71     // header
  72     $("#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>');
  73     // fill table
  74     $.each(data, function(i, item) {
  75         var row_str = "";
  76         row_str += '<tr class="tbl-row clickable_row" id="datacenter_row_' + i +'">';
  77         row_str += '<td>' + item.label + '</td>';
  78         row_str += '<td>' + item.internalname + '</td>';
  79         row_str += '<td>' + item.switch + '</td>';
  80         row_str += '<td><span class="badge">' + item.n_running_containers + '</span></td>';
  81         //row_str += '<td><span class="badge">' + Object.keys(item.metadata).length + '</span></td>';
  82         row_str += '<td>' + item.vnf_list + '</span></td>';
  83         row_str += '<tr>';
  84         $("#table_datacenter").append(row_str);
  85     });
  86     $("#lbl_datacenter_count").text(data.length);
  87     // update lateness counter
  88     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
  89 }
  90
  91
  92 function update_table_container(data)
  93 {
  94     console.debug(data)
  95     // clear table
  96     $("#table_container").empty();
  97     // header
  98     $("#table_container").append('<tr class="tbl-head"><td>Datacenter</td><td>Container</td><td>Image</td><td>docker0</td><td>Status</td></tr>');
  99     // fill table
 100     $.each(data, function(i, item) {
 101         var row_str = "";
 102         row_str += '<tr class="tbl-row clickable_row" id="container_row_' + i +'">';
 103         row_str += '<td>' + item[1].datacenter + '</td>';
 104         row_str += '<td>' + item[0] + '</td>';
 105         row_str += '<td>' + item[1].image + '</td>';
 106         row_str += '<td><code>' + item[1].docker_network + '<code></td>';
 107         if(item[1].state.Status == "running")
 108             row_str += '<td><span class="label label-success">running</span></td>';
 109         else
 110             row_str += '<td><span class="label label-danger">stopped</span></td>';
 111         row_str += '<tr>';
 112         $("#table_container").append(row_str);
 113     });
 114     $("#lbl_container_count").text(data.length);
 115     // update lateness counter
 116     LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 117 }
 118
 119
 120 function fetch_datacenter()
 121 {
 122     // do HTTP request and trigger gui update on success
 123     var request_url = API_HOST + "/restapi/datacenter";
 124     console.debug("fetching from: " + request_url);
 125     $.getJSON(request_url,  update_table_datacenter);
 126 }
 127
 128
 129 function fetch_container()
 130 {
 131     // do HTTP request and trigger gui update on success
 132     var request_url = API_HOST + "/restapi/compute";
 133     console.debug("fetching from: " + request_url);
 134     $.getJSON(request_url,  update_table_container);
 135 }
 136
 137
 138 function fetch_loop()
 139 {
 140     // only fetch if we are connected
 141     if(!CONNECTED)
 142         return;
 143
 144     // download data
 145     fetch_datacenter();
 146     fetch_container();
 147
 148     // loop while connected
 149     if(CONNECTED)
 150         setTimeout(fetch_loop, DATA_UPDATE_INTERVAL);
 151 }
 152
 153
 154 function connect()
 155 {
 156     console.info("connect()");
 157     // get host address
 158     //API_HOST = "http://" + $("#text_api_host").val();
 159     console.debug("API address: " + API_HOST);
 160     // reset data
 161     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
 162     LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 163     CONNECTED = true;
 164     // restart lateness counter
 165     update_lateness_loop();
 166     // restart data fetch loop
 167     fetch_loop();
 168 }
 169
 170
 171 $(document).ready(function(){
 172     console.info("document ready");
 173     // setup global connection error handling
 174
 175     $.ajaxSetup({
 176         "error": errorAjaxConnection
 177     });
 178
 179     // connect
 180     connect();
 181
 182     // additional refresh on window focus
 183     $(window).focus(function () {
 184         if(CONNECTED)
 185         {
 186             fetch_datacenter();
 187             fetch_container();
 188         }
 189     });
 190
 191 });