bring the sanity: convert to handlebars.js
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
parent
cf0e9d6ef2
commit
325cc32e18
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue