Gefrickel

1 files changed, 47 insertions, 14 deletions

diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 352ee3d..7ee5a2f 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -25,7 +25,11 @@ var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine
 smoothie.streamTo(document.getElementById("traffic"), 2000);
 
 // For coloring the servers and the chart-lines.
-var colorList = d3.scale.category20();
+var colorList = d3.scale.category10();
+
+var pendingLinks = [];
+var intLinks = [];
+var newLinks = [];
 
 // IDs need to begin with a letter.
 function makeId(prefix, text) {
@@ -39,6 +43,7 @@ function logarithmicScaling(value) {
 function myGraph(el) {
 
     var changed = false;
+    var ccX = 0, ccY = 0, ccCount = 0;
 
     // Add and remove elements on the graph object
     this.addNode = function (id, radius, color, distance, x, y) {
@@ -50,6 +55,10 @@ function myGraph(el) {
         var node = findNode(id);
         // Add node, if it doesn't exist
         if (!node) {
+            if (ccCount != 0) {
+                x = ccX / ccCount;
+                y = ccY / ccCount;
+            }
             nodes.push({"id":id, "title": title, "distance":distance, "radius":radius, "lifetime":2, "x":x, "y":y, "color":color});
             changed = true;
         } else {
@@ -117,10 +126,15 @@ function myGraph(el) {
         if ((sourceNode !== undefined) && (targetNode !== undefined)) {
             var link = findLink(sourceNode, targetNode);
             if (!link) {
-                links.push({"source": sourceNode, "target": targetNode, "lifetime":5});
-                changed = true;
+                var index = $.inArray(sourceId + targetId, pendingLinks);
+                if (index !== -1) {
+                    links.push({"source": sourceNode, "target": targetNode, "lifetime":2});
+                    changed = true;
+                } else {
+                    newLinks.push(sourceId + targetId);
+                }
             } else {
-                link.lifetime = 5;
+                link.lifetime = 2;
             }
         }
     }
@@ -148,13 +162,17 @@ function myGraph(el) {
     }
 
     var w = 100, h = 100;
+    var lastW = -1, lastH = -1;
 
     var updateBounds = function() {
         var width = window.innerWidth;
-        // Width for the graph and the statistics div
-        w = width/3*2;
         // Chart needs to fit under the graph and the statistics
         h = window.innerHeight - 150;
+        // Width for the graph and the statistics div
+        w = width/3*2;
+        if (lastW === w && lastH === h) return;
+        lastW = w;
+        lastH = h;
         vis.attr("width", w);
         vis.attr("height", h);
         force.size([w, h]);
@@ -173,7 +191,7 @@ function myGraph(el) {
     // Settings for movement of the graph
     var force = d3.layout.force()
         // Force of center gravitation
-        .gravity(.02)
+        .gravity(.06)
         // Distance of the links
         .distance(function(bla) { return bla.source.distance * bla.target.distance; })
         // Strength of the links
@@ -181,7 +199,7 @@ function myGraph(el) {
         // Force with which the links "pull"
         .charge(function(bla) { return -bla.distance * 10 * bla.distance; })
         // Friction for the graph nodes
-        .friction(0.6)
+        .friction(0.4)
         .size([w, h]);
 
 
@@ -259,7 +277,7 @@ function myGraph(el) {
             var fixY = function(y) {
                 return (y - ly) * scale + 20 + offY;
             }
-            var lx = 1000, ly = 1000, ux = -1000, uy = -1000;
+            var lx = 1000000, ly = 1000000, ux = -1000000, uy = -1000000;
             for (var i = 0; i < nodes.length; ++i) {
                 if (nodes[i].x < lx) lx = nodes[i].x;
                 if (nodes[i].x > ux) ux = nodes[i].x;
@@ -281,7 +299,15 @@ function myGraph(el) {
               .attr("x2", function(d) { return fixX(d.target.x); })
               .attr("y2", function(d) { return fixY(d.target.y); });
 
-          node.attr("transform", function(d) { return "translate(" + fixX(d.x) + "," + fixY(d.y) + ")"; });
+          node.attr("transform", function(d) {
+                  if (ccCount > 10) {
+                    ccX = ccY = ccCount = 0;
+                  }
+                  ccCount++;
+                  ccX += d.x;
+                  ccY += d.y;
+                  return "translate(" + fixX(d.x) + "," + fixY(d.y) + ")";
+          });
         };
 
         force.on("tick", render);
@@ -323,11 +349,14 @@ setInterval( function() {
 function updateGraph(g, data){
     if (g) {
         for (var i = 0; i < g.nodes.length; ++i) {
-            graph.addNode(g.nodes[i].name, g.nodes[i].radius, g.nodes[i].color, g.nodes[i].distance, g.nodes[i].x, g.nodes[i].y);
+            graph.addNode(g.nodes[i].name, g.nodes[i].radius, g.nodes[i].color, g.nodes[i].distance, 0, 0); // g.nodes[i].x, g.nodes[i].y);
         }
         for (var i = 0; i < g.edges.length; ++i) {
             graph.addLink(g.edges[i].source, g.edges[i].target);
         }
+        pendingLinks = intLinks;
+        intLinks = newLinks;
+        newLinks = [];
     }
 }
 
@@ -377,7 +406,9 @@ function updateTextStatistics(stats){
                 + Math.floor(stats[i].uptime / 3600) % 24 + "h " + Math.floor((stats[i].uptime) / 60) % 60 + "min" + "<br>"
                 + "Sent: " + bytesToString(stats[i].bytesSent)  + "<br>"
                 + "Received: " + bytesToString(stats[i].bytesReceived) + "<br>"
-                + "Upload: " + bytesToString(servers[stats[i].address].uploadRate) + "/s" + "</p>");
+                + "Upload: " + bytesToString(servers[stats[i].address].uploadRate) + "/s<br>"
+                + "Upload Peak: " + bytesToString(servers[stats[i].address].uploadPeak) + "/s" + "</p>"
+                );
         }
     }
 }
@@ -389,7 +420,7 @@ function updateTrafficGraph(stats, data){
         for (var i = 0; i < stats.length; ++i) {
             var server = servers[stats[i].address];
             if (!server) {
-                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
+                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastTimestamp': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0, 'uploadPeak': 0 }
                 server.color = colorList(stats[i].address);
                 smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
 //              console.log("Added");
@@ -402,7 +433,8 @@ function updateTrafficGraph(stats, data){
             // Add points to graph and set the upload rate for the statistics
             if (server['lastUptime'] != 0) {
                 // Upload rate in bytes/s
-                server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(data.timestamp - lastTime) * 1000;
+                server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(stats[i].timestamp - server.lastTimestamp) * 1000;
+                if (server['uploadRate'] > server['uploadPeak']) server['uploadPeak'] = server['uploadRate'];
                 // Rate in MiB/s
                 server['line'].append(new Date().getTime(), server['uploadRate']);
             } else {
@@ -411,6 +443,7 @@ function updateTrafficGraph(stats, data){
 
             server['lastUptime'] = stats[i].uptime;
             server['lastSent'] = stats[i].bytesSent;
+            server['lastTimestamp'] = stats[i].timestamp;
 
 //            if (Math.random() > .8){
 //                var delServ = server;