mirror of
git://git.yoctoproject.org/poky.git
synced 2025-07-19 12:59:02 +02:00
scripts/buildperf: Add chart tabs for commit count/time
We triggered a test of an older revision to narrow down when performance changed. The issue is that git's timestamps are granular to 1s. We'll usually merge a set of commits at the same time so they will all have the same timestamp for a block of them. This means that even if we use the commit date, all the points can't be distinguished on the graph. The author date doesn't work either as the commits are not merged in author date order. To solve this this patch adds the commit_count chart as a separate tab next to the start_time chart (From OE-Core rev: b263edd33f6c895238d81ef148c0445fcd0aa268) Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
Ninette Adhikari
Richard Purdie
parent
e0a7a6eb09
commit
9f31270600
|
|
@ -26,26 +26,36 @@
|
|||
]
|
||||
});
|
||||
|
||||
const commitCountList = rawData.map(([commit, value, time]) => {
|
||||
return commit
|
||||
});
|
||||
|
||||
const commitCountData = rawData.map(([commit, value, time]) => {
|
||||
return updateValue(value)
|
||||
});
|
||||
|
||||
// Set chart options
|
||||
const option = {
|
||||
const option_start_time = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
enterable: true,
|
||||
position: function (point, params, dom, rect, size) {
|
||||
return [point[0]-150, '10%'];
|
||||
return [point[0]+20, '10%'];
|
||||
},
|
||||
formatter: function (param) {
|
||||
const value = param[0].value[1]
|
||||
const sample = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
|
||||
const formattedDate = new Date(sample[0][2] * 1000).toString().replace(/GMT[+-]\d{4}/, '').replace(/\(.*\)/, '(CEST)');
|
||||
|
||||
// Add commit hash to the tooltip as a link
|
||||
const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}`
|
||||
if ('{{ measurement.value_type.quantity }}' == 'time') {
|
||||
const hours = Math.floor(value/60)
|
||||
const minutes = Math.floor(value % 60)
|
||||
const seconds = Math.floor((value * 60) % 60)
|
||||
return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>`
|
||||
return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
|
||||
}
|
||||
return `<strong>Size:</strong> ${value.toFixed(2)} MB, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>`
|
||||
return `<strong>Size:</strong> ${value.toFixed(2)} MB, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
|
||||
;}
|
||||
},
|
||||
xAxis: {
|
||||
|
|
@ -79,22 +89,82 @@
|
|||
]
|
||||
};
|
||||
|
||||
const option_commit_count = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
enterable: true,
|
||||
position: function (point, params, dom, rect, size) {
|
||||
return [point[0]+20, '10%'];
|
||||
},
|
||||
formatter: function (param) {
|
||||
const value = param[0].value
|
||||
const sample = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
|
||||
const formattedDate = new Date(sample[0][2] * 1000).toString().replace(/GMT[+-]\d{4}/, '').replace(/\(.*\)/, '(CEST)');
|
||||
// Add commit hash to the tooltip as a link
|
||||
const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}`
|
||||
if ('{{ measurement.value_type.quantity }}' == 'time') {
|
||||
const hours = Math.floor(value/60)
|
||||
const minutes = Math.floor(value % 60)
|
||||
const seconds = Math.floor((value * 60) % 60)
|
||||
return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
|
||||
}
|
||||
return `<strong>Size:</strong> ${value.toFixed(2)} MB, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
|
||||
;}
|
||||
},
|
||||
xAxis: {
|
||||
name: 'Commit count',
|
||||
type: 'category',
|
||||
data: commitCountList
|
||||
},
|
||||
yAxis: {
|
||||
name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB',
|
||||
type: 'value',
|
||||
min: function(value) {
|
||||
return Math.round(value.min - 0.5);
|
||||
},
|
||||
max: function(value) {
|
||||
return Math.round(value.max + 0.5);
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider',
|
||||
xAxisIndex: 0,
|
||||
filterMode: 'none'
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '{{ measurement.value_type.quantity }}',
|
||||
type: 'line',
|
||||
step: 'start',
|
||||
symbol: 'none',
|
||||
data: commitCountData
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Draw chart
|
||||
const chart_div = document.getElementById('{{ chart_elem_id }}');
|
||||
// Set dark mode
|
||||
let measurement_chart
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
measurement_chart= echarts.init(chart_div, 'dark', {
|
||||
height: 320
|
||||
});
|
||||
} else {
|
||||
measurement_chart= echarts.init(chart_div, null, {
|
||||
height: 320
|
||||
const draw_chart = (chart_id, option) => {
|
||||
let chart_name
|
||||
const chart_div = document.getElementById(chart_id);
|
||||
// Set dark mode
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
chart_name= echarts.init(chart_div, 'dark', {
|
||||
height: 320
|
||||
});
|
||||
} else {
|
||||
chart_name= echarts.init(chart_div, null, {
|
||||
height: 320
|
||||
});
|
||||
}
|
||||
// Change chart size with browser resize
|
||||
window.addEventListener('resize', function() {
|
||||
chart_name.resize();
|
||||
});
|
||||
return chart_name.setOption(option);
|
||||
}
|
||||
// Change chart size with browser resize
|
||||
window.addEventListener('resize', function() {
|
||||
measurement_chart.resize();
|
||||
});
|
||||
measurement_chart.setOption(option);
|
||||
|
||||
draw_chart('{{ chart_elem_start_time_id }}', option_start_time)
|
||||
draw_chart('{{ chart_elem_commit_count_id }}', option_commit_count)
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
{% for test in test_data %}
|
||||
{% if test.status == 'SUCCESS' %}
|
||||
{% for measurement in test.measurements %}
|
||||
{% set chart_elem_id = test.name + '_' + measurement.name + '_chart' %}
|
||||
{% set chart_elem_start_time_id = test.name + '_' + measurement.name + '_chart_start_time' %}
|
||||
{% set chart_elem_commit_count_id = test.name + '_' + measurement.name + '_chart_commit_count' %}
|
||||
{% include 'measurement_chart.html' %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
|
@ -116,6 +117,22 @@ a {
|
|||
a:hover {
|
||||
color: #8080ff;
|
||||
}
|
||||
button {
|
||||
background-color: #F3F4F6;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 10px 12px;
|
||||
transition: 0.3s;
|
||||
border-radius: 8px;
|
||||
color: #3A4353;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #d6d9e0;
|
||||
}
|
||||
.tab button.active {
|
||||
background-color: #d6d9e0;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #e9e8fa;
|
||||
|
|
@ -126,6 +143,16 @@ a:hover {
|
|||
--trborder: #212936;
|
||||
--chartborder: #b1b0bf;
|
||||
}
|
||||
button {
|
||||
background-color: #28303E;
|
||||
color: #fff;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #545a69;
|
||||
}
|
||||
.tab button.active {
|
||||
background-color: #545a69;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -233,7 +260,18 @@ a:hover {
|
|||
<tr>
|
||||
<td style="width: 75%">
|
||||
{# Linechart #}
|
||||
<div id="{{ test.name }}_{{ measurement.name }}_chart"></div>
|
||||
<div class="tab {{ test.name }}_{{ measurement.name }}_tablinks">
|
||||
<button class="tablinks active" onclick="openChart(event, '{{ test.name }}_{{ measurement.name }}_start_time', '{{ test.name }}_{{ measurement.name }}')">Chart with start time</button>
|
||||
<button class="tablinks" onclick="openChart(event, '{{ test.name }}_{{ measurement.name }}_commit_count', '{{ test.name }}_{{ measurement.name }}')">Chart with commit count</button>
|
||||
</div>
|
||||
<div class="{{ test.name }}_{{ measurement.name }}_tabcontent">
|
||||
<div id="{{ test.name }}_{{ measurement.name }}_start_time" class="tabcontent" style="display: block;">
|
||||
<div id="{{ test.name }}_{{ measurement.name }}_chart_start_time"></div>
|
||||
</div>
|
||||
<div id="{{ test.name }}_{{ measurement.name }}_commit_count" class="tabcontent" style="display: none;">
|
||||
<div id="{{ test.name }}_{{ measurement.name }}_chart_commit_count"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{# Measurement statistics #}
|
||||
|
|
@ -340,6 +378,31 @@ a:hover {
|
|||
<div class="preformatted">{{ test.message }}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div></body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openChart(event, chartType, chartName) {
|
||||
let i, tabcontents, tablinks
|
||||
tabcontents = document.querySelectorAll(`.${chartName}_tabcontent > .tabcontent`);
|
||||
tabcontents.forEach((tabcontent) => {
|
||||
tabcontent.style.display = "none";
|
||||
});
|
||||
|
||||
tablinks = document.querySelectorAll(`.${chartName}_tablinks > .tablinks`);
|
||||
tablinks.forEach((tabLink) => {
|
||||
tabLink.classList.remove('active');
|
||||
});
|
||||
|
||||
const targetTab = document.getElementById(chartType)
|
||||
targetTab.style.display = "block";
|
||||
|
||||
// Call resize on the ECharts instance to redraw the chart
|
||||
const chartContainer = targetTab.querySelector('div')
|
||||
echarts.init(chartContainer).resize();
|
||||
|
||||
event.currentTarget.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user