Add system info to SystemInfo

Provide the kernel, machine, CPU Model, hostname, and Node.js version
fields to SystemInfo and display them in the Web UI.  These were added
as metrics exposed to prometheus in b46efeb.

packages/lib/src/data/messages_controller.ts

@@ -211,6 +211,11 @@ export class SystemInfo {
 		 * "controller" if these metrics are for the controller.
 		 */
 		public id: number | "controller",
+		public hostname: string,
+		public node: string,
+		public kernel: string,
+		public machine: string,
+		public cpuModel: string,
 		public coreRatios: number[],
 		public memoryCapacity: number,
 		public memoryAvailable: number,
@@ -223,6 +228,11 @@ export class SystemInfo {
 
 	static jsonSchema = Type.Object({
 		"id": Type.Union([Type.Number(), Type.Literal("controller")]),
+		"hostname": Type.String(),
+		"node": Type.String(),
+		"kernel": Type.String(),
+		"machine": Type.String(),
+		"cpuModel": Type.String(),
 		"coreRatios": Type.Array(Type.Number()),
 		"memoryCapacity": Type.Number(),
 		"memoryAvailable": Type.Number(),
@@ -235,6 +245,11 @@ export class SystemInfo {
 	static fromJSON(json: Static<typeof this.jsonSchema>) {
 		return new this(
 			json.id,
+			json.hostname,
+			json.node,
+			json.kernel,
+			json.machine,
+			json.cpuModel,
 			json.coreRatios,
 			json.memoryCapacity,
 			json.memoryAvailable,

packages/lib/src/system_collectors.ts

@@ -4,7 +4,7 @@ import util from "util";
 import { Gauge } from "./prometheus";
 import { SystemInfo } from "./data";
 
-function cpuModel() {
+function filterCpuModel() {
 	const model = os.cpus()[0].model;
 	// Remove irelevant clutter
 	return model
@@ -16,6 +16,7 @@ function cpuModel() {
 		.trim() // AMD CPUs may have trailing spaces in the model.
 	;
 }
+const cpuModel = filterCpuModel();
 
 export const systemInfo = new Gauge(
 	"system_info",
@@ -27,7 +28,7 @@ export const systemInfo = new Gauge(
 systemInfo.labels({
 	"kernel": os.type(),
 	"machine": os.machine(),
-	"cpu_model": cpuModel(),
+	"cpu_model": cpuModel,
 	"hostname": os.hostname(),
 	"node": process.version,
 }).set(1);
@@ -153,6 +154,11 @@ export async function gatherSystemInfo(id: SystemInfo["id"]) {
 
 	return new SystemInfo(
 		id,
+		os.hostname(),
+		process.version,
+		os.type(),
+		os.machine(),
+		cpuModel,
 		cpuUsage,
 		os.totalmem(),
 		os.freemem(),

packages/web_ui/src/components/ControllerPage.tsx

@@ -11,6 +11,7 @@ import { useAccount } from "../model/account";
 import { useSystems } from "../model/system";
 import ControllerConfigTree from "./ControllerConfigTree";
 import PageLayout from "./PageLayout";
+import webUiPackage from "../../package.json";
 
 const { Title } = Typography;
 
@@ -23,6 +24,12 @@ export default function ControllerPage() {
 	return <PageLayout nav={[{ name: "Controller" }]}>
 		<h2>Controller</h2>
 		<Descriptions bordered size="small" column={{ xs: 1, md: 2, lg: 2, xl: 2, xxl: 2 }}>
+			<Descriptions.Item label="Version">{webUiPackage.version}</Descriptions.Item>
+			<Descriptions.Item label="Node.js">{system?.node}</Descriptions.Item>
+			<Descriptions.Item label="OS Kernel">{system?.kernel}</Descriptions.Item>
+			<Descriptions.Item label="Machine">{system?.machine}</Descriptions.Item>
+			<Descriptions.Item label="Hostname" span={2}>{system?.hostname}</Descriptions.Item>
+			<Descriptions.Item label="CPU Model" span={2}>{system?.cpuModel}</Descriptions.Item>
 			<Descriptions.Item label="CPU Usage"><MetricCpuRatio system={system} /></Descriptions.Item>
 			<Descriptions.Item label="Cores"><MetricCpuUsed system={system} /></Descriptions.Item>
 			<Descriptions.Item label="Memory Usage"><MetricMemoryRatio system={system} /></Descriptions.Item>

packages/web_ui/src/components/HostViewPage.tsx

@@ -78,6 +78,12 @@ export default function HostViewPage() {
 					{host["connected"] ? "Connected" : "Disconnected"}
 				</Tag>
 			</Descriptions.Item>
+			<Descriptions.Item label="Version">{host.version}</Descriptions.Item>
+			<Descriptions.Item label="Node.js">{system?.node}</Descriptions.Item>
+			<Descriptions.Item label="OS Kernel">{system?.kernel}</Descriptions.Item>
+			<Descriptions.Item label="Machine">{system?.machine}</Descriptions.Item>
+			<Descriptions.Item label="Hostname" span={2}>{system?.hostname}</Descriptions.Item>
+			<Descriptions.Item label="CPU Model" span={2}>{system?.cpuModel}</Descriptions.Item>
 			<Descriptions.Item label="CPU Usage"><MetricCpuRatio system={system} /></Descriptions.Item>
 			<Descriptions.Item label="Cores"><MetricCpuUsed system={system} /></Descriptions.Item>
 			<Descriptions.Item label="Memory Usage"><MetricMemoryRatio system={system} /></Descriptions.Item>

packages/web_ui/src/components/HostsPage.tsx

@@ -192,6 +192,7 @@ export default function HostsPage() {
 	const [systems] = useSystems();
 	const [showRatios, setShowRatios] = useState(true);
 	const [showNumbers, setShowNumbers] = useState(false);
+	const [showCpuModel, setShowCpuModel] = useState(false);
 
 	return <PageLayout nav={[{ name: "Hosts" }]}>
 		<PageHeader
@@ -207,6 +208,13 @@ export default function HostsPage() {
 					defaultSortOrder: "ascend",
 					sorter: (a, b) => strcmp(a.name, b.name),
 				},
+				{
+					title: "CPU Model",
+					dataIndex: "cpuModel",
+					sorter: (a, b) => strcmp(systems.get(a.id)?.cpuModel ?? "", systems.get(b.id)?.cpuModel ?? ""),
+					render: (_, host) => systems.get(host.id)?.cpuModel,
+					hidden: !showCpuModel,
+				},
 				{
 					title: "CPU%",
 					sorter: (a, b) => (systems.get(a.id)?.cpuRatio ?? 0) - (systems.get(b.id)?.cpuRatio ?? 0),
@@ -290,6 +298,10 @@ export default function HostsPage() {
 				Show metric numbers:
 				<Switch checked={showNumbers} onChange={checked => { setShowNumbers(checked); }} />
 			</label>
+			<label style={{ width: "14em", display: "flex", justifyContent: "space-between", marginRight: 16 }}>
+				Show CPU model:
+				<Switch checked={showCpuModel} onChange={checked => { setShowCpuModel(checked); }} />
+			</label>
 		</Flex>
 		<PluginExtra component="HostsPage" />
 	</PageLayout>;

test/lib/data/SystemInfo.js

@@ -8,7 +8,21 @@ const { SystemInfo } = lib;
 describe("lib/data/ModPack", function() {
 	describe("class SystemInfo", function() {
 		it("correctly calculates derived metrics", function() {
-			const system = new SystemInfo("controller", [0.5, 0.25, 0, 1], 1024, 768, 2048, 512, 0, false);
+			const system = new SystemInfo(
+				"controller",
+				"server",
+				"v18.0.0",
+				"Linux",
+				"x86_64",
+				"x86 CPU",
+				[0.5, 0.25, 0, 1],
+				1024,
+				768,
+				2048,
+				512,
+				0,
+				false
+			);
 			assert.equal(system.cpuCapacity, 4);
 			assert.equal(system.cpuUsed, 1.75);
 			assert.equal(system.cpuAvailable, 2.25);