Krinkle has submitted this change and it was merged.
Change subject: Zuul status page: Re-organise as object
......................................................................
Zuul status page: Re-organise as object
* Removed unused purgeGraphs code
* Save XHR object and abort ajax request in update() if the
previous update is stil running. This allows, for example,
document.onshow to call update() outside the scheduler without
accidentally starting another loop or requesting simultaneously.
Change-Id: I4cd0fd0ce3e1005a918e42d0800de80b35def5dc
---
M org/wikimedia/integration/zuul/index.php
M org/wikimedia/integration/zuul/status.js
2 files changed, 197 insertions(+), 206 deletions(-)
Approvals:
Krinkle: Verified; Looks good to me, approved
diff --git a/org/wikimedia/integration/zuul/index.php
b/org/wikimedia/integration/zuul/index.php
index 953bab1..73c9334 100644
--- a/org/wikimedia/integration/zuul/index.php
+++ b/org/wikimedia/integration/zuul/index.php
@@ -26,12 +26,16 @@
background-color: #fff;
}
-.zuul-spinner {
+.zuul-spinner,
+.zuul-spinner:hover /* override bootstrap .btn:hover */ {
opacity: 0;
transition: opacity 6s ease-in-out;
cursor: default;
+ pointer-events: none;
}
-.zuul-spinner-on {
+
+.zuul-spinner-on,
+.zuul-spinner-on:hover {
opacity: 1;
transition-duration: 0.5s;
cursor: progress;
diff --git a/org/wikimedia/integration/zuul/status.js
b/org/wikimedia/integration/zuul/status.js
index 5df46af..1d55409 100644
--- a/org/wikimedia/integration/zuul/status.js
+++ b/org/wikimedia/integration/zuul/status.js
@@ -16,234 +16,221 @@
// License for the specific language governing permissions and limitations
// under the License.
-/*jshint eqnull:true, camelcase:false */
+/*jshint camelcase:false */
(function ($) {
- var $container, $msg, $msgWrap, $indicator, prevHtml,
- updateCount = 0,
- enableStatusUpdates = true,
- demo = location.search.match(/[?&]demo=([^?&]*)/),
- source = demo ? './sample-status-' + (demo[1] || 'basic') + '.json' :
'/zuul/status.json';
+ var $container, $msg, $msgWrap, $indicator, prevHtml, xhr, zuul, $jq,
+ demo = location.search.match(/[?&]demo=([^?&]*)/),
+ source = demo ? './sample-status-' + (demo[1] || 'basic') +
'.json' : '/zuul/status.json';
- /**
- * @param {Object} pipeline
- * @return {string} html
- */
- function formatPipeline(pipeline) {
- var html = '<div class="zuul-pipeline span4"><h3>' +
- pipeline.name + '</h3>';
- if (pipeline.description != null) {
- html += '<p><small>' + pipeline.description + '</small></p>';
- }
+ zuul = {
+ enabled: true,
- $.each(pipeline.change_queues, function (queueNum, changeQueue) {
- $.each(changeQueue.heads, function (headNum, changes) {
- if (pipeline.change_queues.length > 1 && headNum === 0) {
- html += '<p>Queue: ';
+ schedule: function () {
+ if (!zuul.enabled) {
+ setTimeout(zuul.schedule, 5000);
+ return;
+ }
+ zuul.update().complete(function () {
+ setTimeout(zuul.schedule, 5000);
+ });
+ },
- var name = changeQueue.name;
- html += '<abbr title="' + name + '">';
- if (name.length > 32) {
- name = name.substr(0, 32) + '...';
- }
- html += name + '</abbr></p>';
- }
- $.each(changes, function (changeNum, change) {
- // If there are multiple changes in the same head it means
- // they're connected (dependant?)
- if (changeNum > 0) {
- html += '<div class="zuul-change-arrow">↑</div>';
- }
- html += formatChange(change);
- });
- });
- });
+ /** @return {jQuery.Promise} */
+ update: function () {
+ // Cancel the previous update if it hasn't completed
yet.
+ if (xhr) {
+ xhr.abort();
+ }
- html += '</div>';
- return html;
- }
+ zuul.emit('update-start');
- /**
- * @param {Object} change
- * @return {string} html
- */
- function formatChange(change) {
- var html = '<div class="well well-small zuul-change"><ul class="nav
nav-list">',
- id = change.id,
- url = change.url;
+ xhr = $.ajax({
+ url: source,
+ dataType: 'json',
+ cache: false
+ })
+ .done(function (data) {
+ var html = '';
+ data = data || {};
- html += '<li class="nav-header">' + change.project;
- if (id.length === 40) {
- id = id.substr(0, 7);
- }
- html += '<span class="zuul-change-id">';
- if (url != null) {
- html += '<a href="' + url + '">';
- }
- html += id;
- if (url != null) {
- html += '</a>';
- }
- html += '</span></li>';
+ if ('message' in data) {
+ $msg.html(data.message);
+
$msgWrap.removeClass('zuul-msg-wrap-off');
+ } else {
+ $msg.empty();
+ $msgWrap.addClass('zuul-msg-wrap-off');
+ }
- $.each(change.jobs, function (i, job) {
- var result = job.result ? job.result.toLowerCase() : null,
- resultClass = 'zuul-result label';
- if (result === null) {
- result = job.url ? 'in progress' : 'queued';
- }
- switch (result) {
- case 'success':
- resultClass += ' label-success';
- break;
- case 'failure':
- resultClass += ' label-important';
- break;
- case 'lost':
- case 'unstable':
- resultClass += ' label-warning';
- break;
- }
- html += '<li class="zuul-change-job">';
- if (job.url != null) {
- html += '<a href="' + job.url + '">';
- }
- html += job.name;
- html += ' <span class="' + resultClass + '">' + result + '</span>';
- if (job.voting === false) {
- html += ' <span class="muted">(non-voting)</span>';
- }
- if (job.url != null) {
- html += '</a>';
- }
- html += '</li>';
- });
+ $.each(data.pipelines, function (i, pipeline) {
+ html += zuul.format.pipeline(pipeline);
+ });
- html += '</ul></div>';
- return html;
- }
+ // Only re-parse the DOM if we have to
+ if (html !== prevHtml) {
+ prevHtml = html;
+ $('#zuul-pipelines').html(html);
+ }
- function scheduleUpdate() {
- if (!enableStatusUpdates) {
- setTimeout(scheduleUpdate, 5000);
- return;
- }
+ $('#zuul-eventqueue-length').text(
+ data.trigger_event_queue ?
data.trigger_event_queue.length : '?'
+ );
+ $('#zuul-resulteventqueue-length').text(
+ data.result_event_queue ?
data.result_event_queue.length : '?'
+ );
+ })
+ .fail(function (err, jqXHR, errMsg) {
+ $msg.text(source + ': ' + errMsg).show();
+ $msgWrap.removeClass('zuul-msg-wrap-off');
+ })
+ .complete(function () {
+ xhr = undefined;
+ zuul.emit('update-end');
+ });
- update().complete(function () {
+ return xhr;
+ },
- updateCount += 1;
+ format: {
+ change: function (change) {
+ var html = '<div class="well well-small
zuul-change"><ul class="nav nav-list">',
+ id = change.id,
+ url = change.url;
- // Only update graphs every minute
- if (updateCount > 12) {
- updateCount = 1;
- purgeGraphs();
- }
+ html += '<li class="nav-header">' +
change.project;
+ if (id.length === 40) {
+ id = id.substr(0, 7);
+ }
+ html += '<span class="zuul-change-id">';
+ if (url !== null) {
+ html += '<a href="' + url + '">';
+ }
+ html += id;
+ if (url !== null) {
+ html += '</a>';
+ }
+ html += '</span></li>';
- setTimeout(scheduleUpdate, 5000);
- });
- }
+ $.each(change.jobs, function (i, job) {
+ var result = job.result ?
job.result.toLowerCase() : null,
+ resultClass = 'zuul-result
label';
+ if (result === null) {
+ result = job.url ? 'in
progress' : 'queued';
+ }
+ switch (result) {
+ case 'success':
+ resultClass += ' label-success';
+ break;
+ case 'failure':
+ resultClass += '
label-important';
+ break;
+ case 'lost':
+ case 'unstable':
+ resultClass += ' label-warning';
+ break;
+ }
+ html += '<li class="zuul-change-job">';
+ if (job.url !== null) {
+ html += '<a href="' + job.url +
'">';
+ }
+ html += job.name;
+ html += ' <span class="' + resultClass
+ '">' + result + '</span>';
+ if (job.voting === false) {
+ html += ' <span
class="muted">(non-voting)</span>';
+ }
+ if (job.url !== null) {
+ html += '</a>';
+ }
+ html += '</li>';
+ });
- function updateStart() {
- $container.addClass('zuul-container-loading');
- $indicator.addClass('zuul-spinner-on');
- }
+ html += '</ul></div>';
+ return html;
+ },
- function updateEnd() {
- $container.removeClass('zuul-container-loading');
- setTimeout(function () {
- $indicator.removeClass('zuul-spinner-on');
- }, 550);
- if (updateCount === 0) {
- // Remove this asynchronous so that if the first
- // update adds a message, the message does not animate
- // but appears instantly with the rest of the content.
- setTimeout(function () {
- $container.addClass('zuul-container-ready');
- });
- }
- }
+ pipeline: function (pipeline) {
+ var html = '<div class="zuul-pipeline
span4"><h3>' +
+ pipeline.name + '</h3>';
+ if (typeof pipeline.description === 'string') {
+ html += '<p><small>' +
pipeline.description + '</small></p>';
+ }
- /**
- * @return {jQuery.Promise}
- */
- function update() {
- updateStart();
- return $.ajax({
- url: source,
- dataType: 'json',
- cache: false
- })
- .done(function (data) {
- var html = '';
- data = data || {};
+ $.each(pipeline.change_queues, function
(queueNum, changeQueue) {
+ $.each(changeQueue.heads, function
(headNum, changes) {
+ if
(pipeline.change_queues.length > 1 && headNum === 0) {
+ var name =
changeQueue.name;
+ html += '<p>Queue:
<abbr title="' + name + '">';
+ if (name.length > 32) {
+ name =
name.substr(0, 32) + '...';
+ }
+ html += name +
'</abbr></p>';
+ }
+ $.each(changes, function
(changeNum, change) {
+ // If there are
multiple changes in the same head it means they're connected
+ if (changeNum > 0) {
+ html += '<div
class="zuul-change-arrow">↑</div>';
+ }
+ html +=
zuul.format.change(change);
+ });
+ });
+ });
- if ('message' in data) {
- $msg.html(data.message);
- $msgWrap.removeClass('zuul-msg-wrap-off');
- } else {
- $msg.empty();
- $msgWrap.addClass('zuul-msg-wrap-off');
- }
+ html += '</div>';
+ return html;
+ }
+ },
- $.each(data.pipelines, function (i, pipeline) {
- html += formatPipeline(pipeline);
- });
+ emit: function () {
+ $jq.trigger.apply($jq, arguments);
+ return this;
+ },
+ on: function () {
+ $jq.on.apply($jq, arguments);
+ return this;
+ },
+ one: function () {
+ $jq.one.apply($jq, arguments);
+ return this;
+ }
+ };
- // Only re-parse the DOM if we have to
- if (html !== prevHtml) {
- prevHtml = html;
- $('#zuul-pipelines').html(html);
- }
+ $jq = $(zuul);
- $('#zuul-eventqueue-length').text(
- data.trigger_event_queue ? data.trigger_event_queue.length :
'?'
- );
- $('#zuul-resulteventqueue-length').text(
- data.result_event_queue ? data.result_event_queue.length : '?'
- );
- updateEnd();
+ $jq.on('update-start', function () {
+ $container.addClass('zuul-container-loading');
+ $indicator.addClass('zuul-spinner-on');
+ });
- })
- .fail(function (err, jqXHR, errMsg) {
- $msg.text(source + ': ' + errMsg).show();
- $msgWrap.removeClass('zuul-msg-wrap-off');
- updateEnd();
- });
- }
+ $jq.on('update-end', function () {
+ $container.removeClass('zuul-container-loading');
+ setTimeout(function () {
+ $indicator.removeClass('zuul-spinner-on');
+ }, 550);
+ });
- function purgeGraphs() {
- $('.graph').each(function (i, img) {
- var newimg = new Image(),
- parts = img.src.split('#');
- newimg.src = parts[0] + '#' + new Date().getTime();
- $(newimg).load(function () {
- img.src = newimg.src;
- });
- });
- }
+ $jq.one('update-end', function () {
+ // Do this asynchronous so that if the first update adds a
message, it will not animate
+ // while we fade in the content. Instead it simply appears with
the rest of the content.
+ setTimeout(function () {
+ $container.addClass('zuul-container-ready'); // Fades
in the content
+ });
+ });
- $(function ($) {
- $container = $('#zuul-container');
- $indicator = $('<span class="btn pull-right zuul-spinner">updating <i
class="icon-refresh"></i></span>')
- .prependTo($container);
- $msg = $('<div class="zuul-msg alert alert-error"></div>');
- $msgWrap = $msg
- .wrap('<div class="zuul-msg-wrap zuul-msg-wrap-off"></div>')
- .parent()
- .prependTo($container);
+ $(function ($) {
+ $indicator = $('<span class="btn pull-right
zuul-spinner">updating <i class="icon-refresh"></i></span>');
+ $msg = $('<div class="zuul-msg alert alert-error"></div>');
+ $msgWrap = $msg.wrap('<div class="zuul-msg-wrap
zuul-msg-wrap-off"></div>').parent();
+ $container = $('#zuul-container').prepend($msgWrap, $indicator);
- scheduleUpdate();
+ zuul.schedule();
- $(document).on({
- 'show.visibility': function () {
- enableStatusUpdates = true;
- update();
- purgeGraphs();
- },
- 'hide.visibility': function () {
- enableStatusUpdates = false;
- }
- });
-
- });
-
+ $(document).on({
+ 'show.visibility': function () {
+ zuul.enabled = true;
+ zuul.update();
+ },
+ 'hide.visibility': function () {
+ zuul.enabled = false;
+ }
+ });
+ });
}(jQuery));
--
To view, visit https://gerrit.wikimedia.org/r/57900
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4cd0fd0ce3e1005a918e42d0800de80b35def5dc
Gerrit-PatchSet: 1
Gerrit-Project: integration/docroot
Gerrit-Branch: master
Gerrit-Owner: Krinkle <ttij...@wikimedia.org>
Gerrit-Reviewer: Krinkle <ttij...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
