Merge branch 'hotfix' of github.com:ClusterCockpit/cc-backend into hotfix

web/frontend/src/Status.root.svelte

@@ -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
+            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
+            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
-            memBwRate[subCluster.name] = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'mem_bw') * 100) / 100
+            flopRateUnitBase[subCluster.name]   = subCluster.flopRateSimd.unit.base
-            memBwRateUnit[subCluster.name] = subCluster.memoryBandwidth.unit.prefix + subCluster.memoryBandwidth.unit.base
+            memBwRate[subCluster.name]          = Math.floor(sumUp($mainQuery.data.nodeMetrics, subCluster.name, 'mem_bw') * 100) / 100
+            memBwRateUnitPrefix[subCluster.name] = subCluster.memoryBandwidth.unit.prefix
+            memBwRateUnitBase[subCluster.name]  = subCluster.memoryBandwidth.unit.base
         }
     }
 
@@ -111,17 +114,27 @@
                             <tr class="py-2">
                                 <th scope="col">Allocated Nodes</th>
                                 <td style="min-width: 100px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
-                                <td>({allocatedNodes[subCluster.name]} Nodes / {subCluster.numberOfNodes} Total Nodes)</td>
+                                <td>{allocatedNodes[subCluster.name]} / {subCluster.numberOfNodes} Nodes</td>
                             </tr>
                             <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>

web/frontend/src/filters/DoubleRangeSlider.svelte

@@ -21,6 +21,8 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 	export let max;
 	export let firstSlider;
 	export let secondSlider;
+	export let inputFieldFrom = 0;
+	export let inputFieldTo = 0;
 
 	const dispatch = createEventDispatcher();
 
@@ -33,7 +35,6 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 	let leftHandle;
 	let body;
 	let slider;
-	let inputFieldFrom, inputFieldTo;
 
 	let timeoutId = null;
 	function queueChangeEvent() {
@@ -45,10 +46,10 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 			timeoutId = null;
 
 			// Show selection but avoid feedback loop
-			if (values[0] != null && inputFieldFrom.value != values[0].toString())
+			if (values[0] != null && inputFieldFrom != values[0].toString())
-				inputFieldFrom.value = values[0].toString();
+				inputFieldFrom = values[0].toString();
-			if (values[1] != null && inputFieldTo.value != values[1].toString())
+			if (values[1] != null && inputFieldTo != values[1].toString())
-				inputFieldTo.value = values[1].toString();
+				inputFieldTo = values[1].toString();
 
 			dispatch('change', values);
 		}, 250);
@@ -176,7 +177,7 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 
 		const leftHandleLeft = leftHandle.getBoundingClientRect().left;
 
-		const pxStart = clamp((leftHandleLeft + event.detail.dx) - left, 0, parentWidth - width);
+		const pxStart = clamp((leftHandleLeft + evt.detail.dx) - left, 0, parentWidth - width);
 		const pxEnd = clamp(pxStart + width, width, parentWidth);
 
 		const pStart = pxStart / parentWidth;
@@ -190,12 +191,12 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
 
 <div class="double-range-container">
 	<div class="header">
-		<input class="form-control" type="text" placeholder="from..." bind:this={inputFieldFrom}
+		<input class="form-control" type="text" placeholder="from..." bind:value={inputFieldFrom}
 			on:input={(e) => inputChanged(0, e)} />
 
 		<span>Full Range: <b> {min} </b> - <b> {max} </b></span>
 
-		<input class="form-control" type="text" placeholder="to..." bind:this={inputFieldTo}
+		<input class="form-control" type="text" placeholder="to..." bind:value={inputFieldTo}
 			on:input={(e) => inputChanged(1, e)} />
 	</div>
 	<div class="slider" bind:this={slider}>

web/frontend/src/filters/Filters.svelte

@@ -60,7 +60,10 @@
         isTagsOpen = false,
         isDurationOpen = false,
         isResourcesOpen = false,
-        isStatsOpen = false
+        isStatsOpen = false,
+        isNodesModified = false,
+        isHwthreadsModified = false,
+        isAccsModified = false
 
     // Can be called from the outside to trigger a 'update' event from this component.
     export function update(additionalFilters = null) {
@@ -181,7 +184,7 @@
                     <Icon name="tags"/> Tags
                 </DropdownItem>
                 <DropdownItem on:click={() => (isResourcesOpen = true)}>
-                    <Icon name="hdd-stack"/> Nodes/Accelerators
+                    <Icon name="hdd-stack"/> Resources
                 </DropdownItem>
                 <DropdownItem on:click={() => (isStatsOpen = true)}>
                     <Icon name="bar-chart" on:click={() => (isStatsOpen = true)}/> Statistics
@@ -268,9 +271,15 @@
             </Info>
         {/if}
 
-        {#if filters.numNodes.from != null || filters.numNodes.to != null}
+        {#if filters.numNodes.from != null          || filters.numNodes.to != null          || 
+             filters.numHWThreads.from != null      || filters.numHWThreads.to != null      || 
+             filters.numAccelerators.from != null   || filters.numAccelerators.to != null   }
             <Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
-                Nodes: {filters.numNodes.from} - {filters.numNodes.to}
+                {#if isNodesModified } Nodes: {filters.numNodes.from} - {filters.numNodes.to} {/if}
+                {#if isNodesModified && isHwthreadsModified }, {/if}
+                {#if isHwthreadsModified } HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to} {/if}
+                {#if (isNodesModified || isHwthreadsModified) && isAccsModified }, {/if}
+                {#if isAccsModified } Accelerators: {filters.numAccelerators.from} - {filters.numAccelerators.to} {/if}
             </Info>
         {/if}
 
@@ -316,6 +325,9 @@
     bind:numNodes={filters.numNodes}
     bind:numHWThreads={filters.numHWThreads}
     bind:numAccelerators={filters.numAccelerators}
+    bind:isNodesModified={isNodesModified}
+    bind:isHwthreadsModified={isHwthreadsModified}
+    bind:isAccsModified={isAccsModified}
     on:update={() => update()} />
 
 <Statistics cluster={filters.cluster}

web/frontend/src/filters/Resources.svelte

@@ -9,21 +9,24 @@
           dispatch = createEventDispatcher()
 
     export let cluster = null
-    export let isModified = false
     export let isOpen = false
     export let numNodes = { from: null, to: null }
     export let numHWThreads = { from: null, to: null }
     export let numAccelerators = { from: null, to: null }
+    export let isNodesModified = false
+    export let isHwthreadsModified = false
+    export let isAccsModified = false
 
     let pendingNumNodes = numNodes, pendingNumHWThreads = numHWThreads, pendingNumAccelerators = numAccelerators
-    $: isModified = pendingNumNodes.from != numNodes.from || pendingNumNodes.to != numNodes.to
-        || pendingNumHWThreads.from != numHWThreads.from || pendingNumHWThreads.to != numHWThreads.to
-        || pendingNumAccelerators.from != numAccelerators.from || pendingNumAccelerators.to != numAccelerators.to
 
     const findMaxNumAccels = clusters => clusters.reduce((max, cluster) => Math.max(max,
         cluster.subClusters.reduce((max, sc) => Math.max(max, sc.topology.accelerators?.length || 0), 0)), 0)
 
-        // console.log(header)
+    // Limited to Single-Node Thread Count
+    const findMaxNumHWTreadsPerNode = clusters => clusters.reduce((max, cluster) => Math.max(max,
+        cluster.subClusters.reduce((max, sc) => Math.max(max, (sc.threadsPerCore * sc.coresPerSocket * sc.socketsPerNode) || 0), 0)), 0)
+
+    // console.log(header)
     let minNumNodes = 1, maxNumNodes = 0, minNumHWThreads = 1, maxNumHWThreads = 0, minNumAccelerators = 0, maxNumAccelerators = 0
     $: {
         if ($initialized) {
@@ -33,11 +36,13 @@
                 minNumNodes = filterRanges.numNodes.from
                 maxNumNodes = filterRanges.numNodes.to
                 maxNumAccelerators = findMaxNumAccels([{ subClusters }])
+                maxNumHWThreads = findMaxNumHWTreadsPerNode([{ subClusters }])
             } else if (clusters.length > 0) {
                 const { filterRanges } = header.clusters[0]
                 minNumNodes = filterRanges.numNodes.from
                 maxNumNodes = filterRanges.numNodes.to
                 maxNumAccelerators = findMaxNumAccels(clusters)
+                maxNumHWThreads = findMaxNumHWTreadsPerNode(clusters)
                 for (let cluster of header.clusters) {
                     const { filterRanges } = cluster
                     minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from)
@@ -52,27 +57,53 @@
             pendingNumNodes = { from: 0, to: maxNumNodes }
         }
     }
+
+    $: {
+        if (isOpen && $initialized && ((pendingNumHWThreads.from == null && pendingNumHWThreads.to == null) || (isHwthreadsModified == false))) {
+            pendingNumHWThreads = { from: 0, to: maxNumHWThreads }
+        }
+    }
+
+    $: if ( maxNumAccelerators != null && maxNumAccelerators > 1 ) {
+        if (isOpen && $initialized && pendingNumAccelerators.from == null && pendingNumAccelerators.to == null) {
+            pendingNumAccelerators = { from: 0, to: maxNumAccelerators }
+        }
+    }
 </script>
 
 <Modal isOpen={isOpen} toggle={() => (isOpen = !isOpen)}>
     <ModalHeader>
-        Select Number of Nodes, HWThreads and Accelerators
+        Select number of utilized Resources
     </ModalHeader>
     <ModalBody>
-        <h4>Number of Nodes</h4>
+        <h6>Number of Nodes</h6>
         <DoubleRangeSlider
-            on:change={({ detail }) => (pendingNumNodes = { from: detail[0], to: detail[1] })}
+            on:change={({ detail }) => {
+                pendingNumNodes = { from: detail[0], to: detail[1] }
+                isNodesModified = true
+            }}
             min={minNumNodes} max={maxNumNodes}
-            firstSlider={pendingNumNodes.from} secondSlider={pendingNumNodes.to} />
+            firstSlider={pendingNumNodes.from} secondSlider={pendingNumNodes.to}
-        <!-- <DoubleRangeSlider
+            inputFieldFrom={pendingNumNodes.from} inputFieldTo={pendingNumNodes.to}/>
-            on:change={({ detail }) => (pendingNumHWThreads = { from: detail[0], to: detail[1] })}
+        <h6 style="margin-top: 1rem;">Number of HWThreads (Use for Single-Node Jobs)</h6>
+        <DoubleRangeSlider
+            on:change={({ detail }) => {
+                pendingNumHWThreads = { from: detail[0], to: detail[1] }
+                isHwthreadsModified = true
+            }}
             min={minNumHWThreads} max={maxNumHWThreads}
-            firstSlider={pendingNumHWThreads.from} secondSlider={pendingNumHWThreads.to} /> -->
+            firstSlider={pendingNumHWThreads.from} secondSlider={pendingNumHWThreads.to}
+            inputFieldFrom={pendingNumHWThreads.from} inputFieldTo={pendingNumHWThreads.to}/>
         {#if maxNumAccelerators != null && maxNumAccelerators > 1}
+            <h6 style="margin-top: 1rem;">Number of Accelerators</h6>
             <DoubleRangeSlider
-                on:change={({ detail }) => (pendingNumAccelerators = { from: detail[0], to: detail[1] })}
+                on:change={({ detail }) => {
+                    pendingNumAccelerators = { from: detail[0], to: detail[1] }
+                    isAccsModified = true 
+                }}
                 min={minNumAccelerators} max={maxNumAccelerators}
-                firstSlider={pendingNumAccelerators.from} secondSlider={pendingNumAccelerators.to} />
+                firstSlider={pendingNumAccelerators.from} secondSlider={pendingNumAccelerators.to} 
+                inputFieldFrom={pendingNumAccelerators.from} inputFieldTo={pendingNumAccelerators.to}/>
         {/if}
     </ModalBody>
     <ModalFooter>
@@ -80,7 +111,10 @@
             disabled={pendingNumNodes.from == null || pendingNumNodes.to == null}
             on:click={() => {
                 isOpen = false
-                numNodes = { from: pendingNumNodes.from, to: pendingNumNodes.to }
+                pendingNumNodes = isNodesModified ? pendingNumNodes : { from: null, to: null }
+                pendingNumHWThreads = isHwthreadsModified ? pendingNumHWThreads : { from: null, to: null }
+                pendingNumAccelerators = isAccsModified ? pendingNumAccelerators : { from: null, to: null }
+                numNodes ={ from: pendingNumNodes.from, to: pendingNumNodes.to }
                 numHWThreads = { from: pendingNumHWThreads.from, to: pendingNumHWThreads.to }
                 numAccelerators = { from: pendingNumAccelerators.from, to: pendingNumAccelerators.to }
                 dispatch('update', { numNodes, numHWThreads, numAccelerators })
@@ -95,6 +129,9 @@
             numNodes = { from: pendingNumNodes.from, to: pendingNumNodes.to }
             numHWThreads = { from: pendingNumHWThreads.from, to: pendingNumHWThreads.to }
             numAccelerators = { from: pendingNumAccelerators.from, to: pendingNumAccelerators.to }
+            isNodesModified = false
+            isHwthreadsModified = false
+            isAccsModified = false
             dispatch('update', { numNodes, numHWThreads, numAccelerators })
         }}>Reset</Button>
         <Button on:click={() => (isOpen = false)}>Close</Button>

web/frontend/src/filters/Stats.svelte

@@ -93,7 +93,8 @@
             <DoubleRangeSlider
                 on:change={({ detail }) => (stat.from = detail[0], stat.to = detail[1], stat.enabled = true)}
                 min={0} max={stat.peak}
-                firstSlider={stat.from} secondSlider={stat.to} />
+                firstSlider={stat.from} secondSlider={stat.to}
+                inputFieldFrom={stat.from} inputFieldTo={stat.to}/>
         {/each}
     </ModalBody>
     <ModalFooter>
@@ -104,7 +105,8 @@
         }}>Close & Apply</Button>
         <Button color="danger" on:click={() => {
             isOpen = false
-            statistics.forEach(stat => stat.enabled = false)
+            resetRange($initialized, cluster)
+            statistics.forEach(stat => (stat.enabled = false))
             stats = []
             dispatch('update', { stats })
         }}>Reset</Button>

web/frontend/src/plots/Histogram.svelte

@@ -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

web/frontend/src/plots/MetricPlot.svelte

@@ -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;

web/frontend/src/plots/Roofline.svelte

@@ -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

web/frontend/src/plots/Scatter.svelte

@@ -3,7 +3,7 @@
 </div>
 
 <script context="module">
-    import { formatNumber } from '../utils.js'
+    import { formatNumber } from '../units.js'
 
     const axesColor = '#aaaaaa'
     const fontSize = 12

web/frontend/src/units.js

@@ -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()}`
+}
+

web/frontend/src/utils.js

@@ -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));