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

implement SSR for instance config page

Browse Source
This commit is contained in:
Arthur Lu
2025-04-22 17:09:27 +00:00
parent 099f9c4e42
commit 8530b50f9a
25 changed files with 1062 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/html/config-boot.frag Normal file
View File

@@ -0,0 +1 @@
{{template "boot" .config.Boot}}

1
web/html/config-devices.frag Normal file
View File

@@ -0,0 +1 @@
{{template "devices" .config.Devices}}

1
web/html/config-nets.frag Normal file
View File

@@ -0,0 +1 @@
{{template "nets" .config.Nets}}

1
web/html/config-volumes.frag Normal file
View File

@@ -0,0 +1 @@
{{template "volumes" .config.Volumes}}

45
web/html/config.html
View File

@@ -14,6 +14,8 @@
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
@@ -23,29 +25,44 @@
</header>
<main>
<section>
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
<h2 id="name"><a href="index">Instances</a> / {{.config.Name}}</h2>
<form>
<fieldset class="w3-card w3-padding">
<legend>Resources</legend>
<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;"></div>
<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;">
{{if eq .config.Type "VM"}}
{{template "proctype-input" .config.ProctypeSelect}}
{{end}}
{{template "cores-input" .config.Cores}}
{{template "memory-input" .config.Memory}}
{{if eq .config.Type "CT"}}
{{template "swap-input" .config.Swap}}
{{end}}
</div>
</fieldset>
<fieldset class="w3-card w3-padding">
<legend>Disks</legend>
<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
<legend>Volumes</legend>
<div class="input-grid" id="volumes" style="grid-template-columns: auto auto 1fr auto;">
{{template "volumes" .config.Volumes}}
</div>
<div class="w3-container w3-center">
<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>
<button type="button" id="cd-add" class="w3-button none" aria-label="Add New CD">
{{if eq .config.Type "VM"}}
<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>
{{end}}
</div>
</fieldset>
<fieldset class="w3-card w3-padding">
<legend>Network Interfaces</legend>
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;">
{{template "nets" .config.Nets}}
</div>
<div class="w3-container w3-center">
<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
<span class="large" style="margin: 0;">Add Network</span>
@@ -53,9 +70,12 @@
</button>
</div>
</fieldset>
<fieldset class="w3-card w3-padding none" id="devices-card">
{{if eq .config.Type "VM"}}
<fieldset class="w3-card w3-padding">
<legend>PCIe Devices</legend>
<div class="input-grid" id="devices" style="grid-template-columns: auto auto 1fr auto;"></div>
<div class="input-grid" id="devices" style="grid-template-columns: auto auto 1fr auto;">
{{template "devices" .config.Devices}}
</div>
<div class="w3-container w3-center">
<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
<span class="large" style="margin: 0;">Add Device</span>
@@ -63,12 +83,13 @@
</button>
</div>
</fieldset>
<fieldset class="w3-card w3-padding none" id="boot-card">
<fieldset class="w3-card w3-padding">
<legend>Boot Order</legend>
<draggable-container id="enabled"></draggable-container>
<hr style="padding: 0; margin: 0;">
<draggable-container id="disabled"></draggable-container>
<div id="boot-order">
{{template "boot" .config.Boot}}
</div>
</fieldset>
{{end}}
<div class="w3-container w3-center" id="form-actions">
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
</div>

1
web/images/actions/device/delete-active.svg Symbolic link
View File

@@ -0,0 +1 @@
../../common/delete-active.svg

1
web/images/actions/device/delete-inactive.svg Symbolic link
View File

@@ -0,0 +1 @@
../../common/delete-inactive.svg

1
web/images/actions/group/add.svg
View File

@@ -1 +0,0 @@
../../common/add.svg

1
web/images/actions/group/config.svg
View File

@@ -1 +0,0 @@
../../common/config.svg

1
web/images/actions/network/delete-active.svg Symbolic link
View File

@@ -0,0 +1 @@
../../common/delete-active.svg

1
web/images/actions/network/delete-inactive.svg Symbolic link
View File

@@ -0,0 +1 @@
../../common/delete-inactive.svg

1
web/images/actions/user/add.svg
View File

@@ -1 +0,0 @@
../../common/add.svg

1
web/images/actions/user/config.svg
View File

@@ -1 +0,0 @@
../../common/config.svg

993
web/scripts/config.js
View File

File diff suppressed because it is too large Load Diff

80
web/scripts/draggable.js
View File

@@ -1,28 +1,16 @@
const blank = document.createElement("img");
class DraggableContainer extends HTMLElement {
shadowRoot = null;
constructor () {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
draggable-item.ghost::part(wrapper) {
border: 1px dashed var(--main-text-color);
border-radius: 5px;
margin: -1px;
}
draggable-item::part(wrapper) {
cursor: grab;
}
</style>
<label id="title"></label>
<div id="wrapper" style="padding-bottom: 1em;"></div>
`;
const internals = this.attachInternals();
this.shadowRoot = internals.shadowRoot;
this.content = this.shadowRoot.querySelector("#wrapper");
this.titleElem = this.shadowRoot.querySelector("#title");
window.Sortable.create(this.content, {
group: "boot",
group: this.dataset.group,
ghostClass: "ghost",
setData: function (dataTransfer, dragEl) {
dataTransfer.setDragImage(blank, 0, 0);
@@ -30,14 +18,6 @@ class DraggableContainer extends HTMLElement {
});
}
get title () {
return this.titleElem.innerText;
}
set title (title) {
this.titleElem.innerText = title;
}
append (newNode) {
this.content.appendChild(newNode, this.bottom);
}
@@ -50,6 +30,10 @@ class DraggableContainer extends HTMLElement {
return this.content.querySelector(query);
}
hasChildNodes (query) {
return this.querySelector(query) !== null;
}
removeChild (node) {
if (node && this.content.contains(node)) {
this.content.removeChild(node);
@@ -65,54 +49,12 @@ class DraggableContainer extends HTMLElement {
get value () {
const value = [];
this.content.childNodes.forEach((element) => {
if (element.value) {
value.push(element.value);
if (element.dataset.value) {
value.push(element.dataset.value);
}
});
return value;
}
}
class DraggableItem extends HTMLElement {
#value = null;
uuid = null;
constructor () {
super();
this.attachShadow({ mode: "open" });
// for whatever reason, only grid layout seems to respect the parent's content bounds
this.shadowRoot.innerHTML = `
<style>
img, svg {
height: 1em;
width: 1em;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<div id="wrapper" part="wrapper"></div>
`;
this.content = this.shadowRoot.querySelector("#wrapper");
}
get innerHTML () {
return this.content.innerHTML;
}
set innerHTML (innerHTML) {
this.content.innerHTML = innerHTML;
}
get value () {
return this.#value;
}
set value (value) {
this.#value = value;
}
}
customElements.define("draggable-container", DraggableContainer);
customElements.define("draggable-item", DraggableItem);

0
web/templates/base.tmpl → web/templates/base.go.tmpl
View File

304
web/templates/config.go.tmpl Normal file
View File

@@ -0,0 +1,304 @@
{{define "proctype-input"}}
<svg aria-label="CPU Type"><use href="images/resources/cpu.svg#symb"></svg>
<label for="proctype">CPU Type</label>
{{template "select" .}}
<div></div>
{{end}}
{{define "cores-input"}}
<svg aria-label="CPU Amount"><use href="images/resources/cpu.svg#symb"></svg>
<label for="cores">CPU Amount</label>
<input id="cores" name="cores" class="w3-input w3-border" type="number" required value="{{.}}">
<p>Cores</p>
{{end}}
{{define "memory-input"}}
<svg aria-label="Memory Amount"><use href="images/resources/ram.svg#symb"></svg>
<label for="ram">Memory</label>
<input id="ram" name="ram" class="w3-input w3-border" type="number" required value="{{.}}">
<p>MiB</p>
{{end}}
{{define "swap-input"}}
<svg aria-label="Swap Amount"><use href="images/resources/swap.svg#symb"></svg>
<label for="swap">Swap</label>
<input id="swap" name="swap" class="w3-input w3-border" type="number" required value="{{.}}">
<p>MiB</p>
{{end}}
{{define "volumes"}}
{{range $k,$v := .}}
{{if eq $v.Type "rootfs"}}
{{ template "volume-rootfs" Map "Name" $k "Volume" $v}}
{{else if eq $v.Type "mp"}}
{{ template "volume-mp" Map "Name" $k "Volume" $v}}
{{else if eq $v.Type "ide"}}
{{ template "volume-ide" Map "Name" $k "Volume" $v}}
{{else if or (eq $v.Type "scsi") (eq $v.Type "sata")}}
{{ template "volume-scsi" Map "Name" $k "Volume" $v}}
{{else if eq $v.Type "unused"}}
{{ template "volume-unused" Map "Name" $k "Volume" $v}}
{{else}}
{{end}}
{{end}}
{{end}}
{{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>
<p>{{.Name}}</p>
<p>{{.Volume.File}}</p>
<div>
{{template "volume-action-move" .}}
{{template "volume-action-resize" .}}
{{template "volume-action-none" .}}
{{template "volume-action-none" .}}
</div>
{{end}}
{{define "volume-mp"}}
<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>{{.Volume.File}}</p>
<div>
{{template "volume-action-move" .}}
{{template "volume-action-resize" .}}
{{template "volume-action-detach" .}}
{{template "volume-action-delete-inactive" .}}
</div>
{{end}}
{{define "volume-ide"}}
<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>{{.Volume.File}}</p>
<div>
{{template "volume-action-none" .}}
{{template "volume-action-none" .}}
{{template "volume-action-none" .}}
{{template "volume-action-delete" .}}
</div>
{{end}}
{{define "volume-scsi"}}
<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>{{.Volume.File}}</p>
<div>
{{template "volume-action-move" .}}
{{template "volume-action-resize" .}}
{{template "volume-action-detach" .}}
{{template "volume-action-delete-inactive" .}}
</div>
{{end}}
{{define "volume-unused"}}
<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>{{.Volume.File}}</p>
<div>
{{template "volume-action-move-inactive" .}}
{{template "volume-action-resize-inactive" .}}
{{template "volume-action-attach" .}}
{{template "volume-action-delete" .}}
</div>
{{end}}
{{define "volume-action-move"}}
<volume-action data-type="move" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Move {{.Name}}"><use href="images/actions/disk/move-active.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-move-inactive"}}
<volume-action data-type="none" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg aria-label=""><use href="images/actions/disk/move-inactive.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-resize"}}
<volume-action data-type="resize" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Resize {{.Name}}"><use href="images/actions/disk/resize-active.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-resize-inactive"}}
<volume-action data-type="none" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg aria-label=""><use href="images/actions/disk/resize-inactive.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-delete"}}
<volume-action data-type="delete" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Delete {{.Name}}"><use href="images/actions/disk/delete-active.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-delete-inactive"}}
<volume-action data-type="none" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg aria-label=""><use href="images/actions/disk/delete-inactive.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-attach"}}
<volume-action data-type="attach" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Attach {{.Name}}"><use href="images/actions/disk/attach.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-detach"}}
<volume-action data-type="detach" data-volume="{{.Name}}">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg class="clickable" aria-label="Detach {{.Name}}"><use href="images/actions/disk/detach.svg#symb"></svg>
</template>
</volume-action>
{{end}}
{{define "volume-action-none"}}
<volume-action data-type="none">
<template shadowrootmode="open">
<link rel="stylesheet" href="css/style.css">
<svg aria-label=""></svg>
</template>
</volume-action>
{{end}}
{{define "nets"}}
{{range $k,$v := .}}
{{template "net" $v}}
{{end}}
{{end}}
{{define "net"}}
<svg data-network="{{.Net_ID}}" aria-label="Net {{.Net_ID}}"><use href="images/resources/network.svg#symb"></svg>
<p>{{.Net_ID}}</p>
<p>{{.Value}}</p>
<div>
<network-action data-type="config" data-network="{{.Net_ID}}" data-value="{{.Value}}">
<template shadowrootmode="open">
<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>
</template>
</network-action>
<network-action data-type="delete" data-network="{{.Net_ID}}" data-value="{{.Value}}">
<template shadowrootmode="open">
<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>
</template>
</network-action>
</div>
{{end}}
{{define "devices"}}
{{range $k,$v := .}}
{{template "device" $v}}
{{end}}
{{end}}
{{define "device"}}
<svg data-device="{{.Device_ID}}" aria-label="Device {{.Device_ID}}"><use href="images/resources/device.svg#symb"></svg>
<p>{{.Device_ID}}</p>
<p>{{.Device_Name}}</p>
<div>
<device-action data-type="config" data-device="{{.Device_ID}}" data-value="{{.Value}}">
<template shadowrootmode="open">
<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>
</template>
</device-action>
<device-action data-type="delete" data-device="{{.Device_ID}}" data-value="{{.Value}}">
<template shadowrootmode="open">
<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>
</template>
</device-action>
</div>
{{end}}
{{define "boot"}}
<draggable-container id="enabled" data-group="boot">
<template shadowrootmode="open">
{{template "boot-style"}}
<label>Enabled</label>
<div id="wrapper" style="padding-bottom: 1em;">
{{range .Enabled}}
{{template "boot-target" .}}
{{end}}
</div>
</template>
</draggable-container>
<hr style="padding: 0; margin: 0;">
<draggable-container id="disabled" data-group="boot">
<template shadowrootmode="open">
{{template "boot-style"}}
<label>Disabled</label>
<div id="wrapper" style="padding-bottom: 1em;">
{{range .Disabled}}
{{template "boot-target" .}}
{{end}}
</div>
</template>
</draggable-container>
{{end}}
{{define "boot-style"}}
<style>
div.draggable-item.ghost {
border: 1px dashed var(--main-text-color);
border-radius: 5px;
margin: -1px;
}
div.draggable-item {
cursor: grab;
}
div.draggable-item svg {
height: 1em;
width: 1em;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
{{end}}
{{define "boot-target"}}
{{if .volume_id}}
<div class="draggable-item" data-value="{{.volume_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
<svg aria-label="Volume"><use href="images/resources/drive.svg#symb"></use></svg>
<p style="margin: 0px;">{{.volume_id}}</p>
<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.file}}</p>
</div>
{{else if .net_id}}
<div class="draggable-item" data-value="{{.net_id}}" style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
<svg aria-label="Drag"><use href="images/actions/drag.svg#symb"></use></svg>
<svg aria-label="Net"><use href="images/resources/network.svg#symb"></use></svg>
<p style="margin: 0px;">{{.net_id}}</p>
<p style="margin: 0px; overflow: hidden; white-space: nowrap;">{{.value}}</p>
</div>
{{else}}
{{end}}
{{end}}

0
web/templates/instance-card.tmpl → web/templates/instance-card.go.tmpl
View File

0
web/templates/resource-chart.tmpl → web/templates/resource-chart.go.tmpl
View File

0
web/templates/select.tmpl → web/templates/select.go.tmpl
View File

15
web/templates/svg.tmpl
View File

@@ -1,15 +0,0 @@
{{define "svg"}}
{{if .ID}}
{{if .Clickable}}
<svg id={{.ID}} aria-label="{{.Alt}}" class="clickable"><use href="{{.Src}}#symb"></svg>
{{else}}
<svg id={{.ID}} aria-label="{{.Alt}}"><use href="{{.Src}}#symb"></svg>
{{end}}
{{else}}
{{if .Clickable}}
<svg aria-label="{{.Alt}}" class="clickable"><use href="{{.Src}}#symb"></svg>
{{else}}
<svg aria-label="{{.Alt}}"><use href="{{.Src}}#symb"></svg>
{{end}}
{{end}}
{{end}}