ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-11-10 08:57:25 +01:00
Code Issues Packages Releases Activity

Add colors based on thresholds

Browse Source
This commit is contained in:
Christoph Kluge 2023-11-16 15:07:17 +01:00
parent 9689f95ea1
commit a2c99fb56d
1 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
export let jobMetrics export let jobMetrics
export let size = 200 export let size = 200
export let displayLegend = true export let displayLegend = false
const footprintMetrics = ['mem_used', 'mem_bw','flops_any', 'cpu_load', 'acc_utilization'] // missing: energy , move to central config before deployment const footprintMetrics = ['mem_used', 'mem_bw','flops_any', 'cpu_load', 'acc_utilization'] // missing: energy , move to central config before deployment
@ -56,7 +56,7 @@
console.log("MVs", meanVals) console.log("MVs", meanVals)
const footprintLabels = meanVals.map((mv) => [mv.name, mv.name+' Threshold']) const footprintLabels = meanVals.map((mv) => [mv.name, 'Threshold'])
const footprintData = meanVals.map((mv) => { const footprintData = meanVals.map((mv) => {
const metricConfig = footprintMetricConfigs.find((fmc) => fmc.name === mv.name) const metricConfig = footprintMetricConfigs.find((fmc) => fmc.name === mv.name)
@ -65,35 +65,49 @@
const levelCaution = metricConfig.caution - mv.avg const levelCaution = metricConfig.caution - mv.avg
const levelAlert = metricConfig.alert - mv.avg const levelAlert = metricConfig.alert - mv.avg
if (mv.name !== 'mem_used') { // Alert if usage is low, peak is high good usage
if (levelAlert > 0) { if (levelAlert > 0) {
return [mv.avg, levelAlert] return {data: [mv.avg, levelAlert], color: ['hsl(0, 100%, 60%)', '#AAA']} // 'hsl(0, 100%, 35%)'
} else if (levelCaution > 0) { } else if (levelCaution > 0) {
return [mv.avg, levelCaution] return {data: [mv.avg, levelCaution], color: ['hsl(56, 100%, 50%)', '#AAA']} // '#d5b60a'
} else if (levelNormal > 0) { } else if (levelNormal > 0) {
return [mv.avg, levelNormal] return {data: [mv.avg, levelNormal], color: ['hsl(100, 100%, 60%)', '#AAA']} // 'hsl(100, 100%, 35%)'
} else { } else {
return [mv.avg, levelPeak] return {data: [mv.avg, levelPeak], color: ['hsl(180, 100%, 60%)', '#AAA']} // 'hsl(180, 100%, 35%)'
}
} else { // Inverse Logic: Alert if usage is high, Peak is bad and limits execution
if (levelPeak > 0 && (levelAlert <= 0 && levelCaution <= 0 && levelNormal <= 0)) {
return {data: [mv.avg, levelPeak], color: ['#7F00FF', '#AAA']} // '#5D3FD3'
} else if (levelAlert > 0 && (levelCaution <= 0 && levelNormal <= 0)) {
return {data: [mv.avg, levelAlert], color: ['hsl(0, 100%, 60%)', '#AAA']} // 'hsl(0, 100%, 35%)'
} else if (levelCaution > 0 && levelNormal <= 0) {
return {data: [mv.avg, levelCaution], color: ['hsl(56, 100%, 50%)', '#AAA']} // '#d5b60a'
} else {
return {data: [mv.avg, levelNormal], color: ['hsl(100, 100%, 60%)', '#AAA']} // 'hsl(100, 100%, 35%)'
}
} }
}) })
console.log("FPD", footprintData)
$: data = { $: data = {
labels: footprintLabels.flat(), labels: footprintLabels.flat(),
datasets: [ datasets: [
{ {
backgroundColor: ['#AAA', '#777'], backgroundColor: footprintData[0].color,
data: footprintData[0] data: footprintData[0].data
}, },
{ {
backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'], backgroundColor: footprintData[1].color,
data: footprintData[1] data: footprintData[1].data
}, },
{ {
backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'], backgroundColor: footprintData[2].color,
data: footprintData[2] data: footprintData[2].data
}, },
{ {
backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'], backgroundColor: footprintData[3].color,
data: footprintData[3] data: footprintData[3].data
} }
] ]
} }