Code cleanup and some comments.

1 files changed, 66 insertions, 77 deletions

diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index c3313b2..16bc17e 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -147,58 +147,17 @@ function myGraph(el) {
                 }
             } else {              
                 link.lifetime = 2;
-                
 
-                // calculate download rate for clients and color links.
+                // Calculate download rate for clients and color links.
                 if (link.lastTimestamp != 0) {
-                    var maxIntensity = 50000;
 
                     if(timestamp - lastTime > 0) {
+                        // Download rate in KB/s
                         link.downloadRate = ((edge.received - link.lastReceived) / (timestamp - lastTime)) * 4 * 1000;
+                        // Clients may have multiple connections with different received data -> prevent negative download rate...
                         if(link.downloadRate < 0) link.downloadRate = 0;
 
-                        // link.downloadRate = 30000;
-                        // fading speed
-                        var fadingValue = (link.colorIntensity*0.15) + 100;
-                        link.colorIntensity -= fadingValue;
-                        if (link.colorIntensity < 0) link.colorIntensity = 0;
-
-
-
-                        link.colorIntensity += link.downloadRate;
-                        if (link.colorIntensity >= maxIntensity) link.colorIntensity = maxIntensity;
-                         console.log(link.downloadRate)
-                        var red, green, blue;
-                        // Green colors between 0 - 1 MB/s
-                        
-                        if( link.colorIntensity <= 1000 ) {
-                            
-                            // if(link.downloadRate > 1) {
-                            //     console.log("downloadRate: " + link.downloadRate);
-                            //     console.log("Intensity: " + link.colorIntensity);
-                            // }
-
-                            // Blending idle (blue) and active (green) color
-                            var factor =  link.colorIntensity / 1000; //Math.log(link.colorIntensity+1) / Math.log(maxIntensity);
-                            var cFactor = 1 - factor;
-                            
-                            red = cFactor * idleColor.r + factor * activeColor.r;
-                            green = cFactor * idleColor.g + factor * activeColor.g;
-                            blue = cFactor * idleColor.b + factor * activeColor.b;
-                        } else { // Over 1MB/s
-                            console.log(link.colorIntensity)
-                            
-                            // Blending active (green) and peak (red) color
-                            var factor =  (link.colorIntensity - 1000)/ (maxIntensity - 1000); //Math.log(link.colorIntensity+1) / Math.log(maxIntensity);
-                            var cFactor = 1 - factor;
-                            
-                            red = cFactor * activeColor.r + factor * peakColor.r;
-                            green = cFactor * activeColor.g + factor * peakColor.g;
-                            blue = cFactor * activeColor.b + factor * peakColor.b;
-                            console.log(" " + red + " " + " " + green + " " +  " " + blue)
-                        }
-                        //console.log(" " + red + " " + " " + green + " " +  " " + blue)
-                        link.color = "rgb("+ Math.floor(red) + ", " + Math.floor(green) + ", " + Math.floor(blue) + ")";
+                        colorLink(link);
                     }
 
                 } else {
@@ -206,12 +165,47 @@ function myGraph(el) {
                 }
                 link['lastReceived'] = edge.received;
                 link['lastTimestamp'] = timestamp;
-
-
             }
         }
     }
 
+    // Color a link according to its intensity
+    function colorLink(link) {
+        // Max intensity ~ 50MB/s
+        var maxIntensity = 50000;
+        // Fading rate of colored links
+        var fadingValue = (link.colorIntensity*0.15) + 100;
+        link.colorIntensity -= fadingValue;
+        if (link.colorIntensity < 0) link.colorIntensity = 0;
+
+        link.colorIntensity += link.downloadRate;
+        if (link.colorIntensity >= maxIntensity) link.colorIntensity = maxIntensity;
+
+        var red, green, blue;
+        // Green colors between 0 - 1 MB/s
+        if( link.colorIntensity <= 1000 ) {
+            // Blending idle (blue) and active (green) color
+            var factor =  link.colorIntensity / 1000; //Math.log(link.colorIntensity+1) / Math.log(maxIntensity);
+            var cFactor = 1 - factor;
+
+            red = cFactor * idleColor.r + factor * activeColor.r;
+            green = cFactor * idleColor.g + factor * activeColor.g;
+            blue = cFactor * idleColor.b + factor * activeColor.b;
+
+        } else { // Red over 1MB/s
+            // Blending active (green) and peak (red) color
+            var factor =  (link.colorIntensity - 1000)/ (maxIntensity - 1000); //Math.log(link.colorIntensity+1) / Math.log(maxIntensity);
+            var cFactor = 1 - factor;
+
+            red = cFactor * activeColor.r + factor * peakColor.r;
+            green = cFactor * activeColor.g + factor * peakColor.g;
+            blue = cFactor * activeColor.b + factor * peakColor.b;
+            //console.log(" " + red + " " + " " + green + " " +  " " + blue)
+        }
+        //console.log(" " + red + " " + " " + green + " " +  " " + blue)
+        link.color = "rgb("+ Math.floor(red) + ", " + Math.floor(green) + ", " + Math.floor(blue) + ")";
+    }
+
     function findLink(sourceId, targetId) {
        for (var i = 0; i < links.length; ++i) {
                if ( (links[i].source === sourceId && links[i].target === targetId)
@@ -223,7 +217,7 @@ function myGraph(el) {
     var findNode = function (id) {
         for (var i = 0; i < nodes.length; i++) {
             if (nodes[i].id === id)
-                return nodes[i]
+                return nodes[i];
         }
     }
 
@@ -231,7 +225,7 @@ function myGraph(el) {
     var findNodeIndex = function (id) {
         for (var i=0; i < nodes.length; i++) {
             if (nodes[i].id === id)
-                return i
+                return i;
         };
     }
 
@@ -281,49 +275,46 @@ function myGraph(el) {
     links = force.links();
 
     this.update = function () {
-        //if (!changed) return;
-            update();
+        update();
     }
 
     var update = function () {
-        
 
         var link = vis.selectAll("line.link")
             .data(links, function(d) { return d.source.id + "-" + d.target.id; });
 
         link.enter().insert("line")
-            .attr("class", "link").style({stroke: function(d) { return d.color }});
+            .attr("class", "link").style({stroke: function(d) { return d.color; }});
 
-        // change color of of exitsting nodes
-        link.style({stroke: function(d) { return d.color }});
+        // change color of exitsting nodes
+        link.style({stroke: function(d) { return d.color; }});
 
         if (changed){
             changed = false;
 
             var node = vis.selectAll("g.node")
-                .data(nodes, function(d) { return d.id;});
-
+                .data(nodes, function(d) { return d.id; });
 
             var nodeEnter = node.enter().append("g")
                 .attr("class", "node")
-                .attr("id", function(d) { return d.id;})
+                .attr("id", function(d) { return d.id; })
                 .on("mouseover", function(d) {
                     // Highlight statistics div
-                    var statDiv = document.getElementById(makeId("b", d.title))
+                    var statDiv = document.getElementById(makeId("b", d.title));
                     if (statDiv){
                         statDiv.setAttribute("style", "background-color:blue; color:white;");
                     }
 
-                    // Increase line width of server in chart
+                    // Increase line width of server in traffic chart
                     var s = servers[d.title];
                     if (!s) return;
                     smoothie.seriesSet[s.index].options.lineWidth = 4;
                 })
                 .on("mouseout", function(d) {
                     // Make statistics div normal again
-                    var statDiv = document.getElementById(makeId("b", d.title))
+                    var statDiv = document.getElementById(makeId("b", d.title));
                     if (statDiv){
-                            statDiv.setAttribute("style", "background-color:white; color:black;");
+                        statDiv.setAttribute("style", "background-color:white; color:black;");
                     }
 
                     // Reset line width
@@ -337,7 +328,6 @@ function myGraph(el) {
                 .attr("r", function(d) { return d.radius; })
                 .style("fill", function(d) { return d.color; });
 
-
             nodeEnter.append("text")
                 .attr("class", "nodetext")
                 .attr("dx", -32)
@@ -374,23 +364,22 @@ function myGraph(el) {
                         scale = (h - 40) / height;
                         offX = (w - (width * scale + 20)) / 2;
                 }
-              link.attr("x1", function(d) { return fixX(d.source.x); })
-                  .attr("y1", function(d) { return fixY(d.source.y); })
-                  .attr("x2", function(d) { return fixX(d.target.x); })
-                  .attr("y2", function(d) { return fixY(d.target.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) + ")";
+                link.attr("x1", function(d) { return fixX(d.source.x); })
+                    .attr("y1", function(d) { return fixY(d.source.y); })
+                    .attr("x2", function(d) { return fixX(d.target.x); })
+                    .attr("y2", function(d) { return fixY(d.target.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);
 
             updateBounds();