etc/status/public_html/app.js

// Client script for Zuul status page
//
// Copyright 2012 OpenStack Foundation
// Copyright 2013 Timo Tijhof
// Copyright 2013 Wikimedia Foundation
// Copyright 2014 Rackspace Australia
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may
// not use this file except in compliance with the License. You may obtain
// a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations
// under the License.

(function ($) {
    var $container, $msg, $indicator, $queueInfo, $queueEventsNum,
        $queueResultsNum, $pipelines, $jq;
    var xhr, zuul,
        demo = location.search.match(/[?&]demo=([^?&]*)/),
        source_url = location.search.match(/[?&]source_url=([^?&]*)/),
        source = demo ?
            './status-' + (demo[1] || 'basic') + '.json-sample' :
            'status.json';
        source = source_url ? source_url[1] : source;

    zuul = {
        enabled: true,

        schedule: function () {
            if (!zuul.enabled) {
                setTimeout(zuul.schedule, 5000);
                return;
            }
            zuul.update().complete(function () {
                setTimeout(zuul.schedule, 5000);
            });
        },

        /** @return {jQuery.Promise} */
        update: function () {
            // Cancel the previous update if it hasn't completed yet.
            if (xhr) {
                xhr.abort();
            }

            zuul.emit('update-start');

            xhr = $.getJSON(source)
                .done(function (data) {
                    if ('message' in data) {
                        $msg.removeClass('alert-danger').addClass('alert-info');
                        $msg.text(data.message);
                        $msg.show();
                    } else {
                        $msg.empty();
                        $msg.hide();
                    }

                    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());
                    }

                    $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');
                })
                .complete(function () {
                    xhr = undefined;
                    zuul.emit('update-end');
                });

            return xhr;
        },

        format: {
            job: function(job) {
                if (job.url !== null) {
                    $job_line = $('<a href="' + job.url + '" />');
                }
                else{
                    $job_line = $('<span />');
                }
                $job_line.text(job.name)
                    .append(zuul.format.job_status(job));

                if (job.voting === false) {
                    $job_line.append(
                        $(' <small />').text(' (non-voting)')
                    );
                }
                return $job_line;
            },

            job_status: function(job) {
                var result = job.result ? job.result.toLowerCase() : null;
                if (result === null) {
                    result = job.url ? 'in progress' : 'queued';
                }

                if (result == 'in progress') {
                    return zuul.format.job_progress_bar(job.elapsed_time,
                                                        job.remaining_time);
                }
                else {
                    return zuul.format.status_label(result);
                }
            },

            status_label: function(result) {
                $status = $('<span />');
                $status.addClass('zuul-job-result label');

                switch (result) {
                    case 'success':
                        $status.addClass('label-success');
                        break;
                    case 'failure':
                        $status.addClass('label-danger');
                        break;
                    case 'unstable':
                        $status.addClass('label-warning');
                        break;
                    case 'in progress':
                    case 'queued':
                    case 'lost':
                        $status.addClass('label-default');
                        break;
                }
                $status.text(result);
                return $status;
            },

            job_progress_bar: function(elapsed_time, remaining_time) {
                var progress_percent = 100 * (elapsed_time / (elapsed_time +
                                                              remaining_time));
                var $bar_inner = $('<div />')
                    .addClass('progress-bar')
                    .attr('role', 'progressbar')
                    .attr('aria-valuenow', 'progressbar')
                    .attr('aria-valuemin', progress_percent)
                    .attr('aria-valuemin', '0')
                    .attr('aria-valuemax', '100')
                    .css('width', progress_percent + '%');

                var $bar_outter = $('<div />')
                    .addClass('progress zuul-job-result')
                    .append($bar_inner);

                return $bar_outter;
            },

            enqueue_time: function(ms) {
                // Special format case for enqueue time to add style
                var hours = 60 * 60 * 1000;
                var now = Date.now();
                var delta = now - ms;
                var status = "text-success";
                var text = zuul.format.time(delta, true);
                if (delta > (4 * hours)) {
                    status = "text-danger";
                } else if (delta > (2 * hours)) {
                    status = "text-warning";
                }
                return '<span class="' + status + '">' + text + '</span>';
            },

            time: function(ms, words) {
                if (typeof(words) === 'undefined') words = false;
                var seconds = (+ms)/1000;
                var minutes = Math.floor(seconds/60);
                var hours = Math.floor(minutes/60);
                seconds = Math.floor(seconds % 60);
                minutes = Math.floor(minutes % 60);
                r = '';
                if (words) {
                    if (hours) {
                        r += hours;
                        r += ' hr ';
                    }
                    r += minutes + ' min';
                } else {
                    if (hours < 10) r += '0';
                    r += hours + ':';
                    if (minutes < 10) r += '0';
                    r += minutes + ':';
                    if (seconds < 10) r += '0';
                    r += seconds;
                }
                return r;
            },

            change_total_progress_bar: function(change) {
                job_percent = Math.floor(100 / change.jobs.length);
                var $bar_outter = $('<div />')
                    .addClass('progress zuul-change-total-result');

                $.each(change.jobs, function (i, job) {
                    var result = job.result ? job.result.toLowerCase() : null;
                    if (result === null) {
                        result = job.url ? 'in progress' : 'queued';
                    }

                    if (result != 'queued') {
                        var $bar_inner = $('<div />')
                            .addClass('progress-bar');

                        switch (result) {
                            case 'success':
                                $bar_inner.addClass('progress-bar-success');
                                break;
                            case 'lost':
                            case 'failure':
                                $bar_inner.addClass('progress-bar-danger');
                                break;
                            case 'unstable':
                                $bar_inner.addClass('progress-bar-warning');
                                break;
                            case 'in progress':
                            case 'queued':
                                break;
                        }
                        $bar_inner.attr('title', job.name)
                            .css('width', job_percent + '%');
                        $bar_outter.append($bar_inner);
                    }
                });
                return $bar_outter;
            },

            change_header: function(change) {
                change_id = change.id || 'NA';
                if (change_id.length === 40) {
                    change_id = change_id.substr(0, 7);
                }

                $change_link = $('<small />');
                if (change.url !== null) {
                    $change_link.append(
                        $("<a />").attr("href", change.url).text(change.id)
                    );
                }
                else {
                    $change_link.text(change_id);
                }

                $change_progress_row_left = $('<div />')
                    .addClass('col-xs-3')
                    .append($change_link);
                $change_progress_row_right = $('<div />')
                    .addClass('col-xs-9')
                    .append(zuul.format.change_total_progress_bar(change))

                $change_progress_row = $('<div />')
                    .addClass('row')
                    .append($change_progress_row_left)
                    .append($change_progress_row_right)

                $left = $('<div />')
                    .addClass('col-xs-8')
                    .html(change.project + '<br />')
                    .append($change_progress_row);

                remaining_time = zuul.format.time(change.remaining_time, true);
                enqueue_time = zuul.format.enqueue_time(change.enqueue_time);
                $remaining_time = $('<small />').addClass('time')
                    .attr('title', 'Remaining Time').html(remaining_time);
                $enqueue_time = $('<small />').addClass('time')
                    .attr('title', 'Elapsed Time').html(enqueue_time);

                $right = $('<div />')
                    .addClass('col-xs-4 text-right')
                    .append($remaining_time, $('<br />'), $enqueue_time);

                $header = $('<div />')
                    .addClass('row')
                    .append($left, $right);
                return $header;
            },

            change_list: function(jobs) {
                var $list = $('<ul />')
                    .addClass('list-group');

                $.each(jobs, function (i, job) {
                    var $item = $('<li />')
                        .addClass('list-group-item')
                        .addClass('zuul-change-job')
                        .append(zuul.format.job(job));
                    $list.append($item);
                });

                return $list;
            },

            change_panel: function (change) {
                var $header = $('<div />')
                    .addClass('panel-heading')
                    .append(zuul.format.change_header(change));

                var $html = $('<div />')
                    .addClass('panel panel-default zuul-change')
                    .append($header)
                    .append(zuul.format.change_list(change.jobs));
                return $html;
            },

            pipeline: function (pipeline) {
                var $html = $('<div />')
                    .addClass('zuul-pipeline col-md-4')
                    .append($('<h3 />').text(pipeline.name));

                if (typeof pipeline.description === 'string') {
                    $html.append(
                        $('<p />').append(
                            $('<small />').text(pipeline.description)
                        )
                    );
                }

                $.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;
                            var short_name = name;
                            if (short_name.length > 32) {
                                short_name = short_name.substr(0, 32) + '...';
                            }
                            $html.append(
                                $('<p />')
                                    .text('Queue: ')
                                    .append(
                                        $('<abbr />')
                                            .attr('title', name)
                                            .text(short_name)
                                    )
                            );
                        }
                        $.each(changes, function (changeNum, change) {
                            $html.append(zuul.format.change_panel(change))
                        });
                    });
                });
                return $html;
            }
        },

        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;
        }
    };

    $jq = $(zuul);

    $jq.on('update-start', function () {
        $container.addClass('zuul-container-loading');
        $indicator.addClass('zuul-spinner-on');
    });

    $jq.on('update-end', function () {
        $container.removeClass('zuul-container-loading');
        setTimeout(function () {
            $indicator.removeClass('zuul-spinner-on');
        }, 550);
    });

    $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 () {
            // Fade in the content
            $container.addClass('zuul-container-ready');
        });
    });

    $(function ($) {
        $msg = $('<div />').addClass('alert').hide();
        $indicator = $('<button class="btn pull-right zuul-spinner">updating '
                       + '<span class="glyphicon glyphicon-refresh"></span>'
                       + '</button>');
        $queueInfo = $('<p>Queue lengths: <span>0</span> events, ' +
                       '<span>0</span> results.</p>');
        $queueEventsNum = $queueInfo.find('span').eq(0);
        $queueResultsNum = $queueEventsNum.next();
        $pipelines = $('<div class="row"></div>');
        $zuulVersion = $('<p>Zuul version: <span id="zuul-version-span">' +
                         '</span></p>');
        $lastReconf = $('<p>Last reconfigured: ' +
                        '<span id="last-reconfigured-span"></span></p>');

        $container = $('#zuul-container').append($msg, $indicator,
                                                 $queueInfo, $pipelines,
                                                 $zuulVersion, $lastReconf);

        zuul.schedule();

        $(document).on({
            'show.visibility': function () {
                zuul.enabled = true;
                zuul.update();
            },
            'hide.visibility': function () {
                zuul.enabled = false;
            }
        });
    });
}(jQuery));