hbase/dev-support/flaky-dashboard-template.html

200 lines
7.2 KiB
HTML

<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<title>Apache HBase Flaky Dashboard</title>
<style type="text/css">
table {
table-layout: fixed;
}
th {
font-size: 15px;
}
td {
font-size: 18px;
vertical-align: text-top;
overflow: hidden;
white-space: nowrap;
}
.show_hide_button {
font-size: 100%;
padding: .5em 1em;
border: 0 rgba(0,0,0,0);
border-radius: 10px;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 300;
var height = 25;
var x = d3.scale.linear().range([0, width]);
function csvToArray(csv) {
if (csv.length == 0)
return [];
splits = csv.split(",");
ret = [];
for (i = 0; i < splits.length; i++) {
ret.push(parseInt(splits[i]));
}
return ret;
}
function sortNumber(a,b) {
return a - b;
}
function sparkline(elemId, failed, timeout, hanging, success, domain_min, domain_max) {
failed = csvToArray(failed);
timeout = csvToArray(timeout);
hanging = csvToArray(hanging);
success = csvToArray(success);
all = failed.concat(timeout).concat(hanging).concat(success);
all.sort(sortNumber);
x.domain([domain_min, domain_max + 1]);
rect_width = x(domain_min + 1) - x(domain_min) - 1;
svg = d3.select("#" + elemId).append('svg').attr('width', width).attr('height', height);
svg.selectAll("dot")
.data(all)
.enter()
.append("svg:rect")
.attr("x", function(d) { return x(d); })
.attr("y", 3)
.attr("height", height- 6)
.attr("width", rect_width)
.attr("fill", function(d) {
if (success.includes(d)) return "green";
else if (timeout.includes(d)) return "gold";
else if (hanging.includes(d)) return "blue";
else if (failed.includes(d)) return "red";
else return "black";
})
.append('svg:title')
.text(function(d) { return d; });
}
</script>
<p>
<img style="vertical-align:middle; display:inline-block;" height="80px"
src="https://hbase.apache.org/images/hbase_logo_with_orca_large.png">
&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size:50px; vertical-align:middle; display:inline-block;">
Apache HBase Flaky Tests Dashboard
</span>
</p>
<span>Last updated: <b>{{datetime}}</b></span><br>
<span>Count of flaky tests (cumulated from all jobs):
<b>{{bad_tests_count}}</b></span><br>
<br><br>
<span style="font-size:20px;"><b>List of Jobs</b></span><br>
<br>
{% for url in results %}
<a href="#job_{{ loop.index }}">{{ url |e }}</a>
<br>
{% endfor %}
<br>
<br>
<span style="font-size:20px;"><b>Results</b></span><br>
<br>
{% for url in results %}
{% set result = results[url] %}
{% set url_counter = loop.index %}
{# Dedup ids since test names may duplicate across urls #}
<span id="job_{{ url_counter }}" style="font-weight:bold;">
{{ url |e }}<br>
<a href="{{ url |e }}">
Go to <img height="16px" src="https://jenkins.io/sites/default/files/jenkins_favicon.ico">
</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">Go to top</a>
</span>
<br/><br/>
Legend : green: success, red: failed, yellow: timeout, blue: hanging
<table>
<tr>
<th width="400px">Test Name</th>
<th width="150px">Flakyness</th>
<th width="200px">Failed/Timeout/Hanging</th>
<th width="300px">Trends</th>
<th>Run Ids</th>
</tr>
{% for test in result %}
{% set all = result[test]['all'] %}
{% set failed = result[test]['failed'] %}
{% set timeout = result[test]['timeout'] %}
{% set hanging = result[test]['hanging'] %}
{% set success = result[test]['success'] %}
<tr>
<td>{{ test |e }}</td>
{% set flakyness =
(failed|length + hanging|length) * 100 / all|length %}
{% if flakyness == 100 %}
<td align="middle" style="background-color:#FF9999;">
{% else %}
<td align="middle">
{% endif %}
{{ "{:.1f}% ({} / {})".format(
flakyness, failed|length + hanging|length, all|length) }}
</td>
<td align="middle">
{{ failed|length }} / {{ timeout|length }} / {{ hanging|length }}
</td>
{# Replace '.' in test names with '_' because dots are part of css selectors. #}
{% set sparkline_id = "sparkline_" ~ test|replace(".","_") ~ "_" ~ url_counter %}
<td id="{{ sparkline_id }}" align="middle">
</td>
<script>sparkline("{{ sparkline_id }}", "{{ failed|join(',') }}", "{{ timeout|join(',') }}",
"{{ hanging|join(',') }}", "{{ success|join(',') }}", {{ build_ids[url][0] }},
{{ build_ids[url][-1] }});</script>
<td>
{% set id = "details_" ~ test ~ "_" ~ url_counter %}
<button class="show_hide_button" onclick="toggle('{{ id }}')">
show/hide</button>
<br/>
<div id="{{ id }}"
style="display: none; width:300px; white-space: normal">
{% macro print_run_ids(url, run_ids) -%}
{% for i in run_ids %}
<a href="{{ url }}/{{ i }}">{{ i }}</a>&nbsp;
{% endfor %}
{%- endmacro %}
Failed : {{ print_run_ids(url, failed) }}<br/>
Timed Out : {{ print_run_ids(url, timeout) }}<br/>
Hanging : {{ print_run_ids(url, hanging) }}<br/>
Succeeded : {{ print_run_ids(url, success) }}
</div>
</td>
</tr>
{% endfor %}
</table>
<br><br><br>
{% endfor %}
<script type="text/javascript">
function toggle(id) {
if (document.getElementById(id).style["display"] == "none") {
document.getElementById(id).style["display"] = "block";
} else {
document.getElementById(id).style["display"] = "none";
}
}
</script>
</body>
</html>