fix formatting
This commit is contained in:
parent
6a00a22dc2
commit
5bbf928b2b
@ -1,5 +1,5 @@
|
|||||||
import {requestPVE, requestAPI, goToPage, getURIData, resources_config, setTitleAndHeader} from "./utils.js";
|
import { requestPVE, requestAPI, goToPage, getURIData, resources_config, setTitleAndHeader } from "./utils.js";
|
||||||
import {alert, dialog} from "./dialog.js";
|
import { alert, dialog } from "./dialog.js";
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second
|
window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second
|
||||||
|
|
||||||
@ -11,7 +11,7 @@ let type;
|
|||||||
let vmid;
|
let vmid;
|
||||||
let config;
|
let config;
|
||||||
|
|
||||||
async function init () {
|
async function init() {
|
||||||
setTitleAndHeader();
|
setTitleAndHeader();
|
||||||
let cookie = document.cookie;
|
let cookie = document.cookie;
|
||||||
if (cookie === "") {
|
if (cookie === "") {
|
||||||
@ -32,27 +32,27 @@ async function init () {
|
|||||||
document.querySelector("#exit").addEventListener("click", handleFormExit);
|
document.querySelector("#exit").addEventListener("click", handleFormExit);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getOrdered(keys){
|
function getOrdered(keys) {
|
||||||
let ordered_keys = Object.keys(keys).sort((a,b) => {parseInt(a) - parseInt(b)}); // ordered integer list
|
let ordered_keys = Object.keys(keys).sort((a, b) => { parseInt(a) - parseInt(b) }); // ordered integer list
|
||||||
return ordered_keys;
|
return ordered_keys;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getConfig () {
|
async function getConfig() {
|
||||||
config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`, "GET");
|
config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`, "GET");
|
||||||
}
|
}
|
||||||
|
|
||||||
function populateResources () {
|
function populateResources() {
|
||||||
let name = type === "qemu" ? "name" : "hostname";
|
let name = type === "qemu" ? "name" : "hostname";
|
||||||
document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
|
document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
|
||||||
addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads");
|
addResourceLine("resources", "images/resources/cpu.svg", "Cores", { type: "number", value: config.data.cores, min: 1, max: 8192 }, "Threads");
|
||||||
addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB");
|
addResourceLine("resources", "images/resources/ram.svg", "Memory", { type: "number", value: config.data.memory, min: 16, step: 1 }, "MiB");
|
||||||
|
|
||||||
if (type === "lxc") {
|
if (type === "lxc") {
|
||||||
addResourceLine("resources", "images/resources/swap.svg", "Swap", {type: "number", value: config.data.swap, min: 0, step: 1}, "MiB");
|
addResourceLine("resources", "images/resources/swap.svg", "Swap", { type: "number", value: config.data.swap, min: 0, step: 1 }, "MiB");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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}`);
|
||||||
|
|
||||||
let icon = document.createElement("img");
|
let icon = document.createElement("img");
|
||||||
@ -83,9 +83,9 @@ function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=nul
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function populateDisk () {
|
function populateDisk() {
|
||||||
document.querySelector("#disks").innerHTML = "";
|
document.querySelector("#disks").innerHTML = "";
|
||||||
for(let i = 0; i < diskMetaData[type].prefixOrder.length; i++){
|
for (let i = 0; i < diskMetaData[type].prefixOrder.length; i++) {
|
||||||
let prefix = diskMetaData[type].prefixOrder[i];
|
let prefix = diskMetaData[type].prefixOrder[i];
|
||||||
let busName = diskMetaData[type][prefix].name;
|
let busName = diskMetaData[type][prefix].name;
|
||||||
let disks = {};
|
let disks = {};
|
||||||
@ -108,7 +108,7 @@ function populateDisk () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
function addDiskLine(fieldset, busPrefix, busName, device, diskDetails) {
|
||||||
let field = document.querySelector(`#${fieldset}`);
|
let field = document.querySelector(`#${fieldset}`);
|
||||||
|
|
||||||
let diskName = `${busName} ${device}`;
|
let diskName = `${busName} ${device}`;
|
||||||
@ -138,12 +138,12 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
|||||||
diskMetaData.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 === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")){ // attach
|
if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
|
||||||
action.src = "images/actions/disk/attach.svg";
|
action.src = "images/actions/disk/attach.svg";
|
||||||
action.title = "Attach Disk";
|
action.title = "Attach Disk";
|
||||||
action.addEventListener("click", handleDiskAttach);
|
action.addEventListener("click", handleDiskAttach);
|
||||||
}
|
}
|
||||||
else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")){ // detach
|
else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach
|
||||||
action.src = "images/actions/disk/detach.svg";
|
action.src = "images/actions/disk/detach.svg";
|
||||||
action.title = "Detach Disk";
|
action.title = "Detach Disk";
|
||||||
action.addEventListener("click", handleDiskDetach);
|
action.addEventListener("click", handleDiskDetach);
|
||||||
@ -176,7 +176,7 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
|
|||||||
field.append(actionDiv);
|
field.append(actionDiv);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDiskDetach () {
|
async function handleDiskDetach() {
|
||||||
let header = `Detach ${this.dataset.disk}`;
|
let header = `Detach ${this.dataset.disk}`;
|
||||||
let body = `<p>Are you sure you want to detach disk</p><p>${this.dataset.disk}</p>`;
|
let body = `<p>Are you sure you want to detach disk</p><p>${this.dataset.disk}</p>`;
|
||||||
dialog(header, body, async (result, form) => {
|
dialog(header, body, async (result, form) => {
|
||||||
@ -202,7 +202,7 @@ async function handleDiskDetach () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDiskAttach () {
|
async function handleDiskAttach() {
|
||||||
let diskImage = config.data[this.dataset.disk];
|
let diskImage = config.data[this.dataset.disk];
|
||||||
|
|
||||||
let header = `Attach ${diskImage}`;
|
let header = `Attach ${diskImage}`;
|
||||||
@ -233,7 +233,7 @@ async function handleDiskAttach () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDiskResize () {
|
async function handleDiskResize() {
|
||||||
let header = `Resize ${this.dataset.disk}`;
|
let header = `Resize ${this.dataset.disk}`;
|
||||||
let body = `<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"></input>`;
|
let body = `<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"></input>`;
|
||||||
|
|
||||||
@ -252,7 +252,7 @@ async function handleDiskResize () {
|
|||||||
await getConfig();
|
await getConfig();
|
||||||
populateDisk();
|
populateDisk();
|
||||||
}
|
}
|
||||||
else{
|
else {
|
||||||
alert(result.error);
|
alert(result.error);
|
||||||
await getConfig();
|
await getConfig();
|
||||||
populateDisk();
|
populateDisk();
|
||||||
@ -261,7 +261,7 @@ async function handleDiskResize () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDiskMove () {
|
async function handleDiskMove() {
|
||||||
let content = type === "qemu" ? "images" : "rootdir";
|
let content = type === "qemu" ? "images" : "rootdir";
|
||||||
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
||||||
|
|
||||||
@ -269,7 +269,7 @@ async function handleDiskMove () {
|
|||||||
|
|
||||||
let options = "";
|
let options = "";
|
||||||
storage.data.forEach((element) => {
|
storage.data.forEach((element) => {
|
||||||
if (element.content.includes(content)){
|
if (element.content.includes(content)) {
|
||||||
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -289,7 +289,7 @@ async function handleDiskMove () {
|
|||||||
vmid: vmid,
|
vmid: vmid,
|
||||||
disk: this.dataset.disk,
|
disk: this.dataset.disk,
|
||||||
storage: form.get("storage-select"),
|
storage: form.get("storage-select"),
|
||||||
delete: form.get("delete-check") === "on" ? "1": "0"
|
delete: form.get("delete-check") === "on" ? "1" : "0"
|
||||||
}
|
}
|
||||||
let result = await requestAPI("/instance/disk/move", "POST", body);
|
let result = await requestAPI("/instance/disk/move", "POST", body);
|
||||||
if (result.status === 200) {
|
if (result.status === 200) {
|
||||||
@ -305,7 +305,7 @@ async function handleDiskMove () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDiskDelete () {
|
async function handleDiskDelete() {
|
||||||
let header = `Delete ${this.dataset.disk}`;
|
let header = `Delete ${this.dataset.disk}`;
|
||||||
let body = `<p>Are you sure you want to <strong>delete</strong> disk</p><p>${this.dataset.disk}</p>`;
|
let body = `<p>Are you sure you want to <strong>delete</strong> disk</p><p>${this.dataset.disk}</p>`;
|
||||||
|
|
||||||
@ -332,7 +332,7 @@ async function handleDiskDelete () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDiskAdd () {
|
async function handleDiskAdd() {
|
||||||
let content = type === "qemu" ? "images" : "rootdir";
|
let content = type === "qemu" ? "images" : "rootdir";
|
||||||
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
||||||
|
|
||||||
@ -340,7 +340,7 @@ async function handleDiskAdd () {
|
|||||||
|
|
||||||
let options = "";
|
let options = "";
|
||||||
storage.data.forEach((element) => {
|
storage.data.forEach((element) => {
|
||||||
if (element.content.includes(content)){
|
if (element.content.includes(content)) {
|
||||||
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
options += `<option value="${element.storage}">${element.storage}</option>"`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -376,7 +376,7 @@ async function handleDiskAdd () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleCDAdd () {
|
async function handleCDAdd() {
|
||||||
let content = "iso";
|
let content = "iso";
|
||||||
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
let storage = await requestPVE(`/nodes/${node}/storage`, "GET");
|
||||||
|
|
||||||
@ -384,7 +384,7 @@ async function handleCDAdd () {
|
|||||||
|
|
||||||
let storageOptions = "";
|
let storageOptions = "";
|
||||||
storage.data.forEach((element) => {
|
storage.data.forEach((element) => {
|
||||||
if (element.content.includes(content)){
|
if (element.content.includes(content)) {
|
||||||
storageOptions += `<option value="${element.storage}">${element.storage}</option>"`;
|
storageOptions += `<option value="${element.storage}">${element.storage}</option>"`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -422,7 +422,7 @@ async function handleCDAdd () {
|
|||||||
let storage = document.querySelector("#storage-select").value;
|
let storage = document.querySelector("#storage-select").value;
|
||||||
let ISOSelect = document.querySelector("#iso-select");
|
let ISOSelect = document.querySelector("#iso-select");
|
||||||
ISOSelect.innerHTML = `<option hidden disabled selected value></option>`;
|
ISOSelect.innerHTML = `<option hidden disabled selected value></option>`;
|
||||||
let isos = await requestPVE(`/nodes/${node}/storage/${storage}/content`, "GET", {content: content});
|
let isos = await requestPVE(`/nodes/${node}/storage/${storage}/content`, "GET", { content: content });
|
||||||
isos.data.forEach((element) => {
|
isos.data.forEach((element) => {
|
||||||
if (element.content.includes(content)) {
|
if (element.content.includes(content)) {
|
||||||
ISOSelect.append(new Option(element.volid.replace(`${storage}:${content}/`, ""), element.volid));
|
ISOSelect.append(new Option(element.volid.replace(`${storage}:${content}/`, ""), element.volid));
|
||||||
@ -431,7 +431,7 @@ async function handleCDAdd () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function populateNetworks () {
|
function populateNetworks() {
|
||||||
document.querySelector("#networks").innerHTML = "";
|
document.querySelector("#networks").innerHTML = "";
|
||||||
let networks = {};
|
let networks = {};
|
||||||
let prefix = networkMetaData.prefix;
|
let prefix = networkMetaData.prefix;
|
||||||
@ -446,7 +446,7 @@ function populateNetworks () {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function addNetworkLine (fieldset, prefix, netID, netDetails) {
|
function addNetworkLine(fieldset, prefix, netID, netDetails) {
|
||||||
let field = document.querySelector(`#${fieldset}`);
|
let field = document.querySelector(`#${fieldset}`);
|
||||||
|
|
||||||
let icon = document.createElement("img");
|
let icon = document.createElement("img");
|
||||||
@ -481,7 +481,7 @@ function addNetworkLine (fieldset, prefix, netID, netDetails) {
|
|||||||
field.append(actionDiv);
|
field.append(actionDiv);
|
||||||
}
|
}
|
||||||
|
|
||||||
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.netvals;
|
||||||
let header = `Edit ${netID}`;
|
let header = `Edit ${netID}`;
|
||||||
@ -502,7 +502,7 @@ async function handleNetworkConfig () {
|
|||||||
await getConfig();
|
await getConfig();
|
||||||
populateNetworks();
|
populateNetworks();
|
||||||
}
|
}
|
||||||
else{
|
else {
|
||||||
alert(result.error);
|
alert(result.error);
|
||||||
await getConfig();
|
await getConfig();
|
||||||
populateNetworks();
|
populateNetworks();
|
||||||
@ -513,7 +513,7 @@ async function handleNetworkConfig () {
|
|||||||
d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
|
d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleFormExit () {
|
async function handleFormExit() {
|
||||||
let body = {
|
let body = {
|
||||||
node: node,
|
node: node,
|
||||||
type: type,
|
type: type,
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
export function dialog (header, body, callback = async (result, form) => {}) {
|
export function dialog(header, body, callback = async (result, form) => { }) {
|
||||||
let dialog = document.createElement("dialog");
|
let dialog = document.createElement("dialog");
|
||||||
dialog.innerHTML = `
|
dialog.innerHTML = `
|
||||||
<p class="w3-large" id="prompt" style="text-align: center;"></p>
|
<p class="w3-large" id="prompt" style="text-align: center;"></p>
|
||||||
@ -23,7 +23,7 @@ export function dialog (header, body, callback = async (result, form) => {}) {
|
|||||||
return dialog;
|
return dialog;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function alert (message) {
|
export function alert(message) {
|
||||||
let dialog = document.createElement("dialog");
|
let dialog = document.createElement("dialog");
|
||||||
dialog.innerHTML = `
|
dialog.innerHTML = `
|
||||||
<form method="dialog">
|
<form method="dialog">
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import {requestPVE, requestAPI, goToPage, goToURL, instances_config, nodes_config, setTitleAndHeader} from "./utils.js";
|
import { requestPVE, requestAPI, goToPage, goToURL, instances_config, nodes_config, setTitleAndHeader } from "./utils.js";
|
||||||
import {alert, dialog} from "./dialog.js";
|
import { alert, dialog } from "./dialog.js";
|
||||||
import {PVE} from "../vars.js"
|
import { PVE } from "../vars.js"
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", init);
|
window.addEventListener("DOMContentLoaded", init);
|
||||||
|
|
||||||
async function init () {
|
async function init() {
|
||||||
setTitleAndHeader();
|
setTitleAndHeader();
|
||||||
let cookie = document.cookie;
|
let cookie = document.cookie;
|
||||||
if (cookie === "") {
|
if (cookie === "") {
|
||||||
@ -17,7 +17,7 @@ async function init () {
|
|||||||
addInstanceBtn.addEventListener("click", handleInstanceAdd);
|
addInstanceBtn.addEventListener("click", handleInstanceAdd);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function populateInstances () {
|
async function populateInstances() {
|
||||||
let resources = await requestPVE("/cluster/resources", "GET");
|
let resources = await requestPVE("/cluster/resources", "GET");
|
||||||
let instanceContainer = document.getElementById("instance-container");
|
let instanceContainer = document.getElementById("instance-container");
|
||||||
let instances = [];
|
let instances = [];
|
||||||
@ -26,7 +26,7 @@ async function populateInstances () {
|
|||||||
if (element.type === "lxc" || element.type === "qemu") {
|
if (element.type === "lxc" || element.type === "qemu") {
|
||||||
let nodeName = element.node;
|
let nodeName = element.node;
|
||||||
let nodeStatus = resources.data.find(item => item.node === nodeName && item.type === "node").status;
|
let nodeStatus = resources.data.find(item => item.node === nodeName && item.type === "node").status;
|
||||||
element.node = {name: nodeName, status: nodeStatus};
|
element.node = { name: nodeName, status: nodeStatus };
|
||||||
instances.push(element);
|
instances.push(element);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -58,14 +58,14 @@ async function populateInstances () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
for(let i = 0; i < instances.length; i++) {
|
for (let i = 0; i < instances.length; i++) {
|
||||||
let newInstance = new Instance();
|
let newInstance = new Instance();
|
||||||
newInstance.data = instances[i];
|
newInstance.data = instances[i];
|
||||||
instanceContainer.append(newInstance.shadowElement);
|
instanceContainer.append(newInstance.shadowElement);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleInstanceAdd () {
|
async function handleInstanceAdd() {
|
||||||
let header = "Create New Instance";
|
let header = "Create New Instance";
|
||||||
|
|
||||||
let body = `
|
let body = `
|
||||||
@ -130,7 +130,7 @@ async function handleInstanceAdd () {
|
|||||||
let typeSelect = d.querySelector("#type");
|
let typeSelect = d.querySelector("#type");
|
||||||
typeSelect.selectedIndex = -1;
|
typeSelect.selectedIndex = -1;
|
||||||
typeSelect.addEventListener("change", () => {
|
typeSelect.addEventListener("change", () => {
|
||||||
if(typeSelect.value === "qemu") {
|
if (typeSelect.value === "qemu") {
|
||||||
d.querySelectorAll(".container-specific").forEach((element) => {
|
d.querySelectorAll(".container-specific").forEach((element) => {
|
||||||
element.classList.add("none");
|
element.classList.add("none");
|
||||||
element.disabled = true;
|
element.disabled = true;
|
||||||
@ -198,7 +198,7 @@ async function handleInstanceAdd () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class Instance {
|
export class Instance {
|
||||||
constructor () {
|
constructor() {
|
||||||
let shadowRoot = document.createElement("div");
|
let shadowRoot = document.createElement("div");
|
||||||
shadowRoot.classList.add("w3-row");
|
shadowRoot.classList.add("w3-row");
|
||||||
|
|
||||||
@ -235,7 +235,7 @@ export class Instance {
|
|||||||
this.actionLock = false;
|
this.actionLock = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
set data (data) {
|
set data(data) {
|
||||||
if (data.status === "unknown") {
|
if (data.status === "unknown") {
|
||||||
data.status = "stopped";
|
data.status = "stopped";
|
||||||
}
|
}
|
||||||
@ -247,7 +247,7 @@ export class Instance {
|
|||||||
this.update();
|
this.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
update () {
|
update() {
|
||||||
let vmidParagraph = this.shadowElement.querySelector("#instance-id");
|
let vmidParagraph = this.shadowElement.querySelector("#instance-id");
|
||||||
vmidParagraph.innerText = this.vmid;
|
vmidParagraph.innerText = this.vmid;
|
||||||
|
|
||||||
@ -306,9 +306,9 @@ export class Instance {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async handlePowerButton () {
|
async handlePowerButton() {
|
||||||
|
|
||||||
if(!this.actionLock) {
|
if (!this.actionLock) {
|
||||||
let header = `${this.status === "running" ? "Stop" : "Start"} VM ${this.vmid}`;
|
let header = `${this.status === "running" ? "Stop" : "Start"} VM ${this.vmid}`;
|
||||||
let body = `<p>Are you sure you want to ${this.status === "running" ? "stop" : "start"} VM</p><p>${this.vmid}</p>`
|
let body = `<p>Are you sure you want to ${this.status === "running" ? "stop" : "start"} VM</p><p>${this.vmid}</p>`
|
||||||
|
|
||||||
@ -322,13 +322,13 @@ export class Instance {
|
|||||||
|
|
||||||
this.update();
|
this.update();
|
||||||
|
|
||||||
let result = await requestPVE(`/nodes/${this.node.name}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", {node: this.node.name, vmid: this.vmid});
|
let result = await requestPVE(`/nodes/${this.node.name}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", { node: this.node.name, vmid: this.vmid });
|
||||||
|
|
||||||
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
|
const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
|
||||||
|
|
||||||
while (true) {
|
while (true) {
|
||||||
let taskStatus = await requestPVE(`/nodes/${this.node.name}/tasks/${result.data}/status`, "GET");
|
let taskStatus = await requestPVE(`/nodes/${this.node.name}/tasks/${result.data}/status`, "GET");
|
||||||
if(taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") { // task stopped and was successful
|
if (taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") { // task stopped and was successful
|
||||||
this.status = targetStatus;
|
this.status = targetStatus;
|
||||||
this.update();
|
this.update();
|
||||||
this.actionLock = false;
|
this.actionLock = false;
|
||||||
@ -341,7 +341,7 @@ export class Instance {
|
|||||||
this.actionLock = false;
|
this.actionLock = false;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
else{ // task has not stopped
|
else { // task has not stopped
|
||||||
await waitFor(1000);
|
await waitFor(1000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -350,21 +350,21 @@ export class Instance {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleConfigButton () {
|
handleConfigButton() {
|
||||||
if (!this.actionLock && this.status === "stopped") { // if the action lock is false, and the node is stopped, then navigate to the conig page with the node infor in the search query
|
if (!this.actionLock && this.status === "stopped") { // if the action lock is false, and the node is stopped, then navigate to the conig page with the node infor in the search query
|
||||||
goToPage("config.html", {node: this.node.name, type: this.type, vmid: this.vmid});
|
goToPage("config.html", { node: this.node.name, type: this.type, vmid: this.vmid });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleConsoleButton () {
|
handleConsoleButton() {
|
||||||
if (!this.actionLock && this.status === "running") {
|
if (!this.actionLock && this.status === "running") {
|
||||||
let data = {console: `${this.type === "qemu" ? "kvm" : "lxc"}`, vmid: this.vmid, vmname: this.name, node: this.node.name, resize: "off", cmd: ""};
|
let data = { console: `${this.type === "qemu" ? "kvm" : "lxc"}`, vmid: this.vmid, vmname: this.name, node: this.node.name, resize: "off", cmd: "" };
|
||||||
data[`${this.type === "qemu" ? "novnc" : "xtermjs"}`] = 1;
|
data[`${this.type === "qemu" ? "novnc" : "xtermjs"}`] = 1;
|
||||||
goToURL(PVE, data, true);
|
goToURL(PVE, data, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDeleteButton () {
|
handleDeleteButton() {
|
||||||
if (!this.actionLock && this.status === "stopped") {
|
if (!this.actionLock && this.status === "stopped") {
|
||||||
|
|
||||||
let header = `Delete VM ${this.vmid}`;
|
let header = `Delete VM ${this.vmid}`;
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import {requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader} from "./utils.js";
|
import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader } from "./utils.js";
|
||||||
import {alert} from "./dialog.js";
|
import { alert } from "./dialog.js";
|
||||||
|
|
||||||
window.addEventListener("DOMContentLoaded", init);
|
window.addEventListener("DOMContentLoaded", init);
|
||||||
|
|
||||||
async function init (){
|
async function init() {
|
||||||
setTitleAndHeader();
|
setTitleAndHeader();
|
||||||
await deleteAllCookies();
|
await deleteAllCookies();
|
||||||
let formSubmitButton = document.querySelector("#submit");
|
let formSubmitButton = document.querySelector("#submit");
|
||||||
@ -11,7 +11,7 @@ async function init (){
|
|||||||
let realmSelect = document.querySelector("#realm");
|
let realmSelect = document.querySelector("#realm");
|
||||||
realms.data.forEach((element) => {
|
realms.data.forEach((element) => {
|
||||||
realmSelect.add(new Option(element.comment, element.realm));
|
realmSelect.add(new Option(element.comment, element.realm));
|
||||||
if("default" in element && element.default === 1){
|
if ("default" in element && element.default === 1) {
|
||||||
realmSelect.value = element.realm;
|
realmSelect.value = element.realm;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,19 +1,19 @@
|
|||||||
import {API, organization} from "/vars.js";
|
import { API, organization } from "/vars.js";
|
||||||
|
|
||||||
export const resources_config = {
|
export const resources_config = {
|
||||||
disk: {
|
disk: {
|
||||||
actionBarOrder: ["move", "resize", "detach_attach", "delete"],
|
actionBarOrder: ["move", "resize", "detach_attach", "delete"],
|
||||||
lxc: {
|
lxc: {
|
||||||
prefixOrder: ["rootfs", "mp", "unused"],
|
prefixOrder: ["rootfs", "mp", "unused"],
|
||||||
rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"]},
|
rootfs: { name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"] },
|
||||||
mp: {name: "MP", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"]},
|
mp: { name: "MP", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"] },
|
||||||
unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]}
|
unused: { name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"] }
|
||||||
},
|
},
|
||||||
qemu: {
|
qemu: {
|
||||||
prefixOrder: ["ide", "sata", "unused"],
|
prefixOrder: ["ide", "sata", "unused"],
|
||||||
ide: {name: "IDE", icon: "images/resources/disk.svg", actions: ["delete"]},
|
ide: { name: "IDE", icon: "images/resources/disk.svg", actions: ["delete"] },
|
||||||
sata: {name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"]},
|
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"]}
|
unused: { name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"] }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
network: {
|
network: {
|
||||||
@ -79,7 +79,7 @@ export function getCookie(cname) {
|
|||||||
let name = cname + "=";
|
let name = cname + "=";
|
||||||
let decodedCookie = decodeURIComponent(document.cookie);
|
let decodedCookie = decodeURIComponent(document.cookie);
|
||||||
let ca = decodedCookie.split(";");
|
let ca = decodedCookie.split(";");
|
||||||
for(let i = 0; i < ca.length; i++) {
|
for (let i = 0; i < ca.length; i++) {
|
||||||
let c = ca[i];
|
let c = ca[i];
|
||||||
while (c.charAt(0) === " ") {
|
while (c.charAt(0) === " ") {
|
||||||
c = c.substring(1);
|
c = c.substring(1);
|
||||||
@ -91,12 +91,12 @@ export function getCookie(cname) {
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function requestTicket (username, password, realm) {
|
export async function requestTicket(username, password, realm) {
|
||||||
let response = await requestAPI("/ticket", "POST", {username: `${username}@${realm}`, password: password}, false);
|
let response = await requestAPI("/ticket", "POST", { username: `${username}@${realm}`, password: password }, false);
|
||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function requestPVE (path, method, body = null) {
|
export async function requestPVE(path, method, body = null) {
|
||||||
let prms = new URLSearchParams(body);
|
let prms = new URLSearchParams(body);
|
||||||
let content = {
|
let content = {
|
||||||
method: method,
|
method: method,
|
||||||
@ -106,7 +106,7 @@ export async function requestPVE (path, method, body = null) {
|
|||||||
"Content-Type": "application/x-www-form-urlencoded"
|
"Content-Type": "application/x-www-form-urlencoded"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(method === "POST") {
|
if (method === "POST") {
|
||||||
content.body = prms.toString();
|
content.body = prms.toString();
|
||||||
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
|
||||||
}
|
}
|
||||||
@ -115,7 +115,7 @@ export async function requestPVE (path, method, body = null) {
|
|||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function requestAPI (path, method, body = null) {
|
export async function requestAPI(path, method, body = null) {
|
||||||
let prms = new URLSearchParams(body);
|
let prms = new URLSearchParams(body);
|
||||||
let content = {
|
let content = {
|
||||||
method: method,
|
method: method,
|
||||||
@ -136,7 +136,7 @@ export async function requestAPI (path, method, body = null) {
|
|||||||
return response;
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function request (url, content) {
|
async function request(url, content) {
|
||||||
|
|
||||||
let response = await fetch(url, content);
|
let response = await fetch(url, content);
|
||||||
let data = null;
|
let data = null;
|
||||||
@ -148,8 +148,8 @@ async function request (url, content) {
|
|||||||
data = null;
|
data = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!response.ok){
|
if (!response.ok) {
|
||||||
return {status: response.status, error: data ? data.error : response.status};
|
return { status: response.status, error: data ? data.error : response.status };
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
data.status = response.status;
|
data.status = response.status;
|
||||||
@ -157,9 +157,9 @@ async function request (url, content) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function goToPage (page, data={}, newwindow = false) {
|
export function goToPage(page, data = {}, newwindow = false) {
|
||||||
let url = new URL(`https://${window.location.host}/${page}`);
|
let url = new URL(`https://${window.location.host}/${page}`);
|
||||||
for(let k in data) {
|
for (let k in data) {
|
||||||
url.searchParams.append(k, data[k]);
|
url.searchParams.append(k, data[k]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -171,9 +171,9 @@ export function goToPage (page, data={}, newwindow = false) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function goToURL (href, data={}, newwindow = false) {
|
export function goToURL(href, data = {}, newwindow = false) {
|
||||||
let url = new URL(href);
|
let url = new URL(href);
|
||||||
for(let k in data) {
|
for (let k in data) {
|
||||||
url.searchParams.append(k, data[k]);
|
url.searchParams.append(k, data[k]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -185,16 +185,16 @@ export function goToURL (href, data={}, newwindow = false) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getURIData () {
|
export function getURIData() {
|
||||||
let url = new URL(window.location.href);
|
let url = new URL(window.location.href);
|
||||||
return Object.fromEntries(url.searchParams);
|
return Object.fromEntries(url.searchParams);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function deleteAllCookies () {
|
export async function deleteAllCookies() {
|
||||||
await requestAPI("/ticket", "DELETE");
|
await requestAPI("/ticket", "DELETE");
|
||||||
}
|
}
|
||||||
|
|
||||||
export function setTitleAndHeader () {
|
export function setTitleAndHeader() {
|
||||||
document.title = `${organization} - client`;
|
document.title = `${organization} - client`;
|
||||||
document.querySelector("h1").innerText = organization;
|
document.querySelector("h1").innerText = organization;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user