From 318dbd65e04a2552e9434be1ab49e5bc1c2b0b03 Mon Sep 17 00:00:00 2001 From: Christoph Kluge Date: Thu, 29 Jan 2026 17:01:07 +0100 Subject: [PATCH] dynamically scale dashboard sums --- web/frontend/src/DashPublic.root.svelte | 31 ++++++++++--------- web/frontend/src/generic/units.js | 17 +++++++++- web/frontend/src/status/DashInternal.svelte | 15 ++++----- .../src/status/dashdetails/StatusDash.svelte | 8 ++--- 4 files changed, 44 insertions(+), 27 deletions(-) diff --git a/web/frontend/src/DashPublic.root.svelte b/web/frontend/src/DashPublic.root.svelte index 9c17e7d8..988e2651 100644 --- a/web/frontend/src/DashPublic.root.svelte +++ b/web/frontend/src/DashPublic.root.svelte @@ -16,6 +16,7 @@ } from "./generic/utils.js"; import { formatNumber, + scaleNumber } from "./generic/units.js"; import { Row, @@ -222,8 +223,10 @@ else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0; // Units (Set Once) - if (!rawInfos['flopRateUnit']) rawInfos['flopRateUnit'] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base - if (!rawInfos['memBwRateUnit']) rawInfos['memBwRateUnit'] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base + if (!rawInfos['flopRateUnitBase']) rawInfos['flopRateUnitBase'] = subCluster.flopRateSimd.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 if (!rawInfos['roofData']) { @@ -262,20 +265,20 @@ 0, // Initial Value ) || 0; 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 - rawInfos['cpuPwrUnit'] = rawCpuUnit ? rawCpuUnit.prefix + rawCpuUnit.base : '' - } + + let rawCpuUnit = $statusQuery?.data?.nodeMetrics[0]?.metrics.find((m) => m.name == 'cpu_power')?.metric?.unit || null + if (!rawInfos['cpuPwrUnitBase']) rawInfos['cpuPwrUnitBase'] = rawCpuUnit ? rawCpuUnit.base : '' + if (!rawInfos['cpuPwrUnitPrefix']) rawInfos['cpuPwrUnitPrefix'] = rawCpuUnit ? rawCpuUnit.prefix : '' let rawGpuPwr = $statusQuery?.data?.nodeMetrics?.reduce((sum, node) => sum + (node.metrics.find((m) => m.name == 'acc_power')?.metric?.series[0]?.statistics?.avg || 0), 0, // Initial Value ) || 0; 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 - rawInfos['gpuPwrUnit'] = rawGpuUnit ? rawGpuUnit.prefix + rawGpuUnit.base : '' - } + + let rawGpuUnit = $statusQuery?.data?.nodeMetrics[0]?.metrics.find((m) => m.name == 'acc_power')?.metric?.unit || null + if (!rawInfos['gpuPwrUnitBase']) rawInfos['gpuPwrUnitBase'] = rawGpuUnit ? rawGpuUnit.base : '' + if (!rawInfos['gpuPwrUnitPrefix']) rawInfos['gpuPwrUnitPrefix'] = rawGpuUnit ? rawGpuUnit.prefix : '' } return rawInfos; }); @@ -443,7 +446,7 @@ - {clusterInfo?.flopRate} {clusterInfo?.flopRateUnit} + {scaleNumber(clusterInfo?.flopRate, clusterInfo?.flopRateUnitPrefix)}{clusterInfo?.flopRateUnitBase}
Total Flop Rate @@ -451,7 +454,7 @@ - {clusterInfo?.memBwRate} {clusterInfo?.memBwRateUnit} + {scaleNumber(clusterInfo?.memBwRate, clusterInfo?.memBwRateUnitPrefix)}{clusterInfo?.memBwRateUnitBase}
Total Memory Bandwidth @@ -460,7 +463,7 @@ {#if clusterInfo?.totalAccs !== 0} - {clusterInfo?.gpuPwr} {clusterInfo?.gpuPwrUnit} + {scaleNumber(clusterInfo?.gpuPwr, clusterInfo?.gpuPwrUnitPrefix)}{clusterInfo?.gpuPwrUnitBase}
Total GPU Power @@ -469,7 +472,7 @@ {:else} - {clusterInfo?.cpuPwr} {clusterInfo?.cpuPwrUnit} + {scaleNumber(clusterInfo?.cpuPwr, clusterInfo?.cpuPwrUnitPrefix)}{clusterInfo?.cpuPwrUnitBase}
Total CPU Power diff --git a/web/frontend/src/generic/units.js b/web/frontend/src/generic/units.js index d7fe90fe..540a1a32 100644 --- a/web/frontend/src/generic/units.js +++ b/web/frontend/src/generic/units.js @@ -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) { 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 rawXValue = x * oldPower const rawYValue = y * oldPower diff --git a/web/frontend/src/status/DashInternal.svelte b/web/frontend/src/status/DashInternal.svelte index c42c758e..b55e1459 100644 --- a/web/frontend/src/status/DashInternal.svelte +++ b/web/frontend/src/status/DashInternal.svelte @@ -22,6 +22,7 @@ import { formatDurationTime, formatNumber, + scaleNumber } from "../generic/units.js"; import { Row, @@ -250,9 +251,11 @@ if (!rawInfos['totalAccs']) rawInfos['totalAccs'] = (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0; else rawInfos['totalAccs'] += (subCluster?.numberOfNodes * subCluster?.topology?.accelerators?.length) || 0; - // Units (Set Once) - if (!rawInfos['flopRateUnit']) rawInfos['flopRateUnit'] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base - if (!rawInfos['memBwRateUnit']) rawInfos['memBwRateUnit'] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base + // Unit Parts (Set Once) + if (!rawInfos['flopRateUnitBase']) rawInfos['flopRateUnitBase'] = subCluster.flopRateSimd.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 if (!rawInfos['roofData']) { @@ -418,12 +421,10 @@ - {clusterInfo?.flopRate} - {clusterInfo?.flopRateUnit} + {scaleNumber(clusterInfo?.flopRate, clusterInfo?.flopRateUnitPrefix)}{clusterInfo?.flopRateUnitBase} - {clusterInfo?.memBwRate} - {clusterInfo?.memBwRateUnit} + {scaleNumber(clusterInfo?.memBwRate, clusterInfo?.memBwRateUnitPrefix)}{clusterInfo?.memBwRateUnitBase}
diff --git a/web/frontend/src/status/dashdetails/StatusDash.svelte b/web/frontend/src/status/dashdetails/StatusDash.svelte index 9968a9fd..57da0f4d 100644 --- a/web/frontend/src/status/dashdetails/StatusDash.svelte +++ b/web/frontend/src/status/dashdetails/StatusDash.svelte @@ -23,7 +23,7 @@ gql, getContextClient, } from "@urql/svelte"; - import { formatDurationTime } from "../../generic/units.js"; + import { formatDurationTime, scaleNumber } from "../../generic/units.js"; import Refresher from "../../generic/helper/Refresher.svelte"; import TimeSelection from "../../generic/select/TimeSelection.svelte"; import Roofline from "../../generic/plots/Roofline.svelte"; @@ -599,12 +599,10 @@ - {flopRate[subCluster.name]} - {flopRateUnitPrefix[subCluster.name]}{flopRateUnitBase[subCluster.name]} + {scaleNumber(flopRate[subCluster.name], flopRateUnitPrefix[subCluster.name])}{flopRateUnitBase[subCluster.name]} - {memBwRate[subCluster.name]} - {memBwRateUnitPrefix[subCluster.name]}{memBwRateUnitBase[subCluster.name]} + {scaleNumber(memBwRate[subCluster.name], memBwRateUnitPrefix[subCluster.name])}{memBwRateUnitBase[subCluster.name]}