diff --git a/etc/status/public_html/index.html b/etc/status/public_html/index.html index 6bd9da891a..d77470bb7b 100644 --- a/etc/status/public_html/index.html +++ b/etc/status/public_html/index.html @@ -24,83 +24,17 @@ under the License. -
-

Zuul Status

-

Real-time status monitor of Zuul, the pipeline manager between Gerrit and Workers.

-
- - +
-

Queue lengths: 0 events, 0 results.

-
-
- -

Zuul version:

-

Last reconfigured:

-
-
+ diff --git a/etc/status/public_html/jquery.zuul.js b/etc/status/public_html/jquery.zuul.js index d6f93c82f6..9a3c1fa259 100644 --- a/etc/status/public_html/jquery.zuul.js +++ b/etc/status/public_html/jquery.zuul.js @@ -1,4 +1,4 @@ -// Client script for Zuul status page +// jquery plugin for Zuul status page // // Copyright 2012 OpenStack Foundation // Copyright 2013 Timo Tijhof diff --git a/etc/status/public_html/zuul.app.js b/etc/status/public_html/zuul.app.js new file mode 100644 index 0000000000..6f87a92c4d --- /dev/null +++ b/etc/status/public_html/zuul.app.js @@ -0,0 +1,97 @@ +// Client script for Zuul status page +// +// Copyright 2013 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 zuul_build_dom($, container) { + // Build a default-looking DOM + default_layout = '
' + + '

Zuul Status

' + + '

Real-time status monitor of Zuul, the pipeline manager between Gerrit and Workers.

' + + '
' + + '' + + '' + + '

Queue lengths: 0 events, 0 results.

' + + '
' + + '
' + + '

Zuul version:

' + + '

Last reconfigured:

' + + '
'; + + $(function ($) { + // DOM ready + $container = $(container); + $container.html(default_layout); + }); +} + +function zuul_start($) { + // Start the zuul app (expects default dom) + + var $container, $indicator; + var 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; + + var zuul = $.zuul({ + source: source, + //graphite_url: 'http://graphite.openstack.org/render/' + }); + + zuul.jq.on('update-start', function () { + $container.addClass('zuul-container-loading'); + $indicator.addClass('zuul-spinner-on'); + }); + + zuul.jq.on('update-end', function () { + $container.removeClass('zuul-container-loading'); + setTimeout(function () { + $indicator.removeClass('zuul-spinner-on'); + }, 500); + }); + + zuul.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 ($) { + // DOM ready + $container = $('#zuul-container'); + $indicator = $('#zuul-spinner'); + $('#zuul_controls').append(zuul.app.control_form()); + + zuul.app.schedule(); + + $(document).on({ + 'show.visibility': function () { + zuul.options.enabled = true; + zuul.app.update(); + }, + 'hide.visibility': function () { + zuul.options.enabled = false; + } + }); + }); +} \ No newline at end of file