adapt frontend to backend config changes, clarify variable names

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}
 

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',

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],

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>

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}

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

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

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>