rspec_stats/templates/page.erb (205 lines of code) (raw):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
var NewIssueURI = {
init: function(dataset) {
this.data = dataset;
return this;
},
generate: function() {
const title = encodeURIComponent(this.title());
const description = encodeURIComponent(this.description());
return `https://gitlab.com/gitlab-org/gitlab/issues/new?issue[title]=${title}&issue[description]=${description}`;
},
description: function() {
const duration = Number.parseFloat(this.data.duration).toFixed(2);
return `
### Summary
The total running time of [${this.data.artifactName}](${this.data.artifactUrl}) is
**${duration} seconds** and it executes **${this.data.queryCount}** queries.
It is likely this can be improved.
Please review this suite or example for opportunities to fix slow tests.
#### Description
This issue was generated from the
[rspec profiling](https://gitlab.com/gitlab-org/rspec_profiling_stats) project
which profiles rspec tests in pipelines run against the default branch on
\`gitlab-org/gitlab\`.
/label ~"rspec profiling"
### How to improve this test?
Please follow our testing best practices to speed up tests at https://docs.gitlab.com/ee/development/testing_guide/best_practices.html#test-speed.
`.trim().replace(/^[ ]+(\S+)/gm, '$1');
},
title: function() {
return `Improve slow tests in ${this.data.artifactName}`;
}
}
document.addEventListener('click', function (event) {
var target = event.target
if (!target.matches('.create-issue')) return;
event.preventDefault();
window.open(NewIssueURI.init(target.dataset).generate(), '_blank');
}, false);
var Table = {
define: function(table_id, query_id, ajax_path) {
$(`#${table_id}`).DataTable({
ajax: `${ajax_path}`,
dataSrc: '',
pageLength: 20,
columnDefs: this.buildColumnDefs(query_id),
order: this.buildOrder(query_id)
})
},
buildColumnDefs: function(query_id) {
var columnDefs = [];
// Artifact link
columnDefs.push({
targets: 0,
data: null,
render: function (data, type, row, meta) {
var artifact = data[0];
var url = artifact.includes('/')
? `https://gitlab.com/gitlab-org/gitlab/-/tree/master/${artifact.replace(/:(\d+)$/, '#L$1')}`
: `https://gitlab.com/gitlab-org/gitlab/-/commit/${artifact}`;
return `<a href="${url}">${artifact}</a>`;
}
});
if (query_id != 'overall_time') {
// Create issue link
columnDefs.push({
targets: -1,
data: null,
render: function(data, type, row, meta) {
return `<a href='#' class='create-issue' data-artifact-url='${row[0]}' data-artifact-name='${row[0]}' data-duration='${row[1]}' data-query-count='${row[2]}'>Create an Issue</a>`
}
});
}
return columnDefs;
},
buildOrder: function(query_id) {
return query_id == 'overall_time'
? [[8, 'desc']]
: [];
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
<title>Rspec stats</title>
<style>
table td {
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="alert alert-info" role="alert">
This page is generated daily by a CI job in <a href="https://gitlab.com/gitlab-org/rspec_profiling_stats">gitlab-org/rspec_profiling_stats</a>. Last updated at <%= last_updated_at %>.
</div>
<div class="row table-responsive">
<% for query in visible_queries %>
<%= query.html %>
<% end %>
</div>
<div class="row table-responsive my-5">
<h2 id="time_per_test"><a href="#time_per_test">#</a>Time per test (average by day)</h2>
<div class="col-md-11">
<canvas id="chart_time_per_test"></canvas>
</div>
</div>
<hr/>
<div class="row table-responsive my-5">
<h2 id="queries_per_test"><a href="#queries">#</a>Queries per test (average by day)</h2>
<div class="col-md-11">
<canvas id="chart_queries_per_test"></canvas>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.dataTables_length').addClass('bs-select');
// TODO - sanitization when we process also MRs title
var mergeRequestsData = <%= merge_requests_data %>
var chartPerDay = function(container, label, data) {
var chartOpts = {
aspectRatio: 7,
scales: {
xAxes: [{
type: 'time',
display: true,
labelString: 'Date'
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}]
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
enabled: true,
mode: 'x'
}
}
}
}
var ctx = document.getElementById(container).getContext('2d');
new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
datasets: [{
type: 'line',
yAxisID: 'y-axis-1',
label: label,
borderColor: 'rgb(54, 162, 235)',
fill: false,
lineTension: 0,
data: data
}, {
label: 'Merge requests with "rspec profiling" label merged this day',
type: 'bar',
yAxisID: 'y-axis-2',
backgroundColor: 'rgb(106, 235, 42)',
data: mergeRequestsData
}]
},
// Configuration options go here
options: chartOpts
});
};
chartPerDay('chart_time_per_test', 'Time per test (seconds, average by day)', <%= time_per_test %>);
chartPerDay('chart_queries_per_test', 'Queries per test (amount, average by day)', <%= queries_per_test %>);
});
</script>
</body>
</html>