From 4cb8d648cbb5bd40e40462d6f0d2d4d8fa78178c Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 14 Jan 2026 11:25:40 +0100
Subject: [PATCH] adapt frontend to backend config changes, clarify variable
 names

---
 web/frontend/src/Config.root.svelte           |  6 +--
 web/frontend/src/Header.svelte                | 36 +++++++--------
 web/frontend/src/config.entrypoint.js         |  2 +-
 web/frontend/src/config/AdminSettings.svelte  |  6 +--
 web/frontend/src/config/admin/Options.svelte  | 12 ++---
 .../src/generic/filters/Resources.svelte      | 20 +--------
 web/frontend/src/header.entrypoint.js         |  4 +-
 web/frontend/src/header/NavbarLinks.svelte    | 44 +++++++++----------
 web/templates/base.tmpl                       |  4 +-
 9 files changed, 58 insertions(+), 76 deletions(-)

diff --git a/web/frontend/src/Config.root.svelte b/web/frontend/src/Config.root.svelte
index 171b2a08..0e1daec3 100644
--- a/web/frontend/src/Config.root.svelte
+++ b/web/frontend/src/Config.root.svelte
@@ -7,7 +7,7 @@
   - `isApi Bool!`: Is currently logged in user api authority
   - `username String!`: Empty string if auth. is disabled, otherwise the username as string
   - `ncontent String!`: The currently displayed message on the homescreen
-  - `clusters [String]`: The available clusternames
+  - `clusterNames [String]`: The available clusternames
 -->
 
 <script>
@@ -23,7 +23,7 @@
     isApi,
     username,
     ncontent,
-    clusters
+    clusterNames
   } = $props();
 </script>
 
@@ -32,7 +32,7 @@
     <CardHeader>
       <CardTitle class="mb-1">Admin Options</CardTitle>
     </CardHeader>
-    <AdminSettings {ncontent} {clusters}/>
+    <AdminSettings {ncontent} {clusterNames}/>
   </Card>
 {/if}
 
diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index f7ceac2e..ea818c62 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -4,8 +4,8 @@
   Properties:
   - `username String`: Empty string if auth. is disabled, otherwise the username as string
   - `authlevel Number`: The current users authentication level
-  - `clusters [String]`: List of cluster names
-  - `subClusters [String]`: List of subCluster names
+  - `clusterNames [String]`: List of cluster names
+  - `subclusterMap map[String][]string`: Map of subclusters by cluster names
   - `roles [Number]`: Enum containing available roles
 -->
 
@@ -28,8 +28,8 @@
   let { 
     username,
     authlevel,
-    clusters,
-    subClusters,
+    clusterNames,
+    subclusterMap,
     roles
   } = $props();
 
@@ -152,15 +152,15 @@
     <Nav navbar>
       {#if showMax || showBrg}
         <NavbarLinks
-          {clusters}
-          {subClusters}
+          {clusterNames}
+          {subclusterMap}
           links={views.filter((item) => item.requiredRole <= authlevel)}
         />
 
       {:else if showMid}
         <NavbarLinks
-          {clusters}
-          {subClusters}
+          {clusterNames}
+          {subclusterMap}
           links={views.filter(
             (item) => item.requiredRole <= authlevel && item.menu != "Info",
           )}
@@ -173,8 +173,8 @@
             </DropdownToggle>
             <DropdownMenu class="dropdown-menu-lg-end">
               <NavbarLinks
-                {clusters}
-                {subClusters}
+                {clusterNames}
+                {subclusterMap}
                 direction="right"
                 links={views.filter(
                   (item) =>
@@ -187,8 +187,8 @@
 
       {:else if showSml}
         <NavbarLinks
-          {clusters}
-          {subClusters}
+          {clusterNames}
+          {subclusterMap}
           links={views.filter(
             (item) => item.requiredRole <= authlevel && item.menu == "none",
           )}
@@ -200,8 +200,8 @@
             </DropdownToggle>
             <DropdownMenu class="dropdown-menu-lg-end">
               <NavbarLinks
-                {clusters}
-                {subClusters}
+                {clusterNames}
+                {subclusterMap}
                 direction="right"
                 links={views.filter(
                   (item) => item.requiredRole <= authlevel && item.menu == 'Jobs',
@@ -217,8 +217,8 @@
             </DropdownToggle>
             <DropdownMenu class="dropdown-menu-lg-end">
               <NavbarLinks
-                {clusters}
-                {subClusters}
+                {clustersNames}
+                {subclusterMap}
                 direction="right"
                 links={views.filter(
                   (item) => item.requiredRole <= authlevel && item.menu == 'Groups',
@@ -234,8 +234,8 @@
             </DropdownToggle>
             <DropdownMenu class="dropdown-menu-lg-end">
               <NavbarLinks
-                {clusters}
-                {subClusters}
+                {clusterNames}
+                {subclusterMap}
                 direction="right"
                 links={views.filter(
                   (item) => item.requiredRole <= authlevel && item.menu == 'Info',
diff --git a/web/frontend/src/config.entrypoint.js b/web/frontend/src/config.entrypoint.js
index 5d11eedd..a5878b86 100644
--- a/web/frontend/src/config.entrypoint.js
+++ b/web/frontend/src/config.entrypoint.js
@@ -10,7 +10,7 @@ mount(Config, {
         isApi: isApi,
         username: username,
         ncontent: ncontent,
-        clusters: hClusters.map((c) => c.name) // Defined in Header Template
+        clusterNames: hClusterNames
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig],
diff --git a/web/frontend/src/config/AdminSettings.svelte b/web/frontend/src/config/AdminSettings.svelte
index 79072e30..46958963 100644
--- a/web/frontend/src/config/AdminSettings.svelte
+++ b/web/frontend/src/config/AdminSettings.svelte
@@ -3,7 +3,7 @@
 
   Properties:
   - `ncontent String`: The homepage notice content
-  - `clusters [String]`: The available clusternames
+  - `clusterNames [String]`: The available clusternames
 -->
 
 <script>
@@ -19,7 +19,7 @@
   /* Svelte 5 Props */
   let {
     ncontent,
-    clusters
+    clusterNames
   } = $props();
 
   /* Const Init*/
@@ -68,6 +68,6 @@
   <Col>
     <EditProject reloadUser={() => getUserList()} />
   </Col>
-  <Options config={ccconfig} {clusters}/>
+  <Options config={ccconfig} {clusterNames}/>
   <NoticeEdit {ncontent}/>
 </Row>
diff --git a/web/frontend/src/config/admin/Options.svelte b/web/frontend/src/config/admin/Options.svelte
index d61d2202..ea6809f3 100644
--- a/web/frontend/src/config/admin/Options.svelte
+++ b/web/frontend/src/config/admin/Options.svelte
@@ -2,7 +2,7 @@
   @component Admin option select card
 
     Properties:
-  - `clusters [String]`: The available clusternames
+  - `clusterNames [String]`: The available clusternames
 -->
 
 <script>
@@ -11,7 +11,7 @@
 
   /* Svelte 5 Props */
   let {
-    clusters,
+    clusterNames,
   } = $props();
 
   /*Const Init */
@@ -52,17 +52,17 @@
   </Card>
 </Col>
 
-{#if clusters?.length > 0}
+{#if clusterNames?.length > 0}
   <Col> 
     <Card class="h-100">
       <CardBody>
         <CardTitle class="mb-3">Public Dashboard Links</CardTitle>
         <Row>
-        {#each clusters as cluster}
+        {#each clusterNames as cn}
           <Col>
-            <Button color="info" class="mb-2 mb-xl-0" href={`/monitoring/dashboard/${cluster}`} target="_blank">
+            <Button color="info" class="mb-2 mb-xl-0" href={`/monitoring/dashboard/${cn}`} target="_blank">
               <Icon name="clipboard-pulse" class="mr-2"/>
-              {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Public Dashboard
+              {cn.charAt(0).toUpperCase() + cn.slice(1)} Public Dashboard
             </Button>
           </Col>
         {/each}
diff --git a/web/frontend/src/generic/filters/Resources.svelte b/web/frontend/src/generic/filters/Resources.svelte
index 340998f9..49a28f8c 100644
--- a/web/frontend/src/generic/filters/Resources.svelte
+++ b/web/frontend/src/generic/filters/Resources.svelte
@@ -76,7 +76,7 @@
   /* State Init*/
   // Counts
   let minNumNodes = $state(1);
-  let maxNumNodes = $state(0);
+  let maxNumNodes = $state(128);
   let maxNumHWThreads = $state(0);
   let maxNumAccelerators = $state(0);
   // Pending
@@ -107,24 +107,6 @@
   /* Reactive Effects | Svelte 5 onMount */
   $effect(() => {
     if ($initialized) {
-      // 'hClusters' defined in templates/base.tmpl
-      if (activeCluster != null) {
-        const { filterRanges } = hClusters.find((c) => c.name == activeCluster);
-        minNumNodes = filterRanges.numNodes.from;
-        maxNumNodes = filterRanges.numNodes.to;
-      } else if (clusters.length > 0) {
-        for (let hc of hClusters) {
-          const { filterRanges } = hc;
-          minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from);
-          maxNumNodes = Math.max(maxNumNodes, filterRanges.numNodes.to);
-        };
-      };
-    };
-  });
-  
-  $effect(() => {
-    if ($initialized) {
-      // 'hClusters' defined in templates/base.tmpl
       if (activeCluster != null) {
         const { subClusters } = clusters.find((c) => c.name == activeCluster);
         maxNumAccelerators = findMaxNumAccels([{ subClusters }]);
diff --git a/web/frontend/src/header.entrypoint.js b/web/frontend/src/header.entrypoint.js
index 37fe6f84..5e6e0bf9 100644
--- a/web/frontend/src/header.entrypoint.js
+++ b/web/frontend/src/header.entrypoint.js
@@ -9,8 +9,8 @@ if (headerDomTarget != null) {
         props: {
             username: hUsername, 
             authlevel: hAuthlevel,
-            clusters: hClusters, 
-            subClusters: hSubClusters,
+            clusterNames: hClusterNames, 
+            subclusterMap: hSubclusterMap,
             roles: hRoles,
         },
     });
diff --git a/web/frontend/src/header/NavbarLinks.svelte b/web/frontend/src/header/NavbarLinks.svelte
index 04fec0ea..a607c8a4 100644
--- a/web/frontend/src/header/NavbarLinks.svelte
+++ b/web/frontend/src/header/NavbarLinks.svelte
@@ -2,8 +2,8 @@
   @component Navbar component; renders in app navigation links as received from upstream
 
   Properties:
-  - `clusters [String]`: List of cluster names
-  - `subClusters map[String][]string`: Map of subclusters by cluster names
+  - `clusterNames [String]`: List of cluster names
+  - `subclusterMap map[String][]string`: Map of subclusters by cluster names
   - `links [Object]`: Pre-filtered link objects based on user auth
   - `direction String?`: The direcion of the drop-down menue [default: down]
 -->
@@ -20,8 +20,8 @@
 
   /* Svelte 5 Props */
   let {
-    clusters,
-    subClusters,
+    clusterNames,
+    subclusterMap,
     links,
     direction = "down"
   } = $props();
@@ -36,25 +36,25 @@
           {item.title}
         </DropdownToggle>
         <DropdownMenu class="dropdown-menu-lg-end">
-          {#each clusters as cluster}
+          {#each clusterNames as cn}
             <Dropdown nav direction="right">
               <DropdownToggle nav caret class="dropdown-item py-1 px-2">
-                {cluster.name}
+                {cn}
               </DropdownToggle>
               <DropdownMenu>
                 <DropdownItem class="py-1 px-2"
-                  href={item.href + cluster.name}
+                  href={item.href + cn}
                 >
                   Node Overview
                 </DropdownItem>
                 <DropdownItem class="py-1 px-2"
-                  href={item.href + 'list/' + cluster.name}
+                  href={`${item.href}list/${cn}`}
                 >
                   Node List
                 </DropdownItem>
-                {#each subClusters[cluster.name] as subCluster}
+                {#each subclusterMap[cn] as scn}
                   <DropdownItem class="py-1 px-2"
-                    href={item.href + 'list/' + cluster.name + '/' + subCluster}
+                    href={`${item.href}list/${cn}/${scn}`}
                   >
                   {subCluster} Node List
                   </DropdownItem>
@@ -71,19 +71,19 @@
           {item.title}
         </DropdownToggle>
         <DropdownMenu class="dropdown-menu-lg-end">
-          {#each clusters as cluster}
+          {#each clusterNames as cn}
             <Dropdown nav direction="right">
               <DropdownToggle nav caret class="dropdown-item py-1 px-2">
-                {cluster.name}
+                {cn}
               </DropdownToggle>
               <DropdownMenu>
                 <DropdownItem class="py-1 px-2"
-                  href={item.href + cluster.name}
+                  href={item.href + cn}
                 >
                   Status Dashboard
                 </DropdownItem>
                 <DropdownItem class="py-1 px-2"
-                  href={item.href + 'detail/' + cluster.name}
+                  href={`${item.href}detail/${cn}`}
                 >
                   Status Details
                 </DropdownItem>
@@ -105,19 +105,19 @@
             All Clusters
           </DropdownItem>
           <DropdownItem divider />
-          {#each clusters as cluster}
+          {#each clusterNames as cn}
             <Dropdown nav direction="right">
               <DropdownToggle nav caret class="dropdown-item py-1 px-2">
-                {cluster.name}
+                {cn}
               </DropdownToggle>
               <DropdownMenu>
                 <DropdownItem class="py-1 px-2"
-                  href={item.href + '?cluster=' + cluster.name}
+                  href={`${item.href}?cluster=${cn}`}
                 >
                   All Jobs
                 </DropdownItem>
                 <DropdownItem class="py-1 px-2"
-                  href={item.href + '?cluster=' + cluster.name + '&state=running'}
+                  href={`${item.href}?cluster=${cn}&state=running`}
                 >
                   Running Jobs
                 </DropdownItem>
@@ -138,12 +138,12 @@
         {item.title}
       </DropdownToggle>
       <DropdownMenu class="dropdown-menu-lg-end">
-        {#each clusters as cluster}
+        {#each clusterNames as cn}
           <DropdownItem
-            href={item.href + cluster.name}
-            active={window.location.pathname == item.href + cluster.name}
+            href={item.href + cn}
+            active={window.location.pathname == item.href + cn}
           >
-            {cluster.name}
+            {cn}
           </DropdownItem>
         {/each}
       </DropdownMenu>
diff --git a/web/templates/base.tmpl b/web/templates/base.tmpl
index a1bd4134..fd94668c 100644
--- a/web/templates/base.tmpl
+++ b/web/templates/base.tmpl
@@ -17,8 +17,8 @@
             // Used for header.entrypoint.js mount and filters/Resources.svelte
             const hUsername = {{ .User.Username }};
             const hAuthlevel = {{ .User.GetAuthLevel }};
-            const hClusters = {{ .Clusters }};
-            const hSubClusters = {{ .SubClusters }};
+            const hClusterNames = {{ .Clusters }};
+            const hSubclusterMap = {{ .SubClusters }};
             const hRoles = {{ .Roles }};
         </script>
     </head>