mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2024-12-26 13:29:05 +01:00
Introduce units.js, centralizes value normalizing
This commit is contained in:
Christoph Kluge
parent
dbd2b491ed
commit
ece57bf65e
@ -4,6 +4,7 @@
|
||||
import Histogram from './plots/Histogram.svelte'
|
||||
import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
|
||||
import { init } from './utils.js'
|
||||
import { scaleNumbers } from './units.js'
|
||||
import { queryStore, gql, getContextClient } from '@urql/svelte'
|
||||
|
||||
const { query: initq } = init()
|
||||
@ -50,15 +51,17 @@
|
||||
? sum + (node.metrics.find(m => m.name == metric)?.metric.series.reduce((sum, series) => sum + series.data[series.data.length - 1], 0) || 0)
|
||||
: sum, 0)
|
||||
|
||||
let allocatedNodes = {}, flopRate = {}, flopRateUnit = {}, memBwRate = {}, memBwRateUnit = {}
|
||||
let allocatedNodes = {}, flopRate = {}, flopRateUnitPrefix = {}, flopRateUnitBase = {}, memBwRate = {}, memBwRateUnitPrefix = {}, memBwRateUnitBase = {}
|
||||
$: if ($initq.data && $mainQuery.data) {
|
||||
let subClusters = $initq.data.clusters.find(c => c.name == cluster).subClusters
|
||||
for (let subCluster of subClusters) {
|
||||
allocatedNodes[subCluster.name] = $mainQuery.data.allocatedNodes.find(({ name }) => name == subCluster.name)?.count || 0
|
||||
flopRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'flops_any') * 100) / 100
|
||||
flopRateUnit[subCluster.name] = subCluster.flopRateSimd.unit.prefix + subCluster.flopRateSimd.unit.base
|
||||
flopRateUnitPrefix[subCluster.name] = subCluster.flopRateSimd.unit.prefix
|
||||
flopRateUnitBase[subCluster.name] = subCluster.flopRateSimd.unit.base
|
||||
memBwRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'mem_bw') * 100) / 100
|
||||
memBwRateUnit[subCluster.name] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base
|
||||
memBwRateUnitPrefix[subCluster.name] = subCluster.memoryBandwidth.unit.prefix
|
||||
memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base
|
||||
}
|
||||
}
|
||||
|
||||
@ -116,12 +119,22 @@
|
||||
<tr class="py-2">
|
||||
<th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th>
|
||||
<td style="min-width: 100px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd.value * subCluster.numberOfNodes}/></div></td>
|
||||
<td>({flopRate[subCluster.name]} {flopRateUnit[subCluster.name]} / {(subCluster.flopRateSimd.value * subCluster.numberOfNodes)} {flopRateUnit[subCluster.name]} [Max])</td>
|
||||
<td>
|
||||
{scaleNumbers(flopRate[subCluster.name],
|
||||
(subCluster.flopRateSimd.value * subCluster.numberOfNodes),
|
||||
flopRateUnitPrefix[subCluster.name])
|
||||
}{flopRateUnitBase[subCluster.name]} [Max]
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="py-2">
|
||||
<th scope="col">MemBw Rate</th>
|
||||
<td style="min-width: 100px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth.value * subCluster.numberOfNodes}/></div></td>
|
||||
<td>({memBwRate[subCluster.name]} {memBwRateUnit[subCluster.name]} / {(subCluster.memoryBandwidth.value * subCluster.numberOfNodes)} {memBwRateUnit[subCluster.name]} [Max])</td>
|
||||
<td>
|
||||
{scaleNumbers(memBwRate[subCluster.name],
|
||||
(subCluster.memoryBandwidth.value * subCluster.numberOfNodes),
|
||||
memBwRateUnitPrefix[subCluster.name])
|
||||
}{memBwRateUnitBase[subCluster.name]} [Max]
|
||||
</td>
|
||||
</tr>
|
||||
</Table>
|
||||
</CardBody>
|
||||
|
||||
@ -196,7 +196,7 @@
|
||||
</style>
|
||||
|
||||
<script context="module">
|
||||
import { formatNumber } from '../utils.js'
|
||||
import { formatNumber } from '../units.js'
|
||||
|
||||
export function binsFromFootprint(weights, values, numBins) {
|
||||
let min = 0, max = 0
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
-->
|
||||
<script>
|
||||
import uPlot from 'uplot'
|
||||
import { formatNumber } from '../utils.js'
|
||||
import { formatNumber } from '../units.js'
|
||||
import { getContext, onMount, onDestroy } from 'svelte'
|
||||
|
||||
export let width
|
||||
@ -312,7 +312,9 @@
|
||||
|
||||
</script>
|
||||
|
||||
<!--Add empty series warning card-->
|
||||
<div bind:this={plotWrapper} class="cc-plot"></div>
|
||||
|
||||
<style>
|
||||
.cc-plot {
|
||||
border-radius: 5px;
|
||||
|
||||
@ -46,16 +46,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
const power = [1, 1e3, 1e6, 1e9, 1e12]
|
||||
const suffix = ['', 'k', 'm', 'g']
|
||||
function formatNumber(x) {
|
||||
for (let i = 0; i < suffix.length; i++)
|
||||
if (power[i] <= x && x < power[i+1])
|
||||
return `${x / power[i]}${suffix[i]}`
|
||||
|
||||
return Math.abs(x) >= 1000 ? x.toExponential() : x.toString()
|
||||
}
|
||||
|
||||
function axisStepFactor(i, size) {
|
||||
if (size && size < 500)
|
||||
return 10
|
||||
@ -307,6 +297,7 @@
|
||||
|
||||
<script>
|
||||
import { onMount, tick } from 'svelte'
|
||||
import { formatNumber } from '../units.js'
|
||||
|
||||
export let flopsAny = null
|
||||
export let memBw = null
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
</div>
|
||||
|
||||
<script context="module">
|
||||
import { formatNumber } from '../utils.js'
|
||||
import { formatNumber } from '../units.js'
|
||||
|
||||
const axesColor = '#aaaaaa'
|
||||
const fontSize = 12
|
||||
|
||||
29
web/frontend/src/units.js
Normal file
29
web/frontend/src/units.js
Normal file
@ -0,0 +1,29 @@
|
||||
/*
|
||||
Collect Functions for Unit Handling and Scaling Here
|
||||
*/
|
||||
|
||||
const power = [1, 1e3, 1e6, 1e9, 1e12, 1e15, 1e18, 1e21]
|
||||
const prefix = ['', 'K', 'M', 'G', 'T', 'P', 'E']
|
||||
|
||||
export function formatNumber(x) {
|
||||
for (let i = 0; i < prefix.length; i++)
|
||||
if (power[i] <= x && x < power[i+1])
|
||||
return `${Math.round((x / power[i]) * 100) / 100} ${prefix[i]}`
|
||||
|
||||
return Math.abs(x) >= 1000 ? x.toExponential() : x.toString()
|
||||
}
|
||||
|
||||
export function scaleNumbers(x, y , p = '') {
|
||||
const oldPower = power[prefix.indexOf(p)]
|
||||
const rawXValue = x * oldPower
|
||||
const rawYValue = y * oldPower
|
||||
|
||||
for (let i = 0; i < prefix.length; i++) {
|
||||
if (power[i] <= rawYValue && rawYValue < power[i+1]) {
|
||||
return `${Math.round((rawXValue / power[i]) * 100) / 100} / ${Math.round((rawYValue / power[i]) * 100) / 100} ${prefix[i]}`
|
||||
}
|
||||
}
|
||||
|
||||
return Math.abs(rawYValue) >= 1000 ? `${rawXValue.toExponential()} / ${rawYValue.toExponential()}` : `${rawYValue.toString()} / ${rawYValue.toString()}`
|
||||
}
|
||||
|
||||
@ -123,22 +123,6 @@ export function init(extraInitQuery = "") {
|
||||
};
|
||||
}
|
||||
|
||||
export function formatNumber(x) {
|
||||
let suffix = "";
|
||||
if (x >= 1000000000) {
|
||||
x /= 1000000;
|
||||
suffix = "G";
|
||||
} else if (x >= 1000000) {
|
||||
x /= 1000000;
|
||||
suffix = "M";
|
||||
} else if (x >= 1000) {
|
||||
x /= 1000;
|
||||
suffix = "k";
|
||||
}
|
||||
|
||||
return `${Math.round(x * 100) / 100} ${suffix}`;
|
||||
}
|
||||
|
||||
// Use https://developer.mozilla.org/en-US/docs/Web/API/structuredClone instead?
|
||||
export function deepCopy(x) {
|
||||
return JSON.parse(JSON.stringify(x));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user