move instance card icon logic to template

app/common/meta.go

@@ -47,115 +47,3 @@ var MimeTypes = map[string]MimeType{
 		Minifier: nil,
 	},
 }
-
-type Icon struct {
-	ID        string
-	Src       string
-	Alt       string
-	Clickable bool
-}
-
-var Icons = map[string]map[string]Icon{
-	"running": {
-		"status": {
-			Src:       "images/status/active.svg",
-			Alt:       "Instance is running",
-			Clickable: false,
-		},
-		"power": {
-			Src:       "images/actions/instance/stop.svg",
-			Alt:       "Shutdown Instance",
-			Clickable: true,
-		},
-		"config": {
-			Src:       "images/actions/instance/config-inactive.svg",
-			Alt:       "Change Configuration (Inactive)",
-			Clickable: false,
-		},
-		"console": {
-			Src:       "images/actions/instance/console-active.svg",
-			Alt:       "Open Console",
-			Clickable: true,
-		},
-		"delete": {
-			Src:       "images/actions/delete-inactive.svg",
-			Alt:       "Delete Instance (Inactive)",
-			Clickable: false,
-		},
-	},
-	"stopped": {
-		"status": {
-			Src:       "images/status/inactive.svg",
-			Alt:       "Instance is stopped",
-			Clickable: false,
-		},
-		"power": {
-			Src:       "images/actions/instance/start.svg",
-			Alt:       "Start Instance",
-			Clickable: true,
-		},
-		"config": {
-			Src:       "images/actions/instance/config-active.svg",
-			Alt:       "Change Configuration",
-			Clickable: true,
-		},
-		"console": {
-			Src:       "images/actions/instance/console-inactive.svg",
-			Alt:       "Open Console (Inactive)",
-			Clickable: false,
-		},
-		"delete": {
-			Src:       "images/actions/delete-active.svg",
-			Alt:       "Delete Instance",
-			Clickable: true,
-		},
-	},
-	"loading": {
-		"status": {
-			Src:       "images/status/loading.svg",
-			Alt:       "Instance is loading",
-			Clickable: false,
-		},
-		"power": {
-			Src:       "images/status/loading.svg",
-			Alt:       "Loading Instance",
-			Clickable: false,
-		},
-		"config": {
-			Src:       "images/actions/instance/config-inactive.svg",
-			Alt:       "Change Configuration (Inactive)",
-			Clickable: false,
-		},
-		"console": {
-			Src:       "images/actions/instance/console-inactive.svg",
-			Alt:       "Open Console (Inactive)",
-			Clickable: false,
-		},
-		"delete": {
-			Src:       "images/actions/delete-inactive.svg",
-			Alt:       "Delete Instance (Inactive)",
-			Clickable: false,
-		},
-	},
-	"online": {
-		"status": {
-			Src:       "images/status/active.svg",
-			Alt:       "Node is online",
-			Clickable: false,
-		},
-	},
-	"offline": {
-		"status": {
-			Src:       "images/status/inactive.svg",
-			Alt:       "Node is offline",
-			Clickable: false,
-		},
-	},
-	"unknown": {
-		"status": {
-			Src:       "images/status/inactive.svg",
-			Alt:       "Node is offline",
-			Clickable: false,
-		},
-	},
-}

app/common/types.go

@@ -38,3 +38,10 @@ type Auth struct {
 	Token    string
 	CSRF     string
 }
+
+type Icon struct {
+	ID        string
+	Src       string
+	Alt       string
+	Clickable bool
+}

app/routes/index.go

@@ -16,22 +16,16 @@ type Node struct {
 }
 
 // used in constructing instance cards in index
-type Instance struct {
+type InstanceCard struct {
-	VMID             uint
+	VMID       uint
-	Name             string
+	Name       string
-	Type             string
+	Type       string
-	Status           string
+	Status     string
-	Node             string
+	Node       string
-	StatusIcon       common.Icon
+	NodeStatus string
-	NodeStatus       string
-	NodeStatusIcon   common.Icon
-	PowerBtnIcon     common.Icon
-	ConsoleBtnIcon   common.Icon
-	ConfigureBtnIcon common.Icon
-	DeleteBtnIcon    common.Icon
 }
 
-func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node, error) {
+func GetClusterResources(auth common.Auth) (map[uint]InstanceCard, map[string]Node, error) {
 	ctx := common.RequestContext{
 		Cookies: map[string]string{
 			"PVEAuthCookie":       auth.Token,
@@ -47,7 +41,7 @@ func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node,
 		return nil, nil, fmt.Errorf("request to /cluster/resources/ resulted in %+v", res)
 	}
 
-	instances := map[uint]Instance{}
+	instances := map[uint]InstanceCard{}
 	nodes := map[string]Node{}
 
 	// if we successfully retrieved the resources, then process it and return index
@@ -61,7 +55,7 @@ func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node,
 			}
 			nodes[node.Node] = node
 		} else if m["type"] == "lxc" || m["type"] == "qemu" {
-			instance := Instance{}
+			instance := InstanceCard{}
 			err := mapstructure.Decode(v, &instance)
 			if err != nil {
 				return nil, nil, err
@@ -70,21 +64,8 @@ func GetClusterResources(auth common.Auth) (map[uint]Instance, map[string]Node,
 		}
 	}
 	for vmid, instance := range instances {
-		status := instance.Status
-		icons := common.Icons[status]
-		instance.StatusIcon = icons["status"]
-		instance.PowerBtnIcon = icons["power"]
-		instance.PowerBtnIcon.ID = "power-btn"
-		instance.ConfigureBtnIcon = icons["config"]
-		instance.ConfigureBtnIcon.ID = "configure-btn"
-		instance.ConsoleBtnIcon = icons["console"]
-		instance.ConsoleBtnIcon.ID = "console-btn"
-		instance.DeleteBtnIcon = icons["delete"]
-		instance.DeleteBtnIcon.ID = "delete-btn"
 		nodestatus := nodes[instance.Node].Status
-		icons = common.Icons[nodestatus]
 		instance.NodeStatus = nodestatus
-		instance.NodeStatusIcon = icons["status"]
 		instances[vmid] = instance
 	}
 	return instances, nodes, nil

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

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

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

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

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

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

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

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

web/templates/instance-card.tmpl

@@ -15,19 +15,46 @@
 			<p class="w3-col l2 m3 s6" id="instance-name">{{.Name}}</p>
 			<p class="w3-col l1 m2 w3-hide-small">{{.Type}}</p>
 			<div class="w3-col l2 m3 s6 flex row nowrap">
-				{{template "svg" .StatusIcon}}
+				{{if eq .Status "running"}}
+					<svg aria-label="instance is running"><use href="images/status/active.svg#symb"></svg>
+				{{else if eq .Status "stopped"}}
+					<svg aria-label="instance is stopped"><use href="images/status/inactive.svg#symb"></svg>
+				{{else if eq .Status "loading"}}
+					<svg aria-label="instance is loading"><use href="images/status/loading.svg#symb"></svg>
+				{{else}}
+				{{end}}
 				<p>{{.Status}}</p>
 			</div>
 			<p class="w3-col l2 w3-hide-medium w3-hide-small">{{.Node}}</p>
 			<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
-				{{template "svg" .NodeStatusIcon}}
+				{{if eq .NodeStatus "online"}}
+					<svg aria-label="node is online"><use href="images/status/active.svg#symb"></svg>
+				{{else if eq .NodeStatus "offline"}}
+					<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
+				{{else if eq .NodeStatus "unknown"}}
+					<svg aria-label="node is offline"><use href="images/status/inactive.svg#symb"></svg>
+				{{else}}
+				{{end}}
 				<p>{{.NodeStatus}}</p>
 			</div>
 			<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh;">
-				{{template "svg" .PowerBtnIcon}}
+				{{if eq .Status "running"}}
-				{{template "svg" .ConsoleBtnIcon}}
+					<svg id="power-btn" class="clickable" aria-label="shutdown instance"><use href="images/actions/instance/stop.svg#symb"></svg>
-				{{template "svg" .ConfigureBtnIcon}}
+					<svg id="configure-btn" aria-label=""><use href="images/actions/instance/config-inactive.svg#symb"></svg>
-				{{template "svg" .DeleteBtnIcon}}
+					<svg id="console-btn" class="clickable" aria-label="open console"><use href="images/actions/instance/console-active.svg#symb"></svg>
+					<svg id="delete-btn" aria-label=""><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
+				{{else if eq .Status "stopped"}}
+					<svg id="power-btn" class="clickable" aria-label="start instance"><use href="images/actions/instance/start.svg#symb"></svg>
+					<svg id="configure-btn" class="clickable" aria-label="change configuration"><use href="images/actions/instance/config-active.svg#symb"></svg>
+					<svg id="console-btn" aria-label=""><use href="images/actions/instance/console-inactive.svg#symb"></svg>
+					<svg id="delete-btn" class="clickable" aria-label="delete instance"><use href="images/actions/instance/delete-active.svg#symb"></svg>
+				{{else if eq .Status "loading"}}
+					<svg id="power-btn" aria-label=""><use href="images/actions/instance/loading.svg#symb"></svg>
+					<svg id="configure-btn" aria-label=""><use href="images/actions/instance/config-inactive.svg#symb"></svg>
+					<svg id="console-btn" aria-label=""><use href="images/actions/instance/console-inactive.svg#symb"></svg>
+					<svg id="delete-btn" aria-label=""><use href="images/actions/instance/delete-inactive.svg#symb"></svg>
+				{{else}}
+				{{end}}
 			</div>
 		</div>
 	</template>

web/templates/svg.tmpl

@@ -1,7 +1,15 @@
 {{define "svg"}}
-	{{if .Clickable}}
+	{{if .ID}}
-		<svg id={{.ID}} alt="{{.Alt}}" class="clickable"><use href="{{.Src}}#symb"></svg>
+		{{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}}
-		<svg id={{.ID}} alt="{{.Alt}}"><use href="{{.Src}}#symb"></svg>
+		{{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}}