[systemstatus] Improve coloring of disk space indicator, js tweaks

2 files changed, 116 insertions, 84 deletions

diff --git a/modules-available/systemstatus/page.inc.php b/modules-available/systemstatus/page.inc.php
index 96b2c5c9..c97f6172 100644
--- a/modules-available/systemstatus/page.inc.php
+++ b/modules-available/systemstatus/page.inc.php
@@ -173,11 +173,11 @@ class Page_SystemStatus extends Page
 		User::assertPermission("show.overview.diskstat");
 		if (!SystemStatus::diskStat($systemUsage, $storeUsage, $currentSource, $wantedSource))
 			return;
-		$data = ['system' => $this->convertDiskStat($systemUsage)];
+		$data = ['system' => $this->convertDiskStat($systemUsage, 3000)];
 		if ($wantedSource === false) { // Not configured yet, nothing to display
 			$data['notConfigured'] = true;
 		} elseif ($wantedSource === $currentSource) { // Fine and dandy
-			$data['store'] = $this->convertDiskStat($storeUsage);
+			$data['store'] = $this->convertDiskStat($storeUsage, 250000);
 		} elseif ($currentSource === false) { // No current source, nothing mounted
 			$data['storeMissing'] = true;
 		} else { // Something else mounted
@@ -251,13 +251,16 @@ class Page_SystemStatus extends Page
 		}
 		$info = $this->sysInfo();
 		if (isset($info['MemTotal']) && isset($info['MemFree']) && isset($info['SwapTotal'])) {
+			$avail = $info['MemAvailable'] ?? ($info['MemFree'] + $info['Buffers'] + $info['Cached']);
 			$data['memTotal'] = Util::readableFileSize($info['MemTotal'] * 1024);
-			$data['memFree'] = Util::readableFileSize(($info['MemFree'] + $info['Buffers'] + $info['Cached']) * 1024);
-			$data['memPercent'] = 100 - round((($info['MemFree'] + $info['Buffers'] + $info['Cached']) / $info['MemTotal']) * 100);
+			$data['memFree'] = Util::readableFileSize($avail * 1024);
+			$data['memPercent'] = 100 - round(($avail / $info['MemTotal']) * 100);
 			$data['swapTotal'] = Util::readableFileSize($info['SwapTotal'] * 1024);
 			$data['swapUsed'] = Util::readableFileSize(($info['SwapTotal'] - $info['SwapFree']) * 1024);
 			$data['swapPercent'] = 100 - round(($info['SwapFree'] / $info['SwapTotal']) * 100);
-			$data['swapWarning'] = ($data['swapPercent'] > 50 || $info['SwapFree'] < 400000);
+			if ($data['swapTotal'] > 0 && $data['memPercent'] > 75) {
+				$data['swapWarning'] = ($data['swapPercent'] > 80 || $info['SwapFree'] < 400000);
+			}
 		}
 		if (isset($info['CpuIdle']) && isset($info['CpuSystem']) && isset($info['CpuTotal'])) {
 			$data['cpuLoad'] = 100 - round(($info['CpuIdle'] / $info['CpuTotal']) * 100);
@@ -482,31 +485,39 @@ class Page_SystemStatus extends Page
 		echo '<pre>', htmlspecialchars($data, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'), '</pre>';
 	}
 
-	private function convertDiskStat($stat)
+	private function convertDiskStat(array $stat, int $minFreeMb): array
 	{
-		if (!is_array($stat))
-			return false;
 		return [
 			'percent' => $stat['usedPercent'],
 			'size' => Util::readableFileSize($stat['sizeKb'] * 1024),
 			'free' => Util::readableFileSize($stat['freeKb'] * 1024),
-			'color' => $this->usageColor($stat['usedPercent']),
+			'color' => $this->usageColor($stat, $minFreeMb),
 			'filesystem' => $stat['fileSystem'],
 		];
 	}
 
-	private function usageColor($percent)
+	private function usageColor(array $stat, int $minFreeMb): string
 	{
-		if ($percent <= 50) {
-			$r = $b = $percent / 3;
-			$g = (100 - $percent * (50 / 80));
-		} elseif ($percent <= 70) {
-			$r = 55 + ($percent - 50) * (30 / 20);
+		$freeMb = round($stat['freeKb'] / 1024);
+		// All good is half space free, or 4x the min free amount, whatever is more
+		$okFreeMb = max($minFreeMb * 4, round($stat['sizeKb']) / (1024 * 2));
+		if ($freeMb > $okFreeMb) {
+			$usedPercent = 0;
+		} elseif ($freeMb < $minFreeMb) {
+			$usedPercent = 100;
+		} else {
+			$usedPercent = 100 - round(($freeMb - $minFreeMb) / ($okFreeMb - $minFreeMb) * 100);
+		}
+		if ($usedPercent <= 50) {
+			$r = $b = $usedPercent / 3;
+			$g = (100 - $usedPercent * (50 / 80));
+		} elseif ($usedPercent <= 70) {
+			$r = 55 + ($usedPercent - 50) * (30 / 20);
 			$g = 60;
 			$b = 0;
 		} else {
-			$r = ($percent - 70) / 3 + 90;
-			$g = (100 - $percent) * (60 / 30);
+			$r = ($usedPercent - 70) / 3 + 90;
+			$g = (100 - $usedPercent) * (60 / 30);
 			$b = 0;
 		}
 		$r = dechex(round($r * 2.55));
diff --git a/modules-available/systemstatus/templates/systeminfo.html b/modules-available/systemstatus/templates/systeminfo.html
index 96f0ba4f..2489bcaa 100644
--- a/modules-available/systemstatus/templates/systeminfo.html
+++ b/modules-available/systemstatus/templates/systeminfo.html
@@ -48,73 +48,94 @@
 {{/swapWarning}}
 
 <script type="text/javascript">
-	{{#cpuLoadOk}}
-	var cpuCircle = Circles.create({
-	id:         'circles-cpuload',
-			  radius:     60,
-			  value:      {{{cpuLoad}}},
-			  maxValue:   100,
-			  width:      10,
-			  text:       function(value){return value + '%'; },
-			  colors:     ['#dbc', '#33f'],
-			  duration:   400,
-			  wrpClass:   'circles-wrp',
-			  textClass:  'circles-text'
-			  });
-	var $cpu = $(cpuCircle._el);
-	var lastCpuTotal = {{CpuTotal}};
-	var lastCpuIdle = {{CpuIdle}};
-	var lastCpuPercent = {{cpuLoad}};
-	{{/cpuLoadOk}}
-	{{#memTotal}}
-	var memCircle = Circles.create({
-	id:         'circles-mem',
-			  radius:     60,
-			  value:      {{{memPercent}}},
-			  maxValue:   100,
-			  width:      10,
-			  text:       function(value){return value + '%'; },
-			  colors:     ['#dbc', '#33f'],
-			  duration:   400,
-			  wrpClass:   'circles-wrp',
-			  textClass:  'circles-text'
-			  });
-	var swapCircle = Circles.create({
-	id:         'circles-swap',
-			  radius:     60,
-			  value:      {{{swapPercent}}},
-			  maxValue:   100,
-			  width:      10,
-			  text:       function(value){return value + '%'; },
-			  colors:     ['#dbc', '#f33'],
-			  duration:   400,
-			  wrpClass:   'circles-wrp',
-			  textClass:  'circles-text'
-			  });
-	{{/memTotal}}
-	function updateSystem() {
-		if (!cpuCircle && !memCircle) return;
-		if (!$cpu.is(':visible')) {
-			setTimeout(updateSystem, 1200);
-			return;
+	(function () {
+		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;
 		}
-		$.post('?do=SystemStatus&action=SysPoll', { token: TOKEN }, function(data) {
-			if (memCircle && data.MemPercent) memCircle.update(data.MemPercent);
-			if (swapCircle && data.SwapPercent) swapCircle.update(data.SwapPercent);
-			if (cpuCircle && data.CpuIdle) {
-				var total = data.CpuTotal - lastCpuTotal;
-				var load = total - (data.CpuIdle - lastCpuIdle);
-				var percent = Math.round(100 * load / total);
-				cpuCircle.update(percent, Math.abs(percent - lastCpuPercent) < 5 ? 0 : 250);
-				lastCpuTotal = data.CpuTotal;
-				lastCpuIdle = data.CpuIdle;
-				lastCpuPercent = percent;
+
+		{{#cpuLoadOk}}
+			var cpuCircle = Circles.create({
+				id: 'circles-cpuload',
+				radius: 60,
+				value:      {{{cpuLoad}}},
+				maxValue: 100,
+				width: 10,
+				text: function (value) {
+					return value + '%';
+				},
+				colors: ['#dbc', '#33f'],
+				duration: 400,
+				wrpClass: 'circles-wrp',
+				textClass: 'circles-text'
+			});
+			var $cpu = $(cpuCircle._el);
+			var lastCpuTotal = {{CpuTotal}};
+			var lastCpuIdle = {{CpuIdle}};
+			var lastCpuPercent = {{cpuLoad}};
+		{{/cpuLoadOk}}
+		{{#memTotal}}
+			var memCircle = Circles.create({
+				id: 'circles-mem',
+				radius: 60,
+				value:      {{{memPercent}}},
+				maxValue: 100,
+				width: 10,
+				text: function (value) {
+					return value + '%';
+				},
+				colors: ['#dbc', '#33f'],
+				duration: 400,
+				wrpClass: 'circles-wrp',
+				textClass: 'circles-text'
+			});
+			var swapCircle = Circles.create({
+				id: 'circles-swap',
+				radius: 60,
+				value:      {{{swapPercent}}},
+				maxValue: 100,
+				width: 10,
+				text: function (value) {
+					return value + '%';
+				},
+				colors: ['#dbc', '#f33'],
+				duration: 400,
+				wrpClass: 'circles-wrp',
+				textClass: 'circles-text'
+			});
+		{{/memTotal}}
+
+		function updateSystem() {
+			if (!cpuCircle && !memCircle) return;
+			if (!$cpu.is(':visible') || (hiddenProp && document[hiddenProp])) {
+				setTimeout(updateSystem, 2500);
+				return;
 			}
-		}, 'json').fail(function(data) {
-			console.log(data);
-		}).always(function() {
-			setTimeout(updateSystem, 1200);
-		});
-	}
-	setTimeout(updateSystem, 1000);
+			$.post('?do=SystemStatus&action=SysPoll', {token: TOKEN}, function (data) {
+				if (memCircle && data.MemPercent) memCircle.update(data.MemPercent);
+				if (swapCircle && data.SwapPercent) swapCircle.update(data.SwapPercent);
+				if (cpuCircle && data.CpuIdle) {
+					var total = data.CpuTotal - lastCpuTotal;
+					var load = total - (data.CpuIdle - lastCpuIdle);
+					var percent = Math.round(100 * load / total);
+					cpuCircle.update(percent, Math.abs(percent - lastCpuPercent) < 5 ? 0 : 250);
+					lastCpuTotal = data.CpuTotal;
+					lastCpuIdle = data.CpuIdle;
+					lastCpuPercent = percent;
+				}
+			}, 'json').fail(function (data) {
+				console.log(data);
+			}).always(function () {
+				setTimeout(updateSystem, 1200);
+			});
+		}
+
+		setTimeout(updateSystem, 1000);
+	})();
 </script>