ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 05:19:05 +01:00
Code Issues Packages Releases Activity

Switch from title to sveltestrap tooltip

Browse Source
This commit is contained in:
Christoph Kluge 2023-11-22 12:12:36 +01:00
parent 709880ff5a
commit 1aa9720405
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/frontend/src/JobFootprint.svelte
View File

@ -7,6 +7,7 @@
CardBody,
Progress,
Icon,
Tooltip
} from "sveltestrap";
import { mean, round } from 'mathjs'
// import { findThresholds } from './plots/MetricPlot.svelte'
@ -17,17 +18,17 @@
export let view = 'job'
export let width = 'auto'
// console.log('CLUSTER', job.cluster)
console.log('CLUSTER', job.cluster)
const footprintMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw'] // 'acc_utilization' / missing: energy , move to central config before deployment
// console.log('JMs', jobMetrics.filter((jm) => footprintMetrics.includes(jm.name)))
console.log('JMs', jobMetrics.filter((jm) => footprintMetrics.includes(jm.name)))
const footprintMetricConfigs = footprintMetrics.map((fm) => {
return getContext('metrics')(job.cluster, fm)
}).filter( Boolean ) // Filter only "truthy" vals, see: https://stackoverflow.com/questions/28607451/removing-undefined-values-from-array
// console.log("FMCs", footprintMetricConfigs)
console.log("FMCs", footprintMetricConfigs)
// const footprintMetricThresholds = footprintMetricConfigs.map((fmc) => { // Only required if scopes smaller than node required
// return {name: fmc.name, ...findThresholds(fmc, 'node', job?.subCluster ? job.subCluster : '')} // Merge 2 objects
@ -205,7 +206,7 @@
}
}).filter( Boolean )
// console.log("FPD", footprintData)
console.log("FPD", footprintData)
</script>
@ -218,10 +219,10 @@
</CardHeader>
{/if}
<CardBody>
{#each footprintData as fpd}
{#each footprintData as fpd, index}
<div class="mb-1 d-flex justify-content-between">
<div><b>{fpd.name}</b></div>
<div class="cursor-help d-inline-flex" title={fpd.message}>
<div>&nbsp;<b>{fpd.name}</b></div> <!-- For symmetry, see below ...-->
<div class="cursor-help d-inline-flex" id={`footprint-${job.jobId}-${index}`}>
<div class="mx-1">
<!-- Alerts Only -->
{#if fpd.impact === 3}
@ -252,11 +253,12 @@
</div>
<div>
<!-- Print Values -->
{fpd.avg} / {fpd.max} {fpd.unit}
{fpd.avg} / {fpd.max} {fpd.unit} &nbsp; <!-- To increase margin to tooltip: No other way manageable ...-->
</div>
</div>
<Tooltip target={`footprint-${job.jobId}-${index}`} placement="right" offset={[0, 20]}>{fpd.message}</Tooltip>
</div>
<div class="mb-2"> <!-- title={fpd.message} -->
<div class="mb-2">
<Progress
value={fpd.avg}
max={fpd.max}