diff options
author | Simon Rettberg | 2022-05-17 16:34:06 +0200 |
---|---|---|
committer | Simon Rettberg | 2022-05-17 16:34:06 +0200 |
commit | b573ff04e6aefcb9050da330408e757410ede53b (patch) | |
tree | 1b8ad093b920cd2a261c2f1bb83538b8afba6921 /modules-available/dnbd3/templates/page-serverlist.html | |
parent | [statistics] Make sure hwname and devpath get valid ASCII only (diff) | |
download | slx-admin-b573ff04e6aefcb9050da330408e757410ede53b.tar.gz slx-admin-b573ff04e6aefcb9050da330408e757410ede53b.tar.xz slx-admin-b573ff04e6aefcb9050da330408e757410ede53b.zip |
[dnbd3] Show upload speed and client count in realtime
Diffstat (limited to 'modules-available/dnbd3/templates/page-serverlist.html')
-rw-r--r-- | modules-available/dnbd3/templates/page-serverlist.html | 63 |
1 files changed, 61 insertions, 2 deletions
diff --git a/modules-available/dnbd3/templates/page-serverlist.html b/modules-available/dnbd3/templates/page-serverlist.html index cdbd0789..d607e3a5 100644 --- a/modules-available/dnbd3/templates/page-serverlist.html +++ b/modules-available/dnbd3/templates/page-serverlist.html @@ -1,6 +1,10 @@ <h1>{{lang_dnbd3Management}}</h1> <p><i>{{lang_dnbd3IntroText}}</i></p> +<style> + .shd { text-shadow: #fff 1px 1px 2px } +</style> + <div class="panel panel-default"> <div class="panel-heading"> {{lang_dnbd3Status}}: @@ -53,6 +57,7 @@ <th>{{lang_proxyServerTHead}}</th> <th class="text-right">{{lang_storageSize}}</th> <th class="text-right">{{lang_clientCount}}</th> + <th>{{lang_uploadSpeed}}</th> <th class="text-right">{{lang_lastSeen}}</th> <th class="text-right">{{lang_uptime}}</th> <th class="text-right">{{lang_txTotal}}</th> @@ -97,7 +102,7 @@ </td> <td data-sort="int" data-sort-default="desc" data-sort-value="{{disktotal}}"> <div style="border:1px solid #ddd;background:linear-gradient(to right, #f85 {{diskUsePercent}}%, transparent {{diskUsePercent}}%)" - class="text-center text-nowrap" + class="text-center text-nowrap shd" title="{{lang_diskFree}}: {{diskfree_s}}"> {{disktotal_s}} </div> @@ -107,9 +112,12 @@ </div> {{/errormsg}} </td> - <td data-sort="int" data-sort-default="desc" class="text-right"> + <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> <td data-sort="int" data-sort-default="desc" data-sort-value="{{dnbd3lastseen}}" class="text-right text-nowrap"> {{dnbd3lastseen_s}} </td> @@ -421,6 +429,57 @@ document.addEventListener('DOMContentLoaded', function () { query(); rebootServerId = 0; }); + // live speed + var hiddenProp; + if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support + hiddenProp = "hidden"; + } else if (typeof document.msHidden !== "undefined") { + hiddenProp = "msHidden"; + } else if (typeof document.webkitHidden !== "undefined") { + hiddenProp = "webkitHidden"; + } else { + 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 < 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 limits = [1048576, 10485760, 104857600, 1073741824, 10737418240]; + for (var i = 0; i < 4; ++i) { + if (speed < limits[i]) break; + } + const percent = Math.round(Math.max(0, Math.min(100, speed / limits[i] * 100))); + return { background: 'linear-gradient(90deg, ' + colors[i+1] + ' ' + percent + '%, ' + colors[i] + ' ' + percent + '%)' }; + }; + var lastSpeedList = {}; + var updateSpeed = function() { + if (hiddenProp && document[hiddenProp]) + return; + $.ajax('?do=dnbd3&action=stats').done(function(elist) { + for (var k in elist) { + var e = elist[k]; + if (lastSpeedList[k]) { + var lastSpeed = lastSpeedList[k]; + if (lastSpeed['ts'] < e['ts']) { + var $speed = $('#upspeed-' + k); + var s = (e['bytesSent'] - lastSpeed['bytesSent']) / (e['ts'] - lastSpeed['ts']); + $speed.text(formatBytes(s) + "/s").css(calcBackgroundStyle(s)); + } + } + var $clients = $('#clientcount-' + k); + $clients.text(e['clientCount'] + ' + ' + e['serverCount']); + $clients.data('sort-value', e['clientCount'] + e['serverCount']); + } + lastSpeedList = elist; + }); + }; + updateSpeed(); + setInterval(updateSpeed, 2500); }); //--></script>
\ No newline at end of file |