From c9f9ad590c079cc453d4dc3a6df49f1772d26a25 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 19 Jan 2023 19:58:44 +0000 Subject: [PATCH] use extra js file to store config data Signed-off-by: Arthur Lu --- scripts/config.js | 42 ++++++++++++++---------------------------- scripts/elements.js | 6 +++--- scripts/index.js | 4 ++-- scripts/meta.js | 19 +++++++++++++++++++ scripts/utils.js | 8 +++++--- 5 files changed, 43 insertions(+), 36 deletions(-) create mode 100644 scripts/meta.js diff --git a/scripts/config.js b/scripts/config.js index 9ac9658..e0794fe 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -1,23 +1,9 @@ -import {request, goToPage, getURIData, reload} from "./utils.js"; +import {requestPVE, goToPage, getURIData, reload} from "./utils.js"; +import {pveconfig} from "./meta.js"; window.addEventListener("DOMContentLoaded", init); -let diskConfig = { - //actionBarOrder: ["config", "move", "reassign", "resize", "delete_detach_attach"], - actionBarOrder: ["config", "move", "resize", "delete_detach_attach"], // handle reassign later - lxc: { - prefixOrder: ["rootfs", "mp", "unused"], - rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"]}, - mp: {name: "MP", icon: "images/resources/drive.svg", actions: ["config", "detach", "move", "reassign", "resize"]}, - unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]} - }, - qemu: { - prefixOrder: ["ide", "sata", "unused"], - ide: {name: "IDE", icon: "images/resources/disk.svg", actions: ["config", "delete"]}, - sata: {name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"]}, - unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]} - } -} +let diskMetaData = pveconfig.diskMetaData; let node; let type; @@ -40,11 +26,11 @@ async function init () { goToPage("index.html"); }); - console.log(diskConfig); + console.log(diskMetaData); } async function populateResources () { - let config = await request(`/nodes/${node}/${type}/${vmid}/config`); + let config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`); console.log(config); let name = type === "qemu" ? "name" : "hostname"; @@ -56,9 +42,9 @@ async function populateResources () { addResourceLine("resources", "images/resources/swap.svg", "Swap", {type: "number", value: config.data.swap, min: 0, step: 1}, "MiB"); // TODO add max from quota API } - for(let i = 0; i < diskConfig[type].prefixOrder.length; i++){ - let prefix = diskConfig[type].prefixOrder[i]; - let busName = diskConfig[type][prefix].name; + for(let i = 0; i < diskMetaData[type].prefixOrder.length; i++){ + let prefix = diskMetaData[type].prefixOrder[i]; + let busName = diskMetaData[type][prefix].name; let disks = {}; Object.keys(config.data).forEach(element => { if (element.startsWith(prefix)) { @@ -105,7 +91,7 @@ async function addDiskLine (fieldset, busPrefix, busName, device, disk) { // Set the disk icon, either drive.svg or disk.svg let icon = document.createElement("img"); - icon.src = diskConfig[type][busPrefix].icon; + icon.src = diskMetaData[type][busPrefix].icon; icon.alt = `${busName} ${device}`; field.append(icon); @@ -121,24 +107,24 @@ async function addDiskLine (fieldset, busPrefix, busName, device, disk) { let actionDiv = document.createElement("div"); actionDiv.classList.add("last-item"); - diskConfig.actionBarOrder.forEach((element) => { + diskMetaData.actionBarOrder.forEach((element) => { let action = document.createElement("img"); action.classList.add("clickable"); - if (element === "delete_detach_attach" && diskConfig[type][busPrefix].actions.includes("attach")){ + if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){ action.src = "images/actions/attach.svg"; action.title = "Attach Disk"; } - else if (element === "delete_detach_attach" && diskConfig[type][busPrefix].actions.includes("detach")){ + else if (element === "delete_detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){ action.src = "images/actions/detach.svg"; action.title = "Detach Disk"; } else if (element === "delete_detach_attach"){ - let active = diskConfig[type][busPrefix].actions.includes("delete") ? "active" : "inactive"; + let active = diskMetaData[type][busPrefix].actions.includes("delete") ? "active" : "inactive"; action.src = `images/actions/delete-${active}.svg`; action.title = `Delete Disk`; } else { - let active = diskConfig[type][busPrefix].actions.includes(element) ? "active" : "inactive"; + let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; action.src = `images/actions/${element}-${active}.svg`; action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`; } diff --git a/scripts/elements.js b/scripts/elements.js index a6353ef..1a62973 100644 --- a/scripts/elements.js +++ b/scripts/elements.js @@ -1,4 +1,4 @@ -import {request, goToPage} from "./utils.js"; +import {requestPVE, goToPage} from "./utils.js"; const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay)); @@ -77,7 +77,7 @@ class Instance extends HTMLElement { configButton.src = "images/actions/config-inactive.svg"; try { - let task = await request(`/nodes/${this.node}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", {node: this.node, vmid: this.vmid}); + let task = await requestPVE(`/nodes/${this.node}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", {node: this.node, vmid: this.vmid}); } catch { typeImg.src = `images/instances/${this.type}/${this.status}.svg`; @@ -96,7 +96,7 @@ class Instance extends HTMLElement { } while (true) { - let taskStatus = await request(`/nodes/${this.node}/tasks/${task.data}/status`); + let taskStatus = await requestPVE(`/nodes/${this.node}/tasks/${task.data}/status`); if(taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") { this.status = targetStatus; diff --git a/scripts/index.js b/scripts/index.js index d8ef5e6..010195b 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,4 @@ -import {request, goToPage, deleteAllCookies} from "./utils.js"; +import {requestPVE, goToPage, deleteAllCookies} from "./utils.js"; window.addEventListener("DOMContentLoaded", init); @@ -23,7 +23,7 @@ async function populateInstances () { goToPage("login.html"); } - let resources = await request("/cluster/resources", "GET", null); + let resources = await requestPVE("/cluster/resources", "GET", null); let instanceContainer = document.getElementById("instance-container") diff --git a/scripts/meta.js b/scripts/meta.js new file mode 100644 index 0000000..a838800 --- /dev/null +++ b/scripts/meta.js @@ -0,0 +1,19 @@ +export const pveconfig = { + pveAPI: "", + diskMetaData: { + //actionBarOrder: ["config", "move", "reassign", "resize", "delete_detach_attach"], + actionBarOrder: ["config", "move", "resize", "delete_detach_attach"], // handle reassign later + lxc: { + prefixOrder: ["rootfs", "mp", "unused"], + rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"]}, + mp: {name: "MP", icon: "images/resources/drive.svg", actions: ["config", "detach", "move", "reassign", "resize"]}, + unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]} + }, + qemu: { + prefixOrder: ["ide", "sata", "unused"], + ide: {name: "IDE", icon: "images/resources/disk.svg", actions: ["config", "delete"]}, + sata: {name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"]}, + unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]} + } + } +} \ No newline at end of file diff --git a/scripts/utils.js b/scripts/utils.js index 5c880d5..09d7985 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -1,3 +1,5 @@ +import {pveconfig} from "./meta.js"; + export class ResponseError extends Error { constructor(message) { super(message); @@ -29,7 +31,7 @@ function getCookie(cname) { } export async function requestTicket (username, password) { - let response = await request("/access/ticket", "POST", {username: `${username}@pve`, password: password}, false); + let response = await requestPVE("/access/ticket", "POST", {username: `${username}@pve`, password: password}, false); return response; } @@ -41,7 +43,7 @@ export function setTicket (ticket, csrf) { document.cookie = `CSRFPreventionToken=${csrf}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net;` } -export async function request (path, method, body = null, auth = true) { +export async function requestPVE (path, method, body = null, auth = true) { let prms = new URLSearchParams(body); let content = { @@ -57,7 +59,7 @@ export async function request (path, method, body = null, auth = true) { content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken"); } - let response = await fetch(`https://pve.tronnet.net/api2/json${path}`, content) + let response = await fetch(`${pveconfig.pveAPI}${path}`, content) .then((response) => { if (!response.ok) { throw new ResponseError(`recieved response status code ${response.status}`);