From ccef69d14d7601b0d93ae0f5c10edd202b7b500c Mon Sep 17 00:00:00 2001
From: Stephan Schwaer
Date: Tue, 26 May 2015 18:26:35 +0200
Subject: Fixed graphn scaling

---
 static/status-dnbd3.html | 73 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 15 deletions(-)

(limited to 'static')

diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 5f02fa3..1ac6155 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -148,7 +148,7 @@ function myGraph(el) {
     var updateBounds = function() {
         var width = window.innerWidth;
         // Width for the graph and the statistics div
-        w = width/2;
+        w = width/3*2;
         // Chart needs to fit under the graph and the statistics
         h = window.innerHeight - 150;
         vis.attr("width", w);
@@ -157,7 +157,7 @@ function myGraph(el) {
         $(el).attr("width", w);
         $(el).attr("height", h);
         // Positions for statistics and the traffic graph
-        $("#statistics").attr("width", w).css("width", w + "px").css("left", w + "px");
+        $("#statistics").attr("width", w/2).css("width", w/2 + "px").css("left", w + "px");
         $("#statistics").attr("height", h).css("height", h + "px");
         $("#traffic").attr("width", width).css("top", h + "px");
     }
@@ -295,19 +295,24 @@ graph = new myGraph("#graph");
 var servers = {};
 var serverCount = 0;
 
+var lastTime = 0;
+
 // Get new data
 setInterval( function() {
     $.get('/data.json', function(data) {
+        if (data.timestamp < lastTime) lastTime = data.timestamp;
+        if(data.timestamp === lastTime) return;
         var g = data.graph;
         var stats = data.servers;
         updateGraph(g, data);
         updateTrafficGraph(stats, data);
         updateTextStatistics(stats);
-        }, 'json').always(function() {
-            graph.decay();
-            graph.update();
-            });
-        }, 2000);
+        lastTime = data.timestamp;
+}, 'json').always(function() {
+    graph.decay();
+    graph.update();
+    });
+}, 2000);
 
 // Update data of the graph
 function updateGraph(g, data){
@@ -331,33 +336,71 @@ function updateTextStatistics(stats){
                     server = document.getElementById(makeId("b", stats[i].address));
 
                 }
+            var sent = Math.floor(stats[i].bytesSent / Math.pow(1024, 3));
+            var received = Math.floor(stats[i].bytesReceived / Math.pow(1024, 3));
+            var unitSent = " GiB";
+            var unitReceived = " GiB";
+            if (sent > 1024) {
+                sent = Math.round((sent/1024)*100)/100;
+                unitSent = " TiB";
+            }
+            if (received > 1024) {
+                received = Math.round((received/1024)*100)/100;
+                unitReceived = " TiB";
+            }
+
+            // Generate the HTML string
             server.innerHTML = "<p><b> Server: " + stats[i].address + "</b><br>"
                 + "Number of clients: "
                 + stats[i].clientCount + "<br>"
                 + "uptime: " + Math.floor(stats[i].uptime / (3600 * 24)) + "d "
                 + Math.floor(stats[i].uptime / 3600) % 24 + "h " + Math.floor((stats[i].uptime) / 60) % 60 + "min" + "<br>"
-                + "Sent: " + Math.floor(stats[i].bytesSent / Math.pow(1024, 3)) + "GiB <br>"
-                + "Received: " + Math.floor(stats[i].bytesReceived / Math.pow(1024, 3)) + "GiB </p>";
+                + "Sent: " + sent + unitSent  + " <br>"
+                + "Received: " + received + unitReceived + " </p>";
         }
     }
 }
 
+
 // Update the traffic graph
 function updateTrafficGraph(stats, data){
     if (stats) {
         for (var i = 0; i < stats.length; ++i) {
             var server = servers[stats[i].address];
             if (!server) {
-                servers[stats[i].address] = server = { 'lastTime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ };
-                server.color = colorList(server.index);
+                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ };
+                server.color = colorList(stats[i].address);
                 smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
+//                console.log("Added");
             }
-            if (server['lastTime'] != 0) {
-                server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - server.lastTime));
+            // Server seems to have rebootet, redo values but add no point to chart.
+            if (server['lastUptime'] > stats[i].uptime) {
+                server['lastUptime'] = 0;
             }
-            server['lastTime'] = data.timestamp;
-            server['lastSent'] = stats[i].bytesSent;
+
+            // Add points to graph
+            if (server['lastUptime'] != 0) {
+                server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - lastTime));
             }
+
+            server['lastUptime'] = stats[i].uptime;
+            server['lastSent'] = stats[i].bytesSent;
+
+//            if (Math.random() > .8){
+//                var delServ = server;
+//                setTimeout(function() {
+//                        smoothie.removeTimeSeries(delServ.line);
+//                        for (var srv in servers) {
+//                                if (srv.index > delServ.index)
+//                                        srv.index--;
+//                        }
+//                        serverCount--;
+//                }, 30000);
+//                delete servers[stats[i].address];
+//                console.log("Baleeted");
+//                console.log(servers);
+//            }
+        }
     }
 }
 
-- 
cgit v1.2.3-55-g7522