Skip to content

Minor cleanup and adjustments to metrics HTML report #499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 18, 2025
Merged

Minor cleanup and adjustments to metrics HTML report #499

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8239de2
consistent legend for line charts
harp-intel Sep 18, 2025
0b44209
add consistent color definitions for TMA categories in sunburst charts
harp-intel Sep 18, 2025
e621e55
labels
harp-intel Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 124 additions & 77 deletions cmd/metrics/resources/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,113 @@
const description = <<.DESCRIPTION>>
const metadata = <<.METADATA>>
const system_info = <<.SYSTEMINFO>>
// Define consistent colors for TMA categories with child variations
const tmaColors = {
// Blue family for Frontend
'Frontend': '#5470c6',
'FrontendChild': '#7a90d3', // Lighter blue for all Frontend children

// Green family for Backend
'Backend': '#91cc75',
'BackendChild': '#b3e0a0', // Lighter green for all Backend children

// Yellow/Orange family for BadSpeculation
'BadSpeculation': '#fac858',
'BadSpeculationChild': '#ffda8a', // Lighter yellow for all BadSpeculation children

// Red family for Retiring
'Retiring': '#ee6666',
'RetiringChild': '#f38989' // Lighter red for all Retiring children
};

let tmasunburst = {
tooltip: {},
color: [tmaColors.Frontend, tmaColors.BadSpeculation, tmaColors.Backend, tmaColors.Retiring],
series: {
nodeClick: false,
type: "sunburst",
radius: [60, "90%"],
itemStyle: {
borderRadius: 7,
borderWidth: 2,
},
data: [
{
name: "<<.FRONTEND_LABEL>>",
value: Math.round(<<.FRONTEND >> * 10) / 10,
itemStyle: { color: tmaColors.Frontend },
children: [
{
name: "<<.FETCHBANDWIDTH_LABEL>>",
value: Math.round(<<.FETCHBANDWIDTH >> * 10) / 10,
itemStyle: { color: tmaColors.FrontendChild }
},
{
name: "<<.FETCHLATENCY_LABEL>>",
value: Math.round(<<.FETCHLATENCY >> * 10) / 10,
itemStyle: { color: tmaColors.FrontendChild }
},
]
},
{
name: "<<.BADSPECULATION_LABEL>>",
value: Math.round(<<.BADSPECULATION >> * 10) / 10,
itemStyle: { color: tmaColors.BadSpeculation },
children: [
{
name: "<<.BRANCHMISPREDICTS_LABEL>>",
value: Math.round(<<.BRANCHMISPREDICTS >> * 10) / 10,
itemStyle: { color: tmaColors.BadSpeculationChild }
},
{
name: "<<.MACHINECLEARS_LABEL>>",
value: Math.round(<<.MACHINECLEARS >> * 10) / 10,
itemStyle: { color: tmaColors.BadSpeculationChild }
},
]
},
{
name: "<<.BACKEND_LABEL>>",
value: Math.round(<<.BACKEND >> * 10) / 10,
itemStyle: { color: tmaColors.Backend },
children: [
{
name: "<<.CORE_LABEL>>",
value: Math.round(<<.COREDATA >> * 10) / 10,
itemStyle: { color: tmaColors.BackendChild }
},
{
name: "<<.MEMORY_LABEL>>",
value: Math.round(<<.MEMORY >> * 10) / 10,
itemStyle: { color: tmaColors.BackendChild }
},
],
},
{
name: "<<.RETIRING_LABEL>>",
value: Math.round(<<.RETIRING >> * 10) / 10,
itemStyle: { color: tmaColors.Retiring },
children: [
{
name: "<<.LIGHTOPS_LABEL>>",
value: Math.round(<<.LIGHTOPS >> * 10) / 10,
itemStyle: { color: tmaColors.RetiringChild }
},
{
name: "<<.HEAVYOPS_LABEL>>",
value: Math.round(<<.HEAVYOPS >> * 10) / 10,
itemStyle: { color: tmaColors.RetiringChild }
},
]
},
],
radius: [20, "100%"],
label: {
rotate: "radial",
},
},
}
// the common config for all line charts
const base_line = {
xAxis: {
type: "category",
Expand All @@ -185,11 +292,18 @@
trigger: 'axis',
valueFormatter: (value) => value.toFixed(2),
},
legend: {},
legend: {
orient: 'horizontal',
bottom: 0,
left: 'center',
show: true,
selectedMode: false, // Prevents toggling series visibility by clicking on legend
},
}

let level1tma = {
...base_line,
color: [tmaColors.Frontend, tmaColors.Backend, tmaColors.Retiring, tmaColors.BadSpeculation],
series: [
{
name: "Front-end",
Expand Down Expand Up @@ -218,6 +332,7 @@
...base_line,
series: [
{
name: "CPU Utilization %",
type: 'line',
data: <<.CPUUTIL>>,
}
Expand All @@ -228,6 +343,7 @@
...base_line,
series: [
{
name: "CPI",
type: 'line',
data: <<.CPIDATA>>,
}
Expand All @@ -238,6 +354,7 @@
...base_line,
series: [
{
name: "CPU Frequency (GHz)",
type: 'line',
data: <<.CPUFREQ>>,
}
Expand All @@ -248,6 +365,7 @@
...base_line,
series: [
{
name: "Remote DRAM Reads %",
type: 'line',
data: <<.REMOTENUMA>>,
}
Expand Down Expand Up @@ -300,6 +418,7 @@
...base_line,
series: [
{
name: "Package Power (Watts)",
type: 'line',
data: <<.PKGPOWER>>,
}
Expand All @@ -310,6 +429,7 @@
...base_line,
series: [
{
name: "DRAM Power (Watts)",
type: 'line',
data: <<.DRAMPOWER>>,
}
Expand Down Expand Up @@ -418,80 +538,7 @@
</ul>
</Grid>
<Grid item xs={7}>
<ReactECharts style={{ minHeight: "400px" }} option={{
tooltip: {},
series: {
nodeClick: false,
type: "sunburst",
radius: [60, "90%"],
itemStyle: {
borderRadius: 7,
borderWidth: 2,
},
data: [
{
name: "<<.FRONTEND_LABEL>>",
value: Math.round(<<.FRONTEND>> * 10) / 10,
children:[
{
name: "<<.FETCHBANDWIDTH_LABEL>>",
value: Math.round(<<.FETCHBANDWIDTH>> * 10) / 10,
},
{
name: "<<.FETCHLATENCY_LABEL>>",
value: Math.round(<<.FETCHLATENCY>> * 10) / 10,
},
]
},
{
name: "<<.BADSPECULATION_LABEL>>",
value: Math.round(<<.BADSPECULATION>> * 10) / 10,
children: [
{
name: "<<.BRANCHMISPREDICTS_LABEL>>",
value: Math.round(<<.BRANCHMISPREDICTS>> * 10) / 10,
},
{
name: "<<.MACHINECLEARS_LABEL>>",
value: Math.round(<<.MACHINECLEARS>> * 10) / 10,
},
]
},
{
name: "<<.BACKEND_LABEL>>",
value: Math.round(<<.BACKEND>> * 10) / 10,
children: [
{
name: "<<.CORE_LABEL>>",
value: Math.round(<<.COREDATA>> * 10) / 10,
},
{
name: "<<.MEMORY_LABEL>>",
value: Math.round(<<.MEMORY>> * 10) / 10,
},
],
},
{
name: "<<.RETIRING_LABEL>>",
value: Math.round(<<.RETIRING>> * 10) / 10,
children: [
{
name: "<<.LIGHTOPS_LABEL>>",
value: Math.round(<<.LIGHTOPS>> * 10) / 10,
},
{
name: "<<.HEAVYOPS_LABEL>>",
value: Math.round(<<.HEAVYOPS>> * 10) / 10,
},
]
},
],
radius: [20, "100%"],
label: {
rotate: "radial",
},
},
}} />
<ReactECharts style={{ minHeight: "400px" }} option={tmasunburst} />
</Grid>
</Grid>
<Grid container>
Expand Down Expand Up @@ -575,7 +622,7 @@
Remote DRAM reads %
</Typography>
<Typography variant="body1">
The memory reads that miss the last level cache (LLC) and are addressed to another socket's DRAM (remote DRAM) as a percentage of total memory read accesses. This does not include LLC prefetches.
The memory reads that miss the last level cache (LLC) and are addressed to remote DRAM as a percentage of total memory read accesses. This does not include LLC prefetches.
</Typography>
</Grid>
<Grid item xs={7}>
Expand All @@ -588,7 +635,7 @@
Cache MPI (misses per instruction)
</Typography>
<Typography variant="body1">
The ratio of the number of requests missing cache to the total number of completed instructions, at each level of cache (L1, L2 and LLC)
The ratio of the number of requests missing cache to the total number of completed instructions, at each level of cache (L1d, L2 and LLC)
</Typography>
</Grid>
<Grid item xs={7}>
Expand Down