mirror of
https://github.com/enso-org/enso.git
synced 2024-12-25 15:53:31 +03:00
3a3bef0b46
Creates a new [Benchmarks upload](https://github.com/enso-org/enso/pull/9075/files#diff-8859b4f24c2f25d300fe800ee431d7f9f7e68de459395a7e9b22abf79440c862) GitHub action that fetches all the latest benchmark results, and uploads them on the website hosted on https://github.com/enso-org/engine-benchmark-results repo. The results are stored in that repo in a bunch of JSON files. # Important Notes The new *Benchmarks upload* action is scheduled to run after either "Engine benchmarks" or "Standard library benchmarks" jobs are complete.
393 lines
16 KiB
HTML
393 lines
16 KiB
HTML
{# Input data to this template: JinjaData as defined by `bench_download.py` #}
|
|
<!doctype html>
|
|
<meta charset="UTF-8" />
|
|
<html lang="en">
|
|
<head>
|
|
<title>{{ bench_source.value }} benchmark results</title>
|
|
<!--Load the AJAX API-->
|
|
<script
|
|
type="text/javascript"
|
|
src="https://www.gstatic.com/charts/loader.js"
|
|
></script>
|
|
<!-- Include Bootstrap -->
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link href="styles.css" rel="stylesheet" />
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script type="text/javascript">
|
|
// Load the Visualization API and the corechart package.
|
|
google.charts.load('current', {'packages':['corechart']});
|
|
|
|
// Global variable declarations
|
|
const dateColIdx = 0;
|
|
const branchNames = ['{{ branches|join('\',\n \'') }}'];
|
|
const tooltipColIdx = branchNames.length + 1;
|
|
// Availability of the data.
|
|
const sinceDate = new Date(
|
|
{{ since.year }},
|
|
{{ since.month - 1 }},
|
|
{{ since.day }},
|
|
{{ since.hour }},
|
|
{{ since.minute }}
|
|
);
|
|
const untilDate = new Date(
|
|
{{ until.year }},
|
|
{{ until.month - 1 }},
|
|
{{ until.day }},
|
|
{{ until.hour }},
|
|
{{ until.minute }}
|
|
);
|
|
// This var will be rewritten once a filter is applied
|
|
let displaySinceDate = new Date(
|
|
{{ display_since.year }},
|
|
{{ display_since.month - 1 }},
|
|
{{ display_since.day }},
|
|
{{ display_since.hour }},
|
|
{{ display_since.minute }}
|
|
);
|
|
|
|
/**
|
|
* A helper function, not used in the production code.
|
|
* @param dataTable Google chart DataTable
|
|
* @returns {string} representation of the data table.
|
|
*/
|
|
function dataTableToString(dataTable) {
|
|
let dataTableString = "";
|
|
for (let rowIdx = 0; rowIdx < dataTable.getNumberOfRows(); rowIdx++) {
|
|
for (let colIdx = 0; colIdx < dataTable.getNumberOfColumns(); colIdx++) {
|
|
let value = dataTable.getValue(rowIdx, colIdx);
|
|
if (typeof(value) === 'string') {
|
|
value = value.replace("\n", " ");
|
|
}
|
|
dataTableString += value + " | ";
|
|
}
|
|
dataTableString += "\n";
|
|
}
|
|
return dataTableString;
|
|
}
|
|
|
|
{% for bench_data in bench_datas %}
|
|
let chart_{{ bench_data.id }} = null;
|
|
let data_table_{{ bench_data.id }} = null;
|
|
|
|
const bench_data_{{ bench_data.id }} = {
|
|
{% for branch_name, datapoints in bench_data.branches_datapoints.items() %}
|
|
'{{ branch_name }}': [
|
|
{% for datapoint in datapoints %}
|
|
{
|
|
"date": new Date(
|
|
{{ datapoint.timestamp.year }},
|
|
{{ datapoint.timestamp.month - 1 }},
|
|
{{ datapoint.timestamp.day }},
|
|
{{ datapoint.timestamp.hour }},
|
|
{{ datapoint.timestamp.minute }}
|
|
),
|
|
"score": {{ datapoint.score }},
|
|
"score-diff": "{{ datapoint.score_diff }}",
|
|
"score-diff-perc": "{{ datapoint.score_diff_perc }}",
|
|
"tooltip": "{{ datapoint.tooltip }}",
|
|
"bench-run-url": "{{ datapoint.bench_run_url }}",
|
|
"commit-id": "{{ datapoint.commit_id }}",
|
|
"commit-msg": "{{ datapoint.commit_msg }}",
|
|
"commit-author": "{{ datapoint.commit_author }}",
|
|
"commit-url": "{{ datapoint.commit_url }}",
|
|
"commit-date": new Date(
|
|
{{ datapoint.timestamp.year }},
|
|
{{ datapoint.timestamp.month - 1 }},
|
|
{{ datapoint.timestamp.day }},
|
|
{{ datapoint.timestamp.hour }},
|
|
{{ datapoint.timestamp.minute }}
|
|
),
|
|
},
|
|
{% endfor %}
|
|
],
|
|
{% endfor %}
|
|
};
|
|
|
|
/**
|
|
* Draws a chart for {{ bench_data.id }} benchmark.
|
|
*/
|
|
function draw_{{ bench_data.id }}() {
|
|
if (data_table_{{ bench_data.id }} === null) {
|
|
data_table_{{ bench_data.id }} = new google.visualization.DataTable();
|
|
data_table_{{ bench_data.id }}.addColumn('datetime', 'commit_timestamp');
|
|
for (let branchName of branchNames) {
|
|
data_table_{{ bench_data.id }}.addColumn({type: "number", role:"data", label:branchName});
|
|
}
|
|
data_table_{{ bench_data.id }}.addColumn({type:'string', role:'tooltip'});
|
|
} else {
|
|
// Clear data_table
|
|
let rowNum = data_table_{{ bench_data.id }}.getNumberOfRows();
|
|
data_table_{{ bench_data.id }}.removeRows(0, rowNum);
|
|
}
|
|
for (let branchName of branchNames) {
|
|
bench_data_{{ bench_data.id }}[branchName].forEach(function (benchRowData) {
|
|
if (benchRowData["date"] > displaySinceDate) {
|
|
let branchColIdx = data_table_{{ bench_data.id }}.getColumnIndex(branchName)
|
|
let row = new Array(2 + branchNames.length);
|
|
row.fill(null);
|
|
row[dateColIdx] = benchRowData["date"]
|
|
row[tooltipColIdx] = benchRowData["tooltip"]
|
|
row[branchColIdx] = benchRowData["score"]
|
|
data_table_{{ bench_data.id }}.addRow(row)
|
|
}
|
|
})
|
|
}
|
|
let options = {
|
|
// So that points are visible, with pointSize=0, there is only a line
|
|
'pointSize': 5,
|
|
'explorer': {
|
|
'axis': 'horizontal',
|
|
'actions': ['dragToZoom', 'rightClickToReset']
|
|
}
|
|
};
|
|
if (chart_{{ bench_data.id }} === null) {
|
|
chart_{{ bench_data.id }} = new google.visualization.LineChart(document.getElementById('{{ bench_data.id }}'));
|
|
// Attach selection event listener to the chart
|
|
google.visualization.events.addListener(chart_{{ bench_data.id }}, 'select', select_callback_{{ bench_data.id }});
|
|
} else {
|
|
chart_{{ bench_data.id }}.clearChart();
|
|
}
|
|
chart_{{ bench_data.id }}.draw(data_table_{{ bench_data.id }}, options);
|
|
}
|
|
|
|
function select_callback_{{ bench_data.id }}() {
|
|
let selection = chart_{{ bench_data.id }}.getSelection();
|
|
// Check if a specific element is selected, and not the whole line
|
|
// More points can be selected, but we care only about the first one
|
|
if (selection.length > 0 && selection[0].row != null && selection[0].column != null) {
|
|
let rowIdx = selection[0].row;
|
|
let selectedDate = data_table_{{ bench_data.id }}.getValue(rowIdx, dateColIdx);
|
|
let tooltip = data_table_{{ bench_data.id }}.getValue(rowIdx, tooltipColIdx);
|
|
let branchRegexp = new RegExp("branch = (.+)\n")
|
|
let match = tooltip.match(branchRegexp)
|
|
console.assert(match !== undefined)
|
|
let selectedBranch = match[1]
|
|
let selectedBranchData = bench_data_{{ bench_data.id }}[selectedBranch].find(function (benchRowData) {
|
|
return benchRowData["date"] === selectedDate
|
|
})
|
|
let commitId = selectedBranchData["commit-id"];
|
|
let commitAuthor = selectedBranchData["commit-author"];
|
|
let commitMsg = selectedBranchData["commit-msg"];
|
|
let benchRunURL = selectedBranchData["bench-run-url"];
|
|
let commitURL = selectedBranchData["commit-url"];
|
|
let score = selectedBranchData["score"];
|
|
let scoreDiff = selectedBranchData["score-diff"];
|
|
let scoreDiffPerc = selectedBranchData["score-diff-perc"];
|
|
let commitDate = selectedBranchData["commit-date"];
|
|
console.assert(commitId !== undefined)
|
|
console.assert(commitAuthor !== undefined)
|
|
console.assert(commitMsg !== undefined)
|
|
console.assert(benchRunURL !== undefined)
|
|
console.assert(commitURL !== undefined)
|
|
console.assert(score !== undefined)
|
|
console.assert(scoreDiff !== undefined)
|
|
console.assert(commitDate !== undefined)
|
|
|
|
// Fill in the selection details
|
|
document.getElementById('{{ bench_data.id }}-sel-info-score').innerHTML = score;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-score-diff').innerHTML = scoreDiff;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-score-diff-perc').innerHTML = scoreDiffPerc;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-date').innerHTML = commitDate;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-author').innerHTML = commitAuthor;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-com-id').innerHTML = commitId;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-com-msg').innerHTML = commitMsg;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-url').innerHTML = `
|
|
<a target="_blank" rel="noreferrer noopener" href="${commitURL}"> ${commitURL} </a>
|
|
`;
|
|
document.getElementById('{{ bench_data.id }}-sel-info-bench-url').innerHTML = `
|
|
<a target="_blank" rel="noreferrer noopener" href="${benchRunURL}"> ${benchRunURL} </a>
|
|
`;
|
|
}
|
|
}
|
|
|
|
google.charts.setOnLoadCallback(draw_{{ bench_data.id }});
|
|
{# end of bench_data #}
|
|
{% endfor %}
|
|
|
|
function sinceDateClickHandler() {
|
|
let val = document.getElementById("since-date-input").value;
|
|
if (val !== null && val !== "") {
|
|
let date = new Date(val);
|
|
displaySinceDate = date;
|
|
console.log("sinceDateClickHandler: new sinceDate set to: ", date);
|
|
// Iterate all the redraw charts
|
|
{% for bench_data in bench_datas %}
|
|
draw_{{ bench_data.id }}();
|
|
document.getElementById("{{ bench_data.id }}-sel-info-score").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-score-diff").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-score-diff-perc").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-date").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-author").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-com-msg").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-com-id").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-url").innerHTML = "No selection";
|
|
document.getElementById("{{ bench_data.id }}-sel-info-bench-url").innerHTML = "No selection";
|
|
{% endfor %}
|
|
document.getElementById("applied-since-filter").innerHTML = date.toDateString();
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 class="text-center">{{ bench_source.value }} benchmark results</h1>
|
|
<h2 class="text-center">
|
|
Since {{ since.date() }} until {{ until.date() }}
|
|
</h2>
|
|
|
|
<div id="description">
|
|
<p>
|
|
<b>Score</b> represents the amount of milliseconds it takes for one
|
|
iteration of the benchmark to finish.
|
|
<br />
|
|
The smaller the score, the better.
|
|
</p>
|
|
|
|
<br />
|
|
Note that only successful benchmark jobs are processed, so if there is a
|
|
gap in the chart, it might be caused by failing jobs during that time
|
|
period.
|
|
<br />
|
|
|
|
<p>
|
|
Hovering over some point in a graph displays score, score diff
|
|
(difference with the previous score value) and date in a tooltip. You
|
|
can click on a particular point in the graph to display some additional
|
|
information under the graph like a link to PR, a commit message, commit
|
|
author, etc.
|
|
</p>
|
|
|
|
<p>
|
|
The charts can be zoomed in by <code>dragToZoom</code> which means that
|
|
you can left-click on the chart, hold it, and release it to zoom into a
|
|
rectangular area. Then right-clicking to reset to the original zoom. See
|
|
<code>explorer</code> configuration options in
|
|
<a
|
|
href="https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options"
|
|
>
|
|
https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options
|
|
</a>
|
|
.
|
|
</p>
|
|
|
|
<br />
|
|
Generated by the <code>bench_download.py</code> script in
|
|
<code>{{ timestamp }}</code>.
|
|
</div>
|
|
|
|
<div id="top-panel" class="container">
|
|
<div id="top-panel-filters" class="card">
|
|
<h3 class="card-header text-center">Filters</h3>
|
|
<div class="card-body">
|
|
<form class="row">
|
|
<label
|
|
for="since-date-input"
|
|
class="col fs-4 text-center form-label"
|
|
>
|
|
Since date:
|
|
</label>
|
|
<input
|
|
type="date"
|
|
id="since-date-input"
|
|
class="col form-control form-control-lg"
|
|
name="since-date"
|
|
min="{{ since.date() }}"
|
|
max="{{ until.date() }}"
|
|
/>
|
|
</form>
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<button
|
|
id="reset-since-date-btn"
|
|
class="col btn btn-primary"
|
|
style="margin-top: 10px"
|
|
onclick="sinceDateClickHandler()"
|
|
>
|
|
Apply filters
|
|
</button>
|
|
<div class="col"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="top-panel-applied-filters" class="card">
|
|
<h3 class="card-header text-center">Applied filters</h3>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col text-center fs-4">Since date:</div>
|
|
<div id="applied-since-filter" class="col fs-4 text-center">
|
|
{{ display_since.date() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="benchmarks-container" class="container-fluid">
|
|
{% for bench_data in bench_datas %}
|
|
<div class="bench-container card">
|
|
<a name="{{ bench_data.id }}"></a>
|
|
<h3 class="card-header text-center">
|
|
<a href="#{{ bench_data.id }}">{{ bench_data.id }}</a>
|
|
</h3>
|
|
<!-- This is a placeholder div for a bench chart -->
|
|
<div id="{{ bench_data.id }}" class="bench-chart"></div>
|
|
<!-- selection-info div will be shown once user selects a point in the chart -->
|
|
<div class="selection-info card-body">
|
|
<dl class="row card-text">
|
|
<dt class="col-sm-3">Score</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-score">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Score difference</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-score-diff">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Score difference percentage</dt>
|
|
<dd
|
|
class="col-sm-9"
|
|
id="{{ bench_data.id }}-sel-info-score-diff-perc"
|
|
>
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Commit date</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-date">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Commit author</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-author">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Commit message</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-com-msg">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Commit ID</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-com-id">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Commit URL</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-url">
|
|
No selection
|
|
</dd>
|
|
<dt class="col-sm-3">Bench run URL</dt>
|
|
<dd class="col-sm-9" id="{{ bench_data.id }}-sel-info-bench-url">
|
|
No selection
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</body>
|
|
</html>
|