summaryrefslogtreecommitdiffstats
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/status-dnbd3.html113
1 files changed, 63 insertions, 50 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 86bfc4e..0971f8a 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;
generated by cgit v1.2.3-55-g7522 (git 2.39.0) at 2024-11-21 18:47:29 +0100