Add OpenStack themed status screen for Zuul.

Requires Zuul support for JSON status endpoints. Change-Id: I899a54af6d380aa2836a85757492e7590be90e8b Reviewed-on: https://review.openstack.org/18580 Reviewed-by: Jeremy Stanley <fungi@yuggoth.org> Approved: James E. Blair <corvus@inaugust.com> Tested-by: Jenkins
2012-12-22 11:05:58 -08:00 · 2012-12-22 11:05:58 -08:00 · bd4d0794c9
commit bd4d0794c9
parent 2c3641ca5b
6 changed files with 305 additions and 3 deletions
--- a/modules/openstack_project/files/zuul/layout.yaml
+++ b/modules/openstack_project/files/zuul/layout.yaml
@ -3,6 +3,7 @@ includes:

 pipelines:
  - name: check
+    description: Newly uploaded patchsets enter this pipeline to receive an initial +/-1 Verified vote from Jenkins.
    manager: IndependentPipelineManager
    trigger:
      - event: patchset-created
@ -14,6 +15,7 @@ pipelines:
      verified: -1

  - name: gate
+    description: Changes that have been approved by core developers are enqueued in order in this pipeline, and if they pass tests in Jenkins, will be merged.
    manager: DependentPipelineManager
    trigger:
      - event: comment-added
@ -30,18 +32,21 @@ pipelines:
      verified: -2

  - name: post
+    description: This pipeline runs jobs that operate after each change is merged.
    manager: IndependentPipelineManager
    trigger:
      - event: ref-updated
        ref: ^(?!(devnull|refs/.*)).*$

  - name: publish
+    description: When a commit is tagged, this pipeline runs jobs that operate on tags, such as uploading releases.
    manager: IndependentPipelineManager
    trigger:
      - event: ref-updated
        ref: ^refs/tags/.*$

  - name: silent
+    description: This pipeline is used for silently testing new jobs.
    manager: IndependentPipelineManager
    trigger:
      - event: patchset-created
--- a/modules/openstack_project/files/zuul/status.html
+++ b/modules/openstack_project/files/zuul/status.html
@ -0,0 +1,166 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:py="http://genshi.edgewall.org/"
+      lang="en">
+  <HEAD>
+<style type="text/css">
+.pipeline-wrap {
+    float: left;
+    position: relative;
+    left: 50%;
+}
+.pipeline-container {
+    float: left;
+    position: relative;
+    left: -50%;
+}
+.change {
+    border: 1px solid #95c7db;
+    margin-top: 10px;
+    padding: 2px;
+}
+.change > .header {
+    background: #E2ECEF;
+    color: black;
+    margin: -2px -2px 2px -2px;
+    padding: 4px;
+}
+.change > .header > .changeid {
+    float: right;
+}
+.job {
+    display: block;
+}
+.pipeline {
+    float: left;
+    width: 25em;
+    padding: 4px;
+}
+.pipeline > .header {
+    background: #0000cc;
+    color: white;
+}
+.arrow {
+    text-align: center;
+    font-size: 16pt;
+    line-height: 1.0;
+}
+</style>
+
+    <TITLE>Zuul Status</TITLE>
+
+<script type="text/javascript" src="jquery.min.js"></script>
+<script type="text/javascript" src="status.js"></script>
+
+    
+    <!-- Google Fonts -->
+    <link href='http://fonts.googleapis.com/css?family=PT+Sans&amp;subset=latin' rel='stylesheet' type='text/css'/>
+    
+    <!-- Framework CSS -->
+    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/blueprint/screen.css" type="text/css" media="screen, projection"/>
+    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/blueprint/print.css" type="text/css" media="print"/>
+    
+    <!-- IE CSS -->
+    <!--[if lt IE 8]><link rel="stylesheet" href="http://www.openstack.org/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
+    
+    <!-- OpenStack Specific CSS -->
+    
+    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/dropdown.css" type="text/css" media="screen, projection, print"/>
+
+    <!-- Page Specific CSS -->
+    <link rel="stylesheet" href="http://www.openstack.org/themes/openstack/css/home.css" type="text/css" media="screen, projection, print"/>
+	
+    <link rel="stylesheet" type="text/css" href="http://www.openstack.org/themes/openstack/css/main.css" />
+  </HEAD>
+
+  <BODY>
+    <div id="message-container">
+      <div class="container">
+	<div class="span-24 last">
+	  <p id="message"/>
+	</div>
+      </div>
+    </div>
+    <div class="container">
+      <div id="header">
+	<div class="span-5">
+	  <h1 id="logo"><a href="/">Open Stack</a></h1>
+	</div>
+	<div class="span-19 last blueLine">
+	  
+	  <div id="navigation" class="span-19">
+	    <ul id="Menu1">
+	      <li><a href="http://www.openstack.org/" title="Go to the Home page" class="link" >Home</a></li>
+   		  
+  	      <li><a href="http://www.openstack.org/projects/" title="Go to the OpenStack Projects page" class="link">Projects</a></li>
+   		  
+  	      <li><a href="http://www.openstack.org/user-stories/" title="Go to the User Stories page" class="link">User Stories</a></li>
+   		  
+  	      <li><a href="http://www.openstack.org/community/" title="Go to the Community page" class="current">Community</a></li>
+   	
+	      <li><a href="http://www.openstack.org/blog/" title="Go to the OpenStack Blog">Blog</a></li>
+	      <li><a href="http://wiki.openstack.org/" title="Go to the OpenStack Wiki">Wiki</a></li>
+	      <li><a href="http://docs.openstack.org/" title="Go to OpenStack Documentation">Documentation</a></li>
+ 	    </ul>
+	  </div>
+	</div>
+      </div>
+    </div>
+
+    <div class="container">
+      <h1> Zuul Status </h1>
+      <p> Zuul is a pipeline oriented project gating and automation
+	system.  Each of the sections below is a separate pipeline
+	configured to automate some portion of the testing or
+	operation of the OpenStack project.  For more information, please see
+	<a href="http://ci.openstack.org/zuul">the Zuul reference manual.</a>
+      </p>
+
+    </div>
+    <div class="pipeline-wrap">
+      <div id="pipeline-container" class="pipeline-container">
+      </div> <!--pipeline-container-->
+    </div> <!--pipeline-wrap-->
+
+    <div class="container">
+      <hr />
+      <div id="footer">
+	<div class="span-4">
+	  <h3>OpenStack</h3>
+	  <ul>
+	    <li><a href="http://www.openstack.org/projects/">Projects</a></li>
+	    <li><a href="http://www.openstack.org/openstack-security/">OpenStack Security</a></li>
+	    <li><a href="http://www.openstack.org/projects/openstack-faq/">Common Questions</a></li>
+	    <li><a href="http://www.openstack.org/blog/">Blog</a></li>
+	  </ul>
+	</div>
+	<div class="span-4">
+	  <h3>Community</h3>
+	  <ul>
+	    <li><a href="http://www.openstack.org/community/">User Groups</a></li>
+	    <li><a href="http://www.openstack.org/events/">Events</a></li>
+	    <li><a href="http://www.openstack.org/jobs/">Jobs</a></li>
+	    <li><a href="http://www.openstack.org/companies/">Companies</a></li>
+	    <li><a href="http://wiki.openstack.org/HowToContribute">Contribute</a></li>
+	  </ul>
+	</div>
+	<div class="span-4">
+	  <h3>Documentation</h3>
+	  <ul>
+	    <li><a href="http://docs.openstack.org/">OpenStack Manuals</a></li>
+	    <li><a href="http://docs.openstack.org/diablo/openstack-compute/starter/content/">Getting Started</a></li>
+	    <li><a href="http://wiki.openstack.org/">Wiki</a></li>
+	  </ul>
+	</div>
+	<div class="span-4 last">
+	  <h3>Branding &amp; Legal</h3>
+	  <ul>
+	    <li><a href="http://www.openstack.org/brand/">Logos &amp; Guidelines</a></li>
+	    <li><a href="http://www.openstack.org/brand/openstack-trademark-policy/">Trademark Policy</a></li>
+	    <li><a href="http://www.openstack.org/privacy/">Privacy Policy</a></li>
+	    <li><a href="http://wiki.openstack.org/CLA">OpenStack CLA</a></li>
+	  </ul>
+	</div>
+      </div>
+    </div>
+  </BODY>
+</html>
--- a/modules/openstack_project/files/zuul/status.js
+++ b/modules/openstack_project/files/zuul/status.js
@ -0,0 +1,103 @@
+// Copyright 2012 OpenStack 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.
+
+function format_pipeline(data) {
+    var html = '<div class="pipeline"><h3 class="subhead">'+
+        data['name']+'</h3>';
+    if (data['description'] != null) {
+        html += '<p>'+data['description']+'</p>';
+    }
+
+    $.each(data['change_queues'], function(change_queue_i, change_queue) {
+        if (data['change_queues'].length > 1) {
+            html += '<span> Change queue: ';
+
+            var name = change_queue['name'];
+            html += '<a title="' + name + '">';
+            if (name.length > 32) {
+                name = name.substr(0,32) + '...';
+            }
+            html += name + '</a></span>'
+        }
+        $.each(change_queue['heads'], function(head_i, head) {
+            $.each(head, function(change_i, change) {
+                if (change_i > 0) {
+                    html += '<div class="arrow">&uarr;</div>'
+                }
+                html += format_change(change);
+            });
+        });
+    });
+
+    html += '</div>';
+    return html;
+}
+
+function format_change(change) {
+    var html = '<div class="change"><div class="header">';
+
+    html += '<span class="project">'+change['project']+'</span>';
+    html += '<span class="changeid"><a href="'+change['url']+'">';
+    html += change['id']+'</a></span></div>';
+
+    html += '<div class="jobs">';
+    $.each(change['jobs'], function(i, job) {
+        result = job['result'];
+        if (result == null) {
+            result = 'unknown';
+        }
+        html += '<span class="job">';
+        if (job['url'] != null) {
+            html += '<a href="'+job['url']+'">';
+        }
+        html += job['name'];
+        if (job['url'] != null) {
+            html += '</a>';
+        }
+        html += ': '+result+'</span>';
+        if (job['voting'] == false) {
+            html += ' (non-voting)';
+        }
+    });
+
+    html += '</div></div>';
+    return html;
+}
+
+function update() {
+    var html = '';
+
+    $.getJSON('/status.json', function(data) {
+        if ('message' in data) {
+            $("#message-container").attr('class', 'topMessage');
+            $("#message").html('<b>'+data['message']+'</b>');
+        } else {
+            $("#message-container").removeClass('topMessage');
+        }
+
+        html += '<br style="clear:both"/>';
+
+        $.each(data['pipelines'], function(i, pipeline) {
+            html = html + format_pipeline(pipeline);
+        });
+
+        html += '<br style="clear:both"/>';
+        $("#pipeline-container").html(html);
+    });
+    setTimeout(update, 5000);
+}
+
+$(function() {
+    update();
+});
--- a/modules/openstack_project/manifests/zuul.pp
+++ b/modules/openstack_project/manifests/zuul.pp
@ -61,4 +61,31 @@ class openstack_project::zuul(
    source  => 'puppet:///modules/openstack_project/zuul/scoreboard.html',
    require => File['/var/lib/recheckwatch'],
  }
+
+  file { '/var/lib/zuul/www':
+    ensure  => directory,
+    require => File['/var/lib/zuul'],
+  }
+
+  file { '/var/lib/zuul/www/index.html':
+    ensure  => present,
+    source  => 'puppet:///modules/openstack_project/zuul/status.html',
+    require => File['/var/lib/zuul/www'],
+  }
+
+  package { 'libjs-jquery':
+    ensure => present,
+  }
+
+  file { '/var/lib/zuul/www/jquery.min.js':
+    ensure  => link,
+    target  => '/usr/share/javascript/jquery/jquery.min.js',
+    require => Package['libjs-jquery'],
+  }
+
+  file { '/var/lib/zuul/www/status.js':
+    ensure  => present,
+    source  => 'puppet:///modules/openstack_project/zuul/status.js',
+    require => File['/var/lib/zuul/www'],
+  }
 }
--- a/modules/zuul/manifests/init.pp
+++ b/modules/zuul/manifests/init.pp
@ -124,7 +124,7 @@ class zuul (
  file { '/var/lib/zuul/git':
    ensure  => directory,
    owner   => 'zuul',
-    require => User['zuul'],
+    require => File['/var/lib/zuul'],
  }

  file { '/var/lib/zuul/ssh':
--- a/modules/zuul/templates/zuul.vhost.erb
+++ b/modules/zuul/templates/zuul.vhost.erb
@ -1,5 +1,6 @@
 <VirtualHost <%= scope.lookupvar("::zuul::vhost_name") %>:80>
  ServerAdmin <%= scope.lookupvar("::zuul::serveradmin") %>
+  DocumentRoot /var/lib/zuul/www

  ErrorLog ${APACHE_LOG_DIR}/<%= scope.lookupvar("::zuul::vhost_name") %>-error.log

@ -8,8 +9,8 @@
  CustomLog ${APACHE_LOG_DIR}/<%= scope.lookupvar("::zuul::vhost_name") %>-access.log combined

  RewriteEngine on
-  RewriteRule /zuul/status http://127.0.0.1:8001/status [P]
-  RewriteRule ^/$ http://127.0.0.1:8001/status [P]
+  RewriteRule ^/zuul/status$ http://127.0.0.1:8001/status [P]
+  RewriteRule ^/status.json$ http://127.0.0.1:8001/status.json [P]

  Alias /rechecks.html /var/www/recheckwatch/rechecks.html