dashboard prototype

diff --git a/dashboard/css/main.css b/dashboard/css/main.css
index d33299a..7b10dbc 100644 (file)
--- a/dashboard/css/main.css
+++ b/dashboard/css/main.css
@@ -15,7 +15,18 @@ body {
 .tbl-head {
     font-weight: bold;
     border-bottom: 1px solid #2c3e50;
-    background-color: #1a242f;
+    background-color: #c9ced3;
+}
+
+.tbl-head > td {
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.tbl-row > td {
+    padding-top: 4px;
+    padding-bottom: 4px;
+
 }
 
 .spacer {

diff --git a/dashboard/index.html b/dashboard/index.html
index 350e284..3c31bec 100644 (file)
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -15,7 +15,7 @@
 
     <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jss" type="text/javascript"></script>
+    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jss" type="text/javascript"></script>-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js" type="text/javascript"></script>
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@@ -58,7 +58,7 @@
       <form class="navbar-form navbar-right">
        <div class="input-group">
           <span class="input-group-addon">http://</span>
-         <input type="text" class="form-control" placeholder="api-url.or.ip" value="127.0.0.1:5001" id="text_api_host" data-provide="typeahead">
+         <input type="text" class="form-control" placeholder="api-url.or.ip" value="sonata-emulator.cs.upb.de:5001" id="text_api_host" data-provide="typeahead" size="30">
        </div>
        <button type="button" class="btn btn-success" id="btn_connect">Connect &nbsp;<span class="glyphicon glyphicon-play-circle"></span></button>
        <button type="button" class="btn btn-danger disabled" id="btn_disconnect">Disconnect &nbsp;<span class="glyphicon glyphicon-off"></span></button>
@@ -72,23 +72,9 @@
 
 <div class="panel panel-primary">
   <!-- Default panel contents -->
-  <div class="panel-heading"><span>Emulated Datacenters</span> <span class="badge" id="lbl_msg_count">0</span><span class="pull-right" id="lbl_lateness">Lateness: -</span></div>
+  <div class="panel-heading"><span>Emulated Datacenters</span>&nbsp;&nbsp;<span class="badge" id="lbl_datacenter_count">0</span><span class="pull-right" id="lbl_lateness_datacenter">Lateness: -</span></div>
   <!-- Table -->
-  <table class="table table-striped table-hover" id="table_messages">
-    <tr class="tbl-head">
-      <td>Label</td>
-      <td>Int. Name</td>
-      <td>Switch</td>
-      <td>Num. Containers</td>
-      <td>Metadata Items</td>
-    </tr>
-    <tr>
-      <td>sonata-pop1</td>
-      <td>dc1</td>
-      <td>dc1.s1</td>
-      <td><span class="badge">2</span></td>
-      <td><span class="badge">0</span></td>
-    </tr>
+  <table class="table table-striped table-hover" id="table_datacenter">
   </table>
 </div>
 
@@ -96,33 +82,11 @@
  
 <div class="panel panel-primary">
   <!-- Default panel contents -->
-  <div class="panel-heading"><span>Running Containers</span> <span class="badge" id="lbl_msg_count">0</span><span class="pull-right" id="lbl_lateness">Lateness: -</span></div>
+  <div class="panel-heading"><span>Running Containers</span>&nbsp;&nbsp;<span class="badge" id="lbl_container_count">0</span><span class="pull-right" id="lbl_lateness_container">Lateness: -</span></div>
   <!-- Table -->
-  <table class="table table-striped table-hover" id="table_messages">
-    <tr class="tbl-head">
-      <td>Datacenter</td>
-      <td>Container</td>
-      <td>Image</td>
-      <td>docker0</td>
-      <td>Status</td>
-    </tr>
-    <tr>
-      <td>sonata-pop1</td>
-      <td>vnf1</td>
-      <td>mpeuster/firewall</td>
-      <td><code>172.10.4.12</code></td>
-      <td><span class="label label-success">running</span></td>
-    </tr>
-     <tr>
-      <td>sonata-pop2</td>
-      <td>vnf3</td>
-      <td>mpeuster/l4_fw</td>
-      <td><code>172.10.4.13</code></td>
-      <td><span class="label label-success">running</span></td>
-    </tr>
+  <table class="table table-striped table-hover" id="table_container">
   </table>
 </div>
-
 </div>
 
 <footer class="footer text-center small">(c) 2017 by SONATA Consortium and Paderborn University</footer>

diff --git a/dashboard/js/main.js b/dashboard/js/main.js
index 928adf7..71741f2 100644 (file)
--- a/dashboard/js/main.js
+++ b/dashboard/js/main.js
@@ -1,83 +1,173 @@
 var API_HOST = "http://127.0.0.1:5001";
-var ERROR_ALERT = true;
+var ERROR_ALERT = false;
 var TIMESTAMP = 0;
+var CONNECTED = false;
+var LATENESS_UPDATE_INTERVAL = 50;
+var DATA_UPDATE_INTERVAL = 1000 * 10;
+var LAST_UPDATE_TIMESTAMP_CONTAINER = 0;
+var LAST_UPDATE_TIMESTAMP_DATACENTER = 0;
+
+
+function update_lateness_loop() {
+    lateness_datacenter= (Date.now() - LAST_UPDATE_TIMESTAMP_DATACENTER) / 1000;
+    $("#lbl_lateness_datacenter").text("Lateness: " + Number(lateness_datacenter).toPrecision(3) + "s");
+    lateness_container= (Date.now() - LAST_UPDATE_TIMESTAMP_CONTAINER) / 1000;
+    $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container).toPrecision(3) + "s");
+    // loop while connected
+    if(CONNECTED)
+        setTimeout(update_lateness_loop, LATENESS_UPDATE_INTERVAL)
+}
+
 
+function errorAjaxConnection()
+{
+    // only do once
+    if(!ERROR_ALERT)
+    {
+        ERROR_ALERT = true;
+        // show message
+        alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() {
+            // callback
+            ERROR_ALERT = false;
+        });
+    }
+}
 
 
-function updateMessageTable(msg_list) {
-   
+function update_table_datacenter(data)
+{
+    console.debug(data)
+    // clear table
+    $("#table_datacenter").empty();
+    // header
+    $("#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>');
+    // fill table
+    $.each(data, function(i, item) {
+        var row_str = "";
+        row_str += '<tr class="tbl-row clickable_row" id="datacenter_row_' + i +'">';
+        row_str += '<td>' + item.label + '1</td>';
+        row_str += '<td>' + item.internalname + '</td>';
+        row_str += '<td>' + item.switch + '</td>';
+        row_str += '<td><span class="badge">' + item.n_running_containers + '</span></td>';
+        row_str += '<td><span class="badge">' + Object.keys(item.metadata).length + '</span></td>';
+        row_str += '<tr>';
+       $("#table_datacenter").append(row_str);
+    });
+    $("#lbl_datacenter_count").text(data.length);
+    // update lateness counter
+    LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
 }
 
-function updateMessageCount(msg_list) {
-    $("#lbl_msg_count").text(msg_list.length);
+
+function update_table_container(data)
+{
+    console.debug(data)
+    // clear table
+    $("#table_container").empty();
+    // header
+    $("#table_container").append('<tr class="tbl-head"><td>Datacenter</td><td>Container</td><td>Image</td><td>docker0</td><td>Status</td></tr>');
+    // fill table
+    $.each(data, function(i, item) {
+        var row_str = "";
+        row_str += '<tr class="tbl-row clickable_row" id="container_row_' + i +'">';
+        row_str += '<td>' + item[1].datacenter + '</td>';
+        row_str += '<td>' + item[0] + '</td>';
+        row_str += '<td>' + item[1].image + '</td>';
+        row_str += '<td><code>' + item[1].docker_network + '<code></td>';
+        if(item[1].state.Status == "running")
+            row_str += '<td><span class="label label-success">running</span></td>';
+        else
+            row_str += '<td><span class="label label-danger">stopped</span></td>';
+        row_str += '<tr>';
+       $("#table_container").append(row_str);
+    });
+    $("#lbl_container_count").text(data.length);
+    // update lateness counter
+    LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
 }
 
-function fetchMessages() {
-   
+
+function fetch_datacenter()
+{
+    // do HTTP request and trigger gui update on success
+    var request_url = API_HOST + "/restapi/datacenter";
+    console.debug("fetching from: " + request_url);
+    $.getJSON(request_url,  update_table_datacenter);
 }
 
 
-function autoFetchMessages() {
-    fetchMessages();
-    // do periodic update
-    if(AUTO_REFRESH)
-           setTimeout(autoFetchMessages, AUTO_REFRESH_INTERVAL);
+function fetch_container()
+{
+    // do HTTP request and trigger gui update on success
+    var request_url = API_HOST + "/restapi/compute";
+    console.debug("fetching from: " + request_url);
+    $.getJSON(request_url,  update_table_container);
 }
 
-function updateLateness() {
-    lateness = (Date.now() - LAST_UPDATE_TIMESTAMP) / 1000;
-    $("#lbl_lateness").text("Lateness: " + Number(lateness).toPrecision(3) + "s")
-    setTimeout(updateLateness, LATENESS_UPDATE_INTERVAL)
+
+function fetch_loop()
+{
+    // only fetch if we are connected
+    if(!CONNECTED)
+        return;
+
+    // download data
+    fetch_datacenter();
+    fetch_container();
+    
+    // loop while connected
+    if(CONNECTED)
+        setTimeout(fetch_loop, DATA_UPDATE_INTERVAL);
 }
 
-function errorAjaxConnection()
+
+function connect()
 {
-    // only do once
-    if(!ERROR_ALERT)
-    {
-        ERROR_ALERT = true;
-        // show message
-        bootbox.alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() {
-            // callback
-            ERROR_ALERT = false;
-        });
-    }
+    console.info("connect()");
+    // get host address
+    API_HOST = "http://" + $("#text_api_host").val();
+    console.debug("API address: " + API_HOST);
+    // reset data
+    LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
+    LAST_UPDATE_TIMESTAMP_CONTAINER = Date.now();
+    CONNECTED = true;
+    // restart lateness counter
+    update_lateness_loop();
+    // restart data fetch loop
+    fetch_loop();
+    // gui updates
+    $("#btn_disconnect").removeClass("disabled");
+    $("#btn_connect").addClass("disabled");
 }
 
-function change_auto_refresh(event)
+function disconnect()
 {
-    console.debug("trigger btn_auto_refresh");
-    AUTO_REFRESH = !AUTO_REFRESH;
-    if(AUTO_REFRESH) {
-        $("#btn_autorefresh").addClass("active");
-        autoFetchMessages();
-    }
-    else {
-        $("#btn_autorefresh").removeClass("active");
-    }
+    console.info("disconnect()");
+    CONNECTED = false;
+     // gui updates
+    $("#btn_connect").removeClass("disabled");
+    $("#btn_disconnect").addClass("disabled");
 }
 
 
 $(document).ready(function(){
     console.info("document ready");
-       // setup global connection error handling
-       $.ajaxSetup({
-      "error": errorAjaxConnection
-       });
+    // setup global connection error handling
+    $.ajaxSetup({
+        "error": errorAjaxConnection
+    });
 
     // add listeners
-    //TODO
-
-    // activate message fetching
-    autoFetchMessages();
-    LAST_UPDATE_TIMESTAMP = Date.now();
-    updateLateness();
-
+    $("#btn_connect").click(connect);
+    $("#btn_disconnect").click(disconnect);
 
-    // refresh on window focus
+    // additional refresh on window focus
     $(window).focus(function () {
-        // TODO observe if this works well
-        fetchMessages();
+        if(CONNECTED)
+        {
+            fetch_datacenter();
+            fetch_container();  
+        }
     });
 
 });

diff --git a/dashboard/son-emu-dashboard-screenshot.png b/dashboard/son-emu-dashboard-screenshot.png
new file mode 100644 (file)
index 0000000..8274984
Binary files /dev/null and b/dashboard/son-emu-dashboard-screenshot.png differ