zuul
/
zuul
Code Issues Proposed changes

Merge "Build status page more jquery like"

This commit is contained in:
Jenkins 2014-03-27 19:27:50 +00:00 committed by Gerrit Code Review
parent 07aefb182d 298c4913eb
commit f22fbf9d2d
1 changed files with 117 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
etc/status/public_html/app.js
View File

@ -19,7 +19,7 @@
(function ($) { (function ($) {
var $container, $msg, $msgWrap, $indicator, $queueInfo, $queueEventsNum, var $container, $msg, $msgWrap, $indicator, $queueInfo, $queueEventsNum,
$queueResultsNum, $pipelines, $jq; $queueResultsNum, $pipelines, $jq;
var xhr, prevHtml, zuul, var xhr, zuul,
demo = location.search.match(/[?&]demo=([^?&]*)/), demo = location.search.match(/[?&]demo=([^?&]*)/),
source = demo ? source = demo ?
'./status-' + (demo[1] || 'basic') + '.json-sample' : './status-' + (demo[1] || 'basic') + '.json-sample' :
@ -47,128 +47,135 @@
zuul.emit('update-start'); zuul.emit('update-start');
xhr = $.ajax({ xhr = $.getJSON(source)
url: source, .done(function (data) {
dataType: 'json', if ('message' in data) {
cache: false $msg.text(data.message);
}) $msgWrap.removeClass('zuul-msg-wrap-off');
.done(function (data) { } else {
var html = ''; $msg.empty();
data = data || {}; $msgWrap.addClass('zuul-msg-wrap-off');
}
if ('message' in data) { if ('zuul_version' in data) {
$msg.html(data.message); $('#zuul-version-span').text(data['zuul_version']);
}
if ('last_reconfigured' in data) {
var last_reconfigured =
new Date(data['last_reconfigured']);
$('#last-reconfigured-span').text(
last_reconfigured.toString());
}
$pipelines.html('');
$.each(data.pipelines, function (i, pipeline) {
$pipelines.append(zuul.format.pipeline(pipeline));
});
$queueEventsNum.text(
data.trigger_event_queue ?
data.trigger_event_queue.length : '0'
);
$queueResultsNum.text(
data.result_event_queue ?
data.result_event_queue.length : '0'
);
})
.fail(function (err, jqXHR, errMsg) {
$msg.text(source + ': ' + errMsg).show();
$msgWrap.removeClass('zuul-msg-wrap-off'); $msgWrap.removeClass('zuul-msg-wrap-off');
} else { })
$msg.empty(); .complete(function () {
$msgWrap.addClass('zuul-msg-wrap-off'); xhr = undefined;
} zuul.emit('update-end');
if ('zuul_version' in data) {
$('#zuul-version-span').text(data['zuul_version']);
}
if ('last_reconfigured' in data) {
var last_reconfigured =
new Date(data['last_reconfigured']);
$('#last-reconfigured-span').text(
last_reconfigured.toString());
}
$.each(data.pipelines, function (i, pipeline) {
html += zuul.format.pipeline(pipeline);
}); });
// Only re-parse the DOM if we have to
if (html !== prevHtml) {
prevHtml = html;
$pipelines.html(html);
}
$queueEventsNum.text(
data.trigger_event_queue ?
data.trigger_event_queue.length : '0'
);
$queueResultsNum.text(
data.result_event_queue ?
data.result_event_queue.length : '0'
);
})
.fail(function (err, jqXHR, errMsg) {
$msg.text(source + ': ' + errMsg).show();
$msgWrap.removeClass('zuul-msg-wrap-off');
})
.complete(function () {
xhr = undefined;
zuul.emit('update-end');
});
return xhr; return xhr;
}, },
format: { format: {
change: function (change) { change: function (change) {
var html = '<div class="well well-small zuul-change">' + if (change.id.length === 40) {
'<ul class="nav nav-list">', change.id = change.id.substr(0, 7);
id = change.id, }
url = change.url;
html += '<li class="nav-header">' + change.project; var $html = $('<div />')
if (id.length === 40) { .addClass('well well-small zuul-change')
id = id.substr(0, 7); var $list = $('<ul />').addClass('nav nav-list');
var $first_item = $('<li />').text(change.project)
.addClass('nav-header');
if (change.url !== null) {
var $id_span = $('<span />').append(
$("<a />").attr("href", change.url).text(change.id)
);
} }
html += ' <span class="zuul-change-id">'; else {
if (url !== null) { var $id_span = $('<span />').text(change.id);
html += '<a href="' + url + '">';
} }
html += id; $first_item.append($id_span.addClass('zuul-change-id'));
if (url !== null) { $list.append($first_item);
html += '</a>';
}
html += '</span></li>';
$.each(change.jobs, function (i, job) { $.each(change.jobs, function (i, job) {
var result = job.result ? job.result.toLowerCase() : null, var $item = $('<li />');
resultClass = 'zuul-result label';
var result = job.result ? job.result.toLowerCase() : null;
if (result === null) { if (result === null) {
result = job.url ? 'in progress' : 'queued'; result = job.url ? 'in progress' : 'queued';
} }
switch (result) { switch (result) {
case 'success': case 'success':
resultClass += ' label-success'; resultClass = ' label-success';
break; break;
case 'failure': case 'failure':
resultClass += ' label-important'; resultClass = ' label-important';
break; break;
case 'lost': case 'lost':
case 'unstable': case 'unstable':
resultClass += ' label-warning'; resultClass = ' label-warning';
break; break;
} }
html += '<li class="zuul-change-job">';
html += job.url !== null ? $item.addClass('zuul-change-job');
'<a href="' + job.url + '" ' + if (job.url !== null) {
'class="zuul-change-job-link">' : $job_line = $('<a href="' + job.url + '" />').
'<span class="zuul-change-job-link">'; addClass('zuul-change-job-link');
html += job.name; }
html += ' <span class="' + resultClass + '">' + result + else{
'</span>'; $job_line = $('<span />').
addClass('zuul-change-job-link');
}
$job_line.text(job.name)
.append(
$('<span />').addClass('zuul-result label').
addClass(resultClass).text(result)
);
if (job.voting === false) { if (job.voting === false) {
html += ' <span class="muted">(non-voting)</span>'; $job_line.append(
$(' <span />').addClass('muted').
text(' (non-voting)')
);
} }
html += job.url !== null ? '</a>' : '</span>'; $item.append($job_line);
html += '</li>'; $list.append($item);
}); });
html += '</ul></div>'; $html.append($list);
return html; return $html;
}, },
pipeline: function (pipeline) { pipeline: function (pipeline) {
var html = '<div class="zuul-pipeline span4"><h3>' + var $html = $('<div />')
pipeline.name + '</h3>'; .addClass('zuul-pipeline span4')
.append($('<h3 />').text(pipeline.name));
if (typeof pipeline.description === 'string') { if (typeof pipeline.description === 'string') {
html += '<p><small>' + pipeline.description + $html.append(
'</small></p>'; $('<p />').append(
$('<small />').text(pipeline.description)
)
);
} }
$.each(pipeline.change_queues, $.each(pipeline.change_queues,
@ -177,26 +184,25 @@
if (pipeline.change_queues.length > 1 && if (pipeline.change_queues.length > 1 &&
headNum === 0) { headNum === 0) {
var name = changeQueue.name; var name = changeQueue.name;
html += '<p>Queue: <abbr title="' + name + '">';
if (name.length > 32) { if (name.length > 32) {
name = name.substr(0, 32) + '...'; short_name = name.substr(0, 32) + '...';
} }
html += name + '</abbr></p>'; $html.append(
$('<p />')
.text('Queue: ')
.append(
$('<abbr />')
.attr('title', name)
.text(short_name)
)
);
} }
$.each(changes, function (changeNum, change) { $.each(changes, function (changeNum, change) {
// If there are multiple changes in the same head $html.append(zuul.format.change(change))
// it means they're connected
if (changeNum > 0) {
html += '<div class="zuul-change-arrow">' +
'&uarr;</div>';
}
html += zuul.format.change(change);
}); });
}); });
}); });
return $html;
html += '</div>';
return html;
} }
}, },
@ -246,8 +252,8 @@
'<i class="icon-refresh"></i></span>'); '<i class="icon-refresh"></i></span>');
$queueInfo = $('<p>Queue lengths: <span>0</span> events, ' + $queueInfo = $('<p>Queue lengths: <span>0</span> events, ' +
'<span>0</span> results.</p>'); '<span>0</span> results.</p>');
$queueEventsNum = $queueInfo.find('span').eq(0); $queueEventsNum = $queueInfo.find('span').eq(0);
$queueResultsNum = $queueEventsNum.next(); $queueResultsNum = $queueEventsNum.next();
$pipelines = $('<div class="row"></div>'); $pipelines = $('<div class="row"></div>');
$zuulVersion = $('<p>Zuul version: <span id="zuul-version-span">' + $zuulVersion = $('<p>Zuul version: <span id="zuul-version-span">' +
'</span></p>'); '</span></p>');