From aebab2222cf08ed15fcaecc94322ef26dd90f711 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 30 May 2023 15:50:32 +0000 Subject: [PATCH] add pcie device list to instance config Signed-off-by: Arthur Lu --- config.html | 8 +++-- images/actions/device/config.svg | 1 + images/resources/device.svg | 1 + scripts/config.js | 62 ++++++++++++++++++++++++++++---- scripts/utils.js | 3 ++ 5 files changed, 66 insertions(+), 9 deletions(-) create mode 100644 images/actions/device/config.svg create mode 100644 images/resources/device.svg diff --git a/config.html b/config.html index cea654c..924030f 100644 --- a/config.html +++ b/config.html @@ -32,7 +32,7 @@
Disks -
+
Add New Disk Add New CDROM @@ -40,7 +40,11 @@
Network Interfaces -
+
+
+
+ PCIe Devices +
diff --git a/images/actions/device/config.svg b/images/actions/device/config.svg new file mode 100644 index 0000000..7cda8f7 --- /dev/null +++ b/images/actions/device/config.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/resources/device.svg b/images/resources/device.svg new file mode 100644 index 0000000..4d0bd36 --- /dev/null +++ b/images/resources/device.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/config.js b/scripts/config.js index ba3acb3..9a78216 100644 --- a/scripts/config.js +++ b/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, diff --git a/scripts/utils.js b/scripts/utils.js index 7cb5b12..bb0f198 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -18,6 +18,9 @@ export const resources_config = { }, network: { prefix: "net" + }, + pcie: { + prefix: "hostpci" } }