554 lines
18 KiB
JavaScript
554 lines
18 KiB
JavaScript
import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setSVGSrc, requestDash } from "./utils.js";
|
|
import { alert, dialog } from "./dialog.js";
|
|
|
|
window.addEventListener("DOMContentLoaded", init);
|
|
|
|
let node;
|
|
let type;
|
|
let vmid;
|
|
|
|
async function init () {
|
|
setAppearance();
|
|
|
|
const uriData = getURIData();
|
|
node = uriData.node;
|
|
type = uriData.type;
|
|
vmid = uriData.vmid;
|
|
|
|
initVolumes();
|
|
initNetworks();
|
|
initDevices();
|
|
|
|
document.querySelector("#config-form").addEventListener("submit", handleFormExit);
|
|
}
|
|
|
|
class VolumeAction extends HTMLElement {
|
|
shadowRoot = null;
|
|
|
|
constructor () {
|
|
super();
|
|
const internals = this.attachInternals();
|
|
this.shadowRoot = internals.shadowRoot;
|
|
if (this.dataset.type === "move") {
|
|
this.addEventListener("click", this.handleDiskMove);
|
|
}
|
|
else if (this.dataset.type === "resize") {
|
|
this.addEventListener("click", this.handleDiskResize);
|
|
}
|
|
else if (this.dataset.type === "delete") {
|
|
this.addEventListener("click", this.handleDiskDelete);
|
|
}
|
|
else if (this.dataset.type === "attach") {
|
|
this.addEventListener("click", this.handleDiskAttach);
|
|
}
|
|
else if (this.dataset.type === "detach") {
|
|
this.addEventListener("click", this.handleDiskDetach);
|
|
}
|
|
}
|
|
|
|
async setStatusLoading () {
|
|
const svg = document.querySelector(`svg[data-volume="${this.dataset.volume}"]`);
|
|
setSVGSrc(svg, "images/status/loading.svg");
|
|
}
|
|
|
|
async handleDiskDetach () {
|
|
const disk = this.dataset.volume;
|
|
const header = `Detach ${disk}`;
|
|
const body = `<p>Are you sure you want to detach disk ${disk}</p>`;
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
this.setStatusLoading();
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST");
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to detach ${disk} but got: ${result.error}`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
|
|
async handleDiskAttach () {
|
|
const header = `Attach ${this.dataset.volume}`;
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label>
|
|
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "30" : "255"}" required>
|
|
</form>
|
|
`;
|
|
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const device = form.get("device");
|
|
this.setStatusLoading();
|
|
const body = {
|
|
source: this.dataset.volume.replace("unused", "")
|
|
};
|
|
const prefix = type === "qemu" ? "scsi" : "mp";
|
|
const disk = `${prefix}${device}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
|
|
async handleDiskResize () {
|
|
const header = `Resize ${this.dataset.volume}`;
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="size-increment">Size Increment (GiB)</label>
|
|
<input class="w3-input w3-border" name="size-increment" id="size-increment" type="number" min="0" max="131072">
|
|
</form>
|
|
`;
|
|
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const disk = this.dataset.volume;
|
|
this.setStatusLoading();
|
|
const body = {
|
|
size: form.get("size-increment")
|
|
};
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to resize ${disk} but got: ${result.error}`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
|
|
async handleDiskMove () {
|
|
const content = type === "qemu" ? "images" : "rootdir";
|
|
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
|
const header = `Move ${this.dataset.volume}`;
|
|
let options = "";
|
|
storage.data.forEach((element) => {
|
|
if (element.content.includes(content)) {
|
|
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
|
}
|
|
});
|
|
const select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select"><option hidden disabled selected value></option>${options}</select>`;
|
|
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
${select}
|
|
<label for="delete-check">Delete Source</label><input class="w3-input w3-border" name="delete-check" id="delete-check" type="checkbox" checked required>
|
|
</form>
|
|
`;
|
|
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const disk = this.dataset.volume;
|
|
this.setStatusLoading();
|
|
const body = {
|
|
storage: form.get("storage-select"),
|
|
delete: form.get("delete-check") === "on" ? "1" : "0"
|
|
};
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
|
|
async handleDiskDelete () {
|
|
const disk = this.dataset.volume;
|
|
const header = `Delete ${disk}`;
|
|
const body = `<p>Are you sure you want to <strong>delete</strong> disk ${disk}</p>`;
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
this.setStatusLoading();
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE");
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to delete ${disk} but got: ${result.error}`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("volume-action", VolumeAction);
|
|
|
|
async function initVolumes () {
|
|
document.querySelector("#disk-add").addEventListener("click", handleDiskAdd);
|
|
if (type === "qemu") {
|
|
document.querySelector("#cd-add").addEventListener("click", handleCDAdd);
|
|
}
|
|
}
|
|
|
|
async function refreshVolumes () {
|
|
let volumes = await requestDash(`/config/volumes?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
|
if (volumes.status !== 200) {
|
|
alert("Error fetching instance volumes.");
|
|
}
|
|
else {
|
|
volumes = volumes.data;
|
|
const container = document.querySelector("#volumes");
|
|
container.setHTMLUnsafe(volumes);
|
|
}
|
|
|
|
initVolumes();
|
|
}
|
|
|
|
async function handleDiskAdd () {
|
|
const content = type === "qemu" ? "images" : "rootdir";
|
|
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
|
const header = "Create New Disk";
|
|
let options = "";
|
|
storage.data.forEach((element) => {
|
|
if (element.content.includes(content)) {
|
|
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
|
}
|
|
});
|
|
const select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select" required><option hidden disabled selected value></option>${options}</select>`;
|
|
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "30" : "255"}" value="0" required>
|
|
${select}
|
|
<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
|
|
</form>
|
|
`;
|
|
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const body = {
|
|
storage: form.get("storage-select"),
|
|
size: form.get("size")
|
|
};
|
|
const id = form.get("device");
|
|
const prefix = type === "qemu" ? "scsi" : "mp";
|
|
const disk = `${prefix}${id}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to create ${disk} but got: ${result.error}`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
|
|
async function handleCDAdd () {
|
|
const isos = await requestAPI("/user/vm-isos", "GET");
|
|
const header = "Mount a CDROM";
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required>
|
|
<label for="iso-select">Image</label><select class="w3-select w3-border" name="iso-select" id="iso-select" required></select>
|
|
</form>
|
|
`;
|
|
|
|
const d = dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const body = {
|
|
iso: form.get("iso-select")
|
|
};
|
|
const disk = `ide${form.get("device")}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
|
|
}
|
|
refreshVolumes();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
|
|
const isoSelect = d.querySelector("#iso-select");
|
|
|
|
for (const iso of isos) {
|
|
isoSelect.append(new Option(iso.name, iso.volid));
|
|
}
|
|
isoSelect.selectedIndex = -1;
|
|
}
|
|
|
|
class NetworkAction extends HTMLElement {
|
|
shadowRoot = null;
|
|
|
|
constructor () {
|
|
super();
|
|
const internals = this.attachInternals();
|
|
this.shadowRoot = internals.shadowRoot;
|
|
if (this.dataset.type === "config") {
|
|
this.addEventListener("click", this.handleNetworkConfig);
|
|
}
|
|
else if (this.dataset.type === "delete") {
|
|
this.addEventListener("click", this.handleNetworkDelete);
|
|
}
|
|
}
|
|
|
|
async setStatusLoading () {
|
|
const svg = document.querySelector(`svg[data-network="${this.dataset.network}"]`);
|
|
setSVGSrc(svg, "images/status/loading.svg");
|
|
}
|
|
|
|
async handleNetworkConfig () {
|
|
const netID = this.dataset.network;
|
|
const netDetails = this.dataset.value;
|
|
const header = `Edit ${netID}`;
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
|
|
</form>
|
|
`;
|
|
|
|
const d = dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
this.setStatusLoading();
|
|
const body = {
|
|
rate: form.get("rate")
|
|
};
|
|
const net = `${netID}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to change ${net} but got: ${result.error}`);
|
|
}
|
|
refreshNetworks();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
|
|
d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
|
|
}
|
|
|
|
async handleNetworkDelete () {
|
|
const netID = this.dataset.network;
|
|
const header = `Delete ${netID}`;
|
|
const body = "";
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
|
|
const net = `${netID}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to delete ${net} but got: ${result.error}`);
|
|
}
|
|
refreshNetworks();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("network-action", NetworkAction);
|
|
|
|
async function initNetworks () {
|
|
document.querySelector("#network-add").addEventListener("click", handleNetworkAdd);
|
|
}
|
|
|
|
async function refreshNetworks () {
|
|
let nets = await requestDash(`/config/nets?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
|
if (nets.status !== 200) {
|
|
alert("Error fetching instance nets.");
|
|
}
|
|
else {
|
|
nets = nets.data;
|
|
const container = document.querySelector("#networks");
|
|
container.setHTMLUnsafe(nets);
|
|
}
|
|
|
|
initNetworks();
|
|
}
|
|
|
|
async function handleNetworkAdd () {
|
|
const header = "Create Network Interface";
|
|
let body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="netid">Interface ID</label><input type="number" id="netid" name="netid" class="w3-input w3-border">
|
|
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
|
|
`;
|
|
if (type === "lxc") {
|
|
body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\">";
|
|
}
|
|
body += "</form>";
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const body = {
|
|
rate: form.get("rate")
|
|
};
|
|
if (type === "lxc") {
|
|
body.name = form.get("name");
|
|
}
|
|
const id = form.get("netid");
|
|
const net = `net${id}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to create ${net} but got: ${result.error}`);
|
|
}
|
|
refreshNetworks();
|
|
refreshBoot();
|
|
}
|
|
});
|
|
}
|
|
|
|
class DeviceAction extends HTMLElement {
|
|
shadowRoot = null;
|
|
|
|
constructor () {
|
|
super();
|
|
const internals = this.attachInternals();
|
|
this.shadowRoot = internals.shadowRoot;
|
|
if (this.dataset.type === "config") {
|
|
this.addEventListener("click", this.handleDeviceConfig);
|
|
}
|
|
else if (this.dataset.type === "delete") {
|
|
this.addEventListener("click", this.handleDeviceDelete);
|
|
}
|
|
}
|
|
|
|
async setStatusLoading () {
|
|
const svg = document.querySelector(`svg[data-device="${this.dataset.device}"]`);
|
|
setSVGSrc(svg, "images/status/loading.svg");
|
|
}
|
|
|
|
async handleDeviceConfig () {
|
|
const deviceID = this.dataset.device;
|
|
const deviceDetails = this.dataset.value;
|
|
const deviceName = this.dataset.name;
|
|
const header = `Edit Expansion Card ${deviceID}`;
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<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">
|
|
</form>
|
|
`;
|
|
|
|
const d = dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
this.setStatusLoading();
|
|
const body = {
|
|
device: form.get("device"),
|
|
pcie: form.get("pcie") ? 1 : 0
|
|
};
|
|
const device = `${deviceID}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to add ${device} but got: ${result.error}`);
|
|
}
|
|
refreshDevices();
|
|
}
|
|
});
|
|
|
|
const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
|
|
d.querySelector("#device").append(new Option(deviceName, deviceDetails.split(",")[0]));
|
|
for (const availDevice of availDevices) {
|
|
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_bus));
|
|
}
|
|
d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1");
|
|
}
|
|
|
|
async handleDeviceDelete () {
|
|
const deviceID = this.dataset.device;
|
|
const header = `Remove Expansion Card ${deviceID}`;
|
|
const body = "";
|
|
dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
this.setStatusLoading();
|
|
const device = `${deviceID}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE");
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to delete ${device} but got: ${result.error}`);
|
|
}
|
|
refreshDevices();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define("device-action", DeviceAction);
|
|
|
|
async function initDevices () {
|
|
if (type === "qemu") {
|
|
document.querySelector("#device-add").addEventListener("click", handleDeviceAdd);
|
|
}
|
|
}
|
|
|
|
async function refreshDevices () {
|
|
let devices = await requestDash(`/config/devices?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
|
if (devices.status !== 200) {
|
|
alert("Error fetching instance devices.");
|
|
}
|
|
else {
|
|
devices = devices.data;
|
|
const container = document.querySelector("#devices");
|
|
container.setHTMLUnsafe(devices);
|
|
}
|
|
|
|
initDevices();
|
|
}
|
|
|
|
async function handleDeviceAdd () {
|
|
const header = "Add Expansion Card";
|
|
const body = `
|
|
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
|
|
<label for="hostpci">Device Bus</label><input type="number" id="hostpci" name="hostpci" class="w3-input w3-border">
|
|
<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">
|
|
</form>
|
|
`;
|
|
const d = dialog(header, body, async (result, form) => {
|
|
if (result === "confirm") {
|
|
const hostpci = form.get("hostpci");
|
|
const body = {
|
|
device: form.get("device"),
|
|
pcie: form.get("pcie") ? 1 : 0
|
|
};
|
|
const deviceID = `hostpci${hostpci}`;
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${deviceID}/create`, "POST", body);
|
|
if (result.status !== 200) {
|
|
alert(`Attempted to add ${body.device} but got: ${result.error}`);
|
|
}
|
|
refreshDevices();
|
|
}
|
|
});
|
|
|
|
const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
|
|
for (const availDevice of availDevices) {
|
|
d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_bus));
|
|
}
|
|
d.querySelector("#pcie").checked = true;
|
|
}
|
|
|
|
async function refreshBoot () {
|
|
let boot = await requestDash(`/config/boot?node=${node}&type=${type}&vmid=${vmid}`, "GET");
|
|
if (boot.status !== 200) {
|
|
alert("Error fetching instance boot order.");
|
|
}
|
|
else {
|
|
boot = boot.data;
|
|
const order = document.querySelector("#boot-order");
|
|
order.setHTMLUnsafe(boot);
|
|
}
|
|
}
|
|
|
|
async function handleFormExit (event) {
|
|
event.preventDefault();
|
|
const body = {
|
|
cores: document.querySelector("#cores").value,
|
|
memory: document.querySelector("#ram").value
|
|
};
|
|
if (type === "lxc") {
|
|
body.swap = document.querySelector("#swap").value;
|
|
}
|
|
else if (type === "qemu") {
|
|
body.proctype = document.querySelector("#proctype").value;
|
|
body.boot = document.querySelector("#enabled").value;
|
|
}
|
|
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
|
|
if (result.status === 200) {
|
|
goToPage("index");
|
|
}
|
|
else {
|
|
alert(`Attempted to set basic resources but got: ${result.error}`);
|
|
}
|
|
}
|