Make zuul javascript app more modular
Refactor the zuul status app to be more modular. This allows the
controlling page (eg index.html) to load in only the components
it requires. This will make it easier to format just one patchset
or change where the layout controls are etc.
This is to work towards overlaying zuul results in gerrit.
Change-Id: Idfba9f08c25850c340cc962fa0f5f9652306b877
diff --git a/etc/status/public_html/index.html b/etc/status/public_html/index.html
index bea1a79..6dd70d2 100644
--- a/etc/status/public_html/index.html
+++ b/etc/status/public_html/index.html
@@ -28,11 +28,79 @@
<h1>Zuul Status</h1>
<p>Real-time status monitor of Zuul, the pipeline manager between Gerrit and Workers.</p>
- <div class="zuul-container" id="zuul-container"></div>
+ <div class="zuul-container" id="zuul-container">
+ <div style="display: none;" class="alert" id="zuul_msg"></div>
+ <button class="btn pull-right zuul-spinner">updating <span class="glyphicon glyphicon-refresh"></span></button>
+
+ <p>Queue lengths: <span id="zuul_queue_events_num">0</span> events, <span id="zuul_queue_results_num">0</span> results.</p>
+ <div id="zuul_controls"></div>
+ <div id="zuul_pipelines" class="row"></div>
+
+ <p>Zuul version: <span id="zuul-version-span"></span></p>
+ <p>Last reconfigured: <span id="last-reconfigured-span"></span></p>
+ </div>
</div>
<script src="jquery.min.js"></script>
<script src="jquery-visibility.min.js"></script>
<script src="jquery.graphite.js"></script>
<script src="app.js"></script>
+ <script>
+ (function ($) {
+ // Load immediately
+
+ 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;
+ }
+ });
+ });
+ }(jQuery));
+ </script>
</body>
</html>