summaryrefslogtreecommitdiffstats
path: root/static/status-dnbd3.html
diff options
context:
space:
mode:
authorSimon Rettberg2016-03-09 12:02:41 +0100
committerSimon Rettberg2016-03-09 12:02:41 +0100
commitfd113d8e636d8dbd34885204a8a6015a76c06c82 (patch)
tree0984564613c643062bdb1e77bc791f16bf960171 /static/status-dnbd3.html
parentSet min and max Value for the traffic graph. Increased size of labels. (diff)
downloaddnbd3-status-fd113d8e636d8dbd34885204a8a6015a76c06c82.tar.gz
dnbd3-status-fd113d8e636d8dbd34885204a8a6015a76c06c82.tar.xz
dnbd3-status-fd113d8e636d8dbd34885204a8a6015a76c06c82.zip
Gefrickel
Diffstat (limited to 'static/status-dnbd3.html')
-rw-r--r--static/status-dnbd3.html61
1 files changed, 47 insertions, 14 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 352ee3d..7ee5a2f 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -25,7 +25,11 @@ var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine
smoothie.streamTo(document.getElementById("traffic"), 2000);
// For coloring the servers and the chart-lines.
-var colorList = d3.scale.category20();
+var colorList = d3.scale.category10();
+
+var pendingLinks = [];
+var intLinks = [];
+var newLinks = [];
// IDs need to begin with a letter.
function makeId(prefix, text) {
@@ -39,6 +43,7 @@ function logarithmicScaling(value) {
function myGraph(el) {
var changed = false;
+ var ccX = 0, ccY = 0, ccCount = 0;
// Add and remove elements on the graph object
this.addNode = function (id, radius, color, distance, x, y) {
@@ -50,6 +55,10 @@ function myGraph(el) {
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, "lifetime":2, "x":x, "y":y, "color":color});
changed = true;
} else {
@@ -117,10 +126,15 @@ function myGraph(el) {
if ((sourceNode !== undefined) && (targetNode !== undefined)) {
var link = findLink(sourceNode, targetNode);
if (!link) {
- links.push({"source": sourceNode, "target": targetNode, "lifetime":5});
- changed = true;
+ var index = $.inArray(sourceId + targetId, pendingLinks);
+ if (index !== -1) {
+ links.push({"source": sourceNode, "target": targetNode, "lifetime":2});
+ changed = true;
+ } else {
+ newLinks.push(sourceId + targetId);
+ }
} else {
- link.lifetime = 5;
+ link.lifetime = 2;
}
}
}
@@ -148,13 +162,17 @@ function myGraph(el) {
}
var w = 100, h = 100;
+ var lastW = -1, lastH = -1;
var updateBounds = function() {
var width = window.innerWidth;
- // Width for the graph and the statistics div
- w = width/3*2;
// Chart needs to fit under the graph and the statistics
h = window.innerHeight - 150;
+ // Width for the graph and the statistics div
+ w = width/3*2;
+ if (lastW === w && lastH === h) return;
+ lastW = w;
+ lastH = h;
vis.attr("width", w);
vis.attr("height", h);
force.size([w, h]);
@@ -173,7 +191,7 @@ function myGraph(el) {
// Settings for movement of the graph
var force = d3.layout.force()
// Force of center gravitation
- .gravity(.02)
+ .gravity(.06)
// Distance of the links
.distance(function(bla) { return bla.source.distance * bla.target.distance; })
// Strength of the links
@@ -181,7 +199,7 @@ function myGraph(el) {
// Force with which the links "pull"
.charge(function(bla) { return -bla.distance * 10 * bla.distance; })
// Friction for the graph nodes
- .friction(0.6)
+ .friction(0.4)
.size([w, h]);
@@ -259,7 +277,7 @@ function myGraph(el) {
var fixY = function(y) {
return (y - ly) * scale + 20 + offY;
}
- var lx = 1000, ly = 1000, ux = -1000, uy = -1000;
+ 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;
@@ -281,7 +299,15 @@ function myGraph(el) {
.attr("x2", function(d) { return fixX(d.target.x); })
.attr("y2", function(d) { return fixY(d.target.y); });
- node.attr("transform", function(d) { return "translate(" + fixX(d.x) + "," + fixY(d.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);
@@ -323,11 +349,14 @@ 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].radius, g.nodes[i].color, g.nodes[i].distance, g.nodes[i].x, g.nodes[i].y);
+ graph.addNode(g.nodes[i].name, g.nodes[i].radius, g.nodes[i].color, g.nodes[i].distance, 0, 0); // g.nodes[i].x, g.nodes[i].y);
}
for (var i = 0; i < g.edges.length; ++i) {
graph.addLink(g.edges[i].source, g.edges[i].target);
}
+ pendingLinks = intLinks;
+ intLinks = newLinks;
+ newLinks = [];
}
}
@@ -377,7 +406,9 @@ function updateTextStatistics(stats){
+ Math.floor(stats[i].uptime / 3600) % 24 + "h " + Math.floor((stats[i].uptime) / 60) % 60 + "min" + "<br>"
+ "Sent: " + bytesToString(stats[i].bytesSent) + "<br>"
+ "Received: " + bytesToString(stats[i].bytesReceived) + "<br>"
- + "Upload: " + bytesToString(servers[stats[i].address].uploadRate) + "/s" + "</p>");
+ + "Upload: " + bytesToString(servers[stats[i].address].uploadRate) + "/s<br>"
+ + "Upload Peak: " + bytesToString(servers[stats[i].address].uploadPeak) + "/s" + "</p>"
+ );
}
}
}
@@ -389,7 +420,7 @@ function updateTrafficGraph(stats, data){
for (var i = 0; i < stats.length; ++i) {
var server = servers[stats[i].address];
if (!server) {
- servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
+ servers[stats[i].address] = server = { 'lastUptime': 0, 'lastTimestamp': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0, 'uploadPeak': 0 }
server.color = colorList(stats[i].address);
smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
// console.log("Added");
@@ -402,7 +433,8 @@ function updateTrafficGraph(stats, data){
// Add points to graph and set the upload rate for the statistics
if (server['lastUptime'] != 0) {
// Upload rate in bytes/s
- server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(data.timestamp - lastTime) * 1000;
+ server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(stats[i].timestamp - server.lastTimestamp) * 1000;
+ if (server['uploadRate'] > server['uploadPeak']) server['uploadPeak'] = server['uploadRate'];
// Rate in MiB/s
server['line'].append(new Date().getTime(), server['uploadRate']);
} else {
@@ -411,6 +443,7 @@ function updateTrafficGraph(stats, data){
server['lastUptime'] = stats[i].uptime;
server['lastSent'] = stats[i].bytesSent;
+ server['lastTimestamp'] = stats[i].timestamp;
// if (Math.random() > .8){
// var delServ = server;