cmd/hiveview: fixes for some UI issues

cmd/hiveview/assets/index.html

@@ -19,9 +19,10 @@
         </nav>
       </div>
 
-      <h2>Recent results</h2>
-      <p>These test suites are available, and can be loaded. Click on 'Load' to load a certain suite.</p>
-
+      <h2>Recent results
+        <div id="loading" class="spinner-border text-secondary" role="status" style="width: 1em; display: none;"></div>
+      </h2>
+      <p id="page-text" style="display: none;">These test suites are available, and can be loaded. Click on 'Load' to load a certain suite.</p>
       <table id="filetable" class="table table-bordered"></table>
     </main>
   </body>

cmd/hiveview/assets/lib/app-index.js

@@ -7,12 +7,19 @@ import * as app from './app.js'
 $(document).ready(function() {
 	app.init();
 
+	$('#loading').show();
 	console.log("Loading file list...");
 	$.ajax("listing.jsonl", {
-		success: showFileListing,
+		success: function(data) {
+			$('#page-text').show();
+			showFileListing(data);
+		},
 		failure: function(status, err) {
 			alert(err);
 		},
+		complete: function () {
+			$('#loading').hide();
+		},
 	});
 });
 
@@ -32,7 +39,7 @@ function linkToSuite(suiteID, suiteName, linkText) {
 	return html.get_link(url, linkText);
 }
 
-function showFileListing(data, error) {
+function showFileListing(data) {
 	console.log("Got file list")
 	// the data is jsonlines
 	/*

cmd/hiveview/assets/lib/app-suite.js

@@ -119,7 +119,7 @@ function showSuiteData(data, suiteID) {
 	$("#testsuite_start").html("🕒 " + suiteTimes.start.toLocaleString());
 	$("#testsuite_duration").html("⌛️ " + format.duration(suiteTimes.duration));
 	let logfile = app.resultsRoot + data.simLog;
-	let url = app.route.logFileInViewer(suiteID, suiteName, logfile);
+	let url = app.route.simulatorLog(suiteID, suiteName, logfile);
 	$("#sim-log-link").attr("href", url);
 	$("#sim-log-link").text("simulator log");
 	$("#testsuite_info").show();
@@ -180,8 +180,8 @@ function showSuiteData(data, suiteID) {
 				data: "clientInfo",
 				width: "20%",
 				responsivePriority: 1,
-				render: function (clientInfo) {
-					return formatClientLogsList(data, clientInfo);
+				render: function (clientInfo, type, row) {
+					return formatClientLogsList(data, row.testIndex, clientInfo);
 				}
 			},
 		],
@@ -302,13 +302,13 @@ function testHasClients(testData) {
 }
 
 // formatClientLogsList turns the clientInfo part of a test into a list of links.
-function formatClientLogsList(suiteData, clientInfo) {
+function formatClientLogsList(suiteData, testIndex, clientInfo) {
 	let links = [];
 	for (let instanceID in clientInfo) {
 		let instanceInfo = clientInfo[instanceID]
 		let logfile = app.resultsRoot + instanceInfo.logFile;
-		let url = app.route.logFileInViewer(suiteData.suiteID, suiteData.name, logfile);
-		let link = html.get_link(url, instanceInfo.name)
+		let url = app.route.clientLog(suiteData.suiteID, suiteData.name, testIndex, logfile);
+		let link = html.get_link(url, instanceInfo.name);
 		link.classList.add('log-link');
 		links.push(link.outerHTML);
 	}
@@ -342,7 +342,7 @@ function formatTestDetails(suiteData, row) {
 	}
 	if (!row.column('logs:name').responsiveHidden() && testHasClients(d)) {
 		let p = document.createElement("p");
-		p.innerHTML = '<b>Clients:</b> ' + formatClientLogsList(suiteData, d.clientInfo);
+		p.innerHTML = '<b>Clients:</b> ' + formatClientLogsList(suiteData, d.testIndex, d.clientInfo);
 		container.appendChild(p);
 	}
 	if (!row.column('duration:name').responsiveHidden()) {
@@ -443,7 +443,7 @@ function formatTestLog(suiteData, test) {
 	if (hiddenLines > 0) {
 		// Create the truncation marker.
 		let linkText = "..." + hiddenLines + " lines hidden: click for full output...";
-		let linkURL = app.route.testLogInViewer(suiteData.suiteID, suiteData.name, test.testIndex);
+		let linkURL = app.route.testLog(suiteData.suiteID, suiteData.name, test.testIndex);
 		let trunc = html.get_link(linkURL, linkText);
 		trunc.classList.add("output-trunc");
 		output.appendChild(trunc);

cmd/hiveview/assets/lib/app-viewer.js

@@ -71,14 +71,15 @@ function setHL(num, scroll) {
 
 // showLinkBack displays the link to the test viewer.
 function showLinkBack(suiteID, suiteName, testID) {
-    let linkText = "Back to test suite: " + suiteName;
-    var linkURL;
+    var text, url;
     if (testID) {
-        linkURL = app.route.testInSuite(suiteID, suiteName, testID);
+        text = "Back to test " + testID + " in suite ‘" + suiteName + "’";
+        url = app.route.testInSuite(suiteID, suiteName, testID);
     } else {
-        linkURL = app.route.suite(suiteID, suiteName);
+        text = "Back to test suite ‘" + suiteName + "’";
+        url = app.route.suite(suiteID, suiteName);
     }
-    $('#link-back').html(html.get_link(linkURL, linkText));
+    $('#link-back').html(html.get_link(url, text));
 }
 
 function showTitle(type, title) {

cmd/hiveview/assets/lib/app.css

@@ -131,9 +131,12 @@ td.ellipsis {
     font-weight: bold;
 }
 
-.highlighted, .dataTable tr.highlighted {
+.dataTable tr {
+    scroll-margin: 8em 0 0 0;
+}
+
+.dataTable tr.highlighted {
     background-color: #fffaea;
-    scroll-margin: 5em 0 0 0;
 }
 
 /* workaround for weird DataTables controls styling at small screen size */

cmd/hiveview/assets/lib/app.js

@@ -4,27 +4,37 @@ export const resultsRoot = "/results/"
 
 // This object has constructor function for various app-internal URLs.
 export let route = {
-	logFileInViewer: function(suiteID, suiteName, file) {
-		let params = new URLSearchParams();
-		params.set("suiteid", suiteID);
-		params.set("suitename", suiteName);
-		params.set("file", file);
+	simulatorLog: function(suiteID, suiteName, file) {
+		let params = new URLSearchParams({
+			"suiteid": suiteID,
+			"suitename": suiteName,
+			"file": file,
+		});
 		return "/viewer.html?" + params.toString();
 	},
 
-	testLogInViewer: function(suiteID, suiteName, testIndex) {
-		let params = new URLSearchParams();
-		params.set("suiteid", suiteID);
-		params.set("suitename", suiteName);
-		params.set("testid", testIndex);
-		params.set("showtestlog", "1");
+	testLog: function(suiteID, suiteName, testIndex) {
+		let params = new URLSearchParams({
+			"suiteid": suiteID,
+			"suitename": suiteName,
+			"testid": testIndex,
+			"showtestlog": "1",
+		});
+		return "/viewer.html?" + params.toString();
+	},
+
+	clientLog: function(suiteID, suiteName, testIndex, file) {
+		let params = new URLSearchParams({
+			"suiteid": suiteID,
+			"suitename": suiteName,
+			"testid": testIndex,
+			"file": file,
+		});
 		return "/viewer.html?" + params.toString();
 	},
 
 	suite: function(suiteID, suiteName) {
-		let params = new URLSearchParams();
-		params.set("suiteid", suiteID);
-		params.set("suitename", suiteName);
+		let params = new URLSearchParams({"suiteid": suiteID, "suitename": suiteName});
 		return "/suite.html?" + params.toString();
 	},
 

cmd/hiveview/assets/lib/utils.js

@@ -181,7 +181,7 @@ export let loader = {
 		}
 
 		var animated = false;
-		if (typeof loading == "boolean") {
+		if (typeof loadState == "boolean") {
 			loadState = 1.0;
 			animated = true;
 		}

cmd/hiveview/assets/lib/viewer.css

@@ -81,7 +81,11 @@ h3 {
     right: 2px;
     padding: 0;
     border-radius: 2px 1px 1px 2px;
-    background: #fffaea;
+    background: #f9f2dc;
+}
+
+pre.highlighted {
+    background-color: #f9f2dc;
 }
 
 .num.highlighted::before {
@@ -106,5 +110,5 @@ h3 {
     border-width: 0 1px 1px 0;
     transform: rotate(-45deg);
     clip-path: inset(4px 0 0 4px);
-    background: linear-gradient(to bottom right, #fffaea00 15px, #fffaea 16px, #fffaea);
+    background: linear-gradient(to bottom right, #f9f2dc00 15px, #f9f2dc 16px, #f9f2dc);
 }