<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="d3.v3.min.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="smoothie.js"></script>
<style type="text/css">
#graph, #statistics, #traffic {position: absolute }
.circle, .link { stroke: #56f; stroke-width: 3px; stroke-opacity: 0.75; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
body { width:100%; height:100%; margin:0; padding:0; overflow: hidden; }
svg, div, canvas { margin:0; padding:0; }
</style>
</head>
<body>
<div id="graph"></div>
<div id="statistics"> </div>
<div> <canvas id="traffic" width="100%" height="150"></canvas></div>
</body>
<script type="text/javascript">
// Initialize the statistics chart at the bottom.
var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter});
smoothie.streamTo(document.getElementById("traffic"), 2000);
// For coloring the servers and the chart-lines.
var colorList = d3.scale.category20();
// IDs need to begin with a letter.
function makeId(prefix, text) {
return prefix + text.replace(/\./g, "-");
}
function myGraph(el) {
var changed = false;
// Add and remove elements on the graph object
this.addNode = function (id, radius, color, distance, x, y) {
title = id;
id = makeId("a", id);
if (!distance) distance = 5;
distance *= w / 2000;
if (!radius) radius = 5;
var node = findNode(id);
// Add node, if it doesn't exist
if (!node) {
nodes.push({"id":id, "title": title, "distance":distance, "radius":radius, "lifetime":2, "x":x, "y":y, "color":color});
changed = true;
} else {
var visNode = vis.select("#" + id);
if (visNode) {
visNode.select("circle").attr("r", radius);
}
node.distance = distance;
node.radius = radius;
node.lifetime = 2;
node.color = color;
var s = servers[title];
if (s && visNode) {
visNode.select("circle").style("fill", s.color);
}
}
}
// Remove nodes/edges that haven't reported for a while.
this.decay = function () {
for (var i = nodes.length - 1; i >= 0; --i) {
if ( nodes[i].lifetime <= 0 ) {
for (var j = links.length - 1; j >= 0; --j) {
if ((links[j].source === nodes[i]) || (links[j].target === nodes[i])) links.splice(j,1);
}
nodes.splice(i, 1);
changed = true;
continue;
}
nodes[i].lifetime--;
}
for (var i = links.length - 1; i >= 0; --i) {
if (links[i].lifetime <= 0) {
links.splice(i, 1);
changed = true;
continue;
}
links[i].lifetime--;
}
}
// this.removeNode = function (id) {
// var i = 0;
// var n = findNode(id);
// while (i < links.length) {
// if ((links[i]['source'] === n)||(links[i]['target'] == n)) links.splice(i,1);
// else i++;
// }
// var index = findNodeIndex(id);
// if(index !== undefined) {
// nodes.splice(index, 1);
// changed = true;
// }
// }
this.addLink = function (sourceId, targetId) {
sourceId = makeId("a", sourceId);
targetId = makeId("a", targetId);
var sourceNode = findNode(sourceId);
var targetNode = findNode(targetId);
if ((sourceNode !== undefined) && (targetNode !== undefined)) {
var link = findLink(sourceNode, targetNode);
if (!link) {
links.push({"source": sourceNode, "target": targetNode, "lifetime":5});
changed = true;
} else {
link.lifetime = 5;
}
}
}
var findNode = function (id) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].id === id)
return nodes[i]
}
}
var findLink = function (sourceId, targetId) {
for (var i = 0; i < links.length; ++i) {
if ( (links[i].source === sourceId && links[i].target === targetId)
|| (links[i].source === targetId && links[i].target === sourceId) )
return links[i];
}
}
var findNodeIndex = function (id) {
for (var i=0; i < nodes.length; i++) {
if (nodes[i].id === id)
return i
};
}
var w = 100, h = 100;
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;
vis.attr("width", w);
vis.attr("height", h);
force.size([w, h]);
$(el).attr("width", w);
$(el).attr("height", h);
// Positions for statistics and the traffic graph
$("#statistics").attr("width", w/2).css("width", w/2 + "px").css("left", w + "px");
$("#statistics").attr("height", h).css("height", h + "px");
$("#traffic").attr("width", width).css("top", h + "px");
}
var vis = this.vis = d3.select(el).append("svg:svg")
.attr("width", w)
.attr("height", h);
// Settings for movement of the graph
var force = d3.layout.force()
// Force of center gravitation
.gravity(.02)
// Distance of the links
.distance(function(bla) { return bla.source.distance * bla.target.distance; })
// Strength of the links
.linkStrength(0.5)
// Force with which the links "pull"
.charge(function(bla) { return -bla.distance * 10 * bla.distance; })
// Friction for the graph nodes
.friction(0.6)
.size([w, h]);
var nodes = force.nodes(),
links = force.links();
this.update = function () {
if (!changed) return;
update();
}
var update = function () {
changed = false;
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id;});
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("id", function(d) { return d.id;})
.on("mouseover", function(d) {
// Highlight statistics div
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
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))
if (statDiv){
statDiv.setAttribute("style", "background-color:white; color:black;");
}
// Reset line width
var s = servers[d.title];
if (!s) return;
smoothie.seriesSet[s.index].options.lineWidth = 2;
});
nodeEnter.append("circle")
.attr("class", "circle")
.attr("r", function(d) { return d.radius; })
.style("fill", function(d) { return d.color; });
nodeEnter.append("text")
.attr("class", "nodetext")
.attr("dx", -32)
.attr("dy", "-1em")
.text(function(d) {return d.title});
node.exit().remove();
var link = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("line")
.attr("class", "link");
link.exit().remove();
vis.selectAll('g.node').forEach(function(e){$('#graph').find('svg').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 = 1000, ly = 1000, ux = -1000, uy = -1000;
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) { return "translate(" + fixX(d.x) + "," + fixY(d.y) + ")"; });
};
force.on("tick", render);
updateBounds();
force.start();
}
update();
$( window ).resize( update );
}
graph = new myGraph("#graph");
var servers = {};
var serverCount = 0;
var lastTime = 0;
// Get new data
setInterval( function() {
$.get('/data.json', function(data) {
if (data.timestamp < lastTime) lastTime = data.timestamp;
if(data.timestamp === lastTime) return;
var g = data.graph;
var stats = data.servers;
updateGraph(g, data);
updateTrafficGraph(stats, data);
updateTextStatistics(stats);
lastTime = data.timestamp;
}, 'json').always(function() {
graph.decay();
graph.update();
});
}, 2000);
// Update data of the graph
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);
}
for (var i = 0; i < g.edges.length; ++i) {
graph.addLink(g.edges[i].source, g.edges[i].target);
}
}
}
// Update data of the statistics divs
function updateTextStatistics(stats){
if (stats) {
for (var i = 0; i < stats.length; ++i) {
var server = document.getElementById(makeId("b", stats[i].address));
if (!server){
$("#statistics").append("<div id=" + makeId ("b", stats[i].address) + "></div>");
server = document.getElementById(makeId("b", stats[i].address));
}
var sent = Math.floor(stats[i].bytesSent / Math.pow(1024, 3));
var received = Math.floor(stats[i].bytesReceived / Math.pow(1024, 3));
var unitSent = " GiB";
var unitReceived = " GiB";
if (sent > 1024) {
sent = Math.round((sent/1024)*100)/100;
unitSent = " TiB";
}
if (received > 1024) {
received = Math.round((received/1024)*100)/100;
unitReceived = " TiB";
}
// Generate the HTML string
server.innerHTML = "<p><b> Server: " + stats[i].address + "</b><br>"
+ "Number of clients: "
+ stats[i].clientCount + "<br>"
+ "uptime: " + Math.floor(stats[i].uptime / (3600 * 24)) + "d "
+ Math.floor(stats[i].uptime / 3600) % 24 + "h " + Math.floor((stats[i].uptime) / 60) % 60 + "min" + "<br>"
+ "Sent: " + sent + unitSent + " <br>"
+ "Received: " + received + unitReceived + " </p>";
}
}
}
// Update the traffic graph
function updateTrafficGraph(stats, data){
if (stats) {
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(), 'index': serverCount++ };
server.color = colorList(stats[i].address);
smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
// console.log("Added");
}
// Server seems to have rebootet, redo values but add no point to chart.
if (server['lastUptime'] > stats[i].uptime) {
server['lastUptime'] = 0;
}
// Add points to graph
if (server['lastUptime'] != 0) {
server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - lastTime));
}
server['lastUptime'] = stats[i].uptime;
server['lastSent'] = stats[i].bytesSent;
// if (Math.random() > .8){
// var delServ = server;
// setTimeout(function() {
// smoothie.removeTimeSeries(delServ.line);
// for (var srv in servers) {
// if (srv.index > delServ.index)
// srv.index--;
// }
// serverCount--;
// }, 30000);
// delete servers[stats[i].address];
// console.log("Baleeted");
// console.log(servers);
// }
}
}
}
</script>
