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