ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29: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, CardBody,
Progress, Progress,
Icon, Icon,
Tooltip
} from "sveltestrap"; } from "sveltestrap";
import { mean, round } from 'mathjs' import { mean, round } from 'mathjs'
// import { findThresholds } from './plots/MetricPlot.svelte' // import { findThresholds } from './plots/MetricPlot.svelte'
@ -17,17 +18,17 @@
export let view = 'job' export let view = 'job'
export let width = 'auto' 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 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) => { const footprintMetricConfigs = footprintMetrics.map((fm) => {
return getContext('metrics')(job.cluster, fm) return getContext('metrics')(job.cluster, fm)
}).filter( Boolean ) // Filter only "truthy" vals, see: https://stackoverflow.com/questions/28607451/removing-undefined-values-from-array }).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 // 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 // return {name: fmc.name, ...findThresholds(fmc, 'node', job?.subCluster ? job.subCluster : '')} // Merge 2 objects
@ -205,7 +206,7 @@
} }
}).filter( Boolean ) }).filter( Boolean )
// console.log("FPD", footprintData) console.log("FPD", footprintData)
</script> </script>
@ -218,10 +219,10 @@
</CardHeader> </CardHeader>
{/if} {/if}
<CardBody> <CardBody>
{#each footprintData as fpd} {#each footprintData as fpd, index}
<div class="mb-1 d-flex justify-content-between"> <div class="mb-1 d-flex justify-content-between">
<div><b>{fpd.name}</b></div> <div>&nbsp;<b>{fpd.name}</b></div> <!-- For symmetry, see below ...-->
<div class="cursor-help d-inline-flex" title={fpd.message}> <div class="cursor-help d-inline-flex" id={`footprint-${job.jobId}-${index}`}>
<div class="mx-1"> <div class="mx-1">
<!-- Alerts Only --> <!-- Alerts Only -->
{#if fpd.impact === 3} {#if fpd.impact === 3}
@ -252,11 +253,12 @@
</div> </div>
<div> <div>
<!-- Print Values --> <!-- 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>
</div> </div>
<Tooltip target={`footprint-${job.jobId}-${index}`} placement="right" offset={[0, 20]}>{fpd.message}</Tooltip>
</div> </div>
<div class="mb-2"> <!-- title={fpd.message} --> <div class="mb-2">
<Progress <Progress
value={fpd.avg} value={fpd.avg}
max={fpd.max} max={fpd.max}