diff options
| -rw-r--r-- | static/status-dnbd3.html | 73 |
1 files changed, 58 insertions, 15 deletions
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html index 5f02fa3..1ac6155 100644 --- a/static/status-dnbd3.html +++ b/static/status-dnbd3.html @@ -148,7 +148,7 @@ function myGraph(el) { var updateBounds = function() { var width = window.innerWidth; // Width for the graph and the statistics div - w = width/2; + w = width/3*2; // Chart needs to fit under the graph and the statistics h = window.innerHeight - 150; vis.attr("width", w); @@ -157,7 +157,7 @@ function myGraph(el) { $(el).attr("width", w); $(el).attr("height", h); // Positions for statistics and the traffic graph - $("#statistics").attr("width", w).css("width", w + "px").css("left", w + "px"); + $("#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"); } @@ -295,19 +295,24 @@ 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); - }, 'json').always(function() { - graph.decay(); - graph.update(); - }); - }, 2000); + lastTime = data.timestamp; +}, 'json').always(function() { + graph.decay(); + graph.update(); + }); +}, 2000); // Update data of the graph function updateGraph(g, data){ @@ -331,33 +336,71 @@ function updateTextStatistics(stats){ 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: " + Math.floor(stats[i].bytesSent / Math.pow(1024, 3)) + "GiB <br>" - + "Received: " + Math.floor(stats[i].bytesReceived / Math.pow(1024, 3)) + "GiB </p>"; + + "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 = { 'lastTime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ }; - server.color = colorList(server.index); + 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"); } - if (server['lastTime'] != 0) { - server['line'].append(new Date().getTime(), (stats[i].bytesSent - server['lastSent'])/1000/(data.timestamp - server.lastTime)); + // Server seems to have rebootet, redo values but add no point to chart. + if (server['lastUptime'] > stats[i].uptime) { + server['lastUptime'] = 0; } - server['lastTime'] = data.timestamp; - server['lastSent'] = stats[i].bytesSent; + + // 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); +// } + } } } |