hw tab in web ui

kvmd/apps/kvmd/info/hw.py

@@ -69,7 +69,7 @@ class HwInfoSubmanager(BaseInfoSubmanager):
                 "type": "rpi",
                 "base": model,
             },
-            "state": {
+            "health": {
                 "temp": {
                     "cpu": cpu_temp,
                     "gpu": gpu_temp,

web/kvm/index.html

@@ -693,8 +693,11 @@
 			</table>
 			<br>
 			<div class="tabs">
-				<input type="radio" name="about-tab-button" id="about-tab-info-button" value="" checked>
+				<input type="radio" name="about-tab-button" id="about-tab-meta-button" value="" checked>
-				<label for="about-tab-info-button">Info</label>
+				<label for="about-tab-meta-button">Meta</label>
+
+				<input type="radio" name="about-tab-button" id="about-tab-hw-button" value="">
+				<label for="about-tab-hw-button">Hardware</label>
 
 				<input type="radio" name="about-tab-button" id="about-tab-version-button" value="">
 				<label for="about-tab-version-button">Version</label>
@@ -702,12 +705,18 @@
 				<input type="radio" name="about-tab-button" id="about-tab-thanks-button" value="">
 				<label for="about-tab-thanks-button">Thanks</label>
 
-				<div id="about-tab-info-content">
+				<div id="about-tab-meta-content">
 					<div id="about-meta" class="code">
 						<span class="code-comment">No data</span>
 					</div>
 				</div>
 
+				<div id="about-tab-hw-content">
+					<div id="about-hw" class="code">
+						<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>

web/share/css/kvm/about.css

@@ -41,11 +41,12 @@ div#about td.copyright {
 	font-size: 0.8em;
 }
 
-div#about div#about-meta, div#about-version, div#about-thanks {
+div#about div#about-meta, div#about-hw, div#about-version, div#about-thanks {
 	height: 250px;
 }
 
-#about-tab-info-button:checked~#about-tab-info-content,
+#about-tab-meta-button:checked~#about-tab-meta-content,
+#about-tab-hw-button:checked~#about-tab-hw-content,
 #about-tab-version-button:checked~#about-tab-version-content,
 #about-tab-thanks-button:checked~#about-tab-thanks-content {
 	display: block;

web/share/js/kvm/session.js

@@ -55,18 +55,6 @@ export function Session() {
 
 	/************************************************************************/
 
-	var __setAboutInfoSystem = function(state) {
-		$("about-version").innerHTML = `
-			KVMD: <span class="code-comment">${state.kvmd.version}</span><br>
-			<hr>
-			Streamer: <span class="code-comment">${state.streamer.version} (${state.streamer.app})</span>
-			${__formatStreamerFeatures(state.streamer.features)}
-			<hr>
-			${state.kernel.system} kernel:
-			${__formatUname(state.kernel)}
-		`;
-	};
-
 	var __setAboutInfoMeta = function(state) {
 		if (state != null) {
 			let text = JSON.stringify(state, undefined, 4).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
@@ -88,13 +76,65 @@ export function Session() {
 		}
 	};
 
+	var __setAboutInfoHw = function(state) {
+		$("about-hw").innerHTML = `
+			Platform base: <span class="code-comment">${state.platform.base}</span><br>
+			<hr>
+			Temperature:
+			${__formatTemp(state.health.temp)}
+			<hr>
+			Throttling:
+			${__formatThrottling(state.health.throttling)}
+		`;
+	};
+
+	var __formatTemp = function(temp) {
+		let pairs = [];
+		for (let field of Object.keys(temp).sort()) {
+			pairs.push([field.toUpperCase(), `${temp[field]}&deg;C`]);
+		}
+		return __formatUl(pairs);
+	};
+
+	var __formatThrottling = function(throttling) {
+		if (throttling !== null) {
+			let pairs = [];
+			for (let field of Object.keys(throttling.parsed_flags).sort()) {
+				pairs.push([
+					tools.upperFirst(field).replace("_", " "),
+					__formatThrottleError(throttling.parsed_flags[field]),
+				]);
+			}
+			return __formatUl(pairs);
+		} else {
+			return "NO DATA";
+		}
+	};
+
+	var __formatThrottleError = function(flags) {
+		let colored = ((color, text) => `<font color="${color}">${text}</font>`);
+		return `
+			${flags["now"] ? colored("red", "RIGHT NOW") : colored("green", "No")};
+			${flags["past"] ? colored("red", "In the past") : colored("green", "Never")}
+		`;
+	};
+
+	var __setAboutInfoSystem = function(state) {
+		$("about-version").innerHTML = `
+			KVMD: <span class="code-comment">${state.kvmd.version}</span><br>
+			<hr>
+			Streamer: <span class="code-comment">${state.streamer.version} (${state.streamer.app})</span>
+			${__formatStreamerFeatures(state.streamer.features)}
+			<hr>
+			${state.kernel.system} kernel:
+			${__formatUname(state.kernel)}
+		`;
+	};
+
 	var __formatStreamerFeatures = function(features) {
 		let pairs = [];
 		for (let field of Object.keys(features).sort()) {
-			pairs.push([
+			pairs.push([field, (features[field] ? "Yes" : "No")]);
-				field,
-				(features[field] ? "Yes" : "No"),
-			]);
 		}
 		return __formatUl(pairs);
 	};
@@ -103,10 +143,7 @@ export function Session() {
 		let pairs = [];
 		for (let field of Object.keys(kernel).sort()) {
 			if (field != "system") {
-				pairs.push([
+				pairs.push([tools.upperFirst(field), kernel[field]]);
-					field[0].toUpperCase() + field.slice(1),
-					kernel[field],
-				]);
 			}
 		}
 		return __formatUl(pairs);
@@ -158,8 +195,9 @@ export function Session() {
 		let data = JSON.parse(event.data);
 		switch (data.event_type) {
 			case "pong": __missed_heartbeats = 0; break;
-			case "info_system_state": __setAboutInfoSystem(data.event); break;
 			case "info_meta_state": __setAboutInfoMeta(data.event); break;
+			case "info_hw_state": __setAboutInfoHw(data.event); break;
+			case "info_system_state": __setAboutInfoSystem(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;

web/share/js/tools.js

@@ -46,6 +46,10 @@ export var tools = new function() {
 
 	/************************************************************************/
 
+	this.upperFirst = function(text) {
+		return text[0].toUpperCase() + text.slice(1);
+	};
+
 	this.makeId = function() {
 		let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 		let id = "";