ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-02-18 08:51:45 +01:00
Code Issues Packages Releases Activity

color roofline plot, add option to match pie and table color for ndoestate

Browse Source
This commit is contained in:
Christoph Kluge
2025-12-11 18:51:19 +01:00
parent 4083de2a51
commit 6e385db378
6 changed files with 304 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/frontend/src/generic/plots/DoubleMetricPlot.svelte
View File

@@ -33,6 +33,7 @@
// metric,
width = 0,
height = 300,
fixLinewidth = null,
timestep,
numNodes,
metricData,
@@ -52,7 +53,7 @@
// const subClusterTopology = getContext("getHardwareTopology")(cluster, subCluster);
// const metricConfig = getContext("getMetricConfig")(cluster, subCluster, metric);
const lineColors = clusterCockpitConfig.plotConfiguration_colorScheme;
const lineWidth = clusterCockpitConfig.plotConfiguration_lineWidth / window.devicePixelRatio;
const lineWidth = fixLinewidth ? fixLinewidth : clusterCockpitConfig.plotConfiguration_lineWidth / window.devicePixelRatio;
// const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
const renderSleepTime = 200;
// const normalLineColor = "#000000";
@@ -444,6 +445,7 @@
const opts = {
width,
height,
title: 'Cluster Utilization',
plugins: [legendAsTooltipPlugin()],
series: plotSeries,
axes: [

13
web/frontend/src/generic/plots/Pie.svelte
View File

@@ -59,7 +59,15 @@
'rgb(135,133,0)',
'rgb(0,167,108)',
'rgb(189,189,189)',
]
],
nodeStates: {
allocated: "rgba(0, 128, 0, 0.75)",
down: "rgba(255, 0, 0, 0.75)",
idle: "rgba(0, 0, 255, 0.75)",
reserved: "rgba(255, 0, 255, 0.75)",
mixed: "rgba(255, 215, 0, 0.75)",
unknown: "rgba(0, 0, 0, 0.75)"
}
}
</script>
@@ -77,6 +85,7 @@
entities,
displayLegend = false,
useAltColors = false,
fixColors = null
} = $props();
/* Const Init */
@@ -98,6 +107,8 @@
c = [...colors['colorblind']];
} else if (useAltColors) {
c = [...colors['alternative']];
} else if (fixColors?.length > 0) {
c = [...fixColors];
} else {
c = [...colors['default']];
}

189
web/frontend/src/generic/plots/Roofline.svelte
View File

@@ -34,15 +34,18 @@
nodesData = null,
cluster = null,
subCluster = null,
fixTitle = null,
yMinimum = null,
allowSizeChange = false,
useColors = true,
useLegend = true,
colorBackground = false,
width = 600,
height = 380,
} = $props();
/* Const Init */
const lineWidth = clusterCockpitConfig.plotConfiguration_lineWidth;
const lineWidth = 2 // clusterCockpitConfig.plotConfiguration_lineWidth;
const cbmode = clusterCockpitConfig?.plotConfiguration_colorblindMode || false;
/* Var Init */
@@ -294,7 +297,7 @@
} else {
// No Colors: Use Black
u.ctx.strokeStyle = "rgb(0, 0, 0)";
u.ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
u.ctx.fillStyle = colorBackground ? "rgb(0, 0, 0)" : "rgba(0, 0, 0, 0.5)";
}
// Get Values
@@ -527,6 +530,7 @@
let plotTitle = "CPU Roofline Diagram";
if (jobsData) plotTitle = "Job Average Roofline Diagram";
if (nodesData) plotTitle = "Node Average Roofline Diagram";
if (fixTitle) plotTitle = fixTitle
if (roofData) {
const opts = {
@@ -617,7 +621,7 @@
},
y: {
range: [
0.01,
yMinimum ? yMinimum : 0.01,
subCluster?.flopRateSimd?.value
? nearestThousand(subCluster.flopRateSimd.value)
: 10000,
@@ -669,6 +673,7 @@
u.ctx.lineWidth = lineWidth;
u.ctx.beginPath();
// Get Values
const ycut = 0.01 * subCluster.memoryBandwidth.value;
const scalarKnee =
(subCluster.flopRateScalar.value - ycut) /
@@ -676,19 +681,27 @@
const simdKnee =
(subCluster.flopRateSimd.value - ycut) /
subCluster.memoryBandwidth.value;
const scalarKneeX = u.valToPos(scalarKnee, "x", true), // Value, axis, toCanvasPixels
simdKneeX = u.valToPos(simdKnee, "x", true),
flopRateScalarY = u.valToPos(
subCluster.flopRateScalar.value,
"y",
true,
),
flopRateSimdY = u.valToPos(
subCluster.flopRateSimd.value,
"y",
true,
);
// Get Const Coords
const originX = u.valToPos(0.01, "x", true);
const originY = u.valToPos(yMinimum ? yMinimum : 0.01, "y", true);
const outerX = u.valToPos(1000, "x", true); // rightmost x in plot coords
const outerY = u.valToPos(
subCluster?.flopRateSimd?.value
? nearestThousand(subCluster.flopRateSimd.value)
: 10000,
"y",
true
);
const scalarKneeX = u.valToPos(scalarKnee, "x", true) // Value, axis, toCanvasPixels
const simdKneeX = u.valToPos(simdKnee, "x", true)
const flopRateScalarY = u.valToPos(subCluster.flopRateScalar.value, "y", true)
const flopRateSimdY = u.valToPos(subCluster.flopRateSimd.value, "y", true);
/* Render Lines */
if (
scalarKneeX <
width * window.devicePixelRatio -
@@ -728,10 +741,10 @@
y1,
x2,
y2,
u.valToPos(0.01, "x", true),
u.valToPos(1.0, "y", true), // X-Axis Start Coords
u.valToPos(1000, "x", true),
u.valToPos(1.0, "y", true), // X-Axis End Coords
originX, // x3; X-Axis Start Coord-X
originY, // y3; X-Axis Start Coord-Y
outerX, // x4; X-Axis End Coord-X
originY, // y4; X-Axis End Coord-Y
);
if (xAxisIntersect.x > x1) {
@@ -746,6 +759,144 @@
u.ctx.stroke();
// Reset grid lineWidth
u.ctx.lineWidth = 0.15;
/* Render Area */
if (colorBackground) {
u.ctx.beginPath();
// Additional Coords for Colored Regions
const yhalf = u.valToPos(ycut/2, "y", true)
const simdShift = u.valToPos(simdKnee*1.75, "x", true)
let upperBorderIntersect = lineIntersect(
x1,
y1,
x2,
y2,
originX, // x3; X-Axis Start Coord-X
flopRateSimdY*1.667, // y3; X-Axis Start Coord-Y
outerX, // x4; X-Axis End Coord-X
flopRateSimdY*1.667, // y4; X-Axis End Coord-Y
);
let lowerBorderIntersect = lineIntersect(
x1,
y1,
x2,
y2,
originX, // x3; X-Axis Start Coord-X
flopRateScalarY*1.1667, // y3; X-Axis Start Coord-Y
outerX, // x4; X-Axis End Coord-X
flopRateScalarY*1.1667, // y4; X-Axis End Coord-Y
);
let helperUpperBorderIntersect = lineIntersect(
x1,
yhalf,
simdShift,
y2,
originX, // x3; X-Axis Start Coord-X
flopRateSimdY*1.667, // y3; X-Axis Start Coord-Y
outerX, // x4; X-Axis End Coord-X
flopRateSimdY*1.667, // y4; X-Axis End Coord-Y
);
let helperLowerBorderIntersect = lineIntersect(
x1,
yhalf,
simdShift,
y2,
originX, // x3; X-Axis Start Coord-X
flopRateScalarY*1.1667, // y3; X-Axis Start Coord-Y
outerX, // x4; X-Axis End Coord-X
flopRateScalarY*1.1667, // y4; X-Axis End Coord-Y
);
let helperLowerBorderIntersectTop = lineIntersect(
x1,
yhalf,
simdShift,
y2,
scalarKneeX, // x3; X-Axis Start Coord-X
flopRateScalarY, // y3; X-Axis Start Coord-Y
outerX, // x4; X-Axis End Coord-X
flopRateScalarY, // y4; X-Axis End Coord-Y
);
// Diagonal Helper
u.ctx.moveTo(x1, yhalf);
u.ctx.lineTo(simdShift, y2);
// Upper Simd Helper
u.ctx.moveTo(upperBorderIntersect.x, flopRateSimdY*1.667);
u.ctx.lineTo(outerX, flopRateSimdY*1.667);
// Lower Scalar Helper
u.ctx.moveTo(lowerBorderIntersect.x, flopRateScalarY*1.1667);
u.ctx.lineTo(outerX, flopRateScalarY*1.1667);
u.ctx.stroke();
/* Color Regions */
// MemoryBound
u.ctx.save();
u.ctx.beginPath();
u.ctx.lineTo(x1, y1); // YCut
u.ctx.lineTo(x2, y2); // Upper Knee
u.ctx.lineTo(simdShift, y2); // Upper Helper Knee
u.ctx.lineTo(x1, yhalf); // Half yCut
u.ctx.closePath();
u.ctx.fillStyle = "rgba(255, 200, 0, 0.4)"; // Yellow
u.ctx.fill();
u.ctx.restore();
// Compute Lower
u.ctx.save();
u.ctx.beginPath();
u.ctx.moveTo(lowerBorderIntersect.x, flopRateScalarY*1.1667); // Lower Helper Knee
u.ctx.lineTo(scalarKneeX, flopRateScalarY); // Lower Knee
u.ctx.lineTo(outerX, flopRateScalarY); // Outer Border
u.ctx.lineTo(outerX, flopRateScalarY*1.1667); // Outer Lower Helper Border
u.ctx.closePath();
u.ctx.fillStyle = "rgba(0, 180, 255, 0.4)"; // Cyan Blue
u.ctx.fill();
u.ctx.restore();
// Compute Upper
u.ctx.save();
u.ctx.beginPath();
u.ctx.moveTo(upperBorderIntersect.x, flopRateSimdY*1.667); // Upper Helper Knee
u.ctx.lineTo(simdKneeX, flopRateSimdY); // Upper Knee
u.ctx.lineTo(outerX, flopRateSimdY); // Outer Border
u.ctx.lineTo(outerX, flopRateSimdY*1.667); // Outer Upper Helper Border
u.ctx.closePath();
u.ctx.fillStyle = "rgba(0, 180, 255, 0.4)"; // Cyan Blue
u.ctx.fill();
u.ctx.restore();
// Nomansland Lower
u.ctx.save();
u.ctx.beginPath();
u.ctx.moveTo(originX, originY); // Origin
u.ctx.lineTo(originX, yhalf); // YCut Half
u.ctx.lineTo(helperLowerBorderIntersect.x, flopRateScalarY*1.1667); // Lower Inner Helper Knee
u.ctx.lineTo(outerX, flopRateScalarY*1.1667); // Lower Inner Border
u.ctx.lineTo(outerX, originY); // Lower Right Corner
u.ctx.closePath();
u.ctx.fillStyle = "rgba(255, 50, 50, 0.1)"; // Red Light
u.ctx.fill();
u.ctx.restore();
// Nomansland Upper
u.ctx.save();
u.ctx.beginPath();
u.ctx.moveTo(helperLowerBorderIntersectTop.x, flopRateScalarY); // Lower Knee Top
u.ctx.lineTo(helperUpperBorderIntersect.x, flopRateSimdY*1.667); // Upper Helper Knee
u.ctx.lineTo(outerX, flopRateSimdY*1.667); // Upper Inner Border
u.ctx.lineTo(outerX, flopRateScalarY); // Lower Knee Border
u.ctx.closePath();
u.ctx.fillStyle = "rgba(255, 50, 50, 0.1)"; // Red Light
u.ctx.fill();
u.ctx.restore();
}
}
/* Render Scales */

8
web/frontend/src/generic/plots/RooflineLegacy.svelte
View File

@@ -315,10 +315,10 @@
y1,
x2,
y2,
u.valToPos(0.01, "x", true),
u.valToPos(1.0, "y", true), // X-Axis Start Coords
u.valToPos(1000, "x", true),
u.valToPos(1.0, "y", true), // X-Axis End Coords
u.valToPos(0.01, "x", true), // x3; X-Axis Start Coord-X
u.valToPos(1.0, "y", true), // y3; X-Axis Start Coord-Y
u.valToPos(1000, "x", true), // x4; X-Axis End Coord-X
u.valToPos(1.0, "y", true), // y4; X-Axis End Coord-Y
);
if (xAxisIntersect.x > x1) {

18
web/frontend/src/generic/plots/Stacked.svelte
View File

@@ -39,63 +39,63 @@
label: "Full",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(0, 110, 0, 0.4)" : "rgba(0, 128, 0, 0.4)",
fill: cbmode ? "rgba(0, 110, 0, 0.6)" : "rgba(0, 128, 0, 0.6)",
stroke: cbmode ? "rgb(0, 110, 0)" : "green",
},
partial: {
label: "Partial",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(235, 172, 35, 0.4)" : "rgba(255, 215, 0, 0.4)",
fill: cbmode ? "rgba(235, 172, 35, 0.6)" : "rgba(255, 215, 0, 0.6)",
stroke: cbmode ? "rgb(235, 172, 35)" : "gold",
},
failed: {
label: "Failed",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgb(181, 29, 20, 0.4)" : "rgba(255, 0, 0, 0.4)",
fill: cbmode ? "rgb(181, 29, 20, 0.6)" : "rgba(255, 0, 0, 0.6)",
stroke: cbmode ? "rgb(181, 29, 20)" : "red",
},
idle: {
label: "Idle",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(0, 140, 249, 0.4)" : "rgba(0, 0, 255, 0.4)",
fill: cbmode ? "rgba(0, 140, 249, 0.6)" : "rgba(0, 0, 255, 0.6)",
stroke: cbmode ? "rgb(0, 140, 249)" : "blue",
},
allocated: {
label: "Allocated",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(0, 110, 0, 0.4)" : "rgba(0, 128, 0, 0.4)",
fill: cbmode ? "rgba(0, 110, 0, 0.6)" : "rgba(0, 128, 0, 0.6)",
stroke: cbmode ? "rgb(0, 110, 0)" : "green",
},
reserved: {
label: "Reserved",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(209, 99, 230, 0.4)" : "rgba(255, 0, 255, 0.4)",
fill: cbmode ? "rgba(209, 99, 230, 0.6)" : "rgba(255, 0, 255, 0.6)",
stroke: cbmode ? "rgb(209, 99, 230)" : "magenta",
},
mixed: {
label: "Mixed",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(235, 172, 35, 0.4)" : "rgba(255, 215, 0, 0.4)",
fill: cbmode ? "rgba(235, 172, 35, 0.6)" : "rgba(255, 215, 0, 0.6)",
stroke: cbmode ? "rgb(235, 172, 35)" : "gold",
},
down: {
label: "Down",
scale: "y",
width: lineWidth,
fill: cbmode ? "rgba(181, 29 ,20, 0.4)" : "rgba(255, 0, 0, 0.4)",
fill: cbmode ? "rgba(181, 29 ,20, 0.6)" : "rgba(255, 0, 0, 0.6)",
stroke: cbmode ? "rgb(181, 29, 20)" : "red",
},
unknown: {
label: "Unknown",
scale: "y",
width: lineWidth,
fill: "rgba(0, 0, 0, 0.4)",
fill: "rgba(0, 0, 0, 0.6)",
stroke: "black",
}
};