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"
}
}