summaryrefslogtreecommitdiffstats
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/status-dnbd3.html143
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();