924e858b3a
turns out, with much interesting difficulty, you can actually style html5 progress bars accross browsers. Do this so that the colors are more consistent with what's already on the page. This makes things a bit less visually jarring than chromes default progress bars which completely dominate the page. Change-Id: I5815114fbb3703e84c0cd696b5a3f285146c9025
248 lines
6.4 KiB
HTML
248 lines
6.4 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:py="http://genshi.edgewall.org/"
|
|
lang="en">
|
|
<HEAD>
|
|
<style type="text/css">
|
|
#pipeline-container {
|
|
max-width: 950px;
|
|
margin: 0 auto;
|
|
}
|
|
.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 {
|
|
margin: 1em;
|
|
}
|
|
.change > .header > .time {
|
|
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;
|
|
}
|
|
.result {
|
|
float: right;
|
|
}
|
|
.result_success {
|
|
color: #007f00;
|
|
}
|
|
.result_failure {
|
|
color: #cf2f19;
|
|
}
|
|
.result_unstable {
|
|
color: #e39f00;
|
|
}
|
|
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;
|
|
}
|
|
|
|
/** 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>
|
|
|
|
<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&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>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div id="message"/>
|
|
</div>
|
|
|
|
<div id="pipeline-container">
|
|
</div>
|
|
|
|
<div class="container" id="graph-container">
|
|
<h2> Job Stats </h2>
|
|
|
|
<script type="text/javascript">
|
|
$.fn.graphite.defaults.url = "http://graphite.openstack.org/render/";
|
|
|
|
$("#graph-container").append($(new Image()).addClass('graph').graphite({
|
|
from: "-24hours",
|
|
width: 310,
|
|
height: 170,
|
|
bgcolor: 'ffffff',
|
|
fgcolor: '000000',
|
|
target: [
|
|
"alias(sumSeries(stats.gauges.devstack.pool.*.oneiric.ready), 'Oneiric')",
|
|
"alias(sumSeries(stats.gauges.devstack.pool.*.precise.ready), 'Precise')"
|
|
],
|
|
title: "Ready Devstack Jenkins Nodes"
|
|
}));
|
|
|
|
$("#graph-container").append($(new Image()).addClass('graph').graphite({
|
|
from: "-24hours",
|
|
width: 310,
|
|
height: 170,
|
|
bgcolor: 'ffffff',
|
|
fgcolor: '000000',
|
|
target: [
|
|
"alias(summarize(sumSeries(stats_counts.zuul.pipeline.*.job.*.*),'1h'),'All Jobs')",
|
|
],
|
|
title: "Zuul Jobs Launched (per Hour)"
|
|
}));
|
|
|
|
$("#graph-container").append($(new Image()).addClass('graph').graphite({
|
|
from: "-24hours",
|
|
width: 310,
|
|
height: 170,
|
|
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)"
|
|
}));
|
|
</script>
|
|
</div>
|
|
|
|
<script type="text/javascript">footer();</script>
|
|
</BODY>
|
|
</html>
|