implement SSR for instance config page

This commit is contained in:
2025-04-22 17:09:27 +00:00
parent 099f9c4e42
commit 8530b50f9a
25 changed files with 1062 additions and 739 deletions

View File

@@ -35,6 +35,9 @@ func Run() {
router.GET("/index/instances", routes.HandleGETInstancesFragment)
router.GET("/config/volumes", routes.HandleGETConfigVolumesFragment)
router.GET("/config/nets", routes.HandleGETConfigNetsFragment)
router.GET("/config/devices", routes.HandleGETConfigDevicesFragment)
router.GET("/config/boot", routes.HandleGETConfigBootFragment)
log.Fatal(router.Run(fmt.Sprintf("0.0.0.0:%d", common.Global.Port)))
}

View File

@@ -6,6 +6,7 @@ import (
"github.com/tdewolff/minify"
"github.com/tdewolff/minify/css"
"github.com/tdewolff/minify/html"
"github.com/tdewolff/minify/js"
)
type MimeType struct {
@@ -36,7 +37,7 @@ var MimeTypes = map[string]MimeType{
},
"js": {
Type: "application/javascript",
Minifier: nil,
Minifier: js.Minify,
},
"wasm": {
Type: "application/wasm",

View File

@@ -4,6 +4,7 @@ import (
"bufio"
"embed"
"encoding/json"
"errors"
"fmt"
"html/template"
"io"
@@ -101,6 +102,20 @@ func LoadHTMLToGin(engine *gin.Engine, html map[string]StaticFile) *template.Tem
}
return s
},
"Map": func(values ...any) (map[string]any, error) {
if len(values)%2 != 0 {
return nil, errors.New("invalid dict call")
}
dict := make(map[string]interface{}, len(values)/2)
for i := 0; i < len(values); i += 2 {
key, ok := values[i].(string)
if !ok {
return nil, errors.New("dict keys must be strings")
}
dict[key] = values[i+1]
}
return dict, nil
},
}
tmpl := template.Must(root, LoadAndAddToRoot(engine.FuncMap, root, html))
engine.SetHTMLTemplate(tmpl)

View File

@@ -1,20 +1,347 @@
package routes
import (
"fmt"
"net/http"
"proxmoxaas-dashboard/app/common"
"slices"
"sort"
fabric "proxmoxaas-fabric/app"
"github.com/gin-gonic/gin"
"github.com/go-viper/mapstructure/v2"
)
type VMPath struct {
Node string
Type string
VMID string
}
// imported types from fabric
type InstanceConfig struct {
Type fabric.InstanceType `json:"type"`
Name string `json:"name"`
Proctype string `json:"cpu"`
Cores uint64 `json:"cores"`
Memory uint64 `json:"memory"`
Swap uint64 `json:"swap"`
Volumes map[string]*fabric.Volume `json:"volumes"`
Nets map[string]*fabric.Net `json:"nets"`
Devices map[string]*fabric.Device `json:"devices"`
Boot fabric.BootOrder `json:"boot"`
// overrides
ProctypeSelect common.Select
}
func HandleGETConfig(c *gin.Context) {
_, err := common.GetAuth(c)
auth, err := common.GetAuth(c)
if err == nil {
req_node := c.Query("node")
req_type := c.Query("type")
req_vmid := c.Query("vmid")
if req_node == "" || req_type == "" || req_vmid == "" {
common.HandleNonFatalError(c, fmt.Errorf("request missing required values: (node: %s, type: %s, vmid: %s)", req_node, req_type, req_vmid))
}
vm_path := VMPath{
Node: req_node,
Type: req_type,
VMID: req_vmid,
}
config, err := GetInstanceConfig(vm_path, auth)
if err != nil {
common.HandleNonFatalError(c, fmt.Errorf("error encountered getting instance config: %s", err.Error()))
}
config.ProctypeSelect = common.Select{}
if config.Type == "VM" { // if VM, fetch CPU types from node
config.ProctypeSelect, err = GetCPUTypes(vm_path, auth)
if err != nil {
common.HandleNonFatalError(c, fmt.Errorf("error encountered getting proctypes: %s", err.Error()))
}
}
for i, cpu := range config.ProctypeSelect.Options {
if cpu.Value == config.Proctype {
config.ProctypeSelect.Options[i].Selected = true
}
}
c.HTML(http.StatusOK, "html/config.html", gin.H{
"global": common.Global,
"page": "config",
"config": config,
})
} else {
c.Redirect(http.StatusFound, "/login.html")
c.Redirect(http.StatusFound, "/login")
}
}
func HandleGETConfigVolumesFragment(c *gin.Context) {
auth, err := common.GetAuth(c)
if err == nil {
req_node := c.Query("node")
req_type := c.Query("type")
req_vmid := c.Query("vmid")
if req_node == "" || req_type == "" || req_vmid == "" {
common.HandleNonFatalError(c, fmt.Errorf("request missing required values: (node: %s, type: %s, vmid: %s)", req_node, req_type, req_vmid))
}
vm_path := VMPath{
Node: req_node,
Type: req_type,
VMID: req_vmid,
}
config, err := GetInstanceConfig(vm_path, auth)
if err != nil {
common.HandleNonFatalError(c, fmt.Errorf("error encountered getting instance config: %s", err.Error()))
}
c.Header("Content-Type", "text/plain")
common.TMPL.ExecuteTemplate(c.Writer, "html/config-volumes.frag", gin.H{
"config": config,
})
c.Status(http.StatusOK)
} else {
c.Status(http.StatusUnauthorized)
}
}
func HandleGETConfigNetsFragment(c *gin.Context) {
auth, err := common.GetAuth(c)
if err == nil {
req_node := c.Query("node")
req_type := c.Query("type")
req_vmid := c.Query("vmid")
if req_node == "" || req_type == "" || req_vmid == "" {
common.HandleNonFatalError(c, fmt.Errorf("request missing required values: (node: %s, type: %s, vmid: %s)", req_node, req_type, req_vmid))
}
vm_path := VMPath{
Node: req_node,
Type: req_type,
VMID: req_vmid,
}
config, err := GetInstanceConfig(vm_path, auth)
if err != nil {
common.HandleNonFatalError(c, fmt.Errorf("error encountered getting instance config: %s", err.Error()))
}
c.Header("Content-Type", "text/plain")
common.TMPL.ExecuteTemplate(c.Writer, "html/config-nets.frag", gin.H{
"config": config,
})
c.Status(http.StatusOK)
} else {
c.Status(http.StatusUnauthorized)
}
}
func HandleGETConfigDevicesFragment(c *gin.Context) {
auth, err := common.GetAuth(c)
if err == nil {
req_node := c.Query("node")
req_type := c.Query("type")
req_vmid := c.Query("vmid")
if req_node == "" || req_type == "" || req_vmid == "" {
common.HandleNonFatalError(c, fmt.Errorf("request missing required values: (node: %s, type: %s, vmid: %s)", req_node, req_type, req_vmid))
}
vm_path := VMPath{
Node: req_node,
Type: req_type,
VMID: req_vmid,
}
config, err := GetInstanceConfig(vm_path, auth)
if err != nil {
common.HandleNonFatalError(c, fmt.Errorf("error encountered getting instance config: %s", err.Error()))
}
c.Header("Content-Type", "text/plain")
common.TMPL.ExecuteTemplate(c.Writer, "html/config-devices.frag", gin.H{
"config": config,
})
c.Status(http.StatusOK)
} else {
c.Status(http.StatusUnauthorized)
}
}
func HandleGETConfigBootFragment(c *gin.Context) {
auth, err := common.GetAuth(c)
if err == nil {
req_node := c.Query("node")
req_type := c.Query("type")
req_vmid := c.Query("vmid")
if req_node == "" || req_type == "" || req_vmid == "" {
common.HandleNonFatalError(c, fmt.Errorf("request missing required values: (node: %s, type: %s, vmid: %s)", req_node, req_type, req_vmid))
}
vm_path := VMPath{
Node: req_node,
Type: req_type,
VMID: req_vmid,
}
config, err := GetInstanceConfig(vm_path, auth)
if err != nil {
common.HandleNonFatalError(c, fmt.Errorf("error encountered getting instance config: %s", err.Error()))
}
c.Header("Content-Type", "text/plain")
common.TMPL.ExecuteTemplate(c.Writer, "html/config-boot.frag", gin.H{
"config": config,
})
c.Status(http.StatusOK)
} else {
c.Status(http.StatusUnauthorized)
}
}
func GetInstanceConfig(vm VMPath, auth common.Auth) (InstanceConfig, error) {
config := InstanceConfig{}
path := fmt.Sprintf("/cluster/%s/%s/%s", vm.Node, vm.Type, vm.VMID)
ctx := common.RequestContext{
Cookies: map[string]string{
"username": auth.Username,
"PVEAuthCookie": auth.Token,
"CSRFPreventionToken": auth.CSRF,
},
Body: map[string]any{},
}
res, code, err := common.RequestGetAPI(path, ctx)
if err != nil {
return config, err
}
if code != 200 {
return config, fmt.Errorf("request to %s resulted in %+v", path, res)
}
err = mapstructure.Decode(ctx.Body, &config)
if err != nil {
return config, err
}
config.Memory = config.Memory / (1024 * 1024) // memory in MiB
config.Swap = config.Swap / (1024 * 1024) // swap in MiB
return config, nil
}
type GlobalConfig struct {
CPU struct {
Whitelist bool
}
}
type UserConfig struct {
CPU struct {
Global []CPUConfig
Nodes map[string][]CPUConfig
}
}
type CPUConfig struct {
Name string
}
func GetCPUTypes(vm VMPath, auth common.Auth) (common.Select, error) {
cputypes := common.Select{
ID: "proctype",
}
// get global resource config
ctx := common.RequestContext{
Cookies: map[string]string{
"username": auth.Username,
"PVEAuthCookie": auth.Token,
"CSRFPreventionToken": auth.CSRF,
},
Body: map[string]any{},
}
path := "/global/config/resources"
res, code, err := common.RequestGetAPI(path, ctx)
if err != nil {
return cputypes, err
}
if code != 200 {
return cputypes, fmt.Errorf("request to %s resulted in %+v", path, res)
}
global := GlobalConfig{}
err = mapstructure.Decode(ctx.Body["resources"], &global)
if err != nil {
return cputypes, err
}
// get user resource config
ctx.Body = map[string]any{}
path = "/user/config/resources"
res, code, err = common.RequestGetAPI(path, ctx)
if err != nil {
return cputypes, err
}
if code != 200 {
return cputypes, fmt.Errorf("request to %s resulted in %+v", path, res)
}
user := UserConfig{}
err = mapstructure.Decode(ctx.Body, &user)
if err != nil {
return cputypes, err
}
// use node specific rules if present, otherwise use global rules
var userCPU []CPUConfig
if _, ok := user.CPU.Nodes[vm.Node]; ok {
userCPU = user.CPU.Nodes[vm.Node]
} else {
userCPU = user.CPU.Global
}
if global.CPU.Whitelist { // cpu is a whitelist
for _, cpu := range userCPU { // for each cpu type in user config add it to the options
cputypes.Options = append(cputypes.Options, common.Option{
Display: cpu.Name,
Value: cpu.Name,
})
}
} else { // cpu is a blacklist
// get the supported cpu types from the node
ctx.Body = map[string]any{}
path = fmt.Sprintf("/proxmox/nodes/%s/capabilities/qemu/cpu", vm.Node)
res, code, err = common.RequestGetAPI(path, ctx)
if err != nil {
return cputypes, err
}
if code != 200 {
return cputypes, fmt.Errorf("request to %s resulted in %+v", path, res)
}
supported := struct {
data []CPUConfig
}{}
err = mapstructure.Decode(ctx.Body, supported)
if err != nil {
return cputypes, err
}
// for each node supported cpu type, if it is NOT in the user's config (aka is not blacklisted) then add it to the options
for _, cpu := range supported.data {
contains := slices.ContainsFunc(userCPU, func(c CPUConfig) bool {
return c.Name == cpu.Name
})
if !contains {
cputypes.Options = append(cputypes.Options, common.Option{
Display: cpu.Name,
Value: cpu.Name,
})
}
}
}
// sort the options by lexicographical order
sort.Slice(cputypes.Options, func(i, j int) bool {
return cputypes.Options[i].Display < cputypes.Options[j].Display
})
return cputypes, nil
}

View File

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

View File

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

View File

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

View File

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

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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

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);

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}}

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}}