ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-02-12 05:51:45 +01:00
Code Issues Packages Releases Activity

Review dashboards, add twosided progress to indernal dash

Browse Source
This commit is contained in:
Christoph Kluge
2026-01-15 18:18:51 +01:00
parent faacf3f343
commit ceba4eb0c6
2 changed files with 31 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/frontend/src/status/DashInternal.svelte
View File

@@ -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>