remove alert interface and use new error interface

This commit is contained in:
alu
2026-07-28 20:41:01 +00:00
parent 5786b7e1be
commit 1f672e16e6
7 changed files with 43 additions and 80 deletions
+2 -2
View File
@@ -1,5 +1,5 @@
import { requestAPI, setAppearance } from "./utils.js"; import { requestAPI, setAppearance } from "./utils.js";
import { dialog } from "./dialog.js"; import { dialog, error } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
@@ -15,7 +15,7 @@ function handlePasswordChangeButton () {
if (result === "confirm") { if (result === "confirm") {
const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") }); const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to change password but got: ${result.error}`); error(`Attempted to change password but got: ${result.error}`);
} }
} }
}); });
+7 -11
View File
@@ -1,5 +1,5 @@
import { requestAPI, getURIData, setAppearance, requestDash } from "./utils.js"; import { requestAPI, getURIData, setAppearance, requestDash } from "./utils.js";
import { alert, dialog } from "./dialog.js"; import { error, dialog } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
@@ -74,7 +74,7 @@ class BackupCard extends HTMLElement {
}; };
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/notes`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/notes`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to edit backup but got: ${result.error}`); error(`Attempted to edit backup but got: ${result.error}`);
} }
refreshBackups(); refreshBackups();
} }
@@ -90,7 +90,7 @@ class BackupCard extends HTMLElement {
}; };
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "DELETE", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "DELETE", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to delete backup but got: ${result.error}`); error(`Attempted to delete backup but got: ${result.error}`);
} }
refreshBackups(); refreshBackups();
} }
@@ -106,7 +106,7 @@ class BackupCard extends HTMLElement {
}; };
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/restore`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/restore`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to delete backup but got: ${result.error}`); error(`Attempted to delete backup but got: ${result.error}`);
} }
refreshBackups(); refreshBackups();
} }
@@ -116,14 +116,10 @@ class BackupCard extends HTMLElement {
customElements.define("backup-card", BackupCard); customElements.define("backup-card", BackupCard);
async function getBackupsFragment () {
return await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET");
}
async function refreshBackups () { async function refreshBackups () {
let backups = await getBackupsFragment(); let backups = await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET");
if (backups.status !== 200) { if (backups.status !== 200) {
alert("Error fetching backups."); error("Error fetching backups.");
} }
else { else {
backups = backups.data; backups = backups.data;
@@ -141,7 +137,7 @@ async function handleBackupAddButton () {
}; };
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to create backup but got: ${result.error}`); error(`Attempted to create backup but got: ${result.error}`);
} }
refreshBackups(); refreshBackups();
} }
+3 -2
View File
@@ -1,4 +1,5 @@
import { getSetting, requestAPI } from "./utils.js"; import { getSetting, requestAPI } from "./utils.js";
import { error } from "./dialog.js";
export async function setupClientSync (callback) { export async function setupClientSync (callback) {
const scheme = getSetting("sync-scheme"); const scheme = getSetting("sync-scheme");
@@ -31,12 +32,12 @@ export async function setupClientSync (callback) {
callback(); callback();
} }
else { else {
console.error("clientsync: recieved unexpected message from server, closing socket."); error("clientsync: recieved unexpected message from server, closing socket.");
socket.close(); socket.close();
} }
}); });
} }
else { else {
console.error(`clientsync: unsupported scheme ${scheme} selected.`); error(`clientsync: unsupported scheme ${scheme} selected.`);
} }
} }
+21 -21
View File
@@ -1,5 +1,5 @@
import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js"; import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js";
import { alert, dialog } from "./dialog.js"; import { error, dialog } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
@@ -59,7 +59,7 @@ class VolumeAction extends HTMLElement {
this.setStatusLoading(); this.setStatusLoading();
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST"); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST");
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to detach ${disk} but got: ${result.error}`); error(`Attempted to detach ${disk} but got: ${result.error}`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -80,7 +80,7 @@ class VolumeAction extends HTMLElement {
const disk = `${prefix}${device}`; const disk = `${prefix}${device}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`); error(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -98,7 +98,7 @@ class VolumeAction extends HTMLElement {
}; };
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to resize ${disk} but got: ${result.error}`); error(`Attempted to resize ${disk} but got: ${result.error}`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -117,7 +117,7 @@ class VolumeAction extends HTMLElement {
}; };
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`); error(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -141,7 +141,7 @@ class VolumeAction extends HTMLElement {
this.setStatusLoading(); this.setStatusLoading();
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE"); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE");
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to delete ${disk} but got: ${result.error}`); error(`Attempted to delete ${disk} but got: ${result.error}`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -162,7 +162,7 @@ async function initVolumes () {
async function refreshVolumes () { async function refreshVolumes () {
let volumes = await requestDash(`/config/volumes?node=${node}&type=${type}&vmid=${vmid}`, "GET"); let volumes = await requestDash(`/config/volumes?node=${node}&type=${type}&vmid=${vmid}`, "GET");
if (volumes.status !== 200) { if (volumes.status !== 200) {
alert("Error fetching instance volumes."); error("Error fetching instance volumes.");
} }
else { else {
volumes = volumes.data; volumes = volumes.data;
@@ -186,7 +186,7 @@ async function handleDiskAdd () {
const disk = `${prefix}${id}`; const disk = `${prefix}${id}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to create ${disk} but got: ${result.error}`); error(`Attempted to create ${disk} but got: ${result.error}`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -214,7 +214,7 @@ async function handleCDAdd () {
const disk = `ide${form.get("device")}`; const disk = `ide${form.get("device")}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`); error(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
} }
refreshVolumes(); refreshVolumes();
refreshBoot(); refreshBoot();
@@ -263,7 +263,7 @@ class NetworkAction extends HTMLElement {
const net = `${netID}`; const net = `${netID}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to change ${net} but got: ${result.error}`); error(`Attempted to change ${net} but got: ${result.error}`);
} }
refreshNetworks(); refreshNetworks();
refreshBoot(); refreshBoot();
@@ -281,7 +281,7 @@ class NetworkAction extends HTMLElement {
const net = `${netID}`; const net = `${netID}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE"); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to delete ${net} but got: ${result.error}`); error(`Attempted to delete ${net} but got: ${result.error}`);
} }
refreshNetworks(); refreshNetworks();
refreshBoot(); refreshBoot();
@@ -299,7 +299,7 @@ async function initNetworks () {
async function refreshNetworks () { async function refreshNetworks () {
let nets = await requestDash(`/config/nets?node=${node}&type=${type}&vmid=${vmid}`, "GET"); let nets = await requestDash(`/config/nets?node=${node}&type=${type}&vmid=${vmid}`, "GET");
if (nets.status !== 200) { if (nets.status !== 200) {
alert("Error fetching instance nets."); error("Error fetching instance nets.");
} }
else { else {
nets = nets.data; nets = nets.data;
@@ -324,7 +324,7 @@ async function handleNetworkAdd () {
const net = `net${id}`; const net = `net${id}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to create ${net} but got: ${result.error}`); error(`Attempted to create ${net} but got: ${result.error}`);
} }
refreshNetworks(); refreshNetworks();
refreshBoot(); refreshBoot();
@@ -367,7 +367,7 @@ class DeviceAction extends HTMLElement {
const device = `${deviceID}`; const device = `${deviceID}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to add ${device} but got: ${result.error}`); error(`Attempted to add ${device} but got: ${result.error}`);
} }
refreshDevices(); refreshDevices();
} }
@@ -389,7 +389,7 @@ class DeviceAction extends HTMLElement {
const device = `${deviceID}`; const device = `${deviceID}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE"); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE");
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to delete ${device} but got: ${result.error}`); error(`Attempted to delete ${device} but got: ${result.error}`);
} }
refreshDevices(); refreshDevices();
} }
@@ -408,7 +408,7 @@ async function initDevices () {
async function refreshDevices () { async function refreshDevices () {
let devices = await requestDash(`/config/devices?node=${node}&type=${type}&vmid=${vmid}`, "GET"); let devices = await requestDash(`/config/devices?node=${node}&type=${type}&vmid=${vmid}`, "GET");
if (devices.status !== 200) { if (devices.status !== 200) {
alert("Error fetching instance devices."); error("Error fetching instance devices.");
} }
else { else {
devices = devices.data; devices = devices.data;
@@ -431,7 +431,7 @@ async function handleDeviceAdd () {
const deviceID = `hostpci${hostpci}`; const deviceID = `hostpci${hostpci}`;
const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${deviceID}/create`, "POST", body); const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${deviceID}/create`, "POST", body);
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to add ${body.device} but got: ${result.error}`); error(`Attempted to add ${body.device} but got: ${result.error}`);
} }
refreshDevices(); refreshDevices();
} }
@@ -447,12 +447,12 @@ async function handleDeviceAdd () {
async function refreshBoot () { async function refreshBoot () {
let boot = await requestDash(`/config/boot?node=${node}&type=${type}&vmid=${vmid}`, "GET"); let boot = await requestDash(`/config/boot?node=${node}&type=${type}&vmid=${vmid}`, "GET");
if (boot.status !== 200) { if (boot.status !== 200) {
alert("Error fetching instance boot order."); error("Error fetching instance boot order.");
} }
else if (type === "qemu") { else if (type === "qemu") {
boot = boot.data; boot = boot.data;
const order = document.querySelector("#boot-order"); const container = document.querySelector("#boot-order");
order.setHTMLUnsafe(boot); container.setHTMLUnsafe(boot);
} }
} }
@@ -474,6 +474,6 @@ async function handleFormExit (event) {
goToPage("index"); goToPage("index");
} }
else { else {
alert(`Attempted to set basic resources but got: ${result.error}`); error(`Attempted to set basic resources but got: ${result.error}`);
} }
} }
+1 -29
View File
@@ -41,34 +41,6 @@ export function dialog (template, onclose = async (_result, _form) => { }) {
return dialog; return dialog;
} }
export function alert (message) {
const dialog = document.querySelector("#alert-dialog");
if (dialog == null) {
const dialog = document.createElement("dialog");
dialog.id = "alert-dialog";
dialog.innerHTML = `
<form method="dialog">
<p class="w3-large" id="prompt">Alert</p>
<p class="w3-center" style="margin-bottom: 0;">${message}</p>
<div class="w3-center">
<button class="w3-button w3-margin" id="submit">OK</button>
</div>
</form>
`;
dialog.className = "w3-container w3-card w3-border-0";
document.body.append(dialog);
dialog.showModal();
dialog.addEventListener("close", () => {
dialog.parentElement.removeChild(dialog);
});
return dialog;
}
else {
console.error("Attempted to create a new alert while one already exists!");
return null;
}
}
class ErrorDialog extends HTMLElement { class ErrorDialog extends HTMLElement {
shadowRoot = null; shadowRoot = null;
dialog = null; dialog = null;
@@ -141,7 +113,7 @@ customElements.define("error-dialog", ErrorDialog);
export function error (message) { export function error (message) {
let dialog = document.querySelector("error-dialog"); let dialog = document.querySelector("error-dialog");
if (dialog == null) { if (dialog === null) {
dialog = document.createElement("error-dialog"); dialog = document.createElement("error-dialog");
document.body.append(dialog); document.body.append(dialog);
dialog.appendError(message); dialog.appendError(message);
+5 -9
View File
@@ -1,5 +1,5 @@
import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt } from "./utils.js"; import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt } from "./utils.js";
import { alert, dialog, error } from "./dialog.js"; import { dialog, error } from "./dialog.js";
import { setupClientSync } from "./clientsync.js"; import { setupClientSync } from "./clientsync.js";
import wfaInit from "../modules/wfa.js"; import wfaInit from "../modules/wfa.js";
@@ -175,7 +175,7 @@ class InstanceCard extends HTMLElement {
break; break;
} }
else if (taskStatus.data.status === "stopped") { // task stopped but was not successful else if (taskStatus.data.status === "stopped") { // task stopped but was not successful
alert(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`); error(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
break; break;
} }
else { // task has not stopped else { // task has not stopped
@@ -203,7 +203,7 @@ class InstanceCard extends HTMLElement {
const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE"); const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
if (result.status !== 200) { if (result.status !== 200) {
alert(`Attempted to delete ${this.vmid} but got: ${result.error}`); error(`Attempted to delete ${this.vmid} but got: ${result.error}`);
} }
this.actionLock = false; this.actionLock = false;
@@ -216,12 +216,8 @@ class InstanceCard extends HTMLElement {
customElements.define("instance-card", InstanceCard); customElements.define("instance-card", InstanceCard);
async function getInstancesFragment () {
return await requestDash("/index/instances", "GET");
}
async function refreshInstances () { async function refreshInstances () {
let instances = await getInstancesFragment(); let instances = await requestDash("/index/instances", "GET");
if (instances.status !== 200) { if (instances.status !== 200) {
error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`); error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`);
} }
@@ -337,7 +333,7 @@ async function handleInstanceAddButton () {
refreshInstances(); refreshInstances();
} }
else { else {
alert(`Attempted to create new instance ${vmid} but got: ${result.error}`); error(`Attempted to create new instance ${vmid} but got: ${result.error}`);
refreshInstances(); refreshInstances();
} }
} }
+4 -6
View File
@@ -1,5 +1,5 @@
import { goToPage, setAppearance, requestAPI } from "./utils.js"; import { goToPage, setAppearance, requestAPI } from "./utils.js";
import { alert } from "./dialog.js"; import { error } from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
@@ -19,18 +19,16 @@ async function init () {
goToPage("index"); goToPage("index");
} }
else if (ticket.status === 401) { else if (ticket.status === 401) {
alert("Authenticaton failed."); error("Authenticaton failed.");
formSubmitButton.innerText = "LOGIN"; formSubmitButton.innerText = "LOGIN";
} }
else if (ticket.status === 408) { else if (ticket.status === 408) {
alert("Network error."); error("Network error.");
formSubmitButton.innerText = "LOGIN"; formSubmitButton.innerText = "LOGIN";
} }
else { else {
alert("An error occured."); error(`An error occured: ${JSON.stringify(ticket)}`);
console.error(ticket);
formSubmitButton.innerText = "LOGIN"; formSubmitButton.innerText = "LOGIN";
console.error(ticket.error);
} }
}); });
} }