[dnbd3/vmstore] Add first version of speedtest/benchmark GUI

3 files changed, 149 insertions, 1 deletions

diff --git a/modules-available/vmstore/templates/benchmark-imgselect.html b/modules-available/vmstore/templates/benchmark-imgselect.html
new file mode 100644
index 00000000..26ac898e
--- /dev/null
+++ b/modules-available/vmstore/templates/benchmark-imgselect.html
@@ -0,0 +1,41 @@
+<h1>{{lang_benchmark}}</h1>
+
+<h3>{{lang_selectImage}}</h3>
+
+<form role="form" method="post" action="?do=vmstore">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="show" value="benchmark">
+	<input type="hidden" name="id" value="{{id}}">
+
+	<table class="table">
+		<thead>
+		<tr>
+			<th>{{lang_image}}</th>
+			<th class="slx-smallcol">{{lang_users}}</th>
+			<th class="slx-smallcol">{{lang_size}}</th>
+		</tr>
+		</thead>
+		<tbody>
+		{{#list}}
+			<tr>
+				<td>
+					<div class="radio radio-inline">
+						<input type="radio" id="r-{{id}}" name="image" value="{{name}}">
+						<label for="r-{{id}}">{{name}}</label>
+					</div>
+				</td>
+				<td class="text-right">{{users}}</td>
+				<td class="text-right">{{size}}</td>
+			</tr>
+		{{/list}}
+		</tbody>
+	</table>
+
+	<div class="buttonbar text-right">
+		<button type="submit" name="action" value="start" class="btn btn-primary">
+			<span class="glyphicon glyphicon-play"></span>
+			{{lang_start}}
+		</button>
+	</div>
+
+</form>
\ No newline at end of file
diff --git a/modules-available/vmstore/templates/benchmark-result.html b/modules-available/vmstore/templates/benchmark-result.html
new file mode 100644
index 00000000..fc7f8a55
--- /dev/null
+++ b/modules-available/vmstore/templates/benchmark-result.html
@@ -0,0 +1,106 @@
+<h1>{{lang_benchmark}}</h1>
+
+<h2>{{lang_benchmarkResult}}</h2>
+
+{{#remaining}}
+<div class="alert alert-info">
+	{{lang_benchmarkSecondsReminaing}}: {{remaining}}
+</div>
+{{/remaining}}
+
+<div id="graphs"></div>
+
+<script>
+	{{#refresh}}
+		setTimeout(function() {
+			window.location.reload();
+		}, {{refresh}} * 1000);
+	{{/refresh}}
+
+	document.addEventListener('DOMContentLoaded', function() {
+		var result = {{{result}}};
+		var clients = {{{wanted}}};
+		var graphs = {};
+		function formatBytes(val) {
+			return Math.floor(val / 1024 / 1024) + "MB/s";
+		}
+		function renderX(val, index) {
+			return Math.floor(val / 1000) + 's';
+		}
+		function makeGraph(typeKey, resourceKey, caption) {
+			var uuid;
+			var ds = [];
+			var gmin = 0, lmax = 0;
+			var colors = [];
+			var cnt = 0;
+			for (uuid in result) {
+				if (gmin === 0 || result[uuid][typeKey].start < gmin) {
+					gmin = result[uuid][typeKey].start;
+				}
+				cnt++;
+			}
+			if (cnt === 1) {
+				colors.push('rgb(0, 128, 0)');
+			} else {
+				for (i = 0; i < cnt; ++i) {
+					colors.push('rgb(0, 128, ' + (i / (cnt - 1)) * 255 + ')');
+				}
+			}
+			var v, i, o, idx;
+			var sums = [];
+			for (uuid in result) {
+				o = result[uuid][typeKey].start - gmin; // Adjust according to earliest client
+				v = result[uuid][typeKey].values[resourceKey];
+				for (i = 0; i < v.length; ++i) {
+					v[i].x += o;
+					if (cnt > 1) {
+						idx = (v[i].x / 250) | 0;
+						if (sums[idx]) {
+							sums[idx] += v[i].y | 0;
+						} else {
+							sums[idx] = v[i].y | 0;
+						}
+					}
+				}
+				if (v[v.length-1].x > lmax) lmax = v[v.length-1].x; // Get max value
+				ds.push({data: v, label: result[uuid].name, borderColor: colors[ds.length], fill: false});
+			}
+			if (cnt > 1) {
+				ds.push({data: sums, label: 'Sum', borderColor: '#c00'});
+			}
+			if (!graphs[typeKey]) {
+				var $e = $('#graphs');
+				var $c = $('<canvas style="width:100%;height:250px">');
+				$e.append($('<h3>').text(caption));
+				$e.append($c);
+				var ls = [];
+				for (i = 0; i <= lmax; 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: {
+						animation: false,
+						responsive: true,
+						spanGaps: true,
+						borderWidth: 2,
+						pointBorderWidth: 0,
+						showLine: true,
+						scales: { y: { ticks: { callback: formatBytes }}, x: { ticks: { callback: renderX } } },
+						plugins: {
+							tooltip: { callbacks: { label: function(context) {
+										if (context.parsed.y !== null) {
+											return context.dataset.label + ": " + formatBytes(context.parsed.y);
+										}
+										return context.dataset.label;
+									}
+							}}}
+					}});
+			} else {
+				graphs[typeKey].data.datasets = ds;
+				graphs[typeKey].update();
+			}
+			console.log(graphs[typeKey].data);
+		}
+
+		makeGraph('SEQ', 'net', 'Sequential Reads');
+		makeGraph('RND', 'net', 'Random 1M');
+
+	});
+</script>
\ No newline at end of file
diff --git a/modules-available/vmstore/templates/page-vmstore.html b/modules-available/vmstore/templates/page-vmstore.html
index 0e1ad601..fa222631 100644
--- a/modules-available/vmstore/templates/page-vmstore.html
+++ b/modules-available/vmstore/templates/page-vmstore.html
@@ -1,10 +1,11 @@
+<h1>{{lang_vmLocation}}</h1>
+
 <form role="form" method="post" action="?do=VmStore">
 	<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="position:absolute;top:-2000px" tabindex="-1">
 	<input type="password" name="password_fake" id="password_fake" value=""   style="position:absolute;top:-2000px" tabindex="-1">
 	<input type="hidden" name="token" value="{{token}}">
 	<input type="hidden" name="action" value="setstore">
 
-	<h1>{{lang_vmLocation}}</h1>
 
 	<p>{{lang_vmLocationChoose}} <a class="btn btn-default" data-toggle="modal" data-target="#help-store"><span class="glyphicon glyphicon-question-sign"></span></a></p>