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