Skip to content

Commit

Permalink
Merge pull request Parallels#47 from rquigley/master
Browse files Browse the repository at this point in the history 
Javascript optimizations
  • Loading branch information
@nvie
nvie committed Aug 23, 2013
2 parents dc6a32e + 620e763 commit 24a3bd2
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 118 deletions.
1 change: 1 addition & 0 deletions rq_dashboard/__init__.py
View file
Expand Up @@ -15,3 +15,4 @@ def __init__(self, app=None, url_prefix='/rq', auth_handler=None):
def init_app(self, app):
"""Initializes the RQ-Dashboard for the specified application."""
app.register_blueprint(dashboard, url_prefix=self.url_prefix)
app.config['rq_url_prefix'] = self.url_prefix
32 changes: 16 additions & 16 deletions rq_dashboard/templates/rq_dashboard/dashboard.html
View file
Expand Up @@ -25,9 +25,9 @@ <h1>Queues</h1>
</table>

<script name="queue-row" type="text/template">
<tr data-role="queue">
<td><i class="icon-inbox" style="opacity: .5;"></i> <a href="<%= url %>"><%= name %></a></td>
<td class="narrow"><%= count %></td>
<tr data-role="queue" <% if (d.name === 'failed' && d.count > 0) { %> class="failed"<% } %>>
<td><i class="icon-inbox" style="opacity: .5;"></i> <a href="<%= d.url %>"><%= d.name %></a></td>
<td class="narrow"><%= d.count %></td>
</tr>
</script>

Expand Down Expand Up @@ -63,9 +63,9 @@ <h1>Workers</h1>

<script name="worker-row" type="text/template">
<tr data-role="worker">
<td><i class="icon-<%= state %>"></i></td>
<td><%= name %></td>
<td><%= queues.join(', ') %></td>
<td><i class="icon-<%= d.state %>"></i></td>
<td><%= d.name %></td>
<td><%= d.queues.join(', ') %></td>
</tr>
</script>

Expand Down Expand Up @@ -106,22 +106,22 @@ <h1>Jobs on <strong{% if queue.name == 'failed' %} class="failed"{% endif %}>{{
</table>

<script name="job-row" type="text/template">
<tr data-role="job" data-job-id="<%= id %>">
<tr data-role="job" data-job-id="<%= d.id %>">
<td>
<i class="icon-file" style="opacity: .5;"></i>
<span class="description"><%= $('<div/>').text(description).html() %></span>
<% if (exc_info) { %>
<span class="origin">from <strong><%= origin %></strong></span>
<span class="description"><%= $('<div/>').text(d.description).html() %></span>
<% if (d.exc_info) { %>
<span class="origin">from <strong><%= d.origin %></strong></span>
<% } %>
<div class="job_id"><%= id %></div>
<% if (exc_info) { %>
<span class="end_date">Failed <%= ended_at %></span>
<pre class="exc_info"><%= $('<div/>').text(exc_info).html() %></pre>
<div class="job_id"><%= d.id %></div>
<% if (d.exc_info) { %>
<span class="end_date">Failed <%= d.ended_at %></span>
<pre class="exc_info"><%= $('<div/>').text(d.exc_info).html() %></pre>
<% } %>
</td>
<td><span class="creation_date"><%= created_at %></span></td>
<td><span class="creation_date"><%= d.created_at %></span></td>
<td class="actions narrow">
<% if (exc_info) { %>
<% if (d.exc_info) { %>
<a href="#" data-role="requeue-job-btn" class="btn btn-small"><i class="icon-retweet"></i> Requeue</a>
<% } %>
<a href="#" data-role="cancel-job-btn" class="btn btn-small"><i class="icon-remove"></i> Cancel</a>
Expand Down
211 changes: 109 additions & 102 deletions rq_dashboard/templates/rq_dashboard/dashboard.js
View file
@@ -1,15 +1,15 @@

var url_for = function(name, param) {
var url = '';
if (name == 'queues') { url = '/queues.json'; }
else if (name == 'workers') { url = '/workers.json'; }
else if (name == 'cancel_job') { url = '/job/' + encodeURIComponent(param) + '/cancel'; }
else if (name == 'requeue_job') { url = '/job/' + encodeURIComponent(param) + '/requeue'; }
var url = '{{ config.rq_url_prefix }}';
if (name == 'queues') { url = '{{ config.rq_url_prefix }}/queues.json'; }
else if (name == 'workers') { url = '{{ config.rq_url_prefix }}/workers.json'; }
else if (name == 'cancel_job') { url = '{{ config.rq_url_prefix }}/job/' + encodeURIComponent(param) + '/cancel'; }
else if (name == 'requeue_job') { url = '{{ config.rq_url_prefix }}/job/' + encodeURIComponent(param) + '/requeue'; }
return url;
};

var url_for_jobs = function(param, page) {
var url = '/jobs/' + encodeURIComponent(param) + '/' + page + '.json';
var url = '{{ config.rq_url_prefix }}/jobs/' + encodeURIComponent(param) + '/' + page + '.json';
return url;
};

Expand Down Expand Up @@ -48,41 +48,43 @@ var api = {
// QUEUES
//
(function($) {
var reload_table = function(done) {
var $raw_tpl = $('script[name=queue-row]').html();
var template = _.template($raw_tpl);

var $tbody = $('table#queues tbody');
var $raw_tpl = $('script[name=queue-row]').html();
var noQueuesHtml = $('script[name=no-queues-row]').html();
var template = _.template($raw_tpl);
var $tbody = $('table#queues tbody');
var $placeholderEl = $('tr[data-role=loading-placeholder]', $tbody);

$('tr[data-role=loading-placeholder]', $tbody).show();
var reload_table = function(done) {
$placeholderEl.show();

// Fetch the available queues
api.getQueues(function(queues) {
var html = '';
var fqEl;

$tbody.empty();

if (queues.length > 0) {
var $fq;
$.each(queues, function(i, queue) {
var html = template(queue);
var $el = $(html);
var el = template({d: queue}, {variable: 'd'});

// Special markup for the failed queue
if (queue.name === 'failed' && queue.count > 0) {
$el.addClass('failed');
$fq = $el;
fqEl = el;
return;
}

$tbody.append($el);
html += el;
});

// Append the failed queue at the end, since it's a special queue
if ($fq !== undefined) {
$tbody.append($fq);
if (fqEl !== undefined) {
html += fqEl;
}
} else {
var html = $('script[name=no-queues-row]').html();

$tbody.append(html);
} else {
$tbody.append(noQueuesHtml);
}

if (done !== undefined) {
Expand Down Expand Up @@ -112,32 +114,33 @@ var api = {
// WORKERS
//
(function($) {
var reload_table = function(done) {
var $tbody = $('table#workers tbody');
var $raw_tpl = $('script[name=worker-row]').html();
var noWorkersHtml = $('script[name=no-workers-row]').html();
var template = _.template($raw_tpl);
var $tbody = $('table#workers tbody');
var $placeholderEl = $('tr[data-role=loading-placeholder]', $tbody);

$('tr[data-role=loading-placeholder]', $tbody).show();
var reload_table = function(done) {
$placeholderEl.show();

// Fetch the available workers
api.getWorkers(function(workers) {
var html = '';

$tbody.empty();

if (workers.length > 0) {
var $raw_tpl = $('script[name=worker-row]').html();
var template = _.template($raw_tpl);

$.each(workers, function(i, worker) {
if (worker.state === 'busy') {
worker.state = 'play';
} else {
worker.state = 'pause';
}
var html = template(worker);
var $el = $(html);
$tbody.append($el);
html += template({d: worker}, {variable: 'd'});
});
} else {
var html = $('script[name=no-workers-row]').html();
$tbody.append(html);
} else {
$tbody.append(noWorkersHtml);
}

if (done !== undefined) {
Expand Down Expand Up @@ -167,81 +170,85 @@ var api = {
// JOBS
//
(function($) {
var reload_table = function(done) {
var $raw_tpl = $('script[name=job-row]').html();
var template = _.template($raw_tpl);

var $tbody = $('table#jobs tbody');
var $raw_tpl = $('script[name=job-row]').html();
var template = _.template($raw_tpl);
var $raw_tpl_page = $('script[name=page-link]').html();
var template_page = _.template($raw_tpl_page);
var $ul = $('div#page-selection ul');
var noJobsHtml = $('script[name=no-jobs-row]').html();
var $raw_tpl_prev_page = $('script[name=previous-page-link]').html();
var template_prev_page = _.template($raw_tpl_prev_page);
var $raw_tpl_next_page = $('script[name=next-page-link]').html();
var template_next_page = _.template($raw_tpl_next_page);
var $tbody = $('table#jobs tbody');
var $placeholderEl = $('tr[data-role=loading-placeholder]', $tbody);
var html;
var $el;

$('tr[data-role=loading-placeholder]', $tbody).show();

var $raw_tpl_page = $('script[name=page-link]').html();
var template_page = _.template($raw_tpl_page);
var $ul = $('div#page-selection ul');
var reload_table = function(done) {
$placeholderEl.show();

// Fetch the available jobs on the queue
api.getJobs('{{ queue.name }}', '{{ page }}', function(jobs, pagination) {
$tbody.empty();

if (jobs.length > 0) {
$.each(jobs, function(i, job) {
job.created_at = toRelative(Date.create(job.created_at));
if (job.ended_at !== undefined) {
job.ended_at = toRelative(Date.create(job.ended_at));
}
var html = template(job);
var $el = $(html);

$tbody.append($el);
});
} else {
var html = $('script[name=no-jobs-row]').html();
$tbody.append(html);
}
onJobsLoaded(jobs, pagination, done);
});
};

var onJobsLoaded = function(jobs, pagination, done) {
var html = '';

$ul.empty();
$tbody.empty();

// prev page
if (pagination.prev_page !== undefined ) {
var $raw_tpl_prev_page = $('script[name=previous-page-link]').html();
var template_prev_page = _.template($raw_tpl_prev_page);
var html = template_prev_page(pagination.prev_page);
var $el = $(html);
$ul.append($el);
} else {
var html = $('script[name=no-previous-page-link]').html();
$ul.append(html);
}

$.each(pagination.pages_in_window, function(i, page) {
var html = template_page(page);
var $el = $(html);

// Special markup for the active page
if (page.number === {{ page }} ) {
$el.addClass('active');
if (jobs.length > 0) {
$.each(jobs, function(i, job) {
job.created_at = toRelative(Date.create(job.created_at));
if (job.ended_at !== undefined) {
job.ended_at = toRelative(Date.create(job.ended_at));
}

$ul.append($el);
html += template({d: job}, {variable: 'd'});
});

// next page
if (pagination.next_page !== undefined ) {
var $raw_tpl_next_page = $('script[name=next-page-link]').html();
var template_next_page = _.template($raw_tpl_next_page);
var html = template_next_page(pagination.next_page);
var $el = $(html);
$ul.append($el);
} else {
var html = $('script[name=no-next-page-link]').html();
$ul.append(html);
$tbody[0].innerHTML = html;
} else {
$tbody.append(noJobsHtml);
}

$ul.empty();

// prev page
if (pagination.prev_page !== undefined ) {
html = template_prev_page(pagination.prev_page);
$el = $(html);
$ul.append($el);
} else {
html = $('script[name=no-previous-page-link]').html();
$ul.append(html);
}

$.each(pagination.pages_in_window, function(i, page) {
var html = template_page(page);
var $el = $(html);

// Special markup for the active page
if (page.number === {{ page }} ) {
$el.addClass('active');
}

if (done !== undefined) {
done();
}
$ul.append($el);
});

// next page
if (pagination.next_page !== undefined ) {
html = template_next_page(pagination.next_page);
$el = $(html);
$ul.append($el);
} else {
html = $('script[name=no-next-page-link]').html();
$ul.append(html);
}

if (done !== undefined) {
done();
}
};

var refresh_table = function() {
Expand Down Expand Up @@ -293,34 +300,34 @@ var api = {
});

// Enable the AJAX behaviour of the empty button
$('[data-role=cancel-job-btn]').live('click', function(e) {
$tbody.on('click', '[data-role=cancel-job-btn]', function(e) {
e.preventDefault();
e.stopPropagation();

var $this = $(this),
$row = $this.closest('tr'),
$row = $this.parents('tr'),
job_id = $row.data('job-id'),
url = url_for('cancel_job', job_id);

$.post(url, function(data) {
$row.fadeOut('fast', function() { $row.delete(); });
$row.fadeOut('fast', function() { $row.remove(); });
});

return false;
});

// Enable the AJAX behaviour of the requeue button
$('[data-role=requeue-job-btn]').live('click', function(e) {
$tbody.on('click', '[data-role=requeue-job-btn]', function(e) {
e.preventDefault();
e.stopPropagation();

var $this = $(this),
$row = $this.closest('tr'),
$row = $this.parents('tr'),
job_id = $row.data('job-id'),
url = url_for('requeue_job', job_id);

$.post(url, function(data) {
$row.fadeOut('fast', function() { $row.delete(); });
$row.fadeOut('fast', function() { $row.remove(); });
});

return false;
Expand Down

0 comments on commit 24a3bd2

Please sign in to comment.