implement SSR for instance config page

app/app.go

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

app/common/meta.go

@@ -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",

app/common/utils.go

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

app/routes/config.go

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

web/html/config-boot.frag

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

web/html/config-devices.frag

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

web/html/config-nets.frag

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

web/html/config-volumes.frag

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

web/html/config.html

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

web/images/actions/device/delete-active.svg

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

web/images/actions/device/delete-inactive.svg

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

web/images/actions/group/add.svg

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

web/images/actions/group/config.svg

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

web/images/actions/network/delete-active.svg

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

web/images/actions/network/delete-inactive.svg

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

web/images/actions/user/add.svg

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

web/images/actions/user/config.svg

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

web/scripts/draggable.js

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

web/templates/config.go.tmpl

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

web/templates/svg.tmpl

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