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

dynamically scale dashboard sums

Browse Source
This commit is contained in:
Christoph Kluge
2026-01-29 17:01:07 +01:00
parent dd56e75b50
commit 318dbd65e0
4 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@
} from "./generic/utils.js"; } from "./generic/utils.js";
import { import {
formatNumber, formatNumber,
scaleNumber
} from "./generic/units.js"; } from "./generic/units.js";
import { import {
Row, Row,
@@ -222,8 +223,10 @@
else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0; else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
// Units (Set Once) // Units (Set Once)
if (!rawInfos['flopRateUnit']) rawInfos['flopRateUnit'] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base if (!rawInfos['flopRateUnitBase']) rawInfos['flopRateUnitBase'] = subCluster.flopRateSimd.unit.base
if (!rawInfos['memBwRateUnit']) rawInfos['memBwRateUnit'] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base if (!rawInfos['memBwRateUnitBase']) rawInfos['memBwRateUnitBase'] = subCluster.memoryBandwidth.unit.base
if (!rawInfos['flopRateUnitPrefix']) rawInfos['flopRateUnitPrefix'] = subCluster.flopRateSimd.unit.prefix
if (!rawInfos['memBwRateUnitPrefix']) rawInfos['memBwRateUnitPrefix'] = subCluster.memoryBandwidth.unit.prefix
// Get Maxima For Roofline Knee Render // Get Maxima For Roofline Knee Render
if (!rawInfos['roofData']) { if (!rawInfos['roofData']) {
@@ -262,20 +265,20 @@
0, // Initial Value 0, // Initial Value
) || 0; ) || 0;
rawInfos['cpuPwr'] = Math.floor((rawCpuPwr * 100) / 100) rawInfos['cpuPwr'] = Math.floor((rawCpuPwr * 100) / 100)
if (!rawInfos['cpuPwrUnit']) {
let rawCpuUnit = $statusQuery?.data?.nodeMetrics[0]?.metrics.find((m) => m.name == 'cpu_power')?.metric?.unit || null let rawCpuUnit = $statusQuery?.data?.nodeMetrics[0]?.metrics.find((m) => m.name == 'cpu_power')?.metric?.unit || null
rawInfos['cpuPwrUnit'] = rawCpuUnit ? rawCpuUnit.prefix + rawCpuUnit.base : '' if (!rawInfos['cpuPwrUnitBase']) rawInfos['cpuPwrUnitBase'] = rawCpuUnit ? rawCpuUnit.base : ''
} if (!rawInfos['cpuPwrUnitPrefix']) rawInfos['cpuPwrUnitPrefix'] = rawCpuUnit ? rawCpuUnit.prefix : ''
let rawGpuPwr = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) => let rawGpuPwr = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) =>
sum + (node.metrics.find((m) => m.name == 'acc_power')?.metric?.series[0]?.statistics?.avg || 0), sum + (node.metrics.find((m) => m.name == 'acc_power')?.metric?.series[0]?.statistics?.avg || 0),
0, // Initial Value 0, // Initial Value
) || 0; ) || 0;
rawInfos['gpuPwr'] = Math.floor((rawGpuPwr * 100) / 100) rawInfos['gpuPwr'] = Math.floor((rawGpuPwr * 100) / 100)
if (!rawInfos['gpuPwrUnit']) {
let rawGpuUnit = $statusQuery?.data?.nodeMetrics[0]?.metrics.find((m) => m.name == 'acc_power')?.metric?.unit || null let rawGpuUnit = $statusQuery?.data?.nodeMetrics[0]?.metrics.find((m) => m.name == 'acc_power')?.metric?.unit || null
rawInfos['gpuPwrUnit'] = rawGpuUnit ? rawGpuUnit.prefix + rawGpuUnit.base : '' if (!rawInfos['gpuPwrUnitBase']) rawInfos['gpuPwrUnitBase'] = rawGpuUnit ? rawGpuUnit.base : ''
} if (!rawInfos['gpuPwrUnitPrefix']) rawInfos['gpuPwrUnitPrefix'] = rawGpuUnit ? rawGpuUnit.prefix : ''
} }
return rawInfos; return rawInfos;
}); });
@@ -443,7 +446,7 @@
<Row class="mt-1 mb-2"> <Row class="mt-1 mb-2">
<Col xs={4} class="d-inline-flex align-items-center justify-content-center"> <Col xs={4} class="d-inline-flex align-items-center justify-content-center">
<Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;"> <Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;">
{clusterInfo?.flopRate} {clusterInfo?.flopRateUnit} {scaleNumber(clusterInfo?.flopRate, clusterInfo?.flopRateUnitPrefix)}{clusterInfo?.flopRateUnitBase}
</Badge> </Badge>
<div style="font-size:large;"> <div style="font-size:large;">
Total Flop Rate Total Flop Rate
@@ -451,7 +454,7 @@
</Col> </Col>
<Col xs={4} class="d-inline-flex align-items-center justify-content-center"> <Col xs={4} class="d-inline-flex align-items-center justify-content-center">
<Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;"> <Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;">
{clusterInfo?.memBwRate} {clusterInfo?.memBwRateUnit} {scaleNumber(clusterInfo?.memBwRate, clusterInfo?.memBwRateUnitPrefix)}{clusterInfo?.memBwRateUnitBase}
</Badge> </Badge>
<div style="font-size:large;"> <div style="font-size:large;">
Total Memory Bandwidth Total Memory Bandwidth
@@ -460,7 +463,7 @@
{#if clusterInfo?.totalAccs !== 0} {#if clusterInfo?.totalAccs !== 0}
<Col xs={4} class="d-inline-flex align-items-center justify-content-center"> <Col xs={4} class="d-inline-flex align-items-center justify-content-center">
<Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;"> <Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;">
{clusterInfo?.gpuPwr} {clusterInfo?.gpuPwrUnit} {scaleNumber(clusterInfo?.gpuPwr, clusterInfo?.gpuPwrUnitPrefix)}{clusterInfo?.gpuPwrUnitBase}
</Badge> </Badge>
<div style="font-size:large;"> <div style="font-size:large;">
Total GPU Power Total GPU Power
@@ -469,7 +472,7 @@
{:else} {:else}
<Col xs={4} class="d-inline-flex align-items-center justify-content-center"> <Col xs={4} class="d-inline-flex align-items-center justify-content-center">
<Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;"> <Badge color="secondary" style="font-size:x-large;margin-right:0.25rem;">
{clusterInfo?.cpuPwr} {clusterInfo?.cpuPwrUnit} {scaleNumber(clusterInfo?.cpuPwr, clusterInfo?.cpuPwrUnitPrefix)}{clusterInfo?.cpuPwrUnitBase}
</Badge> </Badge>
<div style="font-size:large;"> <div style="font-size:large;">
Total CPU Power Total CPU Power

17
web/frontend/src/generic/units.js
View File

@@ -17,11 +17,26 @@ export function formatNumber(x) {
} }
} }
export function scaleNumber(x, p = '') {
if ( isNaN(x) || x == null) {
return `${x} ${p}` // Return if String or Null
} else {
const oldPower = power[prefix.indexOf(p)]
const rawValue = x * oldPower
for (let i = 0; i < prefix.length; i++) {
if (power[i] <= rawValue && rawValue < power[i+1]) {
return `${Math.round((rawValue / power[i]) * 100) / 100} ${prefix[i]}`
}
}
return `${x} ${p}`
}
}
export function roundTwoDigits(x) { export function roundTwoDigits(x) {
return Math.round(x * 100) / 100 return Math.round(x * 100) / 100
} }
export function scaleNumbers(x, y , p = '') { export function scaleNumbers(x, y, p = '') {
const oldPower = power[prefix.indexOf(p)] const oldPower = power[prefix.indexOf(p)]
const rawXValue = x * oldPower const rawXValue = x * oldPower
const rawYValue = y * oldPower const rawYValue = y * oldPower

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

@@ -22,6 +22,7 @@
import { import {
formatDurationTime, formatDurationTime,
formatNumber, formatNumber,
scaleNumber
} from "../generic/units.js"; } from "../generic/units.js";
import { import {
Row, Row,
@@ -250,9 +251,11 @@
if (!rawInfos['totalAccs']) rawInfos['totalAccs'] = (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0; if (!rawInfos['totalAccs']) rawInfos['totalAccs'] = (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0; else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0;
// Units (Set Once) // Unit Parts (Set Once)
if (!rawInfos['flopRateUnit']) rawInfos['flopRateUnit'] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base if (!rawInfos['flopRateUnitBase']) rawInfos['flopRateUnitBase'] = subCluster.flopRateSimd.unit.base
if (!rawInfos['memBwRateUnit']) rawInfos['memBwRateUnit'] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base if (!rawInfos['memBwRateUnitBase']) rawInfos['memBwRateUnitBase'] = subCluster.memoryBandwidth.unit.base
if (!rawInfos['flopRateUnitPrefix']) rawInfos['flopRateUnitPrefix'] = subCluster.flopRateSimd.unit.prefix
if (!rawInfos['memBwRateUnitPrefix']) rawInfos['memBwRateUnitPrefix'] = subCluster.memoryBandwidth.unit.prefix
// Get Maxima For Roofline Knee Render // Get Maxima For Roofline Knee Render
if (!rawInfos['roofData']) { if (!rawInfos['roofData']) {
@@ -418,12 +421,10 @@
</tr> </tr>
<tr class="pb-2"> <tr class="pb-2">
<td style="font-size:x-large;"> <td style="font-size:x-large;">
{clusterInfo?.flopRate} {scaleNumber(clusterInfo?.flopRate, clusterInfo?.flopRateUnitPrefix)}{clusterInfo?.flopRateUnitBase}
{clusterInfo?.flopRateUnit}
</td> </td>
<td style="font-size:x-large;"> <td style="font-size:x-large;">
{clusterInfo?.memBwRate} {scaleNumber(clusterInfo?.memBwRate, clusterInfo?.memBwRateUnitPrefix)}{clusterInfo?.memBwRateUnitBase}
{clusterInfo?.memBwRateUnit}
</td> </td>
</tr> </tr>
<hr class="my-1"/> <hr class="my-1"/>

8
web/frontend/src/status/dashdetails/StatusDash.svelte
View File

@@ -23,7 +23,7 @@
gql, gql,
getContextClient, getContextClient,
} from "@urql/svelte"; } from "@urql/svelte";
import { formatDurationTime } from "../../generic/units.js"; import { formatDurationTime, scaleNumber } from "../../generic/units.js";
import Refresher from "../../generic/helper/Refresher.svelte"; import Refresher from "../../generic/helper/Refresher.svelte";
import TimeSelection from "../../generic/select/TimeSelection.svelte"; import TimeSelection from "../../generic/select/TimeSelection.svelte";
import Roofline from "../../generic/plots/Roofline.svelte"; import Roofline from "../../generic/plots/Roofline.svelte";
@@ -599,12 +599,10 @@
</tr> </tr>
<tr class="pb-2"> <tr class="pb-2">
<td style="font-size:x-large;"> <td style="font-size:x-large;">
{flopRate[subCluster.name]} {scaleNumber(flopRate[subCluster.name], flopRateUnitPrefix[subCluster.name])}{flopRateUnitBase[subCluster.name]}
{flopRateUnitPrefix[subCluster.name]}{flopRateUnitBase[subCluster.name]}
</td> </td>
<td colspan="2" style="font-size:x-large;"> <td colspan="2" style="font-size:x-large;">
{memBwRate[subCluster.name]} {scaleNumber(memBwRate[subCluster.name], memBwRateUnitPrefix[subCluster.name])}{memBwRateUnitBase[subCluster.name]}
{memBwRateUnitPrefix[subCluster.name]}{memBwRateUnitBase[subCluster.name]}
</td> </td>
</tr> </tr>
<hr class="my-1"/> <hr class="my-1"/>