From bd93c0430a63303da527739001ffc75b50a08cf6 Mon Sep 17 00:00:00 2001 From: Stephan Schwaer Date: Tue, 15 Mar 2016 15:06:52 +0100 Subject: Links turn green and red depending on client download rate. More code cleanup --- static/status-dnbd3.html | 113 ++++++++++++++++++++++++++--------------------- 1 file changed, 63 insertions(+), 50 deletions(-) diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html index 263d621..6f92c97 100644 --- a/static/status-dnbd3.html +++ b/static/status-dnbd3.html @@ -33,25 +33,31 @@ var newLinks = []; var links = {}; var nodes = {}; +// color for links +// color for idle links var idleColor = { "r": 85, "g": 102, "b": 255}; -var activeColor = { "r": 255, "g": 0, "b": 0}; +// links that are active +var activeColor = { "r": 0, "g": 255, "b": 0}; +// links with peaking download +var peakColor = { "r": 255, "g": 0, "b": 0}; // IDs need to begin with a letter. function makeId(prefix, text) { return prefix + text.replace(/\./g, "-"); } +// Log scaling for the traffic graph function logarithmicScaling(value) { return Math.log(value/1000000+1); } function myGraph(el) { - var changed = false; + // to spawn new clients near already existing nodes. var ccX = 0, ccY = 0, ccCount = 0; - // Add and remove elements on the graph object - this.addNode = function (id) { + // Add/update and remove elements on the graph object + this.updateNode = function (id) { x = 1; y = 1; title = id; @@ -59,15 +65,16 @@ function myGraph(el) { var distance = 2; var radius = 4; var color = "#0000FF"; // Blue - // Other attr if server. + + // Servers look different var s = servers[title] if(s) { distance = 6; radius = 15; } - distance *= w / 2000; var node = findNode(id); + // Add node, if it doesn't exist if (!node) { if (ccCount != 0) { @@ -79,10 +86,10 @@ function myGraph(el) { } else { var visNode = vis.select("#" + id); if (visNode) { - visNode.select("circle").attr("r", radius); - // Change color if server. + // Change color and radius if server. var s = servers[title]; if (s) { + visNode.select("circle").attr("r", radius); visNode.select("circle").style("fill", s.color); } } @@ -113,28 +120,15 @@ function myGraph(el) { } } - - this.addLink = function (edge, timestamp) { - + // Add/update links in the graph + this.updateLink = function (edge, timestamp) { var sourceId = edge.source; var targetId = edge.target; - var stroke = "rgb(85, 102, 255)"; + var stroke = idleColor; + // Change color to red for links between servers if (servers[sourceId] && servers[targetId]) stroke = "rgb(255, 0, 0)"; - - // // TODO Change color for already active links here - // if(servers[sourceId]) { - // var uploadRate = Math.round( ( servers[sourceId].uploadRate/ 1048576) * 100 ) / 100; - // //console.log(uploadRate) - // if(uploadRate > 1) { - // //changed = true; - // stroke = "#f00"; - // } - // } - - - sourceId = makeId("a", sourceId); targetId = makeId("a", targetId); var sourceNode = findNode(sourceId); @@ -142,6 +136,7 @@ function myGraph(el) { if ((sourceNode !== undefined) && (targetNode !== undefined)) { var link = findLink(sourceNode, targetNode); + // Add non existing links if (!link) { var index = $.inArray(sourceId + targetId, pendingLinks); if (index !== -1) { @@ -152,24 +147,50 @@ function myGraph(el) { } } else { link.lifetime = 2; - //link.color = stroke; + - //console.log(link); + // calculate download rate for clients and color links. if (link.lastTimestamp != 0) { - var upperIntensity = 3000; - link.downloadRate = ((edge.received - link.lastReceived) / (timestamp - link.lastTimestamp)) / 0.004; - link.colorIntensity += link.downloadRate; - if (link.colorIntensity >= upperIntensity) link.colorIntensity = upperIntensity; - link.colorIntensity -= 300; - if (link.colorIntensity < 0) link.colorIntensity = 0; - var factor = link.colorIntensity / upperIntensity; - var cFactor = 1 - factor; + var maxIntensitiy = 50000; + link.downloadRate = ((edge.received - link.lastReceived) / (timestamp - lastTime)) *4; + + // link.downloadRate = 30000; + // fading speed + var fadingValue = (link.colorIntensity*0,85) - 200; + if (fadingValue > 0) link.colorIntensity = fadingValue; - var red = cFactor * idleColor.r + factor * activeColor.r; - var green = cFactor * idleColor.g + factor * activeColor.g; - var blue = cFactor * idleColor.b + factor * activeColor.b; - //console.log(red +", "+ green +", " +blue); + if (link.colorIntensity < 0) link.colorIntensity = 0; + link.colorIntensity += link.downloadRate; + if (link.colorIntensity >= maxIntensitiy) link.colorIntensity = maxIntensitiy; + + 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(maxIntensitiy); + 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 + + // Blending active (green) and peak (red) color + var factor = (link.colorIntensity - 1000)/ 49000; //Math.log(link.colorIntensity+1) / Math.log(maxIntensitiy); + 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) link.color = "rgb("+ Math.floor(red) + ", " + Math.floor(green) + ", " + Math.floor(blue) + ")"; } else { @@ -317,18 +338,12 @@ function myGraph(el) { node.exit().remove(); - - - - link.exit().remove(); vis.selectAll('g.node').forEach(function(e){$('#graph').find('svg').append(e)}); var render = function() { var fixX = function(x) { - // console.log("X:" +x + " lx:" + lx + " scale:" + scale +" offX:" + offX); - return (x - lx) * scale + 20 + offX; } var fixY = function(y) { @@ -378,12 +393,11 @@ function myGraph(el) { update(); $( window ).resize( update ); } - graph = new myGraph("#graph"); + var servers = {}; var serverCount = 0; - var lastTime = 0; // Get new data @@ -394,7 +408,6 @@ setInterval( function() { var g = data.graph; var stats = data.servers; updateGraph(g, data); - //updateLinks(g.edges, data); // updateTrafficGraph has to be called before updateTextStatistics to populate servers updateTrafficGraph(stats, data); updateTextStatistics(stats); @@ -411,10 +424,10 @@ 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].x, g.nodes[i].y); + graph.updateNode(g.nodes[i].name); } for (var i = 0; i < g.edges.length; ++i) { - graph.addLink(g.edges[i], data.timestamp); + graph.updateLink(g.edges[i], data.timestamp); } pendingLinks = intLinks; intLinks = newLinks; -- cgit v1.2.3-55-g7522