[vmstore] Modernize benchmark result display, use ajax

1 files changed, 112 insertions, 52 deletions

diff --git a/modules-available/vmstore/templates/benchmark-result.html b/modules-available/vmstore/templates/benchmark-result.html
index 28f31f12..a0f4118d 100644
--- a/modules-available/vmstore/templates/benchmark-result.html
+++ b/modules-available/vmstore/templates/benchmark-result.html
@@ -1,29 +1,88 @@
 <h1>{{lang_benchmark}}</h1>
-
 <h2>{{lang_benchmarkResult}}</h2>
 
-{{#remaining}}
-<div class="alert alert-info">
-	{{lang_benchmarkSecondsReminaing}}: <span id="remaining-seconds">{{remaining}}</span>
+<div class=progress id="progress">
+	<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemax="100"
+		  id="progress-bar"></div>
 </div>
-{{/remaining}}
-
+<span id="progress-clients" class="justify-content-center"></span>
 <div id="graphs"></div>
 
-<div id="errors"></div>
+<div id="errors" class="alert"></div>
 
 <script>
-	document.addEventListener('DOMContentLoaded', function() {
-		var result = {{{result}}};
+	document.addEventListener('DOMContentLoaded', function () {
+		// Is now available via $.get('?do=vmstore') ....
+		var errorsFound = 0;
+		// This is the list of clients we expect, so as long as there's less entries in result, we're not done yet
 		var clients = {{{wanted}}};
+		// Store the initial number of clients since we remove them later (needed for updating progress bar)
+		var NumClients = clients.length;
 		var graphs = {};
+		// This is the old estimate, there's not much point polling for results before this expires
+		var remaining = {{remaining}};
+		updateProgressBar();
+		var counter = 0;
+
 		function formatBytes(val) {
 			return Math.floor(val / 1024 / 1024) + "\u2009MiB/s";
 		}
+
 		function renderX(val, index) {
 			return Math.floor(val / 1000) + '\u2009s';
 		}
-		function makeGraph(typeKey, resourceKey, caption) {
+
+		function getData() {
+			$('#remaining').remove();
+			$.get('?do=vmstore&id=' + {{id}}).done(function (data) {
+				// Use slice method to make an actual copy of the array and do not reference the old array
+				clients_temp = clients.slice();
+				$.each(clients_temp, function (index, item) {
+					if (typeof data != "undefined" && item in data) {
+						clients.splice(clients.indexOf(item), 1);
+						updateProgressBar();
+						if (data[item].stdout || data[item].stderr) renderError(data, item);
+					}
+				});
+				// Only render graphs if we actually received client data
+				if (clients_temp.length != clients.length) {
+					makeGraph('SEQ', data, 'net', 'Sequential Reads');
+					makeGraph('RND', data, 'net', 'Random 1M');
+				}
+				// All clients in Data
+				if (clients.length === 0) {
+					$('#progress').remove();
+					$('#progress-clients').remove();
+					// Render a success window if we did not recieve any errors
+					if (!errorsFound) {
+						$('#errors').html('No errors found in client data');
+						$('#errors').addClass('alert-success');
+					}
+				} else {
+					setTimeout(getData, 1000);
+				}
+			}) // .always( set timeout( ... 1000) );
+		}
+
+		function renderError(result, uuid) {
+			var $err = $('#errors');
+			$err.addClass('alert-danger');
+			if (errorsFound == 0) $err.append('<h4> Errors </h4>');
+			errorsFound = 1;
+			var $frame = $('<div class="panel panel-body">');
+			$frame.append($('<h5>').text(result[uuid].name));
+			if (result[uuid].stdout) {
+				$frame.append($('<label>').text('stdout'));
+				$frame.append($('<pre>').text(result[uuid].stdout));
+			}
+			if (result[uuid].stderr) {
+				$frame.append($('<label>').text('stderr'));
+				$frame.append($('<pre>').text(result[uuid].stderr));
+			}
+			$err.append($frame);
+		}
+
+		function makeGraph(typeKey, result, resourceKey, caption) {
 			var uuid;
 			var ds = [];
 			var gmin = 0, rmax = 0;
@@ -33,6 +92,7 @@
 				if (!result[uuid][typeKey]) {
 					delete result[uuid];
 					continue;
+					console.log("Result empty");
 				}
 				if (gmin === 0 || result[uuid][typeKey].start < gmin) {
 					gmin = result[uuid][typeKey].start;
@@ -62,7 +122,17 @@
 						}
 					}
 				}
-				if (v[v.length-1].x > rmax) rmax = v[v.length-1].x; // Get max value
+				if (v[v.length - 1].x > rmax) {
+					rmax = v[v.length - 1].x; // Get max value
+					if (graphs[typeKey]) {
+						// If the graph was already rendered we have to update the max Value for the x Scale
+						// and re calculate the labels array
+						graphs[typeKey].options.scales.x.max = v[v.length - 1].x;
+						var ls = [];
+						for (i = 0; i <= rmax; i += 250) ls.push(i);
+						graphs[typeKey].data.labels = ls;
+					}
+				}
 				ds.push({data: v, label: result[uuid].name, borderColor: colors[ds.length], fill: false});
 			}
 			if (cnt > 1) {
@@ -75,67 +145,57 @@
 				$e.append($c);
 				var ls = [];
 				for (i = 0; i <= rmax; i += 250) ls.push(i); // Generate steps for graph
-				graphs[typeKey] = new Chart($c[0].getContext('2d'), {data: {datasets: ds, labels: ls}, type: 'scatter', options: {
+				graphs[typeKey] = new Chart($c[0].getContext('2d'), {
+					data: {datasets: ds, labels: ls}, type: 'scatter', options: {
 						animation: false,
 						responsive: true,
 						borderWidth: 2,
 						pointBorderWidth: 0,
 						showLine: true,
-						scales: { y: { ticks: { callback: formatBytes }}, x: { ticks: { callback: renderX }, max: rmax } },
+						scales: {y: {ticks: {callback: formatBytes}}, x: {ticks: {callback: renderX}, max: rmax}},
 						plugins: {
-							tooltip: { callbacks: { label: function(context) {
+							tooltip: {
+								callbacks: {
+									label: function (context) {
 										if (context.parsed.y !== null) {
 											return context.dataset.label + ": " + formatBytes(context.parsed.y);
 										}
 										return context.dataset.label;
 									}
-							}},
-							legend: { position: 'left'}
+								}
+							},
+							legend: {position: 'left'}
 						}
-					}});
+					}
+				});
 			} else {
 				graphs[typeKey].data.datasets = ds;
 				graphs[typeKey].update();
 			}
 		}
 
-		var $err = $('#errors');
-		for (var uuid in result) {
-			if (result[uuid].stdout || result[uuid].stderr) {
-				var $frame = $('<div class="panel panel-body">');
-				$frame.append($('<h5>').text(result[uuid].name));
-				if (result[uuid].stdout) {
-					$frame.append($('<label>').text('stdout'));
-					$frame.append($('<pre>').text(result[uuid].stdout));
-				}
-				if (result[uuid].stderr) {
-					$frame.append($('<label>').text('stderr'));
-					$frame.append($('<pre>').text(result[uuid].stderr));
-				}
-				$err.append($frame);
+		function updateRemaining() {
+			counter += 1;
+			if (counter >= remaining) {
+				clearInterval(remainingInterval);
 			}
+			updateProgressBar();
 		}
 
-		makeGraph('SEQ', 'net', 'Sequential Reads');
-		makeGraph('RND', 'net', 'Random 1M');
-
-		{{#refresh}}
-			setTimeout(function() {
-				window.location.reload();
-			}, {{refresh}} * 1000);
-			{{#remaining}}
-				var remaining = {{remaining}};
-				function updateRemainingCounter() {
-					if (remaining > 0) {
-						setTimeout(updateRemainingCounter, 1000);
-					} else {
-						window.location.reload();
-					}
-					$('#remaining-seconds').text(remaining--);
-				}
-				updateRemainingCounter();
-			{{/remaining}}
-		{{/refresh}}
+		function updateProgressBar() {
+			if (remaining > 0) {
+				// reserve 80% of the progress bar for the initial "remaining" time
+				// and 20% for the clients we receive
+				progress = counter / remaining * 0.8 + (NumClients - clients.length) / NumClients * 0.2;
+			} else {
+				progress = 0.8 + (NumClients - clients.length) / NumClients * 0.2;
+			}
+			$('#progress-bar').attr('aria-valuenow', progress * 100).css('width', progress * 100 + '%');
+			$('#progress-bar').html(Math.round(progress * 100) + '%');
+			$('#progress-clients').html(clients.length + ' Client(s) remaining');
+		}
 
+		setTimeout(getData, remaining > 0 ? remaining * 1000 : 500);
+		remainingInterval = setInterval(updateRemaining, 1000);
 	});
-</script>
\ No newline at end of file
+</script>