system-config/modules/openstack_project/templates/zuul/status.html.erb
Yolanda Robla 80bf9229a2 Add configurable graphite url on zuul status
Add the ability to pass the graphite url by parameter
on zuul status page.

Change-Id: I3252ea2b727e3867136bba3256239bcae409e99e
2015-03-13 18:15:58 +01:00

395 lines
11 KiB
Plaintext

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
lang="en">
<HEAD>
<TITLE>Zuul Status</TITLE>
<script type="text/javascript"
src="http://status.openstack.org/jquery.min.js"></script>
<script type="text/javascript"
src="http://status.openstack.org/jquery-visibility.min.js"></script>
<script type="text/javascript"
src="http://status.openstack.org/jquery-graphite.js"></script>
<script type="text/javascript"
src="http://status.openstack.org/common.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" />
<style type="text/css">
.container {
width: 1024px;
}
label {
font-weight: normal;
}
#pipeline-container {
margin: 0 auto;
}
.line {
background-image: url('line.png');
background-repeat: repeat-y;
}
.pipeline {
float: left;
padding: 4px;
}
.pipeline > .header {
background: #0000cc;
color: white;
}
.pipeline > .subhead > .count {
float: right;
margin-right: 1em;
color: #535353;
font-size: 11pt;
}
.pipeline table {
margin: 0 0 2px 0;
}
.pipeline table td {
margin: 0;
padding: 0 0 10px 0;
}
td.tree {
width: 16px;
height: 100%;
vertical-align: top;
}
.pipeline table td.change-container {
padding-left: 4px;
}
.change {
border: 1px solid #95c7db;
padding: 2px;
}
.change > .header {
background: #E2ECEF;
color: black;
margin: -2px;
padding: 4px;
}
.change > .header > .changeid {
margin: 1em;
}
.change > .header > .time {
float: right;
}
.change > .hover {
background: #F3FDFF;
}
.jobs {
padding-top: 4px;
}
.jobwrapper {
display: table;
width: 100%;
}
.job {
display: block;
line-height: 1.5;
}
.result {
float: right;
}
.result_success {
color: #007f00;
}
.queue_bad,
.result_failure {
color: #cf2f19;
}
.queue_warn,
.result_unstable {
color: #e39f00;
}
.queue_good {
color: #888888;
}
#graph-container img {
margin-left: 2px;
margin-right: 2px;
}
#zuul_info_container {
margin-top: 12px;
}
a:link {
color: #204A87;
}
#message p{
margin: 0;
}
.alertbox {
border: 1px solid #e5574d;
background: #ffaba5;
color: black;
padding: 1em;
font-size: 12pt;
margin: 0pt;
}
.change_progress {
width: 5em;
float: right;
/* because other wise this floats up off the line */
margin-top: 0.25em;
}
.filter_container {
display: inline-block;
position: relative;
top: 1.5em;
padding-left: .5em;
}
.filter_container input#filter {
display: inline-block;
}
.filter_container sub {
padding: .5em 0;
display: block;
}
.filter_container sub a.save-filter {
text-decoration: underline;
}
.filter_container .hidden {
visibility: hidden;
}
.filter_container img.filter-saved {
display: inline-block;
position: relative;
top: 3px;
}
.filter_container img.filter-saved.hidden {
display: none;
}
.loading_message {
text-align: center;
font-size: 16pt;
}
/** Theming for the progress bars to get them consisten across browers:
referenced from http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
*/
progress, /* All HTML5 progress enabled browsers */
progress[role] /* polyfill */
{
/* Turns off styling - not usually needed, but good to know. */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* gets rid of default border in Firefox and Opera. */
border: none;
/* Needs to be in here for Safari polyfill so background images work as expected. */
background-size: auto;
}
/* Polyfill */
progress[role]:after {
background-image: none; /* removes default background from polyfill */
}
/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
display: none;
}
/** Background color */
progress, /* Firefox */
progress[role][aria-valuenow] { /* Polyfill */
background: #e6e6e6 !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
background: #e6e6e6;
}
/** Foreground color */
/* IE10 */
progress {
color: #6b81a2;
}
/* Firefox */
progress::-moz-progress-bar {
background: #6b81a2;
}
/* Chrome */
progress::-webkit-progress-value {
background: #6b81a2;
}
/* Polyfill */
progress[aria-valuenow]:before {
background: #6b81a2;
}
</style>
</HEAD>
<BODY>
<script type="text/javascript">header('Zuul');</script>
<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>
<p>
Queue lengths: <span id="trigger_event_queue_length"></span> events,
<span id="result_event_queue_length"></span> results.
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="filter">Filters:</label>
<span class="filter_container">
<input title="project(s) or review(s) separated by comma" type="text" id="filter" />
<!--
An embedded 'approved' image.
From the famfamfam "Silk" icon set, Creative Commons Attribution 2.5.
http://www.famfamfam.com/lab/icons/silk/
-->
<img class="filter-saved hidden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKfSURBVDjLpZPrS1NhHMf9O3bOdmwDCWREIYKEUHsVJBI7mg3FvCxL09290jZj2EyLMnJexkgpLbPUanNOberU5taUMnHZUULMvelCtWF0sW/n7MVMEiN64AsPD8/n83uucQDi/id/DBT4Dolypw/qsz0pTMbj/WHpiDgsdSUyUmeiPt2%2BV7SrIM%2BbSss8ySGdR4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdOZ4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wVDtj4kWQbn94myPGkCDPdSesczE2sCZShwl8CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6%2BTwphA5k4yqMayopU5mANV3lNQTBdCMVUA9VQh3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXYhApfMZRP5CyYD%2BUkG08%2Bxt%2B4wLVQZA1tzxthm2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5qGaKMTY2lAU/rH5HW3PLsEwUYy%2BYCcERmIjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7UrG3r3afQHOyCo%2BV3QQzE35pvQvnAZukk5zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4zqCpiawuptwQG%2BUAa7Ct3UT0hh9p9EnXT5Vh6t4C22QaUDh6HwnECOmcO7K%2B6kW49DKqS2DrEZCtfuI%2B9GrNHg4fMHVSO5kE7nAPVkAxKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIOr6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvBLeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2%2BFxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEag5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYwAAAABJRU5ErkJggg%3D%3D" />
<sub>
<a href="#" class="save-filter hidden">Save Filter</a>
</sub>
</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="expandByDefault">Expand by default:</label>
<span class="expand_by_default_container">
<input type="checkbox" id="expandByDefault" onchange="toggle_expand_by_default(this)"/>
</span>
</p>
</div>
<div class="container">
<div id="message"/>
</div>
<div id="pipeline-container">
<p class="loading_message">Loading...</p>
</div>
<div class="container" id="graph-container">
<h2> Job Stats </h2>
<script type="text/javascript">
$.fn.graphite.defaults.url = "<%= @graphite_render_url %>";
$("#graph-container").append($(new Image()).addClass('graph').graphite({
from: "-24hours",
width: 334,
height: 180,
bgcolor: 'ffffff',
fgcolor: '000000',
areaMode: 'stacked',
target: [
"color(alias(sumSeries(stats.gauges.nodepool.target.building), 'Building'), 'ffbf52')",
"color(alias(sumSeries(stats.gauges.nodepool.target.ready), 'Available'), '00c868')",
"color(alias(sumSeries(stats.gauges.nodepool.target.used), 'In Use'), '6464ff')",
"color(alias(sumSeries(stats.gauges.nodepool.target.delete), 'Deleting'), 'c864ff')",
],
title: "Test Nodes"
}));
$("#graph-container").append($(new Image()).addClass('graph').graphite({
from: "-24hours",
width: 334,
height: 180,
bgcolor: 'ffffff',
fgcolor: '000000',
target: [
"alias(summarize(sumSeries(stats_counts.zuul.pipeline.*.all_jobs),'1h'),'All Jobs')",
],
title: "Zuul Jobs Launched (per Hour)"
}));
$("#graph-container").append($(new Image()).addClass('graph').graphite({
from: "-24hours",
width: 334,
height: 180,
bgcolor: 'ffffff',
fgcolor: '000000',
target: [
"alias(summarize(stats_counts.gerrit.event.comment-added, '1h'), 'Comment added')",
"alias(summarize(stats_counts.gerrit.event.patchset-created, '1h'), 'Patchset created')",
"alias(summarize(stats_counts.gerrit.event.change-merged, '1h'), 'Change merged')",
],
title: "Gerrit Events (per Hour)"
}));
$("#graph-container").append($(new Image()).addClass('graph').graphite({
from: "-24hours",
width: 334,
height: 180,
bgcolor: 'ffffff',
fgcolor: '000000',
target: [
"color(alias(stats.gauges.zuul.geard.queue.running, 'Running'), 'blue')",
"color(alias(stats.gauges.zuul.geard.queue.waiting, 'Waiting'), 'red')",
"color(alias(stats.gauges.zuul.geard.queue.total, 'Total Jobs'), '888888')",
"color(alias(stats.gauges.zuul.geard.workers, 'Workers'), 'green')",
],
title: "Zuul Job Queue"
}));
$("#graph-container").append($(new Image()).addClass('graph').graphite({
from: "-24hours",
width: 334,
height: 180,
bgcolor: 'ffffff',
fgcolor: '000000',
target: [
"color(alias(stats.gauges.logstash.geard.queue.running, 'Running'), 'blue')",
"color(alias(stats.gauges.logstash.geard.queue.waiting, 'Waiting'), 'red')",
"color(alias(stats.gauges.logstash.geard.queue.total, 'Total Jobs'), '888888')",
"color(alias(stats.gauges.logstash.geard.workers, 'Workers'), 'green')",
],
title: "Logstash Job Queue"
}));
</script>
</div>
<div class="container" id="zuul_info_container">
<h2>Zuul info</h2>
<p>
Zuul version:
<span id="zuul-version"></span>
</p>
<p>
Last reconfigured:
<span id="last-reconfigured-span"></span>
</p>
</div>
<script type="text/javascript">footer();</script>
</BODY>
</html>