From ceba4eb0c66639165c2bedb2b825712dc2393fdb Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 15 Jan 2026 18:18:51 +0100
Subject: [PATCH] Review dashboards, add twosided progress to indernal dash

---
 web/frontend/src/DashPublic.root.svelte     | 12 ++---
 web/frontend/src/status/DashInternal.svelte | 54 ++++++++++-----------
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/web/frontend/src/DashPublic.root.svelte b/web/frontend/src/DashPublic.root.svelte
index fbbf486d..0c66d867 100644
--- a/web/frontend/src/DashPublic.root.svelte
+++ b/web/frontend/src/DashPublic.root.svelte
@@ -493,9 +493,9 @@
                   Active Cores
                 </Col>
                 <Col xs={8}>
-                  <Progress multi style="height:2.5rem;font-size:x-large;">
-                    <Progress bar color="success" value={clusterInfo?.allocatedCores}>{formatNumber(clusterInfo?.allocatedCores)}</Progress>
-                    <Progress bar color="light" value={clusterInfo?.idleCores}>{formatNumber(clusterInfo?.idleCores)}</Progress>
+                  <Progress multi max={clusterInfo?.totalCores} style="height:2.5rem;font-size:x-large;">
+                    <Progress bar color="success" value={clusterInfo?.allocatedCores} title={`${clusterInfo?.allocatedCores} active`}>{formatNumber(clusterInfo?.allocatedCores)}</Progress>
+                    <Progress bar color="light" value={clusterInfo?.idleCores} title={`${clusterInfo?.idleCores} idle`}>{formatNumber(clusterInfo?.idleCores)}</Progress>
                   </Progress>
                 </Col>
                 <Col xs={2} style="font-size:large;">
@@ -508,9 +508,9 @@
                     Active GPU
                   </Col>
                   <Col xs={8}>
-                    <Progress multi style="height:2.5rem;font-size:x-large;">
-                      <Progress bar color="success" value={clusterInfo?.allocatedAccs}>{formatNumber(clusterInfo?.allocatedAccs)}</Progress>
-                      <Progress bar color="light" value={clusterInfo?.idleAccs}>{formatNumber(clusterInfo?.idleAccs)}</Progress>
+                    <Progress multi max={clusterInfo?.totalAccs} style="height:2.5rem;font-size:x-large;">
+                      <Progress bar color="success" value={clusterInfo?.allocatedAccs} title={`${clusterInfo?.allocatedAccs} active`}>{formatNumber(clusterInfo?.allocatedAccs)}</Progress>
+                      <Progress bar color="light" value={clusterInfo?.idleAccs} title={`${clusterInfo?.idleAccs} idle`}>{formatNumber(clusterInfo?.idleAccs)}</Progress>
                     </Progress>
                   </Col>
                   <Col xs={2} style="font-size:large;">
diff --git a/web/frontend/src/status/DashInternal.svelte b/web/frontend/src/status/DashInternal.svelte
index 40ef4d91..f7ac1d73 100644
--- a/web/frontend/src/status/DashInternal.svelte
+++ b/web/frontend/src/status/DashInternal.svelte
@@ -277,6 +277,11 @@
         }
       }
 
+      // Get Idle Infos after Sums
+      if (!rawInfos['idleNodes']) rawInfos['idleNodes'] = rawInfos['totalNodes'] - rawInfos['allocatedNodes'];
+      if (!rawInfos['idleCores']) rawInfos['idleCores'] = rawInfos['totalCores'] - rawInfos['allocatedCores'];
+      if (!rawInfos['idleAccs']) rawInfos['idleAccs'] = rawInfos['totalAccs'] - rawInfos['allocatedAccs'];
+
       // Keymetrics (Data on Cluster-Scope)
       let rawFlops = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
         sum + (node.metrics.find((m) => m.name == 'flops_any')?.metric?.series[0]?.statistics?.avg || 0),
@@ -435,50 +440,41 @@
                 </tr>
                 <hr class="my-1"/>
                 <tr class="py-2">
-                  <th scope="col">Allocated Nodes</th>
+                  <td>{formatNumber(clusterInfo?.allocatedNodes)} Active Nodes</td>
                   <td style="min-width: 100px;"
                     ><div class="col">
-                      <Progress
-                        value={clusterInfo?.allocatedNodes}
-                        max={clusterInfo?.totalNodes}
-                      />
+                      <Progress multi max={clusterInfo?.totalNodes} style="cursor: help;height:1.5rem;" title={`${formatNumber(clusterInfo?.totalNodes)} Total Nodes`}>
+                        <Progress bar color="success" value={clusterInfo?.allocatedNodes}/>
+                        <Progress bar color="light" value={clusterInfo?.idleNodes}/>
+                      </Progress>
                     </div></td
                   >
-                  <td
-                    >{clusterInfo?.allocatedNodes} / {clusterInfo?.totalNodes}
-                    Nodes</td
-                  >
+                  <td>{formatNumber(clusterInfo?.idleNodes)} Idle Nodes</td>
                 </tr>
                 <tr class="py-2">
-                  <th scope="col">Allocated Cores</th>
+                  <td>{formatNumber(clusterInfo?.allocatedCores)} Active Cores</td>
                   <td style="min-width: 100px;"
                     ><div class="col">
-                      <Progress
-                        value={clusterInfo?.allocatedCores}
-                        max={clusterInfo?.totalCores}
-                      />
+                      <Progress multi max={clusterInfo?.totalCores} style="cursor: help;height:1.5rem;" title={`${formatNumber(clusterInfo?.totalCores)} Total Cores`}>
+                        <Progress bar color="success" value={clusterInfo?.allocatedCores}/>
+                        <Progress bar color="light" value={clusterInfo?.idleCores}/>
+                      </Progress>
                     </div></td
                   >
-                  <td
-                    >{formatNumber(clusterInfo?.allocatedCores)} / {formatNumber(clusterInfo?.totalCores)}
-                    Cores</td
-                  >
+                  <td>{formatNumber(clusterInfo?.idleCores)} Idle Cores</td>
                 </tr>
                 {#if clusterInfo?.totalAccs !== 0}
                   <tr class="py-2">
-                    <th scope="col">Allocated Accelerators</th>
+                    <td>{formatNumber(clusterInfo?.allocatedAccs)} Active Accelerators</td>
                     <td style="min-width: 100px;"
                       ><div class="col">
-                        <Progress
-                          value={clusterInfo?.allocatedAccs}
-                          max={clusterInfo?.totalAccs}
-                        />
+                        <Progress multi max={clusterInfo?.totalAccs} style="cursor: help;height:1.5rem;" title={`${formatNumber(clusterInfo?.totalAccs)} Total Accelerators`}>
+                          <Progress bar color="success" value={clusterInfo?.allocatedAccs}/>
+                          <Progress bar color="light" value={clusterInfo?.idleAccs}/>
+                        </Progress>
                       </div></td
                     >
-                    <td
-                      >{clusterInfo?.allocatedAccs} / {clusterInfo?.totalAccs}
-                      Accelerators</td
-                    >
+                    <td>{formatNumber(clusterInfo?.idleAccs)} Idle Accelerators</td>
                   </tr>
                 {/if}
               </Table>
@@ -487,7 +483,7 @@
         </Col>
 
         <Col> <!-- Pie Jobs -->
-          {#if topJobsQuery?.data?.jobsStatistics?.length > 0}
+          {#if $topJobsQuery?.data?.jobsStatistics?.length > 0}
             <Row cols={{xs:1, md:2}}>
               <Col class="p-2">
                 <div bind:clientWidth={colWidthJobs}>
@@ -529,7 +525,7 @@
             </Row>
           {:else}
             <Card body color="warning" class="mx-4 my-2"
-              >Cannot render job status: No state data returned for <code>Pie Chart</code></Card
+              >Cannot render jobs by project: No data returned</Card
             >
           {/if}
         </Col>