add pcie device list to instance config

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

config.html

@@ -32,7 +32,7 @@
 					</fieldset>
 					<fieldset class="w3-card w3-padding">
 						<span><legend>Disks</legend></span>
-						<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
+						<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
 							<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
 							<img id="cd-add" src="images/actions/disk/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
@@ -40,7 +40,11 @@
 					</fieldset>
 					<fieldset class="w3-card w3-padding">
 						<span><legend>Network Interfaces</legend></span>
-						<div class="input-grid" id="networks" style="grid-template-columns: auto auto auto 1fr;"></div>
+						<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
+					</fieldset>
+					<fieldset class="w3-card w3-padding none" id="devices-card">
+						<span><legend>PCIe Devices</legend></span>
+						<div class="input-grid" id="devices" style="grid-template-columns: auto 1fr auto;"></div>
 					</fieldset>
 					<div class="w3-container w3-center" id="form-actions">
 						<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>

images/actions/device/config.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>

images/resources/device.svg

@@ -0,0 +1 @@
+<svg height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" fill="currentColor"><path d="M480.003 128H48c0-22.056-17.944-40-40-40a8 8 0 000 16c13.234 0 24 10.766 24 24v288a8 8 0 0016 0v-8h16.01C77.238 408 88 397.238 88 384.01V384h392.003C497.646 384 512 369.646 512 352.003V159.997C512 142.354 497.646 128 480.003 128zM496 352.003c0 8.821-7.176 15.997-15.997 15.997H80a8 8 0 00-8 8v8.01c0 4.406-3.584 7.99-7.99 7.99H48V144h432.003c8.821 0 15.997 7.176 15.997 15.997v192.006z"/><path d="M240 192c-22.922 0-43.057 12.12-54.363 30.28a8.026 8.026 0 00-1.737 2.954A63.601 63.601 0 00176 256a63.583 63.583 0 008.264 31.399c.187.398.407.778.656 1.14C196.078 307.354 216.586 320 240 320c35.29 0 64-28.71 64-64a63.583 63.583 0 00-8.264-31.399 8.057 8.057 0 00-.656-1.14C283.922 204.646 263.414 192 240 192zm-48 64c0-4.395.605-8.648 1.717-12.695 3.596 3.178 8.453 6.73 15.035 10.53 6.376 3.681 11.742 6.078 16.208 7.612-2.622 2.061-5.987 4.385-10.208 6.821-8.449 4.878-14.816 7.039-18.36 7.752A47.681 47.681 0 01192 256zm96 0c0 4.103-.52 8.087-1.493 11.891-3.617-3.227-8.542-6.848-15.259-10.726-5.96-3.441-11.036-5.758-15.321-7.298 2.483-1.885 5.564-3.966 9.321-6.135 8.447-4.876 14.816-7.039 18.36-7.752A47.681 47.681 0 01288 256zm-14.052-33.901c-4.562 1.524-10.087 3.96-16.699 7.777-6.252 3.61-10.952 6.997-14.49 10.051-.449-3.245-.759-7.21-.759-11.927 0-9.763 1.314-16.361 2.469-19.785 11.465 1.064 21.775 6.169 29.479 13.884zm-46.329-12.472C226.655 214.344 226 220.354 226 228c0 7.056.557 12.721 1.401 17.26-3.022-1.232-6.59-2.938-10.65-5.282-8.302-4.793-13.33-9.159-15.769-11.883 6.394-8.915 15.757-15.56 26.637-18.468zm-21.57 80.271c4.564-1.524 10.086-3.954 16.702-7.774 6.252-3.61 10.952-6.997 14.49-10.051.449 3.245.759 7.21.759 11.927 0 9.763-1.314 16.361-2.469 19.785-11.466-1.064-21.778-6.17-29.482-13.887zm46.332 12.475C253.345 297.656 254 291.646 254 284c0-7.633-.653-13.635-1.614-18.347 3.066 1.237 6.708 2.97 10.863 5.368 8.764 5.06 13.892 9.652 16.163 12.33-6.4 9.195-15.926 16.054-27.031 19.022z"/><path d="M440 168a8 8 0 000 16c8.822 0 16 7.178 16 16v112c0 8.822-7.178 16-16 16H240c-39.701 0-72-32.299-72-72s32.299-72 72-72h168a8 8 0 000-16H240c-48.523 0-88 39.477-88 88s39.477 88 88 88h200c17.645 0 32-14.355 32-32V200c0-17.645-14.355-32-32-32zm-328 64H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24-88H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24 80H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88z"/><path d="M432 200h-24a8 8 0 000 16h24a8 8 0 000-16zm0 96h-24a8 8 0 000 16h24a8 8 0 000-16zm0-72h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16z"/></g></svg>

scripts/config.js

@@ -5,6 +5,7 @@ window.addEventListener("DOMContentLoaded", init); // do the dumb thing where th
 
 let diskMetaData = resources_config.disk;
 let networkMetaData = resources_config.network;
+let pcieMetaData = resources_config.pcie;
 
 let node;
 let type;
@@ -28,6 +29,7 @@ async function init() {
 	populateResources();
 	populateDisk();
 	populateNetworks();
+	populateDevices();
 
 	document.querySelector("#exit").addEventListener("click", handleFormExit);
 }
@@ -89,13 +91,13 @@ function populateDisk() {
 		let prefix = diskMetaData[type].prefixOrder[i];
 		let busName = diskMetaData[type][prefix].name;
 		let disks = {};
-		Object.keys(config.data).forEach(element => {
+		Object.keys(config.data).forEach((element) => {
 			if (element.startsWith(prefix)) {
 				disks[element.replace(prefix, "")] = config.data[element];
 			}
 		});
 		let ordered_keys = getOrdered(disks);
-		ordered_keys.forEach(element => {
+		ordered_keys.forEach((element) => {
 			let disk = disks[element];
 			addDiskLine("disks", prefix, busName, element, disk);
 		});
@@ -134,7 +136,6 @@ function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
 	field.append(diskDesc);
 
 	let actionDiv = document.createElement("div");
-	actionDiv.classList.add("last-item");
 	diskMetaData.actionBarOrder.forEach((element) => {
 		let action = document.createElement("img");
 		action.classList.add("clickable");
@@ -433,13 +434,13 @@ function populateNetworks() {
 	document.querySelector("#networks").innerHTML = "";
 	let networks = {};
 	let prefix = networkMetaData.prefix;
-	Object.keys(config.data).forEach(element => {
+	Object.keys(config.data).forEach((element) => {
 		if (element.startsWith(prefix)) {
 			networks[element.replace(prefix, "")] = config.data[element];
 		}
 	});
 	let ordered_keys = getOrdered(networks);
-	ordered_keys.forEach(element => {
+	ordered_keys.forEach((element) => {
 		addNetworkLine("networks", prefix, element, networks[element]);
 	});
 }
@@ -449,7 +450,7 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
 
 	let icon = document.createElement("img");
 	icon.src = "images/resources/network.svg";
-	icon.alt = netID;
+	icon.alt = `${prefix}${netID}`;
 	icon.dataset.network = netID;
 	icon.dataset.netvals = netDetails;
 	field.appendChild(icon);
@@ -467,7 +468,6 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
 	field.append(netDesc);
 
 	let actionDiv = document.createElement("div");
-	actionDiv.classList.add("last-item");
 	let action = document.createElement("img");
 	action.classList.add("clickable");
 	action.src = `images/actions/network/config.svg`;
@@ -511,6 +511,54 @@ async function handleNetworkConfig() {
 	d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
 }
 
+function populateDevices() {
+	if (type === "qemu") {
+		document.querySelector("#devices-card").classList.remove("none");
+		document.querySelector("#devices").innerHTML = "";
+		let devices = {};
+		let prefix = pcieMetaData.prefix;
+		Object.keys(config.data).forEach((element) => {
+			if (element.startsWith(prefix)) {
+				devices[element.replace(prefix, "")] = config.data[element];
+			}
+		});
+		let ordered_keys = getOrdered(devices);
+		ordered_keys.forEach((element) => {
+			addDeviceLine("devices", prefix, element, devices[element]);
+		});
+	}
+}
+
+function addDeviceLine(fieldset, prefix, deviceID, deviceDetails) {
+	let field = document.querySelector(`#${fieldset}`);
+
+	let icon = document.createElement("img");
+	icon.src = "images/resources/device.svg";
+	icon.alt = `${prefix}${deviceID}`;
+	icon.dataset.device = deviceID;
+	icon.dataset.values = deviceDetails;
+	field.appendChild(icon);
+
+	let deviceLabel = document.createElement("p");
+	deviceLabel.innerText = deviceDetails;
+	deviceLabel.dataset.device = deviceID;
+	deviceLabel.dataset.values = deviceDetails;
+	field.append(deviceLabel);
+
+	let actionDiv = document.createElement("div");
+	let action = document.createElement("img");
+	action.classList.add("clickable");
+	action.src = `images/actions/device/config.svg`;
+	action.title = "Config Device";
+	action.addEventListener("click", handleDeviceConfig);
+	action.dataset.device = deviceID;
+	action.dataset.values = deviceDetails;
+	actionDiv.appendChild(action);
+	field.append(actionDiv);
+}
+
+async function handleDeviceConfig() {}
+
 async function handleFormExit() {
 	let body = {
 		node: node,

scripts/utils.js

@@ -18,6 +18,9 @@ export const resources_config = {
 	},
 	network: {
 		prefix: "net"
+	},
+	pcie: {
+		prefix: "hostpci"
 	}
 }