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

implement ssr dialog for config

Browse Source
This commit is contained in:
Arthur Lu
2025-06-19 20:23:10 +00:00
parent e41c8d2a07
commit 9ec277ce65
4 changed files with 317 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/html/config-volumes.go.tmpl
View File

@@ -1 +1 @@
{{template "volumes" .config.Volumes}} {{template "volumes" Map "Volumes" .config.Volumes "InstanceType" .config.Type}}

26
web/html/config.html
View File

@@ -43,18 +43,14 @@
<fieldset class="w3-card w3-padding"> <fieldset class="w3-card w3-padding">
<legend>Volumes</legend> <legend>Volumes</legend>
<div class="input-grid" id="volumes" style="grid-template-columns: auto auto 1fr auto;"> <div class="input-grid" id="volumes" style="grid-template-columns: auto auto 1fr auto;">
{{template "volumes" .config.Volumes}} {{template "volumes" Map "Volumes" .config.Volumes "InstanceType" .config.Type}}
</div> </div>
<div class="w3-container w3-center"> <div class="w3-container w3-center">
<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk"> <!--Add Disk Button & Dialog Template-->
<span class="large" style="margin: 0;">Add Disk</span> {{template "volumes-add-disk" .}}
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg> <!--Add CD Button & Dialog Template-->
</button>
{{if eq .config.Type "VM"}} {{if eq .config.Type "VM"}}
<button type="button" id="cd-add" class="w3-button" aria-label="Add New CD"> {{template "volumes-add-cd"}}
<span class="large" style="margin: 0;">Mount CD</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
</button>
{{end}} {{end}}
</div> </div>
</fieldset> </fieldset>
@@ -64,10 +60,8 @@
{{template "nets" .config.Nets}} {{template "nets" .config.Nets}}
</div> </div>
<div class="w3-container w3-center"> <div class="w3-container w3-center">
<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface"> <!--Add Net Button & Dialog Template-->
<span class="large" style="margin: 0;">Add Network</span> {{template "nets-add-net"}}
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
</button>
</div> </div>
</fieldset> </fieldset>
{{if eq .config.Type "VM"}} {{if eq .config.Type "VM"}}
@@ -77,10 +71,8 @@
{{template "devices" .config.Devices}} {{template "devices" .config.Devices}}
</div> </div>
<div class="w3-container w3-center"> <div class="w3-container w3-center">
<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device"> <!--Add Device Button & Dialog Template-->
<span class="large" style="margin: 0;">Add Device</span> {{template "devices-add-device"}}
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
</button>
</div> </div>
</fieldset> </fieldset>
<fieldset class="w3-card w3-padding"> <fieldset class="w3-card w3-padding">

163
web/scripts/config.js
View File

@@ -29,6 +29,7 @@ class VolumeAction extends HTMLElement {
super(); super();
const internals = this.attachInternals(); const internals = this.attachInternals();
this.shadowRoot = internals.shadowRoot; this.shadowRoot = internals.shadowRoot;
this.template = this.shadowRoot.querySelector("#dialog-template");
if (this.dataset.type === "move") { if (this.dataset.type === "move") {
this.addEventListener("click", this.handleDiskMove); this.addEventListener("click", this.handleDiskMove);
} }
@@ -53,9 +54,7 @@ class VolumeAction extends HTMLElement {
async handleDiskDetach () { async handleDiskDetach () {
const disk = this.dataset.volume; const disk = this.dataset.volume;
const header = `Detach ${disk}`; dialog(this.template, async (result, form) => {
const body = `<p>Are you sure you want to detach disk ${disk}</p>`;
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
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");
@@ -69,15 +68,7 @@ class VolumeAction extends HTMLElement {
} }
async handleDiskAttach () { async handleDiskAttach () {
const header = `Attach ${this.dataset.volume}`; dialog(this.template, async (result, form) => {
const body = `
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label>
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "30" : "255"}" required>
</form>
`;
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const device = form.get("device"); const device = form.get("device");
this.setStatusLoading(); this.setStatusLoading();
@@ -97,15 +88,7 @@ class VolumeAction extends HTMLElement {
} }
async handleDiskResize () { async handleDiskResize () {
const header = `Resize ${this.dataset.volume}`; dialog(this.template, async (result, form) => {
const body = `
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<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">
</form>
`;
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const disk = this.dataset.volume; const disk = this.dataset.volume;
this.setStatusLoading(); this.setStatusLoading();
@@ -123,25 +106,7 @@ class VolumeAction extends HTMLElement {
} }
async handleDiskMove () { async handleDiskMove () {
const content = type === "qemu" ? "images" : "rootdir"; const d = dialog(this.template, async (result, form) => {
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
const header = `Move ${this.dataset.volume}`;
let options = "";
storage.data.forEach((element) => {
if (element.content.includes(content)) {
options += `<option value="${element.storage}">${element.storage}</option>"`;
}
});
const select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select"><option hidden disabled selected value></option>${options}</select>`;
const body = `
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
${select}
<label for="delete-check">Delete Source</label><input class="w3-input w3-border" name="delete-check" id="delete-check" type="checkbox" checked required>
</form>
`;
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const disk = this.dataset.volume; const disk = this.dataset.volume;
this.setStatusLoading(); this.setStatusLoading();
@@ -157,13 +122,20 @@ class VolumeAction extends HTMLElement {
refreshBoot(); refreshBoot();
} }
}); });
const content = type === "qemu" ? "images" : "rootdir";
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
const select = d.querySelector("#storage-select");
storage.data.forEach((element) => {
if (element.content.includes(content)) {
select.add(new Option(element.storage));
}
select.selectedIndex = -1;
});
} }
async handleDiskDelete () { async handleDiskDelete () {
const disk = this.dataset.volume; const disk = this.dataset.volume;
const header = `Delete ${disk}`; dialog(this.template, async (result, form) => {
const body = `<p>Are you sure you want to <strong>delete</strong> disk ${disk}</p>`;
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
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");
@@ -201,26 +173,8 @@ async function refreshVolumes () {
} }
async function handleDiskAdd () { async function handleDiskAdd () {
const content = type === "qemu" ? "images" : "rootdir"; const template = document.querySelector("#add-disk-dialog");
const storage = await requestPVE(`/nodes/${node}/storage`, "GET"); const d = dialog(template, async (result, form) => {
const header = "Create New Disk";
let options = "";
storage.data.forEach((element) => {
if (element.content.includes(content)) {
options += `<option value="${element.storage}">${element.storage}</option>"`;
}
});
const select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select" required><option hidden disabled selected value></option>${options}</select>`;
const body = `
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "30" : "255"}" value="0" required>
${select}
<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
</form>
`;
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const body = { const body = {
storage: form.get("storage-select"), storage: form.get("storage-select"),
@@ -237,19 +191,21 @@ async function handleDiskAdd () {
refreshBoot(); refreshBoot();
} }
}); });
const content = type === "qemu" ? "images" : "rootdir";
const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
const select = d.querySelector("#storage-select");
storage.data.forEach((element) => {
if (element.content.includes(content)) {
select.add(new Option(element.storage));
}
select.selectedIndex = -1;
});
} }
async function handleCDAdd () { async function handleCDAdd () {
const isos = await requestAPI("/user/vm-isos", "GET"); const template = document.querySelector("#add-cd-dialog");
const header = "Mount a CDROM"; const d = dialog(template, async (result, form) => {
const body = `
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required>
<label for="iso-select">Image</label><select class="w3-select w3-border" name="iso-select" id="iso-select" required></select>
</form>
`;
const d = dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const body = { const body = {
iso: form.get("iso-select") iso: form.get("iso-select")
@@ -264,12 +220,13 @@ async function handleCDAdd () {
} }
}); });
const isoSelect = d.querySelector("#iso-select"); const isos = await requestAPI("/user/vm-isos", "GET");
const select = d.querySelector("#iso-select");
for (const iso of isos) { for (const iso of isos) {
isoSelect.append(new Option(iso.name, iso.volid)); select.add(new Option(iso.name, iso.volid));
} }
isoSelect.selectedIndex = -1; select.selectedIndex = -1;
} }
class NetworkAction extends HTMLElement { class NetworkAction extends HTMLElement {
@@ -279,6 +236,7 @@ class NetworkAction extends HTMLElement {
super(); super();
const internals = this.attachInternals(); const internals = this.attachInternals();
this.shadowRoot = internals.shadowRoot; this.shadowRoot = internals.shadowRoot;
this.template = this.shadowRoot.querySelector("#dialog-template");
if (this.dataset.type === "config") { if (this.dataset.type === "config") {
this.addEventListener("click", this.handleNetworkConfig); this.addEventListener("click", this.handleNetworkConfig);
} }
@@ -293,16 +251,9 @@ class NetworkAction extends HTMLElement {
} }
async handleNetworkConfig () { async handleNetworkConfig () {
const netID = this.dataset.network;
const netDetails = this.dataset.value; const netDetails = this.dataset.value;
const header = `Edit ${netID}`; const netID = this.dataset.network;
const body = ` const d = dialog(this.template, async (result, form) => {
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
</form>
`;
const d = dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
this.setStatusLoading(); this.setStatusLoading();
const body = { const body = {
@@ -323,9 +274,7 @@ class NetworkAction extends HTMLElement {
async handleNetworkDelete () { async handleNetworkDelete () {
const netID = this.dataset.network; const netID = this.dataset.network;
const header = `Delete ${netID}`; dialog(this.template, async (result, form) => {
const body = "";
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg"); setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
const net = `${netID}`; const net = `${netID}`;
@@ -361,17 +310,8 @@ async function refreshNetworks () {
} }
async function handleNetworkAdd () { async function handleNetworkAdd () {
const header = "Create Network Interface"; const template = document.querySelector("#add-net-dialog");
let body = ` dialog(template, async (result, form) => {
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="netid">Interface ID</label><input type="number" id="netid" name="netid" class="w3-input w3-border">
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
`;
if (type === "lxc") {
body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\">";
}
body += "</form>";
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const body = { const body = {
rate: form.get("rate") rate: form.get("rate")
@@ -398,6 +338,7 @@ class DeviceAction extends HTMLElement {
super(); super();
const internals = this.attachInternals(); const internals = this.attachInternals();
this.shadowRoot = internals.shadowRoot; this.shadowRoot = internals.shadowRoot;
this.template = this.shadowRoot.querySelector("#dialog-template");
if (this.dataset.type === "config") { if (this.dataset.type === "config") {
this.addEventListener("click", this.handleDeviceConfig); this.addEventListener("click", this.handleDeviceConfig);
} }
@@ -415,14 +356,7 @@ class DeviceAction extends HTMLElement {
const deviceID = this.dataset.device; const deviceID = this.dataset.device;
const deviceDetails = this.dataset.value; const deviceDetails = this.dataset.value;
const deviceName = this.dataset.name; const deviceName = this.dataset.name;
const header = `Edit Expansion Card ${deviceID}`; const d = dialog(this.template, async (result, form) => {
const body = `
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
</form>
`;
const d = dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
this.setStatusLoading(); this.setStatusLoading();
const body = { const body = {
@@ -448,9 +382,7 @@ class DeviceAction extends HTMLElement {
async handleDeviceDelete () { async handleDeviceDelete () {
const deviceID = this.dataset.device; const deviceID = this.dataset.device;
const header = `Remove Expansion Card ${deviceID}`; dialog(this.template, async (result, form) => {
const body = "";
dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
this.setStatusLoading(); this.setStatusLoading();
const device = `${deviceID}`; const device = `${deviceID}`;
@@ -487,15 +419,8 @@ async function refreshDevices () {
} }
async function handleDeviceAdd () { async function handleDeviceAdd () {
const header = "Add Expansion Card"; const template = document.querySelector("#add-device-dialog");
const body = ` const d = dialog(template, async (result, form) => {
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="hostpci">Device Bus</label><input type="number" id="hostpci" name="hostpci" class="w3-input w3-border">
<label for="device">Device</label><select id="device" name="device" required></select>
<label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
</form>
`;
const d = dialog(header, body, async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
const hostpci = form.get("hostpci"); const hostpci = form.get("hostpci");
const body = { const body = {

269
web/templates/config.go.tmpl
View File

@@ -27,22 +27,75 @@
{{end}} {{end}}
{{define "volumes"}} {{define "volumes"}}
{{range $k,$v := .}} {{range $k,$v := .Volumes}}
{{if eq $v.Type "rootfs"}} {{if eq $v.Type "rootfs"}}
{{ template "volume-rootfs" Map "Name" $k "Volume" $v}} {{ template "volume-rootfs" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
{{else if eq $v.Type "mp"}} {{else if eq $v.Type "mp"}}
{{ template "volume-mp" Map "Name" $k "Volume" $v}} {{ template "volume-mp" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
{{else if eq $v.Type "ide"}} {{else if eq $v.Type "ide"}}
{{ template "volume-ide" Map "Name" $k "Volume" $v}} {{ template "volume-ide" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
{{else if or (eq $v.Type "scsi") (eq $v.Type "sata")}} {{else if or (eq $v.Type "scsi") (eq $v.Type "sata")}}
{{ template "volume-scsi" Map "Name" $k "Volume" $v}} {{ template "volume-scsi" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
{{else if eq $v.Type "unused"}} {{else if eq $v.Type "unused"}}
{{ template "volume-unused" Map "Name" $k "Volume" $v}} {{ template "volume-unused" Map "Name" $k "Volume" $v "InstanceType" $.InstanceType}}
{{else}} {{else}}
{{end}} {{end}}
{{end}} {{end}}
{{end}} {{end}}
{{define "volumes-add-disk"}}
<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
<span class="large" style="margin: 0;">Add Disk</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
</button>
<template id="add-disk-dialog">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Create New Disk
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
{{if eq .config.Type "VM"}}
<label for="device">SCSI</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="30" value="0" required>
{{else}}
<label for="device">MP</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="255" value="0" required>
{{end}}
<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select" required></select>
<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
{{end}}
{{define "volumes-add-cd"}}
<button type="button" id="cd-add" class="w3-button" aria-label="Add New CD">
<span class="large" style="margin: 0;">Mount CD</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
</button>
<template id="add-cd-dialog">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Mount a CDROM
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required>
<label for="iso-select">Image</label><select class="w3-select w3-border" name="iso-select" id="iso-select" required></select>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
{{end}}
{{define "volume-rootfs"}} {{define "volume-rootfs"}}
<svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg> <svg data-volume={{.Name}} xmlns="http://www.w3.org/2000/svg" aria-label="Drive"><use href="images/resources/drive.svg#symb"></svg>
<p>{{.Name}}</p> <p>{{.Name}}</p>
@@ -108,6 +161,23 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Move {{.Name}}"><use href="images/actions/disk/move-active.svg#symb"></svg> <svg class="clickable" aria-label="Move {{.Name}}"><use href="images/actions/disk/move-active.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Move {{.Name}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select"></select>
<label for="delete-check">Delete Source</label><input class="w3-input w3-border" name="delete-check" id="delete-check" type="checkbox" checked required>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</volume-action> </volume-action>
{{end}} {{end}}
@@ -126,6 +196,23 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Resize {{.Name}}"><use href="images/actions/disk/resize-active.svg#symb"></svg> <svg class="clickable" aria-label="Resize {{.Name}}"><use href="images/actions/disk/resize-active.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Resize {{.Name}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<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">
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</volume-action> </volume-action>
{{end}} {{end}}
@@ -144,6 +231,22 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Delete {{.Name}}"><use href="images/actions/disk/delete-active.svg#symb"></svg> <svg class="clickable" aria-label="Delete {{.Name}}"><use href="images/actions/disk/delete-active.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Delete {{.Name}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<p>Are you sure you want to <strong>delete</strong> disk {{.Name}}</p>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</volume-action> </volume-action>
{{end}} {{end}}
@@ -162,6 +265,28 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Attach {{.Name}}"><use href="images/actions/disk/attach.svg#symb"></svg> <svg class="clickable" aria-label="Attach {{.Name}}"><use href="images/actions/disk/attach.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Attach {{.Name}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
{{if eq .InstanceType "VM"}}
<label for="device">SCSI</label>
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="30" required>
{{else}}
<label for="device">MP</label>
<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="255" required>
{{end}}
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</volume-action> </volume-action>
{{end}} {{end}}
@@ -171,6 +296,22 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Detach {{.Name}}"><use href="images/actions/disk/detach.svg#symb"></svg> <svg class="clickable" aria-label="Detach {{.Name}}"><use href="images/actions/disk/detach.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Detach {{.Name}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<p>Are you sure you want to detach disk {{.Name}}</p>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</volume-action> </volume-action>
{{end}} {{end}}
@@ -190,6 +331,33 @@
{{end}} {{end}}
{{end}} {{end}}
{{define "nets-add-net"}}
<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
<span class="large" style="margin: 0;">Add Network</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
</button>
<template id="add-net-dialog">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Create Network Interface
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="netid">Interface ID</label><input type="number" id="netid" name="netid" class="w3-input w3-border">
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
{{if eq .config.Type "CT"}}
<label for="name">Interface Name</label><input type="text" id="name" name="name" class="w3-input w3-border">
{{end}}
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
{{end}}
{{define "net"}} {{define "net"}}
<svg data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}"><use href="images/resources/network.svg#symb"></svg> <svg data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}"><use href="images/resources/network.svg#symb"></svg>
<p>{{.Net_ID}}</p> <p>{{.Net_ID}}</p>
@@ -199,12 +367,44 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Configure Net {{.Net_ID}}"><use href="images/actions/network/config.svg#symb"></svg> <svg class="clickable" aria-label="Configure Net {{.Net_ID}}"><use href="images/actions/network/config.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Edit {{.Net_ID}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</network-action> </network-action>
<network-action data-type="delete" data-network="{{.Net_ID}}" data-value="{{.Value}}"> <network-action data-type="delete" data-network="{{.Net_ID}}" data-value="{{.Value}}">
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Delete Net {{.Net_ID}}"><use href="images/actions/network/delete-active.svg#symb"></svg> <svg class="clickable" aria-label="Delete Net {{.Net_ID}}"><use href="images/actions/network/delete-active.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Delete {{.Net_ID}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<p>Are you sure you want to <strong>delete</strong> {{.Net_ID}}</p>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</network-action> </network-action>
</div> </div>
@@ -216,6 +416,31 @@
{{end}} {{end}}
{{end}} {{end}}
{{define "devices-add-device"}}
<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
<span class="large" style="margin: 0;">Add Device</span>
<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
</button>
<template id="add-device-dialog">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Add Expansion Card
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="hostpci">Device Bus</label><input type="number" id="hostpci" name="hostpci" class="w3-input w3-border">
<label for="device">Device</label><select id="device" name="device" required></select>
<label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
{{end}}
{{define "device"}} {{define "device"}}
<svg data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}"><use href="images/resources/device.svg#symb"></svg> <svg data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}"><use href="images/resources/device.svg#symb"></svg>
<p>{{.Device_ID}}</p> <p>{{.Device_ID}}</p>
@@ -225,12 +450,44 @@
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Configure Device {{.Device_ID}}"><use href="images/actions/device/config.svg#symb"></svg> <svg class="clickable" aria-label="Configure Device {{.Device_ID}}"><use href="images/actions/device/config.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
Edit Expansion Card {{.Device_ID}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</device-action> </device-action>
<device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Value}}"> <device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Value}}">
<template shadowrootmode="open"> <template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Delete Device {{.Device_ID}}"><use href="images/actions/device/delete-active.svg#symb"></svg> <svg class="clickable" aria-label="Delete Device {{.Device_ID}}"><use href="images/actions/device/delete-active.svg#symb"></svg>
<template id="dialog-template">
<dialog class="w3-container w3-card w3-border-0">
<p class="w3-large" id="prompt" style="text-align: center;">
remove Expansion Card {{.Device_ID}}
</p>
<div id="body">
<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
<p>Are you sure you want to <strong>remove</strong> {{.Device_ID}}</p>
</form>
</div>
<div id="controls" class="w3-center w3-container">
<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
</div>
</dialog>
</template>
</template> </template>
</device-action> </device-action>
</div> </div>