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

review internal dash info card layout

Browse Source
This commit is contained in:
Christoph Kluge
2026-01-23 15:14:54 +01:00
parent ea6b9d910b
commit 25c5457ef3
1 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -402,17 +402,17 @@
<span>{[...clusterInfo?.processorTypes].join(', ')}</span>
</CardHeader>
<CardBody>
<Table borderless>
<Table borderless class="mb-0">
<tr class="py-2">
<td style="font-size:x-large;">{clusterInfo?.runningJobs} Running Jobs</td>
<td colspan="2" style="font-size:x-large;">{clusterInfo?.activeUsers} Active Users</td>
<td style="font-size:x-large;">{clusterInfo?.activeUsers} Active Users</td>
</tr>
<hr class="my-1"/>
<tr class="pt-2">
<td style="font-size: large;">
Flop Rate (<span style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]">Any</span>)
</td>
<td colspan="2" style="font-size: large;">
<td style="font-size: large;">
Memory BW Rate
</td>
</tr>
@@ -421,49 +421,52 @@
{clusterInfo?.flopRate}
{clusterInfo?.flopRateUnit}
</td>
<td colspan="2" style="font-size:x-large;">
<td style="font-size:x-large;">
{clusterInfo?.memBwRate}
{clusterInfo?.memBwRateUnit}
</td>
</tr>
<hr class="my-1"/>
<tr class="py-2">
<tr class="pt-2">
<td>{formatNumber(clusterInfo?.allocatedNodes)} Active Nodes</td>
<td style="min-width: 100px;"
><div class="col">
<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>{formatNumber(clusterInfo?.idleNodes)} Idle Nodes</td>
</tr>
<tr class="py-2">
<tr class="pb-2">
<td colspan="2"> <Col class="p-0">
<Progress
color="success" style="cursor:help; height:1rem;"
value={clusterInfo?.allocatedNodes} max={clusterInfo?.totalNodes}
title={`${formatNumber(clusterInfo?.totalNodes)} Total Nodes`}
/>
</Col> </td>
</tr>
<tr class="pt-2">
<td>{formatNumber(clusterInfo?.allocatedCores)} Active Cores</td>
<td style="min-width: 100px;"
><div class="col">
<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?.idleCores)} Idle Cores</td>
</tr>
<tr class="pb-2">
<td colspan="2"> <Col class="p-0">
<Progress
color="success" style="cursor:help; height:1rem;"
value={clusterInfo?.allocatedCores} max={clusterInfo?.totalCores}
title={`${formatNumber(clusterInfo?.totalCores)} Total Cores`}
/>
</Col> </td>
</tr>
{#if clusterInfo?.totalAccs !== 0}
<tr class="py-2">
<tr class="pt-2">
<td>{formatNumber(clusterInfo?.allocatedAccs)} Active Accelerators</td>
<td style="min-width: 100px;"
><div class="col">
<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>{formatNumber(clusterInfo?.idleAccs)} Idle Accelerators</td>
</tr>
<tr class="pb-2">
<td colspan="2"> <Col class="p-0">
<Progress
color="success" style="cursor:help; height:1rem;"
value={clusterInfo?.allocatedAccs} max={clusterInfo?.totalAccs}
title={`${formatNumber(clusterInfo?.totalAccs)} Total Accelerators`}
/>
</Col> </td >
</tr>
{/if}
</Table>
</CardBody>