add categorization to account resources

app/routes/account.go

@@ -18,7 +18,7 @@ type Account struct {
 		Min int
 		Max int
 	}
-	Resources map[string]any
+	Resources map[string]map[string]any
 }
 
 type Constraint struct {
@@ -46,6 +46,7 @@ type NumericResource struct {
 	Global     Constraint
 	Nodes      map[string]Constraint
 	Total      Constraint
+	Category   string
 }
 
 type StorageResource struct {
@@ -60,6 +61,7 @@ type StorageResource struct {
 	Global     Constraint
 	Nodes      map[string]Constraint
 	Total      Constraint
+	Category   string
 }
 
 type ListResource struct {
@@ -69,6 +71,7 @@ type ListResource struct {
 	Global    []Match
 	Nodes     map[string][]Match
 	Total     []Match
+	Category  string
 }
 
 type ResourceChart struct {
@@ -104,11 +107,12 @@ func HandleGETAccount(c *gin.Context) {
 			return
 		}
 
-		for k, v := range account.Resources {
+		for category, resources := range account.Resources {
+			for resource, v := range resources {
 				switch t := v.(type) {
 				case NumericResource:
 					avail, prefix := common.FormatNumber(t.Total.Avail*t.Multiplier, t.Base)
-				account.Resources[k] = ResourceChart{
+					account.Resources[category][resource] = ResourceChart{
 						Type:     t.Type,
 						Display:  t.Display,
 						Name:     t.Name,
@@ -121,7 +125,7 @@ func HandleGETAccount(c *gin.Context) {
 					}
 				case StorageResource:
 					avail, prefix := common.FormatNumber(t.Total.Avail*t.Multiplier, t.Base)
-				account.Resources[k] = ResourceChart{
+					account.Resources[category][resource] = ResourceChart{
 						Type:     t.Type,
 						Display:  t.Display,
 						Name:     t.Name,
@@ -155,7 +159,8 @@ func HandleGETAccount(c *gin.Context) {
 							ColorHex: InterpolateColorHSV(Green, Red, float64(r.Used)/float64(r.Max)).ToHTML(),
 						})
 					}
-				account.Resources[k] = l
+					account.Resources[category][resource] = l
+				}
 			}
 		}
 
@@ -171,7 +176,7 @@ func HandleGETAccount(c *gin.Context) {
 
 func GetUserAccount(auth common.Auth) (Account, error) {
 	account := Account{
-		Resources: map[string]any{},
+		Resources: map[string]map[string]any{},
 	}
 
 	ctx := common.RequestContext{
@@ -225,6 +230,10 @@ func GetUserAccount(auth common.Auth) (Account, error) {
 		m := v.(map[string]any)
 		t := m["type"].(string)
 		r := resources[k].(map[string]any)
+		category := m["category"].(string)
+		if _, ok := account.Resources[category]; !ok {
+			account.Resources[category] = map[string]any{}
+		}
 		if t == "numeric" {
 			n := NumericResource{}
 			n.Type = t
@@ -233,7 +242,7 @@ func GetUserAccount(auth common.Auth) (Account, error) {
 			if err_m != nil || err_r != nil {
 				return account, fmt.Errorf("%s\n%s", err_m.Error(), err_r.Error())
 			}
-			account.Resources[k] = n
+			account.Resources[category][k] = n
 		} else if t == "storage" {
 			n := StorageResource{}
 			n.Type = t
@@ -242,7 +251,7 @@ func GetUserAccount(auth common.Auth) (Account, error) {
 			if err_m != nil || err_r != nil {
 				return account, fmt.Errorf("%s\n%s", err_m.Error(), err_r.Error())
 			}
-			account.Resources[k] = n
+			account.Resources[category][k] = n
 		} else if t == "list" {
 			n := ListResource{}
 			n.Type = t
@@ -251,7 +260,7 @@ func GetUserAccount(auth common.Auth) (Account, error) {
 			if err_m != nil || err_r != nil {
 				return account, fmt.Errorf("%s\n%s", err_m.Error(), err_r.Error())
 			}
-			account.Resources[k] = n
+			account.Resources[category][k] = n
 		}
 	}
 

web/html/account.html

@@ -7,7 +7,7 @@
 		<link rel="modulepreload" href="scripts/dialog.js">
 		<style>
 			@media screen and (width >= 1264px){
-				#resource-container {
+				.resource-container {
 					display: grid;
 					grid-template-columns: repeat(auto-fill, calc(100% / 6));
 					grid-gap: 0;
@@ -15,7 +15,7 @@
 				}
 			}
 			@media screen and (width <= 1264px) and (width >= 680px) {
-				#resource-container {
+				.resource-container {
 					display: grid;
 					grid-template-columns: repeat(auto-fill, 200px);
 					grid-gap: 0;
@@ -23,7 +23,7 @@
 				}
 			}
 			@media screen and (width <= 680px) {
-				#resource-container {
+				.resource-container {
 					display: flex;
 					flex-direction: column;
 					gap: 0;
@@ -54,8 +54,13 @@
 			</section>
 			<section class="w3-card w3-padding">
 				<h3>Cluster Resources</h3>
-				<div id="resource-container">
-					{{range .account.Resources}}
+				<div>
+					{{range $category, $v := .account.Resources}}
+						{{if ne $category ""}}
+							<h4>{{$category}}</h4>
+						{{end}}
+						<div class="resource-container">
+						{{range $v}}
 							{{if .Display}}
 								{{if eq .Type "numeric"}}
 									{{template "resource-chart" .}}
@@ -71,11 +76,13 @@
 							{{end}}
 						{{end}}
 						</div>
+					{{end}}
+				</div>
 			</section>
 		</main>
+	</body>
 
-		<modal-dialog id="change-password-dialog">
-			<template shadowrootmode="open">
+	<template id="change-password-dialog">
 		<link rel="stylesheet" href="modules/w3.css">
 		<link rel="stylesheet" href="css/style.css">
 		<link rel="stylesheet" href="css/form.css">
@@ -97,6 +104,4 @@
 			</div>
 		</dialog>
 	</template>
-		</modal-dialog>
-	</body>
 </html>