You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
3.0 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML5 compliance -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Import Chart.js 2.9.3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<!-- Import Bootstrap 4.3.1 -->
<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">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col">
</div>
</div>
<div class="row justify-content-center">
<div class="col" style="text-align: center;">
<h1>Jenkins data for the past {{ days }} day(s)</h1>
<canvas id="jenkinschart"></canvas>
<h2>Average number of failing jobs: {{ average.failing }}</h2>
<h2>Average number of non-passing jobs: {{ average.nonpassing }}</h2>
<h2>Average number of total jobs: {{ average.total }}</h2>
</div>
</div>
</div>
<!-- This is the actual chart functionality -->
<script>
var ctx = document.getElementById("jenkinschart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'Failing Jobs',
backgroundColor: "#FF0000",
//borderColor: "#FF0000",
data: [
{% for timestamp, num in jenkins.failing %}
{
t: new Date({{ timestamp }} * 1000),
y: {{ num }}
},
{% endfor %}
]
},
{
label: 'Non-passing Jobs',
backgroundColor: "#FFFF00",
//borderColor: "#FFFF00",
data: [
{% for timestamp, num in jenkins.nonpassing %}
{
t: new Date({{ timestamp }} * 1000),
y: {{ num }}
},
{% endfor %}
]
},
{
label: 'Total Jobs',
backgroundColor: "#003A72",
//borderColor: "#003A72",
data: [
{% for timestamp, num in jenkins.total %}
{
t: new Date({{ timestamp }} * 1000),
y: {{ num }}
},
{% endfor %}
]
},
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
}
}]
}
}
});
</script>
</body>
</html>