diff --git a/modules/openstack_project/files/zuul/green.png b/modules/openstack_project/files/zuul/green.png new file mode 100644 index 0000000000..d755eb9a70 Binary files /dev/null and b/modules/openstack_project/files/zuul/green.png differ diff --git a/modules/openstack_project/files/zuul/line-angle.png b/modules/openstack_project/files/zuul/line-angle.png new file mode 100644 index 0000000000..e454c0e897 Binary files /dev/null and b/modules/openstack_project/files/zuul/line-angle.png differ diff --git a/modules/openstack_project/files/zuul/line-t.png b/modules/openstack_project/files/zuul/line-t.png new file mode 100644 index 0000000000..6be85caa07 Binary files /dev/null and b/modules/openstack_project/files/zuul/line-t.png differ diff --git a/modules/openstack_project/files/zuul/line.png b/modules/openstack_project/files/zuul/line.png new file mode 100644 index 0000000000..0bcaffb575 Binary files /dev/null and b/modules/openstack_project/files/zuul/line.png differ diff --git a/modules/openstack_project/files/zuul/red.png b/modules/openstack_project/files/zuul/red.png new file mode 100644 index 0000000000..1f6fa81296 Binary files /dev/null and b/modules/openstack_project/files/zuul/red.png differ diff --git a/modules/openstack_project/files/zuul/status.html b/modules/openstack_project/files/zuul/status.html index 2bed4c82a9..e5c6919d2c 100644 --- a/modules/openstack_project/files/zuul/status.html +++ b/modules/openstack_project/files/zuul/status.html @@ -2,14 +2,81 @@ xmlns:py="http://genshi.edgewall.org/" lang="en"> + Zuul Status + + + + + + + + + + + + + + + + + + + + + + + + + + + - Zuul Status - - - - - - - - - - - - - - - - - - - - - - - - - @@ -211,8 +234,8 @@ $.fn.graphite.defaults.url = "http://graphite.openstack.org/render/"; $("#graph-container").append($(new Image()).addClass('graph').graphite({ from: "-24hours", - width: 310, - height: 170, + width: 334, + height: 180, bgcolor: 'ffffff', fgcolor: '000000', areaMode: 'stacked', @@ -227,8 +250,8 @@ $("#graph-container").append($(new Image()).addClass('graph').graphite({ $("#graph-container").append($(new Image()).addClass('graph').graphite({ from: "-24hours", - width: 310, - height: 170, + width: 334, + height: 180, bgcolor: 'ffffff', fgcolor: '000000', target: [ @@ -239,8 +262,8 @@ $("#graph-container").append($(new Image()).addClass('graph').graphite({ $("#graph-container").append($(new Image()).addClass('graph').graphite({ from: "-24hours", - width: 310, - height: 170, + width: 334, + height: 180, bgcolor: 'ffffff', fgcolor: '000000', target: [ diff --git a/modules/openstack_project/files/zuul/status.js b/modules/openstack_project/files/zuul/status.js index ad88187e87..44f646e44a 100644 --- a/modules/openstack_project/files/zuul/status.js +++ b/modules/openstack_project/files/zuul/status.js @@ -68,38 +68,86 @@ function is_hide_project(project) { return hide; } -function count_changes(pipeline) { +function remove(l, idx) { + l[idx] = null; + while (l[l.length-1] === null) { + l.pop(); + } +} + +function create_graph(pipeline) { var count = 0; + var pipeline_max_graph_columns = 1; $.each(pipeline['change_queues'], function(change_queue_i, change_queue) { + var graph = []; + var max_graph_columns = 1; + var changes = []; + var last_graph_length = 0; $.each(change_queue['heads'], function(head_i, head) { - count += head.length; + $.each(head, function(change_i, change) { + changes[change['id']] = change; + change['_graph_position'] = change_i; + }); }); + $.each(change_queue['heads'], function(head_i, head) { + $.each(head, function(change_i, change) { + count += 1; + var idx = graph.indexOf(change['id']); + if (idx > -1) { + change['_graph_index'] = idx; + remove(graph, idx); + } else { + change['_graph_index'] = 0; + } + change['_graph_branches'] = []; + change['_graph'] = []; + change['items_behind'].sort(function(a, b) { + return changes[b]['_graph_position'] - changes[a]['_graph_position']; + }); + $.each(change['items_behind'], function(i, id) { + graph.push(id); + if (last_graph_length>0 && graph.length>last_graph_length) + change['_graph_branches'].push(graph.length-1); + }); + if (graph.length > max_graph_columns) { + max_graph_columns = graph.length; + } + if (graph.length > pipeline_max_graph_columns) { + pipeline_max_graph_columns = graph.length; + } + change['_graph'] = graph.slice(0); // make a copy + last_graph_length = graph.length; + }); + }); + change_queue['_graph_columns'] = max_graph_columns; }); + pipeline['_graph_columns'] = pipeline_max_graph_columns; return count; } function get_sparkline_url(pipeline_name) { if (!(pipeline_name in window.zuul_sparkline_urls)) { - window.zuul_sparkline_urls[pipeline_name] = $.fn.graphite.geturl({ - url: "http://graphite.openstack.org/render/", - from: "-8hours", - width: 100, - height: 16, - margin: 0, - hideLegend: true, - hideAxes: true, - hideGrid: true, - target: [ - "color(stats.gauges.zuul.pipeline."+pipeline_name+".current_changes, '6b8182')", - ], - }); + window.zuul_sparkline_urls[pipeline_name] = $.fn.graphite.geturl({ + url: "http://graphite.openstack.org/render/", + from: "-8hours", + width: 100, + height: 16, + margin: 0, + hideLegend: true, + hideAxes: true, + hideGrid: true, + target: [ + "color(stats.gauges.zuul.pipeline."+pipeline_name+".current_changes, '6b8182')", + ], + }); } return window.zuul_sparkline_urls[pipeline_name]; } function format_pipeline(data) { - var count = count_changes(data); - var html = '

'+ + var count = create_graph(data); + var width = (16 * data['_graph_columns']) + 300; + var html = '

'+ data['name']; html += '↑

'; - } - html += format_change(change); + html += format_change(change, change_queue); }); - html += '

' + html += '' }); }); @@ -148,8 +194,38 @@ function format_pipeline(data) { return html; } -function format_change(change) { - var html = '
'; +function safe_id(id) { + return id.replace(',', '_'); +} + +function format_change(change, change_queue) { + var html = ''; + + for (var i=0; i'; + if (i == change['_graph_index']) { + if (change['failing_reasons'] && change['failing_reasons'].length > 0) { + html += ''; + } else { + html += ''; + } + } + if (change['_graph_branches'].indexOf(i) != -1) { + if (change['_graph_branches'].indexOf(i) == change['_graph_branches'].length-1) + html += ''; + else + html += ''; + } + html += ''; + } + + html += ''; + html += '
'; html += ''+change['project']+''; var id = change['id']; @@ -209,7 +285,7 @@ function format_change(change) { html += ''; }); - html += '
'; + html += '
'; return html; } @@ -275,7 +351,7 @@ function update_graphs() { var parts = url.split('#'); newimg.src = parts[0] + '#' + new Date().getTime(); $(newimg).load(function (x) { - window.zuul_sparkline_urls[name] = newimg.src; + window.zuul_sparkline_urls[name] = newimg.src; }); }); }