[dnbd3] Add simple graph

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