ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-01-16 09:41:47 +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

12
web/frontend/src/DashPublic.root.svelte
View File

@@ -493,9 +493,9 @@
Active Cores Active Cores
</Col> </Col>
<Col xs={8}> <Col xs={8}>
<Progress multi style="height:2.5rem;font-size:x-large;"> <Progress multi max={clusterInfo?.totalCores} style="height:2.5rem;font-size:x-large;">
<Progress bar color="success" value={clusterInfo?.allocatedCores}>{formatNumber(clusterInfo?.allocatedCores)}</Progress> <Progress bar color="success" value={clusterInfo?.allocatedCores} title={`${clusterInfo?.allocatedCores} active`}>{formatNumber(clusterInfo?.allocatedCores)}</Progress>
<Progress bar color="light" value={clusterInfo?.idleCores}>{formatNumber(clusterInfo?.idleCores)}</Progress> <Progress bar color="light" value={clusterInfo?.idleCores} title={`${clusterInfo?.idleCores} idle`}>{formatNumber(clusterInfo?.idleCores)}</Progress>
</Progress> </Progress>
</Col> </Col>
<Col xs={2} style="font-size:large;"> <Col xs={2} style="font-size:large;">
@@ -508,9 +508,9 @@
Active GPU Active GPU
</Col> </Col>
<Col xs={8}> <Col xs={8}>
<Progress multi style="height:2.5rem;font-size:x-large;"> <Progress multi max={clusterInfo?.totalAccs} style="height:2.5rem;font-size:x-large;">
<Progress bar color="success" value={clusterInfo?.allocatedAccs}>{formatNumber(clusterInfo?.allocatedAccs)}</Progress> <Progress bar color="success" value={clusterInfo?.allocatedAccs} title={`${clusterInfo?.allocatedAccs} active`}>{formatNumber(clusterInfo?.allocatedAccs)}</Progress>
<Progress bar color="light" value={clusterInfo?.idleAccs}>{formatNumber(clusterInfo?.idleAccs)}</Progress> <Progress bar color="light" value={clusterInfo?.idleAccs} title={`${clusterInfo?.idleAccs} idle`}>{formatNumber(clusterInfo?.idleAccs)}</Progress>
</Progress> </Progress>
</Col> </Col>
<Col xs={2} style="font-size:large;"> <Col xs={2} style="font-size:large;">

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) // Keymetrics (Data on Cluster-Scope)
let rawFlops = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) => let rawFlops = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
sum + (node.metrics.find((m) => m.name == 'flops_any')?.metric?.series[0]?.statistics?.avg || 0), sum + (node.metrics.find((m) => m.name == 'flops_any')?.metric?.series[0]?.statistics?.avg || 0),
@@ -435,50 +440,41 @@
</tr> </tr>
<hr class="my-1"/> <hr class="my-1"/>
<tr class="py-2"> <tr class="py-2">
<th scope="col">Allocated Nodes</th> <td>{formatNumber(clusterInfo?.allocatedNodes)} Active Nodes</td>
<td style="min-width: 100px;" <td style="min-width: 100px;"
><div class="col"> ><div class="col">
<Progress <Progress multi max={clusterInfo?.totalNodes} style="cursor: help;height:1.5rem;" title={`${formatNumber(clusterInfo?.totalNodes)} Total Nodes`}>
value={clusterInfo?.allocatedNodes} <Progress bar color="success" value={clusterInfo?.allocatedNodes}/>
max={clusterInfo?.totalNodes} <Progress bar color="light" value={clusterInfo?.idleNodes}/>
/> </Progress>
</div></td </div></td
> >
<td <td>{formatNumber(clusterInfo?.idleNodes)} Idle Nodes</td>
>{clusterInfo?.allocatedNodes} / {clusterInfo?.totalNodes}
Nodes</td
>
</tr> </tr>
<tr class="py-2"> <tr class="py-2">
<th scope="col">Allocated Cores</th> <td>{formatNumber(clusterInfo?.allocatedCores)} Active Cores</td>
<td style="min-width: 100px;" <td style="min-width: 100px;"
><div class="col"> ><div class="col">
<Progress <Progress multi max={clusterInfo?.totalCores} style="cursor: help;height:1.5rem;" title={`${formatNumber(clusterInfo?.totalCores)} Total Cores`}>
value={clusterInfo?.allocatedCores} <Progress bar color="success" value={clusterInfo?.allocatedCores}/>
max={clusterInfo?.totalCores} <Progress bar color="light" value={clusterInfo?.idleCores}/>
/> </Progress>
</div></td </div></td
> >
<td <td>{formatNumber(clusterInfo?.idleCores)} Idle Cores</td>
>{formatNumber(clusterInfo?.allocatedCores)} / {formatNumber(clusterInfo?.totalCores)}
Cores</td
>
</tr> </tr>
{#if clusterInfo?.totalAccs !== 0} {#if clusterInfo?.totalAccs !== 0}
<tr class="py-2"> <tr class="py-2">
<th scope="col">Allocated Accelerators</th> <td>{formatNumber(clusterInfo?.allocatedAccs)} Active Accelerators</td>
<td style="min-width: 100px;" <td style="min-width: 100px;"
><div class="col"> ><div class="col">
<Progress <Progress multi max={clusterInfo?.totalAccs} style="cursor: help;height:1.5rem;" title={`${formatNumber(clusterInfo?.totalAccs)} Total Accelerators`}>
value={clusterInfo?.allocatedAccs} <Progress bar color="success" value={clusterInfo?.allocatedAccs}/>
max={clusterInfo?.totalAccs} <Progress bar color="light" value={clusterInfo?.idleAccs}/>
/> </Progress>
</div></td </div></td
> >
<td <td>{formatNumber(clusterInfo?.idleAccs)} Idle Accelerators</td>
>{clusterInfo?.allocatedAccs} / {clusterInfo?.totalAccs}
Accelerators</td
>
</tr> </tr>
{/if} {/if}
</Table> </Table>
@@ -487,7 +483,7 @@
</Col> </Col>
<Col> <!-- Pie Jobs --> <Col> <!-- Pie Jobs -->
{#if topJobsQuery?.data?.jobsStatistics?.length > 0} {#if $topJobsQuery?.data?.jobsStatistics?.length > 0}
<Row cols={{xs:1, md:2}}> <Row cols={{xs:1, md:2}}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidthJobs}> <div bind:clientWidth={colWidthJobs}>
@@ -529,7 +525,7 @@
</Row> </Row>
{:else} {:else}
<Card body color="warning" class="mx-4 my-2" <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} {/if}
</Col> </Col>