diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/status-dnbd3.html | 322 |
1 files changed, 185 insertions, 137 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html index 8fdcfa6..263d621 100644 --- a/static/status-dnbd3.html +++ b/static/status-dnbd3.html @@ -30,6 +30,11 @@ var colorList = d3.scale.category10(); var pendingLinks = []; var intLinks = []; var newLinks = []; +var links = {}; +var nodes = {}; + +var idleColor = { "r": 85, "g": 102, "b": 255}; +var activeColor = { "r": 255, "g": 0, "b": 0}; // IDs need to begin with a letter. function makeId(prefix, text) { @@ -46,7 +51,9 @@ function myGraph(el) { var ccX = 0, ccY = 0, ccCount = 0; // Add and remove elements on the graph object - this.addNode = function (id, x, y) { + this.addNode = function (id) { + x = 1; + y = 1; title = id; id = makeId("a", id); var distance = 2; @@ -55,14 +62,11 @@ function myGraph(el) { // Other attr if server. var s = servers[title] if(s) { -// console.log(color); distance = 6; radius = 15; } -// if (!distance) distance = 5; -// distance *= w / 2000; -// if (!radius) radius = 5; + distance *= w / 2000; var node = findNode(id); // Add node, if it doesn't exist if (!node) { @@ -76,14 +80,13 @@ function myGraph(el) { var visNode = vis.select("#" + id); if (visNode) { visNode.select("circle").attr("r", radius); + // Change color if server. + var s = servers[title]; + if (s) { + visNode.select("circle").style("fill", s.color); + } } - node.lifetime = 2; - - var s = servers[title]; - if (s && visNode) { - visNode.select("circle").style("fill", s.color) - } } } @@ -110,11 +113,27 @@ function myGraph(el) { } } - this.addLink = function (sourceId, targetId) { - // Link between servers? - var stroke = "#56f"; - if (servers[sourceId] && servers[targetId]) stroke = "#f00"; + this.addLink = function (edge, timestamp) { + + var sourceId = edge.source; + var targetId = edge.target; + var stroke = "rgb(85, 102, 255)"; + // 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); @@ -126,17 +145,52 @@ function myGraph(el) { if (!link) { var index = $.inArray(sourceId + targetId, pendingLinks); if (index !== -1) { - links.push({"source": sourceNode, "target": targetNode, "lifetime":2, "color": stroke}); + links.push({"source": sourceNode, "target": targetNode, "lifetime":2, "color": stroke, "downloadRate" : 0, "lastReceived": 0, "lastTimestamp": 0, "lastUptime": 0, "colorIntensity": 0 }); changed = true; } else { newLinks.push(sourceId + targetId); } - } else { + } else { link.lifetime = 2; + //link.color = stroke; + + //console.log(link); + 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 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); + link.color = "rgb("+ Math.floor(red) + ", " + Math.floor(green) + ", " + Math.floor(blue) + ")"; + + } else { + link['downloadRate'] = 0; + } + link['lastReceived'] = edge.received; + link['lastTimestamp'] = timestamp; + + } } } + function findLink(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 findNode = function (id) { for (var i = 0; i < nodes.length; i++) { if (nodes[i].id === id) @@ -144,13 +198,6 @@ function myGraph(el) { } } - 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++) { @@ -189,129 +236,143 @@ function myGraph(el) { // Settings for movement of the graph var force = d3.layout.force() // Force of center gravitation - .gravity(.06) + .gravity(.12) // Distance of the links - .distance(function(bla) { return bla.source.distance * bla.target.distance; }) + .distance(function(bla) { return bla.source.distance + bla.target.distance; }) // Strength of the links - .linkStrength(0.5) + .linkStrength(0.3) // Force with which the links "pull" - .charge(function(bla) { return -bla.distance * 10 * bla.distance; }) + .charge(function(bla) { return -0.9; }) // Friction for the graph nodes - .friction(0.4) + .friction(0.5) .size([w, h]); - var nodes = force.nodes(), - links = force.links(); + nodes = force.nodes(); + links = force.links(); this.update = function () { - if (!changed) return; + //if (!changed) return; update(); } var update = function () { - changed = false; + + + var link = vis.selectAll("line.link") + .data(links, function(d) { return d.source.id + "-" + d.target.id; }); - var node = vis.selectAll("g.node") - .data(nodes, function(d) { return d.id;}); + link.enter().insert("line") + .attr("class", "link").style({stroke: function(d) { return d.color }}); + // change color of of exitsting nodes + link.style({stroke: function(d) { return d.color }}); - 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;"); - } + if (changed){ + changed = false; - // 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;"); - } + var node = vis.selectAll("g.node") + .data(nodes, function(d) { return d.id;}); - // 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; }); + 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;"); + } - nodeEnter.append("text") - .attr("class", "nodetext") - .attr("dx", -32) - .attr("dy", "-1em") - .text(function(d) {return d.title}); + // Reset line width + var s = servers[d.title]; + if (!s) return; + smoothie.seriesSet[s.index].options.lineWidth = 2; + }); - node.exit().remove(); + nodeEnter.append("circle") + .attr("class", "circle") + .attr("r", function(d) { return d.radius; }) + .style("fill", function(d) { return d.color; }); - var link = vis.selectAll("line.link") - .data(links, function(d) { return d.source.id + "-" + d.target.id; }); - link.enter().insert("line") - .attr("class", "link").style({stroke: function(d) { return d.color }}); + nodeEnter.append("text") + .attr("class", "nodetext") + .attr("dx", -32) + .attr("dy", "-1em") + .text(function(d) {return d.title}); - link.exit().remove(); + node.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 = 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) + ")"; - }); - }; + + + link.exit().remove(); - force.on("tick", render); + vis.selectAll('g.node').forEach(function(e){$('#graph').find('svg').append(e)}); - updateBounds(); - force.start(); + 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) { + 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); + + updateBounds(); + force.start(); + } } update(); @@ -333,6 +394,7 @@ 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); @@ -343,14 +405,16 @@ setInterval( function() { }); }, 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].x, g.nodes[i].y); // g.nodes[i].x, g.nodes[i].y); + graph.addNode(g.nodes[i].name); // 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); + graph.addLink(g.edges[i], data.timestamp); } pendingLinks = intLinks; intLinks = newLinks; @@ -359,6 +423,7 @@ function updateGraph(g, data){ } + // Convert bytes to GiB or TiB and return a string in form "10,23 GiB" function bytesToString( bytes ) { var convertedValue; @@ -374,7 +439,6 @@ function bytesToString( bytes ) { unit = " MiB"; } else if ( bytes >= 1024 ) { convertedValue = Math.round( (bytes / 1024) * 100 ) / 100 ; -// convertedValue = Math.round( ( convertedValue / 1024 ) * 100 ) / 100; unit = " KiB"; } else { convertedValue = Math.round(bytes); @@ -421,7 +485,6 @@ function updateTrafficGraph(stats, data){ 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(server); } // Server seems to have rebootet, redo values but add no point to chart. if (server['lastUptime'] > stats[i].uptime) { @@ -442,21 +505,6 @@ 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; -// 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); -// } } } } |