add device config/add/delete handlers,

fix some styling with forms
This commit is contained in:
Arthur Lu 2023-06-19 01:43:52 +00:00
parent 3e50e4cbfe
commit 499d7eee02
2 changed files with 111 additions and 11 deletions

View File

@ -31,3 +31,9 @@ fieldset > *:last-child {
body:not(:-moz-handler-blocked) fieldset { body:not(:-moz-handler-blocked) fieldset {
display: table-cell; display: table-cell;
} }
input[type="checkbox"] {
width: min-content;
margin-left: auto;
margin-right: auto;
}

View File

@ -498,19 +498,19 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
icon.src = "images/resources/network.svg"; icon.src = "images/resources/network.svg";
icon.alt = `${prefix}${netID}`; icon.alt = `${prefix}${netID}`;
icon.dataset.network = netID; icon.dataset.network = netID;
icon.dataset.netvals = netDetails; icon.dataset.values = netDetails;
field.appendChild(icon); field.appendChild(icon);
let netLabel = document.createElement("label"); let netLabel = document.createElement("label");
netLabel.innerText = `${prefix}${netID}`; netLabel.innerText = `${prefix}${netID}`;
netLabel.dataset.network = netID; netLabel.dataset.network = netID;
netLabel.dataset.netvals = netDetails; netLabel.dataset.values = netDetails;
field.append(netLabel); field.append(netLabel);
let netDesc = document.createElement("p"); let netDesc = document.createElement("p");
netDesc.innerText = netDetails; netDesc.innerText = netDetails;
netDesc.dataset.network = netID; netDesc.dataset.network = netID;
netDesc.dataset.netvals = netDetails; netDesc.dataset.values = netDetails;
netDesc.style.overflowX = "hidden"; netDesc.style.overflowX = "hidden";
netDesc.style.whiteSpace = "nowrap"; netDesc.style.whiteSpace = "nowrap";
field.append(netDesc); field.append(netDesc);
@ -523,7 +523,7 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
configBtn.title = "Config Interface"; configBtn.title = "Config Interface";
configBtn.addEventListener("click", handleNetworkConfig); configBtn.addEventListener("click", handleNetworkConfig);
configBtn.dataset.network = netID; configBtn.dataset.network = netID;
configBtn.dataset.netvals = netDetails; configBtn.dataset.values = netDetails;
actionDiv.appendChild(configBtn); actionDiv.appendChild(configBtn);
let deleteBtn = document.createElement("img"); let deleteBtn = document.createElement("img");
@ -532,7 +532,7 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
deleteBtn.title = "Delete Interface"; deleteBtn.title = "Delete Interface";
deleteBtn.addEventListener("click", handleNetworkDelete); deleteBtn.addEventListener("click", handleNetworkDelete);
deleteBtn.dataset.network = netID; deleteBtn.dataset.network = netID;
deleteBtn.dataset.netvals = netDetails; deleteBtn.dataset.values = netDetails;
actionDiv.appendChild(deleteBtn); actionDiv.appendChild(deleteBtn);
field.append(actionDiv); field.append(actionDiv);
@ -540,7 +540,7 @@ function addNetworkLine(fieldset, prefix, netID, netDetails) {
async function handleNetworkConfig() { async function handleNetworkConfig() {
let netID = this.dataset.network; let netID = this.dataset.network;
let netDetails = this.dataset.netvals; let netDetails = this.dataset.values;
let header = `Edit net${netID}`; let header = `Edit net${netID}`;
let body = `<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">`; let body = `<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">`;
@ -694,11 +694,105 @@ function addDeviceLine(fieldset, prefix, deviceID, deviceDetails, deviceData) {
field.append(actionDiv); field.append(actionDiv);
} }
async function handleDeviceDelete() { } // TODO async function handleDeviceConfig() {
let deviceID = this.dataset.device;
let deviceDetails = this.dataset.values;
let header = `Edit Device ${deviceID}`;
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">`;
async function handleDeviceConfig() { } // TODO let d = dialog(header, body, async (result, form) => {
if (result === "confirm") {
document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,
vmid: vmid,
deviceid: deviceID,
device: form.get("device"),
allfn: form.get("allfn"),
pcie: form.get("pcie")
}
let result = await requestAPI("/instance/pci/modify", "POST", body);
if (result.status === 200) {
await getConfig();
populateDevices();
}
else {
alert(result.error);
await getConfig();
populateDevices();
}
}
});
async function handleDeviceAdd() { } // TODO let availDevices = await requestAPI(`/nodes/pci?node=${node}`, "GET");
for (let availDevice of availDevices) {
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id));
}
d.querySelector("#allfn").checked = !(deviceDetails.split(",")[0].includes("."));
d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1");
}
async function handleDeviceDelete() {
let deviceID = this.dataset.device;
let header = `Delete Device ${deviceID}`;
let body = ``;
let d = dialog(header, body, async (result, form) => {
if (result === "confirm") {
document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
let body = {
node: node,
type: type,
vmid: vmid,
deviceid: deviceID
}
let result = await requestAPI("/instance/pci/delete", "DELETE", body);
if (result.status === 200) {
await getConfig();
populateDevices();
}
else {
alert(result.error);
await getConfig();
populateDevices();
}
}
});
}
async function handleDeviceAdd() {
let header = `Create Device`;
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 d = dialog(header, body, async (result, form) => {
if (result === "confirm") {
let body = {
node: node,
type: type,
vmid: vmid,
device: form.get("device"),
allfn: form.get("allfn"),
pcie: form.get("pcie")
}
let result = await requestAPI("/instance/pci/create", "POST", body);
if (result.status === 200) {
await getConfig();
populateDevices();
}
else {
alert(result.error);
await getConfig();
populateDevices();
}
}
});
let availDevices = await requestAPI(`/nodes/pci?node=${node}`, "GET");
for (let availDevice of availDevices) {
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.id));
}
}
async function handleFormExit() { async function handleFormExit() {
let body = { let body = {