diff options
Diffstat (limited to 'modules-available/dnbd3/templates')
-rw-r--r-- | modules-available/dnbd3/templates/page-serverlist.html | 91 |
1 files changed, 82 insertions, 9 deletions
diff --git a/modules-available/dnbd3/templates/page-serverlist.html b/modules-available/dnbd3/templates/page-serverlist.html index d607e3a5..c5a1337a 100644 --- a/modules-available/dnbd3/templates/page-serverlist.html +++ b/modules-available/dnbd3/templates/page-serverlist.html @@ -3,6 +3,7 @@ <style> .shd { text-shadow: #fff 1px 1px 2px } + #speed-graph { width: 100%; height: 100px; margin: 3px; border-radius: 3px; } </style> <div class="panel panel-default"> @@ -115,8 +116,8 @@ <td data-sort="int" data-sort-default="desc" class="text-right text-nowrap" id="clientcount-{{serverid}}"> {{clientcount}} </td> - <td data-sort="int" data-sort-default="desc" class="text-right"> - <div id="upspeed-{{serverid}}" style="min-width:100px;border:1px solid #ddd" class="text-center text-nowrap shd"></div> + <td data-sort="int" data-sort-default="desc" class="text-right text-nowrap"> + <div id="upspeed-{{serverid}}" style="display:inline-block;min-width:100px;border:1px solid #ddd" class="text-center text-nowrap shd"></div> </td> <td data-sort="int" data-sort-default="desc" data-sort-value="{{dnbd3lastseen}}" class="text-right text-nowrap"> {{dnbd3lastseen_s}} @@ -310,6 +311,8 @@ </div> <div class="clearfix"></div> +<div class="slx-space"></div> +<canvas id="speed-graph"></canvas> <script type="application/javascript"><!-- document.addEventListener('DOMContentLoaded', function () { @@ -441,14 +444,14 @@ document.addEventListener('DOMContentLoaded', function () { hiddenProp = null; } var formatBytes = function(bytes) { - if (bytes < 1024) return bytes.toFixed(2) + ' B'; - if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KiB'; - if (bytes < 1073741824) return (bytes / 1048576).toFixed(2) + ' MiB'; + if (bytes < 1024) return bytes.toFixed(0) + ' B'; + if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KiB'; + if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MiB'; if (bytes < 1099511627776) return (bytes / 1073741824).toFixed(2) + ' GiB'; return (bytes / 1099511627776).toFixed(2) + ' TiB'; }; var calcBackgroundStyle = function(speed) { - const colors = ['#eee', '#cfc', '#6f6', '#90bf30', '#f00', '#f88']; + const colors = ['#eee', '#cfc', '#6f6', '#bc3', '#f00', '#f88']; const limits = [1048576, 10485760, 104857600, 1073741824, 10737418240]; for (var i = 0; i < 4; ++i) { if (speed < limits[i]) break; @@ -457,10 +460,19 @@ document.addEventListener('DOMContentLoaded', function () { return { background: 'linear-gradient(90deg, ' + colors[i+1] + ' ' + percent + '%, ' + colors[i] + ' ' + percent + '%)' }; }; var lastSpeedList = {}; + var history = []; + var inactiveCount = 0; var updateSpeed = function() { - if (hiddenProp && document[hiddenProp]) + if (hiddenProp && document[hiddenProp]) { + inactiveCount++; return; + } + if (inactiveCount > 3) { + history.push(-1); + } + inactiveCount = 0; $.ajax('?do=dnbd3&action=stats').done(function(elist) { + var speedSum = 0; for (var k in elist) { var e = elist[k]; if (lastSpeedList[k]) { @@ -469,17 +481,78 @@ document.addEventListener('DOMContentLoaded', function () { var $speed = $('#upspeed-' + k); var s = (e['bytesSent'] - lastSpeed['bytesSent']) / (e['ts'] - lastSpeed['ts']); $speed.text(formatBytes(s) + "/s").css(calcBackgroundStyle(s)); + speedSum += s; } } var $clients = $('#clientcount-' + k); - $clients.text(e['clientCount'] + ' + ' + e['serverCount']); - $clients.data('sort-value', e['clientCount'] + e['serverCount']); + $clients.text(e['clientCount'] + e['serverCount']); } + history.push(speedSum); + while (history.length > 500) history.shift(); lastSpeedList = elist; + updateGraph(); }); }; updateSpeed(); setInterval(updateSpeed, 2500); + var graph = document.getElementById('speed-graph'); + var updateGraph = function() { + var i; + var gctx = graph.getContext('2d'); + graph.width = Math.floor(graph.clientWidth / graph.clientHeight * 100); + graph.height = 100; + gctx.fillStyle = '#eee'; + gctx.fillRect(0, 0, graph.width, graph.height); + var part = history.slice(-Math.floor(graph.width / 10)); + var max = 1; + var peakIdx = -1; + var peakCount = 0; + var peakList = {}; + for (i = 0; i < part.length; ++i) { + if (part[i] > max) max = part[i]; + } + for (i = 0; i < part.length; ++i) { + if (peakIdx === -1 || part[i] > part[peakIdx]) { + peakIdx = i; + peakCount = 0; + } else if ((part[peakIdx] - part[i]) / max > 0.1) { + if (peakCount > 3) { + peakList[part.length - peakIdx - 1] = 1; + peakIdx = -1; + } else { + peakCount++; + } + } else { + peakIdx = i; + } + } + if (peakCount > 1) { + peakList[part.length - peakIdx - 1] = 1; + } + const BAR_COLOR = '#999'; + part.reverse(); + gctx.fillStyle = BAR_COLOR; + gctx.font = "10pt Arial"; + gctx.textBaseline = 'top'; + for (i = 0; i < part.length; ++i) { + var x = graph.width - i*10; + if (part[i] === -1) { + gctx.fillStyle = '#bbb'; + gctx.fillRect(x - 5, 0, 1, 100); + gctx.fillStyle = BAR_COLOR; + } else { + var v = Math.round((1 - part[i] / max) * 100); + gctx.fillRect(x - 10, v, 10, 100); + if (peakList[i]) { + gctx.fillStyle = '#333'; + gctx.fillText(formatBytes(part[i]) + "/s", x + 1, v); + gctx.fillStyle = BAR_COLOR; + } + } + } + gctx.stroke(); + }; + // <span style="border-radius:5px;display:inline-block;background:red;width:10px;height:10px"></span> }); //--></script>
\ No newline at end of file |