summaryrefslogtreecommitdiffstats
path: root/modules-available/dnbd3/templates/page-serverlist.html
diff options
context:
space:
mode:
Diffstat (limited to 'modules-available/dnbd3/templates/page-serverlist.html')
-rw-r--r--modules-available/dnbd3/templates/page-serverlist.html156
1 files changed, 152 insertions, 4 deletions
diff --git a/modules-available/dnbd3/templates/page-serverlist.html b/modules-available/dnbd3/templates/page-serverlist.html
index cdbd0789..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>
@@ -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
generated by cgit v1.2.3-55-g7522 (git 2.39.0) at 2024-04-27 16:48:01 +0200