src/emuvim/dashboard/js/main_upb.js

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