Add in sparklines to status page pipelines

If graphite_url is set add in sparklines for pipelines on status page

Change-Id: Ife7579bf889a80fddd0bfb958ec1b6aa5394adae
This commit is contained in:
Joshua Hesketh 2014-04-03 13:08:04 +11:00
parent 9e18eb7153
commit 9d013546a3
4 changed files with 91 additions and 17 deletions

View File

@ -1,3 +1,4 @@
public_html/jquery.min.js public_html/jquery.min.js
public_html/jquery-visibility.min.js public_html/jquery-visibility.min.js
public_html/bootstrap public_html/bootstrap
public_html/jquery.graphite.js

View File

@ -8,6 +8,12 @@ curl --silent http://code.jquery.com/jquery.min.js > $BASE_DIR/public_html/jquer
echo "Fetching jquery-visibility.min.js..." echo "Fetching jquery-visibility.min.js..."
curl --silent https://raw.github.com/mathiasbynens/jquery-visibility/master/jquery-visibility.min.js > $BASE_DIR/public_html/jquery-visibility.min.js curl --silent https://raw.github.com/mathiasbynens/jquery-visibility/master/jquery-visibility.min.js > $BASE_DIR/public_html/jquery-visibility.min.js
echo "Fetching jquery.graphite.js..."
curl -L --silent https://github.com/prestontimmons/graphitejs/archive/master.zip > jquery-graphite.zip
unzip -q -o jquery-graphite.zip -d $BASE_DIR/public_html/
mv $BASE_DIR/public_html/graphitejs-master/jquery.graphite.js $BASE_DIR/public_html/
rm -R jquery-graphite.zip $BASE_DIR/public_html/graphitejs-master
echo "Fetching bootstrap..." echo "Fetching bootstrap..."
curl -L --silent https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip > bootstrap.zip curl -L --silent https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip > bootstrap.zip
unzip -q -o bootstrap.zip -d $BASE_DIR/public_html/ unzip -q -o bootstrap.zip -d $BASE_DIR/public_html/

View File

@ -22,6 +22,8 @@
var $container, $msg, $indicator, $queueInfo, $queueEventsNum, var $container, $msg, $indicator, $queueInfo, $queueEventsNum,
$queueResultsNum, $pipelines, $jq; $queueResultsNum, $pipelines, $jq;
var xhr, zuul, var xhr, zuul,
zuul_graph_update_count = 0,
zuul_sparkline_urls = {},
current_filter = '', current_filter = '',
demo = location.search.match(/[?&]demo=([^?&]*)/), demo = location.search.match(/[?&]demo=([^?&]*)/),
source_url = location.search.match(/[?&]source_url=([^?&]*)/), source_url = location.search.match(/[?&]source_url=([^?&]*)/),
@ -52,6 +54,7 @@
zuul = { zuul = {
enabled: true, enabled: true,
graphite_url: '',
collapsed_exceptions: [], collapsed_exceptions: [],
schedule: function () { schedule: function () {
@ -62,6 +65,12 @@
zuul.update().complete(function () { zuul.update().complete(function () {
setTimeout(zuul.schedule, 5000); setTimeout(zuul.schedule, 5000);
}); });
/* Only update graphs every minute */
if (zuul_graph_update_count > 11) {
zuul_graph_update_count = 0;
zuul.update_sparklines();
}
}, },
/** @return {jQuery.Promise} */ /** @return {jQuery.Promise} */
@ -120,6 +129,17 @@
return xhr; return xhr;
}, },
update_sparklines: function() {
$.each(zuul_sparkline_urls, function(name, url) {
var newimg = new Image();
var parts = url.split('#');
newimg.src = parts[0] + '#' + new Date().getTime();
$(newimg).load(function (x) {
zuul_sparkline_urls[name] = newimg.src;
});
});
},
format: { format: {
job: function(job) { job: function(job) {
var $job_line = $('<span />'); var $job_line = $('<span />');
@ -474,30 +494,50 @@
return $change_table; return $change_table;
}, },
pipeline: function (pipeline) { pipeline_sparkline: function(pipeline_name) {
var count = zuul.create_tree(pipeline); if (zuul.graphite_url !== '') {
var $html = $('<div />') var $sparkline = $('<img />')
.addClass('zuul-pipeline col-md-4') .addClass('pull-right')
.attr('src', zuul.get_sparkline_url(pipeline_name));
return $sparkline;
}
return false;
},
pipeline_header: function(pipeline, count) {
// Format the pipeline name, sparkline and description
var $header_div = $('<div />')
.addClass('zuul-pipeline-header');
var $heading = $('<h3 />')
.css('vertical-align', 'middle')
.text(pipeline.name)
.append( .append(
$('<h3 />') $('<span />')
.addClass('badge pull-right')
.css('vertical-align', 'middle') .css('vertical-align', 'middle')
.text(pipeline.name) .css('margin-top', '0.5em')
.append( .text(count)
$('<span />') )
.addClass('badge pull-right') .append(zuul.format.pipeline_sparkline(pipeline.name));
.css('vertical-align', 'middle')
.css('margin-top', '0.5em') $header_div.append($heading);
.text(count)
)
);
if (typeof pipeline.description === 'string') { if (typeof pipeline.description === 'string') {
$html.append( $header_div.append(
$('<p />').append( $('<p />').append(
$('<small />').text(pipeline.description) $('<small />').text(pipeline.description)
) )
); );
} }
return $header_div;
},
pipeline: function (pipeline) {
var count = zuul.create_tree(pipeline);
var $html = $('<div />')
.addClass('zuul-pipeline col-md-4')
.append(zuul.format.pipeline_header(pipeline, count));
$.each(pipeline.change_queues, $.each(pipeline.change_queues,
function (queue_i, change_queue) { function (queue_i, change_queue) {
@ -667,8 +707,11 @@
.toLowerCase(); .toLowerCase();
var panel_pipeline = $change_box.parents('.zuul-pipeline') var panel_pipeline = $change_box
.children('h3').html().toLowerCase(); .parents('.zuul-pipeline')
.find('.zuul-pipeline-header > h3')
.html()
.toLowerCase();
if (current_filter !== '') { if (current_filter !== '') {
var show_panel = false; var show_panel = false;
@ -784,6 +827,28 @@
pipeline._tree_columns = pipeline_max_tree_columns; pipeline._tree_columns = pipeline_max_tree_columns;
return count; return count;
}, },
get_sparkline_url: function(pipeline_name) {
if (zuul.graphite_url !== '') {
if (!(pipeline_name in zuul_sparkline_urls)) {
zuul_sparkline_urls[pipeline_name] = $.fn.graphite.geturl({
url: zuul.graphite_url,
from: "-8hours",
width: 100,
height: 26,
margin: 0,
hideLegend: true,
hideAxes: true,
hideGrid: true,
target: [
"color(stats.gauges.zuul.pipeline."+pipeline_name+".current_changes, '6b8182')"
]
});
}
return zuul_sparkline_urls[pipeline_name];
}
return false;
},
}; };
current_filter = read_cookie('zuul_filter_string', current_filter); current_filter = read_cookie('zuul_filter_string', current_filter);
@ -836,6 +901,7 @@
$pipelines, $zuulVersion, $pipelines, $zuulVersion,
$lastReconf); $lastReconf);
//zuul.graphite_url = 'http://graphite.openstack.org/render/'
zuul.schedule(); zuul.schedule();
$(document).on({ $(document).on({

View File

@ -32,6 +32,7 @@ under the License.
</div> </div>
<script src="jquery.min.js"></script> <script src="jquery.min.js"></script>
<script src="jquery-visibility.min.js"></script> <script src="jquery-visibility.min.js"></script>
<script src="jquery.graphite.js"></script>
<script src="app.js"></script> <script src="app.js"></script>
</body> </body>
</html> </html>