summaryrefslogtreecommitdiffstats
path: root/static/status-dnbd3.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/status-dnbd3.html')
-rw-r--r--static/status-dnbd3.html211
1 files changed, 105 insertions, 106 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index a318ab2..184521d 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -40,9 +40,9 @@ var nodes = {};
// idle links (blue)
var idleColor = { "r": 85, "g": 102, "b": 255};
// active links (green)
-var activeColor = { "r": 0, "g": 255, "b": 0};
+var activeColor = { "r": 0, "g": 230, "b": 20};
// peaking links (red)
-var peakColor = { "r": 255, "g": 0, "b": 0};
+var peakColor = { "r": 255, "g": 40, "b": 30};
// IDs need to begin with a letter.
function makeId(prefix, text) {
@@ -56,48 +56,29 @@ function logarithmicScaling(value) {
function myGraph(el) {
var changed = false;
- // to spawn new clients near already existing nodes.
- var ccX = 0, ccY = 0, ccCount = 0;
// Add/update and remove elements on the graph object
this.updateNode = function (id) {
- x = 1;
- y = 1;
- title = id;
- id = makeId("a", id);
- var distance = 2;
- var radius = 4;
- var color = "#0000FF"; // Blue for client nodes
-
- // Servers look different
- var s = servers[title]
- if(s) {
- distance = 6;
- radius = 15;
- }
- distance *= w / 2000;
+ var title = id;
+ var id = makeId("a", id);
+
var node = findNode(id);
// Add node, if it doesn't exist
if (!node) {
- if (ccCount != 0) {
- x = ccX / ccCount;
- y = ccY / ccCount;
- }
- nodes.push({"id":id, "title": title, "distance":distance, "radius":radius, "x":x, "y":y, "color":color});
+ nodes.push(node = {"id": id, "title": title, "x": w/2, "y":h/2});
changed = true;
- } else {
+ } else if (!node.isServer && servers[title]) {
+ node.isServer = true;
+ // Change color and radius if server.
var visNode = vis.select("#" + id);
if (visNode) {
- // 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);
- }
+ visNode.select("circle")
+ .attr("r", 15)
+ .style("fill", servers[title].color);
}
- node.lifetime = 2;
}
+ node.lifetime = 2;
}
// Remove nodes/edges that haven't reported for a while.
@@ -127,28 +108,28 @@ function myGraph(el) {
this.updateLink = function (edge, timestamp) {
var sourceId = edge.source;
var targetId = edge.target;
- var stroke = idleColor;
+ var width = '2.5px';
// Change color to red for links between servers
- if (servers[sourceId] && servers[targetId]) stroke = "rgb(255, 0, 0)";
+ if (servers[sourceId] && servers[targetId]) width = '3.5px';
sourceId = makeId("a", sourceId);
targetId = makeId("a", targetId);
var sourceNode = findNode(sourceId);
var targetNode = findNode(targetId);
- if ((sourceNode !== undefined) && (targetNode !== undefined)) {
+ if ((typeof(sourceNode) !== 'undefined') && (typeof(targetNode) !== 'undefined')) {
var link = findLink(sourceNode, targetNode);
// Add non existing links
if (!link) {
var index = $.inArray(sourceId + targetId, pendingLinks);
if (index !== -1) {
- links.push({"id": sourceId + "-" + targetId ,"source": sourceNode, "target": targetNode, "lifetime":2, "color": stroke, "downloadRate" : 0, "lastReceived": 0, "lastTimestamp": 0, "lastUptime": 0, "colorIntensity": 0 });
+ links.push({"id": sourceId + "-" + targetId ,"source": sourceNode, "target": targetNode, "lifetime":2, "color": idleColor, "downloadRate" : 0, "lastReceived": 0, "lastTimestamp": 0, "lastUptime": 0, "colorIntensity": 0, "width": width });
changed = true;
} else {
newLinks.push(sourceId + targetId);
}
- } else {
+ } else {
link.lifetime = 2;
// Calculate download rate for clients and color links.
@@ -201,7 +182,7 @@ function myGraph(el) {
}
// Update the color of a link in the svg.
- function updateLinkColor(link){
+ function updateLinkColor(link) {
// Prevent future searches for links to improve performance.
if(!link.visObject) {
link.visObject = vis.select("#" + link.source.id + "-" + link.target.id);
@@ -211,9 +192,8 @@ function myGraph(el) {
}
// Interval for fading out the color of active links
- window.setInterval(decayLinkColor, 500);
function decayLinkColor() {
- for (var i = 0; i < links.length ; i++ ){
+ for (var i = 0; i < links.length ; i++) {
var link = links[i];
// Do nothing if there is no intensity to decay.
if(link.colorIntensity > 0) {
@@ -230,6 +210,14 @@ function myGraph(el) {
}
}
}
+ window.setInterval(decayLinkColor, 500);
+ window.setInterval(function() {
+ if (force.alpha() == 0) {
+ force.alpha(0.015);
+ force.tick();
+ force.stop();
+ }
+ }, 125);
// Set the color intensity of link according to its download rate.
@@ -296,14 +284,15 @@ function myGraph(el) {
var force = d3.layout.force()
// Force of center gravitation
.gravity(.12)
- // Distance of the links
- .distance(function(bla) { return 4; })
- // Strength of the links
+ // Desired distance of the links
+ .distance(function(bla) { if (bla.source.isServer && bla.target.isServer) return 10; return 4; })
+ // Strength of the links (how strongly the distance is enforced) (0-1)
.linkStrength(0.3)
- // Force with which the links "pull"
+ // Force with which all nodes attract each other
.charge(function(bla) { return -0.9; })
// Friction for the graph nodes
.friction(0.5)
+ .theta(0.75)
.size([w, h]);
nodes = force.nodes();
@@ -311,19 +300,23 @@ function myGraph(el) {
this.update = function () {
- if(changed){
+ if(changed) {
+ var first = svgLinks.length === 0;
update();
+ if (first) force.alpha(0.9);
}
}
- // Update the complete svg. Performance intensive.
- function update () {
+ // Update the complete svg.
+ var svgNodes = [];
+ var svgLinks = [];
+ function update() {
changed = false;
- var node = vis.selectAll("g.node")
+ svgNodes = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id; });
- var nodeEnter = node.enter().append("g")
+ var nodeEnter = svgNodes.enter().append("g")
.attr("class", "node")
.attr("id", function(d) { return d.id; })
.on("mouseover", function(d) {
@@ -353,8 +346,7 @@ function myGraph(el) {
nodeEnter.append("circle")
.attr("class", "circle")
- .attr("r", function(d) { return d.radius; })
- .style("fill", function(d) { return d.color; });
+ .attr("r", 4).style("fill", "#00f");
nodeEnter.append("text")
.attr("class", "nodetext")
@@ -362,69 +354,64 @@ function myGraph(el) {
.attr("dy", "-1em")
.text(function(d) {return d.title});
- node.exit().remove();
+ svgNodes.exit().remove();
- var link = vis.selectAll("line.link")
+ svgLinks = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + "-" + d.target.id; });
- link.enter().insert("line")
+ svgLinks.enter().insert("line")
.attr("class", "link")
.attr("id", function(d) {return d.id; })
- .style({stroke: function(d) { return d.color; }});
-
- // Aplly color of exitsting nodes
- link.style({stroke: function(d) { return d.color; }});
+ .style({stroke: function(d) { return d.color }, "stroke-width": function(d) { return d.width } });
- link.exit().remove();
+ svgLinks.exit().remove();
- vis.selectAll('g.node').forEach(function(e){$('#graph').find('svg').append(e)});
+ // Put all nodes on top again by adding them again
+ var jGraph = $('#graph').find('svg');
+ vis.selectAll('g.node').forEach(function(e){jGraph.append(e)});
- var render = function() {
- var fixX = function(x) {
- return (x - lx) * scale + 20 + offX;
- }
- var fixY = function(y) {
- return (y - ly) * scale + 20 + offY;
- }
- var lx = 1000000, ly = 1000000, ux = -1000000, uy = -1000000;
- for (var i = 0; i < nodes.length; ++i) {
- if (nodes[i].x < lx) lx = nodes[i].x;
- if (nodes[i].x > ux) ux = nodes[i].x;
- if (nodes[i].y < ly) ly = nodes[i].y;
- if (nodes[i].y > uy) uy = nodes[i].y;
- }
- var width = (ux - lx), height = (uy - ly);
- var scale;
- var offX = 0, offY = 0;
- if ( (width / w) > (height / h) ) {
- scale = (w - 40) / width;
- offY = (h - (height * scale + 20)) / 2;
- } else {
- 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) + ")";
- });
- };
- force.on("tick", render);
+ force.on("tick", renderTick);
updateBounds();
force.start();
}
+ // Render function
+ function renderTick() {
+ var lx = 1000000, ly = 1000000, ux = -1000000, uy = -1000000;
+ for (var i = 0; i < nodes.length; ++i) {
+ if (nodes[i].x < lx) lx = nodes[i].x;
+ if (nodes[i].x > ux) ux = nodes[i].x;
+ if (nodes[i].y < ly) ly = nodes[i].y;
+ if (nodes[i].y > uy) uy = nodes[i].y;
+ }
+ var width = (ux - lx), height = (uy - ly);
+ var scale;
+ var offX = 0, offY = 0;
+ if ( (width / w) > (height / h) ) {
+ scale = (w - 40) / width;
+ offY = (h - (height * scale + 20)) / 2;
+ } else {
+ scale = (h - 40) / height;
+ offX = (w - (width * scale + 20)) / 2;
+ }
+ var fixX = function(x) {
+ return (x - lx) * scale + 20 + offX;
+ }
+ var fixY = function(y) {
+ return (y - ly) * scale + 20 + offY;
+ }
+ svgLinks.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); });
+
+ svgNodes.attr("transform", function(d) {
+ return "translate(" + fixX(d.x) + "," + fixY(d.y) + ")";
+ });
+ };
+
window.onresize = update;
update();
}
@@ -455,7 +442,7 @@ setInterval( function() {
// Update data of the graph
-function updateGraph(g, data){
+function updateGraph(g, data) {
if (g) {
for (var i = 0; i < g.nodes.length; ++i) {
graph.updateNode(g.nodes[i].name);
@@ -494,13 +481,21 @@ function bytesToString( bytes ) {
}
// Update data of the statistics divs
-function updateTextStatistics(stats){
+function updateTextStatistics(stats) {
+ var glob = $('#gstats');
+ if (glob.length === 0) {
+ $('#statistics').append('<div id="gstats"></div>');
+ glob = $('#gstats');
+ }
+ glob.html('<p><b>Global</b><br>'
+ + 'Upload: ' + bytesToString(globalUploadRate) + '/s<br>'
+ + 'Upload Peak: ' + bytesToString(globalUploadMax) + '/s<p>');
if (stats) {
for (var i = 0; i < stats.length; ++i) {
var divId = makeId("b", stats[i].address);
var server = $('#' + divId);
- if (server.length == 0){
- $("#statistics").append("<div id=" + makeId ("b", stats[i].address) + "></div>");
+ if (server.length === 0) {
+ $("#statistics").append('<div id="' + makeId ("b", stats[i].address) + '"></div>');
server = $("#" + divId);
}
@@ -521,10 +516,12 @@ function updateTextStatistics(stats){
}
}
+var globalUploadRate = 0, globalUploadMax = 0;
// Update the traffic graph
-function updateTrafficGraph(stats, data){
+function updateTrafficGraph(stats, data) {
if (stats) {
+ globalUploadRate = 0;
for (var i = 0; i < stats.length; ++i) {
var server = servers[stats[i].address];
if (!server) {
@@ -551,8 +548,10 @@ function updateTrafficGraph(stats, data){
server['lastUptime'] = stats[i].uptime;
server['lastSent'] = stats[i].bytesSent;
server['lastTimestamp'] = stats[i].timestamp;
+ globalUploadRate += server['uploadRate'];
}
+ if (globalUploadRate > globalUploadMax) globalUploadMax = globalUploadRate;
}
}
-</script> \ No newline at end of file
+</script>
generated by cgit v1.2.3-55-g7522 (git 2.39.0) at 2024-11-21 13:50:41 +0100