Skip to content

Commit d8d67a5

Browse files
harp-intelharp-intel
authored
Minor cleanup and adjustments to metrics HTML report (#499)
* consistent legend for line charts Signed-off-by: Harper, Jason M <[email protected]> * add consistent color definitions for TMA categories in sunburst charts Signed-off-by: Harper, Jason M <[email protected]> * labels Signed-off-by: Harper, Jason M <[email protected]> --------- Signed-off-by: Harper, Jason M <[email protected]>
1 parent ec36205 commit d8d67a5

File tree

1 file changed

+124
-77
lines changed

1 file changed

+124
-77
lines changed

‎cmd/metrics/resources/base.html‎

Lines changed: 124 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,113 @@
168168
const description = <<.DESCRIPTION>>
169169
const metadata = <<.METADATA>>
170170
const system_info = <<.SYSTEMINFO>>
171+
// Define consistent colors for TMA categories with child variations
172+
const tmaColors = {
173+
// Blue family for Frontend
174+
'Frontend': '#5470c6',
175+
'FrontendChild': '#7a90d3', // Lighter blue for all Frontend children
176+
177+
// Green family for Backend
178+
'Backend': '#91cc75',
179+
'BackendChild': '#b3e0a0', // Lighter green for all Backend children
180+
181+
// Yellow/Orange family for BadSpeculation
182+
'BadSpeculation': '#fac858',
183+
'BadSpeculationChild': '#ffda8a', // Lighter yellow for all BadSpeculation children
184+
185+
// Red family for Retiring
186+
'Retiring': '#ee6666',
187+
'RetiringChild': '#f38989' // Lighter red for all Retiring children
188+
};
189+
190+
let tmasunburst = {
191+
tooltip: {},
192+
color: [tmaColors.Frontend, tmaColors.BadSpeculation, tmaColors.Backend, tmaColors.Retiring],
193+
series: {
194+
nodeClick: false,
195+
type: "sunburst",
196+
radius: [60, "90%"],
197+
itemStyle: {
198+
borderRadius: 7,
199+
borderWidth: 2,
200+
},
201+
data: [
202+
{
203+
name: "<<.FRONTEND_LABEL>>",
204+
value: Math.round(<<.FRONTEND >> * 10) / 10,
205+
itemStyle: { color: tmaColors.Frontend },
206+
children: [
207+
{
208+
name: "<<.FETCHBANDWIDTH_LABEL>>",
209+
value: Math.round(<<.FETCHBANDWIDTH >> * 10) / 10,
210+
itemStyle: { color: tmaColors.FrontendChild }
211+
},
212+
{
213+
name: "<<.FETCHLATENCY_LABEL>>",
214+
value: Math.round(<<.FETCHLATENCY >> * 10) / 10,
215+
itemStyle: { color: tmaColors.FrontendChild }
216+
},
217+
]
218+
},
219+
{
220+
name: "<<.BADSPECULATION_LABEL>>",
221+
value: Math.round(<<.BADSPECULATION >> * 10) / 10,
222+
itemStyle: { color: tmaColors.BadSpeculation },
223+
children: [
224+
{
225+
name: "<<.BRANCHMISPREDICTS_LABEL>>",
226+
value: Math.round(<<.BRANCHMISPREDICTS >> * 10) / 10,
227+
itemStyle: { color: tmaColors.BadSpeculationChild }
228+
},
229+
{
230+
name: "<<.MACHINECLEARS_LABEL>>",
231+
value: Math.round(<<.MACHINECLEARS >> * 10) / 10,
232+
itemStyle: { color: tmaColors.BadSpeculationChild }
233+
},
234+
]
235+
},
236+
{
237+
name: "<<.BACKEND_LABEL>>",
238+
value: Math.round(<<.BACKEND >> * 10) / 10,
239+
itemStyle: { color: tmaColors.Backend },
240+
children: [
241+
{
242+
name: "<<.CORE_LABEL>>",
243+
value: Math.round(<<.COREDATA >> * 10) / 10,
244+
itemStyle: { color: tmaColors.BackendChild }
245+
},
246+
{
247+
name: "<<.MEMORY_LABEL>>",
248+
value: Math.round(<<.MEMORY >> * 10) / 10,
249+
itemStyle: { color: tmaColors.BackendChild }
250+
},
251+
],
252+
},
253+
{
254+
name: "<<.RETIRING_LABEL>>",
255+
value: Math.round(<<.RETIRING >> * 10) / 10,
256+
itemStyle: { color: tmaColors.Retiring },
257+
children: [
258+
{
259+
name: "<<.LIGHTOPS_LABEL>>",
260+
value: Math.round(<<.LIGHTOPS >> * 10) / 10,
261+
itemStyle: { color: tmaColors.RetiringChild }
262+
},
263+
{
264+
name: "<<.HEAVYOPS_LABEL>>",
265+
value: Math.round(<<.HEAVYOPS >> * 10) / 10,
266+
itemStyle: { color: tmaColors.RetiringChild }
267+
},
268+
]
269+
},
270+
],
271+
radius: [20, "100%"],
272+
label: {
273+
rotate: "radial",
274+
},
275+
},
276+
}
277+
// the common config for all line charts
171278
const base_line = {
172279
xAxis: {
173280
type: "category",
@@ -185,11 +292,18 @@
185292
trigger: 'axis',
186293
valueFormatter: (value) => value.toFixed(2),
187294
},
188-
legend: {},
295+
legend: {
296+
orient: 'horizontal',
297+
bottom: 0,
298+
left: 'center',
299+
show: true,
300+
selectedMode: false, // Prevents toggling series visibility by clicking on legend
301+
},
189302
}
190303

191304
let level1tma = {
192305
...base_line,
306+
color: [tmaColors.Frontend, tmaColors.Backend, tmaColors.Retiring, tmaColors.BadSpeculation],
193307
series: [
194308
{
195309
name: "Front-end",
@@ -218,6 +332,7 @@
218332
...base_line,
219333
series: [
220334
{
335+
name: "CPU Utilization %",
221336
type: 'line',
222337
data: <<.CPUUTIL>>,
223338
}
@@ -228,6 +343,7 @@
228343
...base_line,
229344
series: [
230345
{
346+
name: "CPI",
231347
type: 'line',
232348
data: <<.CPIDATA>>,
233349
}
@@ -238,6 +354,7 @@
238354
...base_line,
239355
series: [
240356
{
357+
name: "CPU Frequency (GHz)",
241358
type: 'line',
242359
data: <<.CPUFREQ>>,
243360
}
@@ -248,6 +365,7 @@
248365
...base_line,
249366
series: [
250367
{
368+
name: "Remote DRAM Reads %",
251369
type: 'line',
252370
data: <<.REMOTENUMA>>,
253371
}
@@ -300,6 +418,7 @@
300418
...base_line,
301419
series: [
302420
{
421+
name: "Package Power (Watts)",
303422
type: 'line',
304423
data: <<.PKGPOWER>>,
305424
}
@@ -310,6 +429,7 @@
310429
...base_line,
311430
series: [
312431
{
432+
name: "DRAM Power (Watts)",
313433
type: 'line',
314434
data: <<.DRAMPOWER>>,
315435
}
@@ -418,80 +538,7 @@
418538
</ul>
419539
</Grid>
420540
<Grid item xs={7}>
421-
<ReactECharts style={{ minHeight: "400px" }} option={{
422-
tooltip: {},
423-
series: {
424-
nodeClick: false,
425-
type: "sunburst",
426-
radius: [60, "90%"],
427-
itemStyle: {
428-
borderRadius: 7,
429-
borderWidth: 2,
430-
},
431-
data: [
432-
{
433-
name: "<<.FRONTEND_LABEL>>",
434-
value: Math.round(<<.FRONTEND>> * 10) / 10,
435-
children:[
436-
{
437-
name: "<<.FETCHBANDWIDTH_LABEL>>",
438-
value: Math.round(<<.FETCHBANDWIDTH>> * 10) / 10,
439-
},
440-
{
441-
name: "<<.FETCHLATENCY_LABEL>>",
442-
value: Math.round(<<.FETCHLATENCY>> * 10) / 10,
443-
},
444-
]
445-
},
446-
{
447-
name: "<<.BADSPECULATION_LABEL>>",
448-
value: Math.round(<<.BADSPECULATION>> * 10) / 10,
449-
children: [
450-
{
451-
name: "<<.BRANCHMISPREDICTS_LABEL>>",
452-
value: Math.round(<<.BRANCHMISPREDICTS>> * 10) / 10,
453-
},
454-
{
455-
name: "<<.MACHINECLEARS_LABEL>>",
456-
value: Math.round(<<.MACHINECLEARS>> * 10) / 10,
457-
},
458-
]
459-
},
460-
{
461-
name: "<<.BACKEND_LABEL>>",
462-
value: Math.round(<<.BACKEND>> * 10) / 10,
463-
children: [
464-
{
465-
name: "<<.CORE_LABEL>>",
466-
value: Math.round(<<.COREDATA>> * 10) / 10,
467-
},
468-
{
469-
name: "<<.MEMORY_LABEL>>",
470-
value: Math.round(<<.MEMORY>> * 10) / 10,
471-
},
472-
],
473-
},
474-
{
475-
name: "<<.RETIRING_LABEL>>",
476-
value: Math.round(<<.RETIRING>> * 10) / 10,
477-
children: [
478-
{
479-
name: "<<.LIGHTOPS_LABEL>>",
480-
value: Math.round(<<.LIGHTOPS>> * 10) / 10,
481-
},
482-
{
483-
name: "<<.HEAVYOPS_LABEL>>",
484-
value: Math.round(<<.HEAVYOPS>> * 10) / 10,
485-
},
486-
]
487-
},
488-
],
489-
radius: [20, "100%"],
490-
label: {
491-
rotate: "radial",
492-
},
493-
},
494-
}} />
541+
<ReactECharts style={{ minHeight: "400px" }} option={tmasunburst} />
495542
</Grid>
496543
</Grid>
497544
<Grid container>
@@ -575,7 +622,7 @@
575622
Remote DRAM reads %
576623
</Typography>
577624
<Typography variant="body1">
578-
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.
625+
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.
579626
</Typography>
580627
</Grid>
581628
<Grid item xs={7}>
@@ -588,7 +635,7 @@
588635
Cache MPI (misses per instruction)
589636
</Typography>
590637
<Typography variant="body1">
591-
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)
638+
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)
592639
</Typography>
593640
</Grid>
594641
<Grid item xs={7}>

0 commit comments

Comments
 (0)