diff options
Diffstat (limited to 'modules-available/dnbd3/templates/page-serverlist.html')
-rw-r--r-- | modules-available/dnbd3/templates/page-serverlist.html | 160 |
1 files changed, 154 insertions, 6 deletions
diff --git a/modules-available/dnbd3/templates/page-serverlist.html b/modules-available/dnbd3/templates/page-serverlist.html index c44eef0a..bcb0d766 100644 --- a/modules-available/dnbd3/templates/page-serverlist.html +++ b/modules-available/dnbd3/templates/page-serverlist.html @@ -1,6 +1,12 @@ <h1>{{lang_dnbd3Management}}</h1> <p><i>{{lang_dnbd3IntroText}}</i></p> +<style> + .shd { text-shadow: #fff 1px 1px 2px; border:1px solid #ddd; min-width:100px; } + .shd:empty { display: none; } + #speed-graph { width: 100%; height: 100px; margin: 3px; border-radius: 3px; } +</style> + <div class="panel panel-default"> <div class="panel-heading"> {{lang_dnbd3Status}}: @@ -10,7 +16,7 @@ </b> – <a href="#" data-toggle="collapse" data-target="#toggle-div">{{lang_changeDnbd3Status}}</a> </div> - <div class="panel-collapse collapse" id="toggle-div"> + <div class="panel-collapse {{^show_enable_warning}}collapse{{/show_enable_warning}}" id="toggle-div"> <div class="panel-body"> <form method="post" action="?do=dnbd3"> <input type="hidden" name="token" value="{{token}}"> @@ -18,10 +24,19 @@ <input id="enable-dnbd3" type="checkbox" name="enabled" {{enabled_checked_s}} {{perms.toggle-usage.disabled}}> <label for="enable-dnbd3">{{lang_enableDnbd3}}</label> </div> + {{#show_enable_warning}} + <div class="text-warning"> + {{lang_enableDnbd3Hint}} + </div> + {{/show_enable_warning}} <div class="checkbox"> <input id="allow-nfs" type="checkbox" name="with-nfs" {{nfs_checked_s}} {{perms.toggle-usage.disabled}}> <label for="allow-nfs">{{lang_allowNfsFallback}}</label> </div> + <div class="checkbox"> + <input id="prefer-local" type="checkbox" name="prefer-local" {{local_checked_s}} {{perms.toggle-usage.disabled}}> + <label for="prefer-local">{{lang_preferSatDnbd3}}</label> + </div> <button type="submit" name="action" value="toggle-usage" class="btn btn-success" {{perms.toggle-usage.disabled}}> <span class="glyphicon glyphicon-floppy-disk"></span> {{lang_save}} @@ -53,6 +68,7 @@ <th>{{lang_proxyServerTHead}}</th> <th class="text-right">{{lang_storageSize}}</th> <th class="text-right">{{lang_clientCount}}</th> + <th style="min-width:116px">{{lang_uploadSpeed}}</th> <th class="text-right">{{lang_lastSeen}}</th> <th class="text-right">{{lang_uptime}}</th> <th class="text-right">{{lang_txTotal}}</th> @@ -96,8 +112,8 @@ <div class="small">{{hostname}}</div> </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" + <div style="background:linear-gradient(to right, #f85 {{diskUsePercent}}%, transparent {{diskUsePercent}}%)" + class="text-center text-nowrap shd" title="{{lang_diskFree}}: {{diskfree_s}}"> {{disktotal_s}} </div> @@ -107,9 +123,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 text-nowrap"> + <div id="upspeed-{{serverid}}" 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> @@ -223,8 +242,8 @@ </div> </div> -<div id="server-edit-modal" class="modal fade" role="dialog"> - <div class="modal-dialog"> +<div id="server-edit-modal" class="fade modal" role="dialog"> + <div class="modal-dialog modal-lg"> <div class="modal-content"> <form method="post" action="?do=dnbd3"> <input type="hidden" name="token" value="{{token}}"> @@ -302,6 +321,8 @@ </div> <div class="clearfix"></div> +<div class="slx-space"></div> +<canvas id="speed-graph"></canvas> <script type="application/javascript"><!-- document.addEventListener('DOMContentLoaded', function () { @@ -421,6 +442,133 @@ 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(0) + '\u2009B'; + if (bytes < 1048576) return (bytes / 1024).toFixed(0) + '\u2009KiB'; + if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + '\u2009MiB'; + if (bytes < 1099511627776) return (bytes / 1073741824).toFixed(2) + '\u2009GiB'; + return (bytes / 1099511627776).toFixed(2) + '\u2009TiB'; + }; + var calcBackgroundStyle = function(speed) { + 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; + } + 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 history = []; + var inactiveCount = 0; + var updateSpeed = function() { + if (hiddenProp && document[hiddenProp]) { + if (++inactiveCount > 300) + return; + } else { + if (inactiveCount > 300) { + 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]) { + 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)); + speedSum += s; + } + } + var $clients = $('#clientcount-' + k); + $clients.text(e['clientCount'] + e['serverCount']); + } + history.push(speedSum); + while (history.length > 500) history.shift(); + for (k in lastSpeedList) { + if (!elist[k]) { + $('#upspeed-' + k).text('???').css('background', '#aaa'); + $('#clientcount-' + k).text('-'); + } + } + 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 = "9pt 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, 9, 100); + if (peakList[i]) { + gctx.fillStyle = '#333'; + gctx.fillText(formatBytes(part[i]) + "/s", x + 1, v); + gctx.fillStyle = BAR_COLOR; + } + } + } + gctx.stroke(); + }; }); //--></script>
\ No newline at end of file |