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:
parent
9e18eb7153
commit
9d013546a3
|
@ -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
|
||||||
|
|
|
@ -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/
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue