diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/status-dnbd3.html | 143 |
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(); |