use extra js file to store config data
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
parent
8676eb6dc3
commit
0f9a28ae83
@ -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);
|
window.addEventListener("DOMContentLoaded", init);
|
||||||
|
|
||||||
let diskConfig = {
|
let diskMetaData = pveconfig.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"]}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let node;
|
let node;
|
||||||
let type;
|
let type;
|
||||||
@ -40,11 +26,11 @@ async function init () {
|
|||||||
goToPage("index.html");
|
goToPage("index.html");
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(diskConfig);
|
console.log(diskMetaData);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function populateResources () {
|
async function populateResources () {
|
||||||
let config = await request(`/nodes/${node}/${type}/${vmid}/config`);
|
let config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`);
|
||||||
console.log(config);
|
console.log(config);
|
||||||
|
|
||||||
let name = type === "qemu" ? "name" : "hostname";
|
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
|
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++){
|
for(let i = 0; i < diskMetaData[type].prefixOrder.length; i++){
|
||||||
let prefix = diskConfig[type].prefixOrder[i];
|
let prefix = diskMetaData[type].prefixOrder[i];
|
||||||
let busName = diskConfig[type][prefix].name;
|
let busName = diskMetaData[type][prefix].name;
|
||||||
let disks = {};
|
let disks = {};
|
||||||
Object.keys(config.data).forEach(element => {
|
Object.keys(config.data).forEach(element => {
|
||||||
if (element.startsWith(prefix)) {
|
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
|
// Set the disk icon, either drive.svg or disk.svg
|
||||||
let icon = document.createElement("img");
|
let icon = document.createElement("img");
|
||||||
icon.src = diskConfig[type][busPrefix].icon;
|
icon.src = diskMetaData[type][busPrefix].icon;
|
||||||
icon.alt = `${busName} ${device}`;
|
icon.alt = `${busName} ${device}`;
|
||||||
field.append(icon);
|
field.append(icon);
|
||||||
|
|
||||||
@ -121,24 +107,24 @@ async function addDiskLine (fieldset, busPrefix, busName, device, disk) {
|
|||||||
|
|
||||||
let actionDiv = document.createElement("div");
|
let actionDiv = document.createElement("div");
|
||||||
actionDiv.classList.add("last-item");
|
actionDiv.classList.add("last-item");
|
||||||
diskConfig.actionBarOrder.forEach((element) => {
|
diskMetaData.actionBarOrder.forEach((element) => {
|
||||||
let action = document.createElement("img");
|
let action = document.createElement("img");
|
||||||
action.classList.add("clickable");
|
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.src = "images/actions/attach.svg";
|
||||||
action.title = "Attach Disk";
|
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.src = "images/actions/detach.svg";
|
||||||
action.title = "Detach Disk";
|
action.title = "Detach Disk";
|
||||||
}
|
}
|
||||||
else if (element === "delete_detach_attach"){
|
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.src = `images/actions/delete-${active}.svg`;
|
||||||
action.title = `Delete Disk`;
|
action.title = `Delete Disk`;
|
||||||
}
|
}
|
||||||
else {
|
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.src = `images/actions/${element}-${active}.svg`;
|
||||||
action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
|
action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
|
||||||
}
|
}
|
||||||
|
@ -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));
|
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
|
||||||
|
|
||||||
@ -77,7 +77,7 @@ class Instance extends HTMLElement {
|
|||||||
configButton.src = "images/actions/config-inactive.svg";
|
configButton.src = "images/actions/config-inactive.svg";
|
||||||
|
|
||||||
try {
|
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 {
|
catch {
|
||||||
typeImg.src = `images/instances/${this.type}/${this.status}.svg`;
|
typeImg.src = `images/instances/${this.type}/${this.status}.svg`;
|
||||||
@ -96,7 +96,7 @@ class Instance extends HTMLElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
while (true) {
|
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") {
|
if(taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") {
|
||||||
this.status = targetStatus;
|
this.status = targetStatus;
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import {request, goToPage, deleteAllCookies} from "./utils.js";
|
import {requestPVE, goToPage, deleteAllCookies} from "./utils.js";
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", init);
|
window.addEventListener("DOMContentLoaded", init);
|
||||||
|
|
||||||
@ -23,7 +23,7 @@ async function populateInstances () {
|
|||||||
goToPage("login.html");
|
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")
|
let instanceContainer = document.getElementById("instance-container")
|
||||||
|
|
||||||
|
19
scripts/meta.js
Normal file
19
scripts/meta.js
Normal file
@ -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"]}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,3 +1,5 @@
|
|||||||
|
import {pveconfig} from "./meta.js";
|
||||||
|
|
||||||
export class ResponseError extends Error {
|
export class ResponseError extends Error {
|
||||||
constructor(message) {
|
constructor(message) {
|
||||||
super(message);
|
super(message);
|
||||||
@ -29,7 +31,7 @@ function getCookie(cname) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function requestTicket (username, password) {
|
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;
|
return response;
|
||||||
}
|
}
|
||||||
@ -41,7 +43,7 @@ export function setTicket (ticket, csrf) {
|
|||||||
document.cookie = `CSRFPreventionToken=${csrf}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net;`
|
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 prms = new URLSearchParams(body);
|
||||||
|
|
||||||
let content = {
|
let content = {
|
||||||
@ -57,7 +59,7 @@ export async function request (path, method, body = null, auth = true) {
|
|||||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
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) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new ResponseError(`recieved response status code ${response.status}`);
|
throw new ResponseError(`recieved response status code ${response.status}`);
|
||||||
|
Loading…
Reference in New Issue
Block a user