From 9ca5c9bca40fa7e962b932364228731a6b9714a8 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 4 Jul 2022 18:25:06 +0200
Subject: [js_chart] Update to Chart.js 3.0.8

---
 modules-available/statistics/pages/list.inc.php    |   2 +
 modules-available/statistics/pages/summary.inc.php | 103 ++++++++++-----------
 .../statistics/templates/clientlist.html           |   6 ++
 .../statistics/templates/cpumodels.html            |  25 +----
 .../statistics/templates/filterbox.html            |  42 +++++++++
 modules-available/statistics/templates/id44.html   |  25 +----
 .../statistics/templates/kvmstate.html             |  25 +----
 modules-available/statistics/templates/memory.html |  25 +----
 .../statistics/templates/summary.html              |   7 +-
 9 files changed, 110 insertions(+), 150 deletions(-)

(limited to 'modules-available/statistics')

diff --git a/modules-available/statistics/pages/list.inc.php b/modules-available/statistics/pages/list.inc.php
index 4eac2ee5..0e405bf5 100644
--- a/modules-available/statistics/pages/list.inc.php
+++ b/modules-available/statistics/pages/list.inc.php
@@ -65,6 +65,7 @@ class SubPage
 		$shutdownAllowedLocations = User::getAllowedLocations('.rebootcontrol.action.reboot');
 		$wolAllowedLocations = User::getAllowedLocations('.rebootcontrol.action.wol');
 		$execAllowedLocations = User::getAllowedLocations('.rebootcontrol.action.exec');
+		$benchmarkAllowedLocations = User::getAllowedLocations('.vmstore.benchmark');
 		// Only make client clickable if user is allowed to view details page
 		$detailsAllowedLocations = User::getAllowedLocations("machine.view-details");
 		$location = self::buildLocationLookup();
@@ -139,6 +140,7 @@ class SubPage
 			'canDelete' => !empty($deleteAllowedLocations),
 			'canWol' => !empty($wolAllowedLocations),
 			'canExec' => !empty($execAllowedLocations),
+			'canBenchmark' => !empty($benchmarkAllowedLocations),
 		);
 		Render::addTemplate('clientlist', $data);
 	}
diff --git a/modules-available/statistics/pages/summary.inc.php b/modules-available/statistics/pages/summary.inc.php
index 1adad7bd..1fa3adf2 100644
--- a/modules-available/statistics/pages/summary.inc.php
+++ b/modules-available/statistics/pages/summary.inc.php
@@ -64,8 +64,8 @@ class SubPage
 		$cutoff = time() - 2 * 86400;
 		$res = Database::simpleQuery("SELECT dateline, data FROM statistic WHERE typeid = '~stats' AND dateline > $cutoff ORDER BY dateline ASC");
 		$labels = array();
-		$points1 = array('data' => array(), 'label' => 'Online', 'fillColor' => '#efe', 'strokeColor' => '#aea', 'pointColor' => '#7e7', 'pointStrokeColor' => '#fff', 'pointHighlightFill' => '#fff', 'pointHighlightStroke' => '#7e7');
-		$points2 = array('data' => array(), 'label' => 'In use', 'fillColor' => '#fee', 'strokeColor' => '#eaa', 'pointColor' => '#e77', 'pointStrokeColor' => '#fff', 'pointHighlightFill' => '#fff', 'pointHighlightStroke' => '#e77');
+		$points1 = array('data' => array(), 'label' => 'Online', 'borderColor' => '#8eb');
+		$points2 = array('data' => array(), 'label' => 'In use', 'borderColor' => '#fa9');
 		$sum = 0;
 		foreach ($res as $row) {
 			$x = explode('#', $row['data']);
@@ -100,26 +100,39 @@ class SubPage
 		$filterSet->makeFragments($where, $join, $args);
 		$res = Database::simpleQuery('SELECT systemmodel, Round(AVG(realcores)) AS cores, Count(*) AS `count` FROM machine m'
 			. " $join WHERE $where GROUP BY systemmodel ORDER BY `count` DESC, systemmodel ASC", $args);
-		$lines = array();
-		$json = array();
+		$lines = [];
+		$json = [];
 		$id = 0;
 		foreach ($res as $row) {
 			if (empty($row['systemmodel'])) {
 				continue;
 			}
 			settype($row['count'], 'integer');
-			$row['id'] = 'systemid' . $id;
 			$row['urlsystemmodel'] = urlencode($row['systemmodel']);
+			$row['idx'] = count($lines);
 			$lines[] = $row;
-			$json[] = array(
+			$json[] = [
 				'color' => self::$STATS_COLORS[$id % count(self::$STATS_COLORS)],
-				'label' => 'systemid' . $id,
 				'value' => $row['count'],
-			);
+			];
 			++$id;
 		}
 		self::capChart($json, $lines, 0.92);
-		Render::addTemplate('cpumodels', array('rows' => $lines, 'json' => json_encode($json)));
+		Render::addTemplate('cpumodels', ['rows' => $lines, 'json' => json_encode($json)]);
+	}
+
+	private static function alignBySteps(int $value, array $steps): int
+	{
+		for ($i = 1; $i < count($steps); ++$i) {
+			if ($steps[$i] < $value) {
+				continue;
+			}
+			if ($steps[$i] - $value >= $value - $steps[$i - 1]) {
+				--$i;
+			}
+			return $steps[$i];
+		}
+		return $value;
 	}
 
 	/**
@@ -130,36 +143,26 @@ class SubPage
 		$filterSet->makeFragments($where, $join, $args);
 		$res = Database::simpleQuery("SELECT mbram, Count(*) AS `count` FROM machine m $join
 			WHERE $where GROUP BY mbram", $args);
-		$lines = array();
+		$lines = [];
 		foreach ($res as $row) {
-			$gb = (int)ceil($row['mbram'] / 1024);
-			for ($i = 1; $i < count(StatisticsFilter::SIZE_RAM); ++$i) {
-				if (StatisticsFilter::SIZE_RAM[$i] < $gb) {
-					continue;
-				}
-				if (StatisticsFilter::SIZE_RAM[$i] - $gb >= $gb - StatisticsFilter::SIZE_RAM[$i - 1]) {
-					--$i;
-				}
-				$gb = StatisticsFilter::SIZE_RAM[$i];
-				break;
-			}
-			if (isset($lines[$gb])) {
-				$lines[$gb] += $row['count'];
-			} else {
-				$lines[$gb] = $row['count'];
-			}
+			$gb = self::alignBySteps((int)ceil($row['mbram'] / 1024), StatisticsFilter::SIZE_RAM);
+			$lines[$gb] = ($lines[$gb] ?? 0) + $row['count'];
 		}
 		asort($lines);
-		$data = array('rows' => array());
-		$json = array();
+		$data = ['rows' => []];
+		$json = [];
 		$id = 0;
 		foreach (array_reverse($lines, true) as $k => $v) {
-			$data['rows'][] = array('gb' => $k, 'count' => $v, 'class' => StatisticsStyling::ramColorClass($k * 1024));
-			$json[] = array(
+			$data['rows'][] = [
+				'idx' => count($data['rows']),
+				'gb' => $k,
+				'count' => $v,
+				'class' => StatisticsStyling::ramColorClass($k * 1024),
+			];
+			$json[] = [
 				'color' => self::$STATS_COLORS[$id % count(self::$STATS_COLORS)],
-				'label' => (string)$k,
 				'value' => $v,
-			);
+			];
 			++$id;
 		}
 		self::capChart($json, $data['rows'], 0.92);
@@ -173,16 +176,16 @@ class SubPage
 	private static function showKvmState($filterSet)
 	{
 		$filterSet->makeFragments($where, $join, $args);
-		$colors = array('UNKNOWN' => '#666', 'UNSUPPORTED' => '#ea5', 'DISABLED' => '#e55', 'ENABLED' => '#6d6');
+		$colors = ['UNKNOWN' => '#666', 'UNSUPPORTED' => '#ea5', 'DISABLED' => '#e55', 'ENABLED' => '#6d6'];
 		$res = Database::simpleQuery("SELECT kvmstate, Count(*) AS `count` FROM machine m $join
 			WHERE $where GROUP BY kvmstate ORDER BY `count` DESC", $args);
-		$lines = array();
-		$json = array();
+		$lines = [];
+		$json = [];
 		foreach ($res as $row) {
+			$row['idx'] = count($lines);
 			$lines[] = $row;
 			$json[] = array(
-				'color' => isset($colors[$row['kvmstate']]) ? $colors[$row['kvmstate']] : '#000',
-				'label' => $row['kvmstate'],
+				'color' => $colors[$row['kvmstate']] ?? '#000',
 				'value' => $row['count'],
 			);
 		}
@@ -200,29 +203,20 @@ class SubPage
 		$total = 0;
 		foreach ($res as $row) {
 			$total += $row['count'];
-			$gb = (int)ceil($row['id44mb'] / 1024);
-			for ($i = 1; $i < count(StatisticsFilter::SIZE_ID44); ++$i) {
-				if (StatisticsFilter::SIZE_ID44[$i] < $gb) {
-					continue;
-				}
-				if (StatisticsFilter::SIZE_ID44[$i] - $gb >= $gb - StatisticsFilter::SIZE_ID44[$i - 1]) {
-					--$i;
-				}
-				$gb = StatisticsFilter::SIZE_ID44[$i];
-				break;
-			}
-			if (isset($lines[$gb])) {
-				$lines[$gb] += $row['count'];
-			} else {
-				$lines[$gb] = $row['count'];
-			}
+			$gb = self::alignBySteps((int)ceil($row['id44mb'] / 1024), StatisticsFilter::SIZE_ID44);
+			$lines[$gb] = ($lines[$gb] ?? 0) + $row['count'];
 		}
 		asort($lines);
 		$data = array('rows' => array());
 		$json = array();
 		$id = 0;
 		foreach (array_reverse($lines, true) as $k => $v) {
-			$data['rows'][] = array('gb' => $k, 'count' => $v, 'class' => StatisticsStyling::hddColorClass($k));
+			$data['rows'][] = [
+				'idx' => count($data['rows']),
+				'gb' => $k,
+				'count' => $v,
+				'class' => StatisticsStyling::hddColorClass($k),
+			];
 			if ($k === 0) {
 				$color = '#e55';
 			} else {
@@ -230,7 +224,6 @@ class SubPage
 			}
 			$json[] = array(
 				'color' => $color,
-				'label' => (string)$k,
 				'value' => $v,
 			);
 		}
diff --git a/modules-available/statistics/templates/clientlist.html b/modules-available/statistics/templates/clientlist.html
index ebd9af4b..3df95d92 100644
--- a/modules-available/statistics/templates/clientlist.html
+++ b/modules-available/statistics/templates/clientlist.html
@@ -219,6 +219,12 @@
 						{{lang_remoteExec}}
 					</button>
 					{{/canExec}}
+					{{#canBenchmark}}
+					<button type="submit" name="action" value="benchmark" class="btn btn-primary btn-machine-action">
+						<span class="glyphicon glyphicon-dashboard"></span>
+						{{lang_remoteExec}}
+					</button>
+					{{/canBenchmark}}
 				</div>
 			</div>
 		</div>
diff --git a/modules-available/statistics/templates/cpumodels.html b/modules-available/statistics/templates/cpumodels.html
index 91464031..e133bec6 100644
--- a/modules-available/statistics/templates/cpumodels.html
+++ b/modules-available/statistics/templates/cpumodels.html
@@ -16,7 +16,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="{{id}}" class="{{collapse}}">
+							<tr id="sysmdl-{{idx}}" class="{{collapse}}">
 								<td data-sort-value="{{systemmodel}}" class="text-left text-nowrap filter-col" data-filter-col="systemmodel">
 									<table class="slx-ellipsis"><tr><td>
 									<a class="filter-val" data-filter-val="{{systemmodel}}" href="#">{{systemmodel}}</a>
@@ -40,28 +40,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-md-4">
-					<canvas id="cpumodelchart" style="width:100%;height:380px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('cpumodelchart').getContext('2d')).Pie(data, {
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#' + tooltip.text);
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-md-4 auto-chart" data-chart="{{json}}" data-chart-dest="#sysmdl-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/filterbox.html b/modules-available/statistics/templates/filterbox.html
index 72754b21..aba4b41c 100644
--- a/modules-available/statistics/templates/filterbox.html
+++ b/modules-available/statistics/templates/filterbox.html
@@ -117,6 +117,48 @@ document.addEventListener("DOMContentLoaded", function () {
 		});
 	});
 
+	// All the pie chars
+	function makePieChart($parent) {
+		var data = $parent.data('chart');
+		var chartData = {
+			datasets: [{
+				data: data.map(function(x) { return x.value; }),
+				backgroundColor: data.map(function(x) { return x.color; })
+			}]
+		};
+		var $canv = $('<canvas style="width:100%;height:250px">');
+		$parent.append($canv);
+		(function() {
+			var $dest = $parent.data('chart-dest');
+			var cur = null;
+			new Chart($canv[0].getContext('2d'), {
+				type: 'pie', data: chartData, options: {
+					animation: false,
+					onHover: function (_, list) {
+						if (list.length === 0 || list[0].index !== cur) {
+							if (cur !== null) {
+								$($dest + cur).removeClass('slx-bold');
+								cur = null;
+							}
+						}
+						if (list.length !== 0 && list[0].index !== cur) {
+							console.log(list[0]);
+							cur = list[0].index;
+							$($dest + cur).addClass('slx-bold');
+						}
+					},
+					plugins: {
+						tooltip: {enabled: false},
+						legend: {display: false}
+					}
+				}
+			});
+		})();
+	}
+	$('.auto-chart').each(function() {
+		makePieChart($(this));
+	});
+
 }, false);
 
 function popupFilter(field) {
diff --git a/modules-available/statistics/templates/id44.html b/modules-available/statistics/templates/id44.html
index bc549fa8..7851ba87 100644
--- a/modules-available/statistics/templates/id44.html
+++ b/modules-available/statistics/templates/id44.html
@@ -15,7 +15,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="tmpid{{gb}}" class="{{class}} {{collapse}}">
+							<tr id="id44-{{idx}}" class="{{class}} {{collapse}}">
 								<td data-sort-value="{{gb}}" class="text-left text-nowrap">
 									<a class="filter-val" data-filter-val="{{gb}}" data-filter-op="~" href="#">{{gb}}&thinsp;GiB</a>
 								</td>
@@ -34,28 +34,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-sm-6">
-					<canvas id="temppartchart" style="width:100%;height:250px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('temppartchart').getContext('2d')).Pie(data, { 
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#tmpid' + String(tooltip.text));
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-sm-6 auto-chart" data-chart="{{json}}" data-chart-dest="#id44-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/kvmstate.html b/modules-available/statistics/templates/kvmstate.html
index 4f8994d1..b3c65733 100644
--- a/modules-available/statistics/templates/kvmstate.html
+++ b/modules-available/statistics/templates/kvmstate.html
@@ -15,7 +15,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="kvm{{kvmstate}}">
+							<tr id="kvm-{{idx}}">
 								<td data-sort-value="{{kvmstate}}" class="text-left text-nowrap">
 									<a class="filter-val" data-filter-val="{{kvmstate}}" href="#">{{kvmstate}}</a>
 								</td>
@@ -25,28 +25,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-sm-6">
-					<canvas id="kvmchart" style="width:100%;height:250px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('kvmchart').getContext('2d')).Pie(data, { 
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#kvm' + tooltip.text);
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-sm-6 auto-chart" data-chart="{{json}}" data-chart-dest="#kvm-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/memory.html b/modules-available/statistics/templates/memory.html
index 185c1a34..0ccbca98 100644
--- a/modules-available/statistics/templates/memory.html
+++ b/modules-available/statistics/templates/memory.html
@@ -15,7 +15,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="ramid{{gb}}" class="{{class}} {{collapse}}">
+							<tr id="ram-{{idx}}" class="{{class}} {{collapse}}">
 								<td class="text-left text-nowrap" data-sort-value="{{gb}}">
 									<a class="filter-val" data-filter-val="{{gb}}" data-filter-op="~" href="#">{{gb}}&thinsp;GiB</a>
 								</td>
@@ -34,28 +34,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-sm-6">
-					<canvas id="ramsizechart" style="width:100%;height:250px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('ramsizechart').getContext('2d')).Pie(data, { 
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#ramid' + tooltip.text);
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-sm-6 auto-chart" data-chart="{{json}}" data-chart-dest="#ram-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/summary.html b/modules-available/statistics/templates/summary.html
index 3ede7bc5..a71d50c0 100644
--- a/modules-available/statistics/templates/summary.html
+++ b/modules-available/statistics/templates/summary.html
@@ -28,10 +28,11 @@
 			document.addEventListener("DOMContentLoaded", function() {
 				var data = {{{json}}};
 				var sel = false;
-				new Chart(document.getElementById('usagehist').getContext('2d')).Line(data, { 
+				new Chart(document.getElementById('usagehist').getContext('2d'), {type: 'line', data: data, options: {
 					animation: false,
-					pointHitDetectionRadius: 5
-				});
+					pointHitDetectionRadius: 5,
+					plugins: { legend: {position: 'left' }}
+				}});
 			}, false);
 		</script>
 	</div>
-- 
cgit v1.2.3-55-g7522