fix bugs in pcie device config dialogs

This commit is contained in:
Arthur Lu 2023-06-22 00:33:53 +00:00
parent 499d7eee02
commit 8365102ce9

View File

@ -645,14 +645,14 @@ async function populateDevices() {
let ordered_keys = getOrdered(devices); let ordered_keys = getOrdered(devices);
ordered_keys.forEach(async (element) => { ordered_keys.forEach(async (element) => {
let deviceData = await requestAPI(`/instance/pci?node=${node}&type=${type}&vmid=${vmid}&hostpci=${element}`, "GET"); let deviceData = await requestAPI(`/instance/pci?node=${node}&type=${type}&vmid=${vmid}&hostpci=${element}`, "GET");
addDeviceLine("devices", prefix, element, devices[element], deviceData); addDeviceLine("devices", prefix, element, devices[element], deviceData.device_name);
}); });
document.querySelector("#device-add").addEventListener("click", handleDeviceAdd) document.querySelector("#device-add").addEventListener("click", handleDeviceAdd)
} }
} }
function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) { function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceName) {
let field = document.querySelector(`#${fieldset}`); let field = document.querySelector(`#${fieldset}`);
let icon = document.createElement("img"); let icon = document.createElement("img");
@ -660,13 +660,15 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
icon.alt = `${prefix}${deviceID}`; icon.alt = `${prefix}${deviceID}`;
icon.dataset.device = deviceID; icon.dataset.device = deviceID;
icon.dataset.values = deviceDetails; icon.dataset.values = deviceDetails;
icon.dataset.name = deviceName;
field.appendChild(icon); field.appendChild(icon);
let deviceLabel = document.createElement("p"); let deviceLabel = document.createElement("p");
let deviceNames = Array.from(deviceData, element => element.device_name);
deviceLabel.innerText = deviceNames.toString(); deviceLabel.innerText = deviceName;
deviceLabel.dataset.device = deviceID; deviceLabel.dataset.device = deviceID;
deviceLabel.dataset.values = deviceDetails; deviceLabel.dataset.values = deviceDetails;
deviceLabel.dataset.name = deviceName;
deviceLabel.style.overflowX = "hidden"; deviceLabel.style.overflowX = "hidden";
deviceLabel.style.whiteSpace = "nowrap"; deviceLabel.style.whiteSpace = "nowrap";
field.append(deviceLabel); field.append(deviceLabel);
@ -680,6 +682,7 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
configBtn.addEventListener("click", handleDeviceConfig); configBtn.addEventListener("click", handleDeviceConfig);
configBtn.dataset.device = deviceID; configBtn.dataset.device = deviceID;
configBtn.dataset.values = deviceDetails; configBtn.dataset.values = deviceDetails;
configBtn.dataset.name = deviceName;
actionDiv.appendChild(configBtn); actionDiv.appendChild(configBtn);
let deleteBtn = document.createElement("img"); let deleteBtn = document.createElement("img");
@ -687,8 +690,9 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
deleteBtn.src = `images/actions/delete-active.svg`; deleteBtn.src = `images/actions/delete-active.svg`;
deleteBtn.title = "Delete Device"; deleteBtn.title = "Delete Device";
deleteBtn.addEventListener("click", handleDeviceDelete); deleteBtn.addEventListener("click", handleDeviceDelete);
configBtn.dataset.device = deviceID; deleteBtn.dataset.device = deviceID;
configBtn.dataset.values = deviceDetails; deleteBtn.dataset.values = deviceDetails;
deleteBtn.dataset.name = deviceName;
actionDiv.appendChild(deleteBtn); actionDiv.appendChild(deleteBtn);
field.append(actionDiv); field.append(actionDiv);
@ -697,8 +701,9 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
async function handleDeviceConfig() { async function handleDeviceConfig() {
let deviceID = this.dataset.device; let deviceID = this.dataset.device;
let deviceDetails = this.dataset.values; let deviceDetails = this.dataset.values;
let header = `Edit Device ${deviceID}`; let deviceName = this.dataset.name;
let body = `<label for="device">Device</label><select id="device" name="device"></select><label for="allfn">All Functions</label><input type="checkbox" id="allfn" name="allfn" class="w3-input w3-border"><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">`; let header = `Edit Expansion Card ${deviceID}`;
let body = `<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border" required>`;
let d = dialog(header, body, async (result, form) => { let d = dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -707,9 +712,8 @@ async function handleDeviceConfig() {
node: node, node: node,
type: type, type: type,
vmid: vmid, vmid: vmid,
deviceid: deviceID, hostpci: deviceID,
device: form.get("device"), device: form.get("device"),
allfn: form.get("allfn"),
pcie: form.get("pcie") pcie: form.get("pcie")
} }
let result = await requestAPI("/instance/pci/modify", "POST", body); let result = await requestAPI("/instance/pci/modify", "POST", body);
@ -729,13 +733,13 @@ async function handleDeviceConfig() {
for (let availDevice of availDevices) { for (let availDevice of availDevices) {
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id)); d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id));
} }
d.querySelector("#allfn").checked = !(deviceDetails.split(",")[0].includes(".")); d.querySelector("#device").append(new Option(deviceName, deviceID));
d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1"); d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1");
} }
async function handleDeviceDelete() { async function handleDeviceDelete() {
let deviceID = this.dataset.device; let deviceID = this.dataset.device;
let header = `Delete Device ${deviceID}`; let header = `Remove Expansion Card ${deviceID}`;
let body = ``; let body = ``;
let d = dialog(header, body, async (result, form) => { let d = dialog(header, body, async (result, form) => {
@ -745,7 +749,7 @@ async function handleDeviceDelete() {
node: node, node: node,
type: type, type: type,
vmid: vmid, vmid: vmid,
deviceid: deviceID hostpci: deviceID
} }
let result = await requestAPI("/instance/pci/delete", "DELETE", body); let result = await requestAPI("/instance/pci/delete", "DELETE", body);
if (result.status === 200) { if (result.status === 200) {
@ -762,8 +766,8 @@ async function handleDeviceDelete() {
} }
async function handleDeviceAdd() { async function handleDeviceAdd() {
let header = `Create Device`; let header = `Add Expansion Card`;
let body = `<label for="device">Device</label><select id="device" name="device"></select><label for="allfn">All Functions</label><input type="checkbox" id="allfn" name="allfn" class="w3-input w3-border"><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">`; let body = `<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border" required>`;
let d = dialog(header, body, async (result, form) => { let d = dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -772,8 +776,7 @@ async function handleDeviceAdd() {
type: type, type: type,
vmid: vmid, vmid: vmid,
device: form.get("device"), device: form.get("device"),
allfn: form.get("allfn"), pcie: form.get("pcie") ? 1 : 0
pcie: form.get("pcie")
} }
let result = await requestAPI("/instance/pci/create", "POST", body); let result = await requestAPI("/instance/pci/create", "POST", body);
if (result.status === 200) { if (result.status === 200) {
@ -787,11 +790,12 @@ async function handleDeviceAdd() {
} }
} }
}); });
let availDevices = await requestAPI(`/nodes/pci?node=${node}`, "GET"); let availDevices = await requestAPI(`/nodes/pci?node=${node}`, "GET");
for (let availDevice of availDevices) { for (let availDevice of availDevices) {
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id)); d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id));
} }
d.querySelector("#pcie").checked = true;
} }
async function handleFormExit() { async function handleFormExit() {