From 325cc32e18079a033df6199119ce9d76688920a8 Mon Sep 17 00:00:00 2001 From: Sean Dague Date: Sat, 27 Sep 2014 08:04:22 -0400 Subject: [PATCH] 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 --- web/share/elastic-recheck.js | 97 +- web/share/gate.html | 23 + web/share/handlebars-v2.0.0.js | 3079 ++++++++++++++++++++++++++ web/share/index.html | 27 +- web/share/styles/elastic-recheck.css | 8 + 5 files changed, 3167 insertions(+), 67 deletions(-) create mode 100644 web/share/handlebars-v2.0.0.js diff --git a/web/share/elastic-recheck.js b/web/share/elastic-recheck.js index 3aecfc66..53b7759a 100644 --- a/web/share/elastic-recheck.js +++ b/web/share/elastic-recheck.js @@ -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 = $('
', {'id': id, 'class': 'bug-container'}); - div.appendTo($('#main-container')); - $('

', {text: 'Bug ' + bug['number'] + " - " + bug['bug_data']['name']}).appendTo(div); - $('

', { - text: bug['fails24'] + ' fails in 24hrs / ' + bug['fails'] + ' fails in 10 days' - }).appendTo(div); - $('

', { - text: 'Projects: ' + bug['bug_data']['affects'] - }).appendTo(div); - var reviews = bug['bug_data']['reviews']; - if (reviews.length>0) { - $('

', { - text: 'Open reviews: ', - style:'font-weight: bold;' - }).appendTo($('', { - 'class': 'extlink' - }).appendTo(div)); - } - for (var i = 0; i < reviews.length ; i++) { - $('', { - href: 'https://review.openstack.org/#/c/'+reviews[i], - style:'font-weight: bold;', - text: reviews[i] - }).appendTo($('', { - 'class': 'extlink' - }).appendTo(div)); + $.each(buglist, function(i, bug) { + content += template({'bug': bug}); + }); + main.append(content); - } - $('
', {'class': 'graph'}).appendTo(div); - $('', { - href: 'http://logstash.openstack.org/#'+bug['logstash_query'], - text: 'Logstash' - }).appendTo($('', { - 'class': 'extlink' - }).appendTo(div)); - $('', { - href: 'https://bugs.launchpad.net/bugs/'+bug['number'], - text: 'Launchpad' - }).appendTo($('', { - '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(); diff --git a/web/share/gate.html b/web/share/gate.html index 625ed3c5..b2f60fae 100644 --- a/web/share/gate.html +++ b/web/share/gate.html @@ -6,6 +6,7 @@ + + + +