Skip to content

Commit 0ff5f57

Browse files
ninetteadhikarininetteadhikari
committed
oe-build-perf-report: Improve report styling and add descriptions
Styling updates are added including page margin, labels for x and y axis, tooltip, and section descriptions.
1 parent 8704001 commit 0ff5f57

File tree

2 files changed

+78
-40
lines changed

2 files changed

+78
-40
lines changed

‎scripts/lib/build_perf/html/measurement_chart.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,29 @@
1313
// Convert raw data to the format: [time, value]
1414
const data = rawData.map(([commit, value, time]) => {
1515
return [
16-
new Date(time * 1000).getTime(), // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
17-
Array.isArray(value) ? convertToMinute(value) : value // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
16+
// The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
17+
new Date(time * 1000).getTime(),
18+
// Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
19+
Array.isArray(value) ? convertToMinute(value) : value
1820
]
1921
});
2022

2123
// Set chart options
2224
const option = {
2325
tooltip: {
2426
trigger: 'axis',
25-
position: function (pt) {
26-
return [pt[0], '10%'];
27-
},
28-
valueFormatter: (value) => value.toFixed(2)
27+
valueFormatter: (value) => {
28+
const hours = Math.floor(value/60)
29+
const minutes = Math.floor(value % 60)
30+
const seconds = Math.floor((value * 60) % 60)
31+
return hours + ':' + minutes + ':' + seconds
32+
}
2933
},
3034
xAxis: {
3135
type: 'time',
3236
},
3337
yAxis: {
34-
name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration (minutes)' : 'Disk size (MB)',
38+
name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB',
3539
type: 'value',
3640
min: function(value) {
3741
return Math.round(value.min - 0.5);
@@ -42,14 +46,10 @@
4246
},
4347
dataZoom: [
4448
{
45-
type: 'inside',
46-
start: 0,
47-
end: 100
49+
type: 'slider',
50+
xAxisIndex: 0,
51+
filterMode: 'none'
4852
},
49-
{
50-
start: 0,
51-
end: 100
52-
}
5353
],
5454
series: [
5555
{

‎scripts/lib/build_perf/html/report.html‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,15 @@
2424
text-align: left;
2525
border-collapse: collapse;
2626
}
27-
.meta-table tr:nth-child(even){background-color: #f2f2f2}
28-
meta-table th, .meta-table td {
29-
padding: 4px;
30-
}
3127
.summary {
32-
margin: 0;
3328
font-size: 14px;
3429
text-align: left;
3530
border-collapse: collapse;
3631
}
37-
summary th, .meta-table td {
38-
padding: 4px;
39-
}
4032
.measurement {
4133
padding: 8px 0px 8px 8px;
4234
border: 2px solid #f0f0f0;
43-
margin-bottom: 10px;
35+
margin: 1.5rem 0;
4436
}
4537
.details {
4638
margin: 0;
@@ -60,32 +52,73 @@
6052
background-color: #f0f0f0;
6153
margin-left: 10px;
6254
}
63-
hr {
64-
color: #f0f0f0;
55+
.card-container {
56+
border-bottom-width: 1px;
57+
padding: 1.25rem 3rem;
58+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
59+
border-radius: 0.25rem;
60+
}
61+
body {
62+
font-family: 'Helvetica', sans-serif;
63+
margin: 3rem 8rem;
64+
}
65+
h1 {
66+
text-align: center;
6567
}
6668
h2 {
67-
font-size: 20px;
69+
font-size: 1.5rem;
6870
margin-bottom: 0px;
6971
color: #707070;
72+
padding-top: 1.5rem;
7073
}
7174
h3 {
72-
font-size: 16px;
75+
font-size: 1.3rem;
7376
margin: 0px;
7477
color: #707070;
78+
padding: 1.5rem 0;
79+
}
80+
h4 {
81+
font-size: 14px;
82+
font-weight: lighter;
83+
line-height: 1.2rem;
84+
margin: auto;
85+
padding-top: 1rem;
86+
}
87+
table {
88+
margin-top: 1.5rem;
89+
line-height: 2rem;
90+
}
91+
tr {
92+
border-bottom: 1px solid #e5e7eb;
93+
}
94+
tr:first-child {
95+
border-bottom: 1px solid #9ca3af;
96+
}
97+
tr:last-child {
98+
border-bottom: none;
99+
}
100+
a {
101+
text-decoration: none;
102+
font-weight: bold;
103+
color: #0000EE;
104+
}
105+
a:hover {
106+
color: #8080ff;
75107
}
76108
</style>
77109

78110
<title>{{ title }}</title>
79111
</head>
80112

81113
{% macro poky_link(commit) -%}
82-
<a href="http://git.yoctoproject.org/cgit/cgit.cgi/poky/log/?id={{ commit }}">{{ commit[0:11] }}</a>
114+
<a href="http://git.yoctoproject.org/cgit/cgit.cgi/poky/log/?id={{ commit }}">{{ commit[0:11] }}</a>
83115
{%- endmacro %}
84116

85-
<body><div style="width: 700px">
117+
<body><div>
118+
<h1 style="text-align: center;">Performance Test Report</h1>
86119
{# Test metadata #}
87120
<h2>General</h2>
88-
<hr>
121+
<h4>The table provides an overview of the comparison between two selected commits from the same branch.</h4>
89122
<table class="meta-table" style="width: 100%">
90123
<tr>
91124
<th></th>
@@ -108,19 +141,21 @@ <h2>General</h2>
108141

109142
{# Test result summary #}
110143
<h2>Test result summary</h2>
111-
<hr>
144+
<h4>The test summary presents a thorough breakdown of each test conducted on the branch, including details such as build time and disk space consumption. Additionally, it gives insights into the average time taken for test execution, along with absolute and relative values for a better understanding.</h4>
112145
<table class="summary" style="width: 100%">
146+
<tr>
147+
<th>Test name</th>
148+
<th>Measurement description</th>
149+
<th>Mean value</th>
150+
<th>Absolute difference</th>
151+
<th>Relative difference</th>
152+
</tr>
113153
{% for test in test_data %}
114-
{% if loop.index is even %}
115-
{% set row_style = 'style="background-color: #f2f2f2"' %}
116-
{% else %}
117-
{% set row_style = 'style="background-color: #ffffff"' %}
118-
{% endif %}
119154
{% if test.status == 'SUCCESS' %}
120155
{% for measurement in test.measurements %}
121156
<tr {{ row_style }}>
122157
{% if loop.index == 1 %}
123-
<td>{{ test.name }}: {{ test.description }}</td>
158+
<td><a href=#{{test.name}}>{{ test.name }}: {{ test.description }}</a></td>
124159
{% else %}
125160
{# add empty cell in place of the test name#}
126161
<td></td>
@@ -149,10 +184,12 @@ <h2>Test result summary</h2>
149184
</table>
150185

151186
{# Detailed test results #}
187+
<h2>Test details</h2>
188+
<h4>The following section provides details of each test, accompanied by charts representing build time and disk usage over time or by commit number.</h4>
152189
{% for test in test_data %}
153-
<h2>{{ test.name }}: {{ test.description }}</h2>
154-
<hr>
190+
<h3 style="color: #000;" id={{test.name}}>{{ test.name }}: {{ test.description }}</h3>
155191
{% if test.status == 'SUCCESS' %}
192+
<div class="card-container">
156193
{% for measurement in test.measurements %}
157194
<div class="measurement">
158195
<h3>{{ measurement.description }}</h3>
@@ -271,7 +308,8 @@ <h3>{{ measurement.description }}</h3>
271308
{% endif %}
272309
{% endif %}
273310
</div>
274-
{% endfor %}
311+
{% endfor %}
312+
</div>
275313
{# Unsuccessful test #}
276314
{% else %}
277315
<span style="font-size: 150%; font-weight: bold; color: red;">{{ test.status }}

0 commit comments

Comments
 (0)