improved info handler

4 files changed, 75 insertions, 33 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 52938a12..36459d21 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -650,25 +650,18 @@
 							<tr>
 								<td colspan="2" class="copyright">Copyright &copy; 2018 Pi-KVM Developers Team</td>
 							</tr>
-							<tr>
-								<td><br></td>
-							</tr>
-							<tr class="version">
-								<td>KVMD:</td>
-								<td id="about-version-kvmd"></td>
-							</tr>
-							<tr class="version">
-								<td>Streamer:</td>
-								<td id="about-version-streamer"></td>
-							</tr>
 						</table>
 					</td>
 				</tr>
 			</table>
+			<br>
 			<div class="tabs">
 				<input type="radio" name="about-tab-button" id="about-tab-info-button" value="" checked>
 				<label for="about-tab-info-button">Info</label>
 
+				<input type="radio" name="about-tab-button" id="about-tab-version-button" value="">
+				<label for="about-tab-version-button">Version</label>
+
 				<input type="radio" name="about-tab-button" id="about-tab-thanks-button" value="">
 				<label for="about-tab-thanks-button">Thanks</label>
 
@@ -677,8 +670,15 @@
 						<span class="code-comment">No data</span>
 					</div>
 				</div>
+
+				<div id="about-tab-version-content">
+					<div id="about-version" class="code">
+						<span class="code-comment">No data</span>
+					</div>
+				</div>
+
 				<div id="about-tab-thanks-content">
-					<div class="code" style="max-height: 300px">
+					<div id="about-thanks" class="code">
 						<span class="code-comment">
 							// These kind people donated money to the Pi-KVM project<br>
 							// and supported the work on it. We are very grateful<br>
diff --git a/web/share/css/kvm/about.css b/web/share/css/kvm/about.css
index 306f0a73..d7cc3af1 100644
--- a/web/share/css/kvm/about.css
+++ b/web/share/css/kvm/about.css
@@ -41,15 +41,12 @@ div#about td.copyright {
 	font-size: 0.8em;
 }
 
-div#about tr.version {
-	font-family: monospace;
-}
-
-div#about div#about-meta {
-	height: 200px;
+div#about div#about-meta, div#about-version, div#about-thanks {
+	height: 250px;
 }
 
 #about-tab-info-button:checked~#about-tab-info-content,
+#about-tab-version-button:checked~#about-tab-version-content,
 #about-tab-thanks-button:checked~#about-tab-thanks-content {
 	display: block;
 }
diff --git a/web/share/js/index/main.js b/web/share/js/index/main.js
index ba33b0aa..497a4d73 100644
--- a/web/share/js/index/main.js
+++ b/web/share/js/index/main.js
@@ -56,15 +56,20 @@ function __loadKvmdInfo() {
 			if (http.status === 200) {
 				let info = JSON.parse(http.responseText).result;
 
-				let apps = Object.values(info.extras).sort(function(a, b) {
-					if (a.place < b.place) {
-						return -1;
-					} else if (a.place > b.place) {
-						return 1;
-					} else {
-						return 0;
-					}
-				});
+				let apps = [];
+				if (info.extras === null) {
+					wm.error("Not all applications in the menu can be displayed<br>due an error. See KVMD logs for details.");
+				} else {
+					apps = Object.values(info.extras).sort(function(a, b) {
+						if (a.place < b.place) {
+							return -1;
+						} else if (a.place > b.place) {
+							return 1;
+						} else {
+							return 0;
+						}
+					});
+				}
 
 				$("apps-box").innerHTML = "<ul id=\"apps\"></ul>";
 
@@ -79,7 +84,7 @@ function __loadKvmdInfo() {
 				$("apps").innerHTML += __makeApp("logout-button", "#", "share/svg/logout.svg", "Logout");
 				tools.setOnClick($("logout-button"), __logout);
 
-				if (info.meta && info.meta.server && info.meta.server.host) {
+				if (info.meta !== null && info.meta.server && info.meta.server.host) {
 					$("kvmd-meta-server-host").innerHTML = info.meta.server.host;
 					document.title = `Pi-KVM Index: ${info.meta.server.host}`;
 				} else {
diff --git a/web/share/js/kvm/session.js b/web/share/js/kvm/session.js
index 5df1481c..7b68ac88 100644
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -55,8 +55,8 @@ export function Session() {
 
 	/************************************************************************/
 
-	var __setKvmdInfo = function(state) {
-		if (state.meta) {
+	var __setAboutInfo = function(state) {
+		if (state.meta != null) {
 			let text = JSON.stringify(state.meta, undefined, 4).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
 			$("about-meta").innerHTML = `
 				<span class="code-comment">// The Pi-KVM metadata.<br>
@@ -75,8 +75,48 @@ export function Session() {
 			}
 		}
 
-		$("about-version-kvmd").innerHTML = state.version.kvmd;
-		$("about-version-streamer").innerHTML = `${state.version.streamer} (${state.streamer})`;
+		let sys = state.system;
+		$("about-version").innerHTML = `
+			KVMD: <span class="code-comment">${sys.kvmd.version}</span><br>
+			<hr>
+			Streamer: <span class="code-comment">${sys.streamer.version} (${sys.streamer.app})</span>
+			${__formatStreamerFeatures(sys.streamer.features)}
+			<hr>
+			${sys.kernel.system} kernel:
+			${__formatUname(sys.kernel)}
+		`;
+	};
+
+	var __formatStreamerFeatures = function(features) {
+		let pairs = [];
+		for (let field of Object.keys(features).sort()) {
+			pairs.push([
+				field,
+				(features[field] ? "Yes" : "No"),
+			]);
+		}
+		return __formatUl(pairs);
+	};
+
+	var __formatUname = function(kernel) {
+		let pairs = [];
+		for (let field of Object.keys(kernel).sort()) {
+			if (field != "system") {
+				pairs.push([
+					field[0].toUpperCase() + field.slice(1),
+					kernel[field],
+				]);
+			}
+		}
+		return __formatUl(pairs);
+	};
+
+	var __formatUl = function(pairs) {
+		let text = "<ul>";
+		for (let pair of pairs) {
+			text += `<li>${pair[0]}: <span class="code-comment">${pair[1]}</span></li>`;
+		}
+		return text + "</ul>";
 	};
 
 	var __startSession = function() {
@@ -117,7 +157,7 @@ export function Session() {
 		let data = JSON.parse(event.data);
 		switch (data.event_type) {
 			case "pong": __missed_heartbeats = 0; break;
-			case "info_state": __setKvmdInfo(data.event); break;
+			case "info_state": __setAboutInfo(data.event); break;
 			case "wol_state": __wol.setState(data.event); break;
 			case "hid_state": __hid.setState(data.event); break;
 			case "atx_state": __atx.setState(data.event); break;