From 9d013546a3638cf4a7be7a13abc1e8187edc3777 Mon Sep 17 00:00:00 2001 From: Joshua Hesketh Date: Thu, 3 Apr 2014 13:08:04 +1100 Subject: [PATCH] Add in sparklines to status page pipelines If graphite_url is set add in sparklines for pipelines on status page Change-Id: Ife7579bf889a80fddd0bfb958ec1b6aa5394adae --- etc/status/.gitignore | 1 + etc/status/fetch-dependencies.sh | 6 ++ etc/status/public_html/app.js | 100 +++++++++++++++++++++++++----- etc/status/public_html/index.html | 1 + 4 files changed, 91 insertions(+), 17 deletions(-) diff --git a/etc/status/.gitignore b/etc/status/.gitignore index a4b95708a1..8b94cad18a 100644 --- a/etc/status/.gitignore +++ b/etc/status/.gitignore @@ -1,3 +1,4 @@ public_html/jquery.min.js public_html/jquery-visibility.min.js public_html/bootstrap +public_html/jquery.graphite.js diff --git a/etc/status/fetch-dependencies.sh b/etc/status/fetch-dependencies.sh index a5dddff22b..7823f29088 100755 --- a/etc/status/fetch-dependencies.sh +++ b/etc/status/fetch-dependencies.sh @@ -8,6 +8,12 @@ curl --silent http://code.jquery.com/jquery.min.js > $BASE_DIR/public_html/jquer 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 +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..." 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/ diff --git a/etc/status/public_html/app.js b/etc/status/public_html/app.js index 1df9c49eec..8616201ca2 100644 --- a/etc/status/public_html/app.js +++ b/etc/status/public_html/app.js @@ -22,6 +22,8 @@ var $container, $msg, $indicator, $queueInfo, $queueEventsNum, $queueResultsNum, $pipelines, $jq; var xhr, zuul, + zuul_graph_update_count = 0, + zuul_sparkline_urls = {}, current_filter = '', demo = location.search.match(/[?&]demo=([^?&]*)/), source_url = location.search.match(/[?&]source_url=([^?&]*)/), @@ -52,6 +54,7 @@ zuul = { enabled: true, + graphite_url: '', collapsed_exceptions: [], schedule: function () { @@ -62,6 +65,12 @@ zuul.update().complete(function () { 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} */ @@ -120,6 +129,17 @@ 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: { job: function(job) { var $job_line = $(''); @@ -474,30 +494,50 @@ return $change_table; }, - pipeline: function (pipeline) { - var count = zuul.create_tree(pipeline); - var $html = $('
') - .addClass('zuul-pipeline col-md-4') + pipeline_sparkline: function(pipeline_name) { + if (zuul.graphite_url !== '') { + var $sparkline = $('') + .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 = $('
') + .addClass('zuul-pipeline-header'); + + var $heading = $('

') + .css('vertical-align', 'middle') + .text(pipeline.name) .append( - $('

') + $('') + .addClass('badge pull-right') .css('vertical-align', 'middle') - .text(pipeline.name) - .append( - $('') - .addClass('badge pull-right') - .css('vertical-align', 'middle') - .css('margin-top', '0.5em') - .text(count) - ) - ); + .css('margin-top', '0.5em') + .text(count) + ) + .append(zuul.format.pipeline_sparkline(pipeline.name)); + + $header_div.append($heading); if (typeof pipeline.description === 'string') { - $html.append( + $header_div.append( $('

').append( $('').text(pipeline.description) ) ); } + return $header_div; + }, + + pipeline: function (pipeline) { + var count = zuul.create_tree(pipeline); + var $html = $('

') + .addClass('zuul-pipeline col-md-4') + .append(zuul.format.pipeline_header(pipeline, count)); $.each(pipeline.change_queues, function (queue_i, change_queue) { @@ -667,8 +707,11 @@ .toLowerCase(); - var panel_pipeline = $change_box.parents('.zuul-pipeline') - .children('h3').html().toLowerCase(); + var panel_pipeline = $change_box + .parents('.zuul-pipeline') + .find('.zuul-pipeline-header > h3') + .html() + .toLowerCase(); if (current_filter !== '') { var show_panel = false; @@ -784,6 +827,28 @@ pipeline._tree_columns = pipeline_max_tree_columns; 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); @@ -836,6 +901,7 @@ $pipelines, $zuulVersion, $lastReconf); + //zuul.graphite_url = 'http://graphite.openstack.org/render/' zuul.schedule(); $(document).on({ diff --git a/etc/status/public_html/index.html b/etc/status/public_html/index.html index 8884069347..bea1a79bf4 100644 --- a/etc/status/public_html/index.html +++ b/etc/status/public_html/index.html @@ -32,6 +32,7 @@ under the License.
+