opendev/elastic-recheck
Code Issues Proposed changes

bring the sanity: convert to handlebars.js

Browse Source 
This converts all the inline building of javascript structures into
using handlebars.js templates. It dramatically improves the
readability of the html snippets, and should make it much easier for
people to propose changes to content structure without being js
experts.

Additionally change the rendering order to render the plots
asynchronously so that we end up painting the main screen far faster,
which appears as a speed up to users.

This does mean we have a copy/paste of the template in both index and
gate files, eventually we can probably refactor that to an external
template file.

Change-Id: Ia54ce3b85d760f2948b04e88468c0627ade6884b
This commit is contained in:
Sean Dague 2014-09-27 08:04:22 -04:00
parent cf0e9d6ef2
commit 325cc32e18
5 changed files with 3167 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
web/share/elastic-recheck.js
View File

@ -29,6 +29,19 @@ function graphite_hit_count(job, color) {
return graph;
}
function update_graph_for_bug(main, bug) {
var div = main.find("#bug-" + bug['number'] + " .graph");
if (bug['data'].length > 0) {
$.plot(div, bug['data'],
{xaxis: {
mode: "time"
}}
);
} else {
div.html("No matches");
}
}
function update_critical_dates(data) {
var last_updated = new Date(data['now']);
var last_indexed = new Date(data['last_indexed']);
@ -51,8 +64,9 @@ function update_critical_dates(data) {
}
function update() {
var source = $("#bug-template").html();
var template = Handlebars.compile(source);
$.getJSON(data_url, function(data) {
var seen = [];
var buglist = data;
// compatibility while we flip data over
if ('buglist' in data) {
@ -60,74 +74,25 @@ function update() {
update_critical_dates(data);
}
$.each(buglist, function(i, bug) {
var id = 'bug-'+bug['number'];
seen.push(id);
var div = $('#'+id);
var main = $('#main-container');
var content = "";
if (!div.length) {
div = $('<div/>', {'id': id, 'class': 'bug-container'});
div.appendTo($('#main-container'));
$('<h2/>', {text: 'Bug ' + bug['number'] + " - " + bug['bug_data']['name']}).appendTo(div);
$('<h3/>', {
text: bug['fails24'] + ' fails in 24hrs / ' + bug['fails'] + ' fails in 10 days'
}).appendTo(div);
$('<h3/>', {
text: 'Projects: ' + bug['bug_data']['affects']
}).appendTo(div);
var reviews = bug['bug_data']['reviews'];
if (reviews.length>0) {
$('<h3/>', {
text: 'Open reviews: ',
style:'font-weight: bold;'
}).appendTo($('<span/>', {
'class': 'extlink'
}).appendTo(div));
}
for (var i = 0; i < reviews.length ; i++) {
$('<a/>', {
href: 'https://review.openstack.org/#/c/'+reviews[i],
style:'font-weight: bold;',
text: reviews[i]
}).appendTo($('<span/>', {
'class': 'extlink'
}).appendTo(div));
$.each(buglist, function(i, bug) {
content += template({'bug': bug});
});
main.append(content);
}
$('<div/>', {'class': 'graph'}).appendTo(div);
$('<a/>', {
href: 'http://logstash.openstack.org/#'+bug['logstash_query'],
text: 'Logstash'
}).appendTo($('<span/>', {
'class': 'extlink'
}).appendTo(div));
$('<a/>', {
href: 'https://bugs.launchpad.net/bugs/'+bug['number'],
text: 'Launchpad'
}).appendTo($('<span/>', {
'class': 'extlink'
}).appendTo(div));
}
div = div.find(".graph");
if (bug['data'].length > 0) {
$.plot(div, bug['data'],
{xaxis: {
mode: "time"
}}
);
} else {
div.html("No matches");
}
});
$.each($('.bug-container'), function(i, container) {
if (seen.indexOf(container.id) == -1) {
container.remove();
}
});
// The graph functions are slow, but there is actually no
// reason to hold up the main paint thread for them, so put
// them into an async mode to run as soon as they can. This
// dramatically increases percevied page load speed.
$.each(buglist, function(i, bug) {
setTimeout(function() {
update_graph_for_bug(main, bug);
}, 1);
});
});
}
};
$(function() {
update();

23
web/share/gate.html
View File

@ -6,6 +6,7 @@
<script type="text/javascript"
src="http://status.openstack.org/jquery.min.js"></script>
<script type="text/javascript" src="handlebars-v2.0.0.js"></script>
<script type="text/javascript"
src="http://status.openstack.org/jquery-visibility.min.js"></script>
<script type="text/javascript"
@ -52,6 +53,28 @@
<BODY>
<script type="text/javascript">header('Rechecks');</script>
<!-- this template is process by handlebar js... and makes
javascript sane again! -->
<script id="bug-template" type="text/x-handlebars-template">
<div id="bug-{{bug.number}}" class="bug-container">
<h2>Bug {{bug.number}} - {{bug.bug_data.name}}</h2>
<h3>{{bug.fails24}} fails in 24 hrs / {{bug.fails}} fails in
10 days</h3>
<h3>Projects: {{bug.bug_data.affects}}</h3>
{{#if bug.bug_data.reviews}}
<h3 class="openreviews">Open Reviews:</h3>
<div class="openreviews">
{{#each bug.bug_data.reviews}}
<a class="openreview" href="https://review.openstack.org/#/c/{{this}}">{{this}}</a>
{{/each}}
</div>
{{/if}}
<div class="graph"></div>
<a class="extlink" href="http://logstash.openstack.org/#{{bug.logstash_query}}">Logstash</a>
<a class="extlink" href="http://bugs.launchpad.net/bugs/{{bug.number}}">Logstash</a>
</div>
</script>
<div class="container">
<ul class="nav nav-tabs">
<li><a href="index.html">All Pipelines</a></li>

3079
web/share/handlebars-v2.0.0.js Normal file
View File

File diff suppressed because one or more lines are too long

27
web/share/index.html
View File

@ -6,6 +6,7 @@
<script type="text/javascript"
src="http://status.openstack.org/jquery.min.js"></script>
<script type="text/javascript" src="handlebars-v2.0.0.js"></script>
<script type="text/javascript"
src="http://status.openstack.org/jquery-visibility.min.js"></script>
<script type="text/javascript"
@ -39,7 +40,10 @@
<!-- Page Specific CSS -->
<link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/home.css" type="text/css" media="screen, projection, print"/>
<link rel="stylesheet" type="text/css" href="http://www.openstack.org/themes/openstack/css/main.css" />
<link rel="stylesheet" type="text/css"
href="http://www.openstack.org/themes/openstack/css/main.css" />
<!-- Project specific css -->
@ -52,6 +56,27 @@
<BODY>
<script type="text/javascript">header('Rechecks');</script>
<!-- this template is process by handlebar js... and makes
javascript sane again! -->
<script id="bug-template" type="text/x-handlebars-template">
<div id="bug-{{bug.number}}" class="bug-container">
<h2>Bug {{bug.number}} - {{bug.bug_data.name}}</h2>
<h3>{{bug.fails24}} fails in 24 hrs / {{bug.fails}} fails in
10 days</h3>
<h3>Projects: {{bug.bug_data.affects}}</h3>
{{#if bug.bug_data.reviews}}
<h3 class="openreviews">Open Reviews:</h3>
<div class="openreviews">
{{#each bug.bug_data.reviews}}
<a class="openreview" href="https://review.openstack.org/#/c/{{this}}">{{this}}</a>
{{/each}}
</div>
{{/if}}
<div class="graph"></div>
<a class="extlink" href="http://logstash.openstack.org/#{{bug.logstash_query}}">Logstash</a>
<a class="extlink" href="http://bugs.launchpad.net/bugs/{{bug.number}}">Logstash</a>
</div>
</script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="index.html">All Pipelines</a></li>

8
web/share/styles/elastic-recheck.css
View File

@ -54,4 +54,12 @@ ul.nav.nav-tabs li.active a {
padding: 10px;
border: 1px solid #EEEEEE;
border-top: none;
}
.openreviews {
font-weight: bold;
}
div.openreviews {
margin-left: 2em;
}