tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make each disk configurable

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-01-16 15:05:58 -08:00
parent 40c844a6f4
commit 92739d9660
2 changed files with 52 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
config.html
View File

@ -18,16 +18,9 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Disks</legend> <legend>Disks</legend>
<div class="input-grid" id="disks" style="grid-template-columns: repeat(3, auto) 1fr;"></div> <div class="input-grid" id="disks" style="grid-template-columns: repeat(4, auto) 1fr;"></div>
<hr> <hr>
<div class="input-grid btn-group" id="add-disk" style="grid-template-columns: repeat(10, auto) 1fr;"> <div class="center-div"><img id="disk-add" src="images/actions/create.svg"></div>
<label for="bus">Bus</label><select id="bus"></select>
<label for="device">Device</label><input id="device" type="number" step="1" min="0" max="0" value="0">
<label for="storage">Storage</label><select id="storage"></select>
<label for="size">Size(GiB)</label><input id="size" type="number" step="1" min="0" max="0" value="0">
<label for="size">Path</label><input id="path">
<div class="last-item"><img id="disk-add" src="images/actions/create.svg"></div>
</div>
</fieldset> </fieldset>
<fieldset class="fieldset-no-border"> <fieldset class="fieldset-no-border">
<div class="btn-group" id="form-actions"> <div class="btn-group" id="form-actions">

150
scripts/config.js
View File

@ -6,13 +6,13 @@ let diskConfig = {
lxc: { lxc: {
storageContent: "rootdir", storageContent: "rootdir",
prefixOrder: ["mp"], prefixOrder: ["mp"],
mp: {name: "MP", limit: 255, used: {}} mp: {name: "MP", limit: 255, used: {}, icon: "images/resources/drive.svg", resizable: true, hasPath: true, hasDiskImage: false}
}, },
qemu: { qemu: {
storageContent: "images", storageContent: "images",
prefixOrder: ["sata", "ide"], prefixOrder: ["sata", "ide"],
ide: {name: "IDE", limit: 3, used: {}}, ide: {name: "IDE", limit: 3, used: {}, icon: "images/resources/disk.svg", reziable: false, hasPath: false, hasDiskImage: true},
sata: {name: "SATA", limit: 5, used: {}} sata: {name: "SATA", limit: 5, used: {}, icon: "images/resources/drive.svg", resizable: true, hasPath: false, hasDiskImage: false}
} }
} }
@ -51,15 +51,19 @@ async function populateResources () {
document.querySelector("#name").innerText = config.data[name]; document.querySelector("#name").innerText = config.data[name];
addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); // TODO add max from quota API addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); // TODO add max from quota API
addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API
let storageOptions = await request(`/nodes/${node}/storage`);
if (type === "lxc") { if (type === "lxc") {
addResourceLine("resources", "images/resources/swap.svg", "Swap", {type: "number", value: config.data.swap, min: 0, step: 1}, "GiB"); // TODO add max from quota API addResourceLine("resources", "images/resources/swap.svg", "Swap", {type: "number", value: config.data.swap, min: 0, step: 1}, "GiB"); // TODO add max from quota API
addDiskLine("disks", "rootfs", "images/resources/drive.svg", "Root FS", config.data.rootfs); let rootfs = parseDisk(config.data.rootfs);
addDiskLine("disks", "Root FS", null, rootfs.storage, storageOptions, rootfs.size);
} }
for(let i = 0; i < diskConfig[type].prefixOrder.length; i++){ for(let i = 0; i < diskConfig[type].prefixOrder.length; i++){
let prefix = diskConfig[type].prefixOrder[i]; let prefix = diskConfig[type].prefixOrder[i];
let entry = diskConfig[type][prefix]; let entry = diskConfig[type][prefix];
let name = entry.name; let busName = entry.name;
Object.keys(config.data).forEach(element => { Object.keys(config.data).forEach(element => {
if (element.startsWith(prefix)) { if (element.startsWith(prefix)) {
entry.used[element.replace(prefix, "")] = config.data[element]; entry.used[element.replace(prefix, "")] = config.data[element];
@ -67,27 +71,12 @@ async function populateResources () {
}); });
let ordered_keys = getOrderedUsed(entry); let ordered_keys = getOrderedUsed(entry);
ordered_keys.forEach(element => { ordered_keys.forEach(element => {
addDiskLine("disks", `${prefix}${element}`, entry.used[element].includes("media=cdrom") ? "images/resources/disk.svg" : "images/resources/drive.svg", `${name} ${element}`, entry.used[element]); let disk = parseDisk(entry.used[element]);
addDiskLine("disks", busName, element, disk.storage, storageOptions, disk.size);
}); });
} }
} }
function addMetaLine (fieldset, labelText, inputAttr) {
let field = document.querySelector(`#${fieldset}`);
let label = document.createElement("label");
label.innerHTML = labelText;
label.htmlFor = labelText;
field.append(label);
let input = document.createElement("input");
for (let k in inputAttr) {
input.setAttribute(k, inputAttr[k])
}
input.id = labelText;
field.append(input);
}
function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=null) { function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=null) {
let field = document.querySelector(`#${fieldset}`); let field = document.querySelector(`#${fieldset}`);
@ -115,90 +104,46 @@ function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=nul
} }
} }
function addDiskLine (fieldset, id, iconHref, labelText, valueText) { function addDiskLine (fieldset, bus, device, storage, storageOptions, size) {
let field = document.querySelector(`#${fieldset}`); let field = document.querySelector(`#${fieldset}`);
let icon = document.createElement("img"); let icon = document.createElement("img");
icon.src = iconHref; icon.src = diskConfig[type][bus].icon;
icon.alt = labelText; icon.alt = labelText;
field.append(icon); field.append(icon);
let label = document.createElement("label"); let busLabel = document.createElement("label");
label.innerHTML = labelText; busLabel.innerHTML = bus;
field.append(label); field.append(busLabel);
let value = document.createElement("p"); if (device) {
value.innerText = valueText; let deviceInput = document.createElement("input");
field.append(value); deviceInput.type = "number";
deviceInput.min = 0;
let configDiv = document.createElement("div"); deviceInput.max = diskConfig[type][bus].limit;
configDiv.classList.add("last-item"); deviceInput.value = device;
let config = document.createElement("img"); field.append(deviceInput);
config.src = "images/actions/config-active.svg"; }
config.alt = `Config disk ${labelText}`; else {
config.classList.add("clickable"); let deviceInput = document.createElement("div");
configDiv.append(config); deviceInput.classList.add("hidden");
field.append(configDiv); field.append(deviceInput);
} }
async function populateAddDisk () { let storageSelect = document.createElement("select");
let addDiskBus = document.querySelector("#add-disk #bus"); storageOptions.forEach((element) => {
diskConfig[type].prefixOrder.forEach(element => {
addDiskBus.add(new Option(diskConfig[type][element].name, element));
});
addDiskBus.value = diskConfig[type].prefixOrder[0];
handleDiskBusChange(diskConfig);
if (type === "lxc") {
addDiskBus.disabled = true;
}
addDiskBus.addEventListener("change", handleDiskBusChange);
let addDiskDevice = document.querySelector("#add-disk #device");
addDiskDevice.addEventListener("input", handleDiskDeviceChange);
addDiskDevice.addEventListener("focus", handleDiskDeviceChange);
let addDiskStorage = document.querySelector("#add-disk #storage");
let storage = await request(`/nodes/${node}/storage`);
storage.data.forEach((element) => {
if (element.content.includes(diskConfig[type].storageContent)) { // check if the storage contains rootdir or images content if (element.content.includes(diskConfig[type].storageContent)) { // check if the storage contains rootdir or images content
addDiskStorage.add(new Option(element.storage)); storageSelect.add(new Option(element.storage));
} }
}); });
storageSelect.value = storage;
let addDiskSize = document.querySelector("#add-disk #size"); let sizeInput = document.createElement("input");
sizeInput.type = "number";
let addDiskPath = document.querySelector("#add-disk #path"); sizeInput.min = 0;
if (type === "qemu") { deviceInput.value = size;
addDiskPath.disabled = true; if (!diskConfig[type][bus].resizable) {
} deviceInput.disabled = true;
}
function handleDiskBusChange () {
let bus = document.querySelector("#add-disk #bus").value;
let entry = diskConfig[type][bus];
let limit = entry.limit;
let addDiskDevice = document.querySelector("#add-disk #device");
addDiskDevice.max = limit;
let nextAvaliable = getNextAvaliable(entry);
if (nextAvaliable > limit) {
addDiskDevice.value = 0;
}
else {
addDiskDevice.value = nextAvaliable;
}
handleDiskDeviceChange();
}
function handleDiskDeviceChange () {
let value = document.querySelector("#add-disk #device").value;
let bus = document.querySelector("#add-disk #bus").value;
let entry = diskConfig[type][bus];
let addDiskDevice = document.querySelector("#add-disk #device");
if(value in entry.used){
addDiskDevice.style.border = "solid red 1px";
}
else {
addDiskDevice.style.border = "solid white 1px";
} }
} }
@ -207,13 +152,16 @@ function getOrderedUsed(entry){
return ordered_keys; return ordered_keys;
} }
function getNextAvaliable(entry){ function parseDisk (disk) { // disk in format: STORAGE: FILENAME, ARG1=..., ARG2 = ..., ...
let ordered_keys = getOrderedUsed(entry); let parsed = {};
let nextAvaliable = 0; let kvpairs = disk.split(",");
ordered_keys.forEach(element => { parsed.storage = kvpairs[0].split(":")[0];
if (parseInt(element) === nextAvaliable) { parsed.filename = kvpairs[0].split(":")[1];
nextAvaliable++; kvpairs.shift();
} kvpairs.forEach((element) => {
let key = element.split("=")[0];
let val = element.split("=")[1];
parsed[key] = val;
}); });
return nextAvaliable; return parsed;
} }