Fix/update: Simplified emulator dashboard that only shows running containers and...
authorpeusterm <manuel.peuster@uni-paderborn.de>
Fri, 19 May 2017 08:25:01 +0000 (10:25 +0200)
committerpeusterm <manuel.peuster@uni-paderborn.de>
Fri, 19 May 2017 08:25:01 +0000 (10:25 +0200)
src/emuvim/api/rest/rest_api_endpoint.py
src/emuvim/dashboard/index_upb.html
src/emuvim/dashboard/js/main_upb.js

index 891f95d..10b6c26 100755 (executable)
@@ -130,7 +130,11 @@ class RestApiEndpoint(object):
         logging.info("Started API endpoint @ http://%s:%d" % (self.ip, self.port))
 
     def _start_flask(self):
-        #self.app.run(self.ip, self.port, debug=True, use_reloader=False)
+        #self.app.run(self.ip, self.port, debug=False, use_reloader=False)
         #this should be a more production-fit http-server
-        http_server = WSGIServer((self.ip, self.port), self.app)
+        #self.app.logger.setLevel(logging.ERROR)
+        http_server = WSGIServer((self.ip, self.port),
+                                 self.app,
+                                 log=open("/dev/null", "w")  # This disables HTTP request logs to not mess up the CLI when e.g. the auto-updated dashboard is used
+        )
         http_server.serve_forever()
index 485a6b1..cbff5e0 100755 (executable)
@@ -25,7 +25,7 @@
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 
-    <script src="js/main.js" type="text/javascript"></script>
+    <script src="js/main_upb.js" type="text/javascript"></script>
 
 
 </head>
       <div class="col-sm-4" id="logo"><a href="http://sonata-nfv.eu" target="_blank"><img src="img/SONATA_new.png" alt="SONATA Logo" width="252" height="70"></a></div>
     </div>
 
-<nav class="navbar navbar-default">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-    </div>
-
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <div class="navbar-form navbar- navbar-btn btn-group" role="group" aria-label="category">
-          <!--<button type="button" class="btn btn-default active" id="btn_tab_pop">Datacenter List</button>-->
-          <!--<button type="button" class="btn btn-default" id="btn_tab_container">Container List</button>-->
-          <!--<button type="button" class="btn btn-default" id="btn_tab_other">Other</button> -->
-      </div>
-      <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="localhost: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>
-               </form> 
-    </div><!-- /.navbar-collapse -->
-  </div><!-- /.container-fluid -->
-</nav>
 </div>
   <div id="content">
 
 
 </div>
 
-<footer class="footer text-center small">(c) 2017 by SONATA Consortium and Paderborn University and IMEC</footer>
+<footer class="footer text-center small">(c) 2017 by SONATA Consortium, Paderborn University and IMEC</footer>
 
 
 </body>
index 0fb707d..619702f 100755 (executable)
@@ -1,18 +1,18 @@
-var API_HOST = "http://127.0.0.1:5001";
+var API_HOST = "";  // set to a remote url if dashboard is not served by REST API server
 var ERROR_ALERT = false;
 var TIMESTAMP = 0;
 var CONNECTED = false;
 var LATENESS_UPDATE_INTERVAL = 50;
-var DATA_UPDATE_INTERVAL = 1000 * 10;
+var DATA_UPDATE_INTERVAL = 1000 * 2;
 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");
+    $("#lbl_lateness_datacenter").text("Lateness: " + Number(lateness_datacenter).toPrecision(2) + "s");
     lateness_container= (Date.now() - LAST_UPDATE_TIMESTAMP_CONTAINER) / 1000;
-    $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container).toPrecision(3) + "s");
+    $("#lbl_lateness_container").text("Lateness: " + Number(lateness_container).toPrecision(2) + "s");
     // loop while connected
     if(CONNECTED)
         setTimeout(update_lateness_loop, LATENESS_UPDATE_INTERVAL)
@@ -26,11 +26,12 @@ function errorAjaxConnection()
     {
         ERROR_ALERT = true;
         // show message
-        alert("ERROR!\nAPI request failed.\n\n Please check the backend connection.", function() {
+        alert("API request failed. Is the emulator running?", function() {
             // callback
             ERROR_ALERT = false;
         });
     }
+    CONNECTED = false;
 }
 
 
@@ -106,14 +107,6 @@ function fetch_container()
 }
 
 
-function fetch_d3graph()
-{
-    // do HTTP request and trigger gui update on success
-    var request_url = API_HOST + "/restapi/network/d3jsgraph";
-    console.debug("fetching from: " + request_url);
-    //$.getJSON(request_url,  update_graph);
-}
-
 function fetch_loop()
 {
     // only fetch if we are connected
@@ -134,7 +127,7 @@ function connect()
 {
     console.info("connect()");
     // get host address
-    API_HOST = "http://" + $("#text_api_host").val();
+    //API_HOST = "http://" + $("#text_api_host").val();
     console.debug("API address: " + API_HOST);
     // reset data
     LAST_UPDATE_TIMESTAMP_DATACENTER = Date.now();
@@ -144,36 +137,19 @@ function connect()
     update_lateness_loop();
     // restart data fetch loop
     fetch_loop();
-    // gui updates
-    $("#btn_disconnect").removeClass("disabled");
-    $("#btn_connect").addClass("disabled");
-}
-
-function disconnect()
-{
-    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
     });
 
-    // add listeners
-    $("#btn_connect").click(connect);
-    $("#btn_disconnect").click(disconnect);
-    */
-    setTimeout(fetch_datacenter, 1000);//fetch_datacenter();
-    setTimeout(fetch_container, 2000);//fetch_container();
-
+    // connect
+    connect();
 
     // additional refresh on window focus
     $(window).focus(function () {