From b573ff04e6aefcb9050da330408e757410ede53b Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Tue, 17 May 2022 16:34:06 +0200
Subject: [dnbd3] Show upload speed and client count in realtime

---
 .../dnbd3/templates/page-serverlist.html           | 63 +++++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

(limited to 'modules-available/dnbd3/templates/page-serverlist.html')

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
-- 
cgit v1.2.3-55-g7522