Zuul status page: Redesign and fix bugs
status.html:
- Added eventqueue-length status (was already present in production
but not committed here yet).
- HTML5 markup.
- Remove unused jquery-visibility.min.js and jquery-graphite.js.
status.js:
- Clean up (various js best practices and consistent coding style)
- Use empty() instead of html('').
- Use text() for text instead of html().
html() will trigger the parser where text will simply create
a text node with the string literal, much faster, safer and
semantically correct.
- Fix implied global variable leak 'result'.
- Fix reference error that crashes/freezes the page
Property data.trigger_event_queue and data.trigger_event_queue
can be undefined, in which case data.trigger_event_queue.length
causes an uncaught TypeError to be thrown.
- Use a closure instead of polluting global scope.
- Rewrite object oriented.
- Added 'demo' feature for easy local testing.
Downstream commits at
https://gerrit.wikimedia.org/r/#/q/project:integration/docroot+topic:zuul-js+branch:master+owner:Krinkle+is:merged,n,z
Change-Id: Iddd4e2787f2e2eb27bf428f733fbb8b4a9d162d5
Reviewed-on: https://review.openstack.org/26416
Reviewed-by: James E. Blair <corvus@inaugust.com>
Reviewed-by: Clark Boylan <clark.boylan@gmail.com>
Reviewed-by: Jeremy Stanley <fungi@yuggoth.org>
Approved: James E. Blair <corvus@inaugust.com>
Tested-by: Jenkins
diff --git a/etc/status/public_html/index.html b/etc/status/public_html/index.html
new file mode 100644
index 0000000..f5efce0
--- /dev/null
+++ b/etc/status/public_html/index.html
@@ -0,0 +1,141 @@
+<!--
+Copyright 2013 OpenStack Foundation
+Copyright 2013 Timo Tijhof
+Copyright 2013 Wikimedia Foundation
+
+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.
+-->
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+ <title>Zuul Status</title>
+ <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
+ <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
+ <style>
+.zuul-container {
+ transition-property: opacity, background-color;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-out;
+ clear: both;
+ opacity: 0;
+ cursor: progress;
+ min-height: 400px;
+ background-color: #f8ffaa;
+}
+
+.zuul-container-ready {
+ opacity: 1;
+ cursor: auto;
+ background-color: #fff;
+}
+
+.zuul-spinner,
+.zuul-spinner:hover {
+ opacity: 0;
+ transition: opacity 3s ease-out;
+ cursor: default;
+ pointer-events: none;
+}
+
+.zuul-spinner-on,
+.zuul-spinner-on:hover {
+ opacity: 1;
+ transition-duration: 0.4s;
+ cursor: progress;
+}
+
+.zuul-change-arrow {
+ text-align: center;
+ font-size: 16pt;
+ line-height: 1.0;
+}
+
+.zuul-change-id {
+ text-transform: none;
+}
+
+.zuul-change-job a {
+ overflow: auto;
+}
+
+.zuul-result {
+ text-shadow: none;
+ font-weight: normal;
+ background-color: #E9E9E9;
+ color: #555;
+}
+
+.zuul-result.label-success {
+ background-color: #CDF0CD;
+ color: #468847;
+}
+
+.zuul-result.label-important {
+ background-color: #F1DBDA;
+ color: #B94A48;
+}
+
+.zuul-result.label-warning {
+ background-color: #F3E6D4;
+ color: #F89406;
+}
+
+.zuul-msg-wrap {
+ max-height: 150px;
+ overflow: hidden;
+}
+
+.zuul-container-ready .zuul-msg-wrap {
+ transition: max-height 1s ease-in;
+}
+
+.zuul-msg-wrap-off {
+ max-height: 0;
+}
+
+.zuul-msg p {
+ margin: 0;
+}
+
+/**
+ * Styles for Bootstrap only
+ * (remove when not using Bootstrap)
+ */
+
+.zuul-change-id {
+ float: right;
+}
+
+.zuul-change-job-link {
+ overflow: auto;
+ display: block;
+}
+
+.zuul-result {
+ float: right;
+}
+
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Zuul Status</h1>
+ <p>Real-time status monitor of Zuul, the pipeline manager between Gerrit and Jenkins.</p>
+
+ <div class="zuul-container" id="zuul-container"></div>
+ </div>
+ <script src="jquery.min.js"></script>
+ <script src="jquery-visibility.min.js"></script>
+ <script src="app.js"></script>
+</body>
+</html>