Add subway map to status page
Uses a table method similar to OpenStack's page. The code for calculating the subway map tree is from http://git.openstack.org/cgit/openstack-infra/config/tree/modules/openstack_project/files/zuul/status.js#n95 Added a sample JSON file that represents the dependency tree in a very bad state. All the images are grey because it's a bit old and doesn't match the current JSON output in some areas, but it does exercise quite a bit of the tree code. Co-Authored-By: James E. Blair <jeblair@openstack.org> Change-Id: I635ed101e5b1b168caa111ee61237cf1734813a1
This commit is contained in:
Joshua Hesketh
parent
63365e95b6
commit
5caf4f634a
|
|
@ -341,7 +341,7 @@
|
|||
|
||||
change_list: function(jobs) {
|
||||
var $list = $('<ul />')
|
||||
.addClass('list-group');
|
||||
.addClass('list-group zuul-patchset-body');
|
||||
|
||||
$.each(jobs, function (i, job) {
|
||||
var $item = $('<li />')
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
|
||||
change_panel: function (change) {
|
||||
var $header = $('<div />')
|
||||
.addClass('panel-heading patchset-header')
|
||||
.addClass('panel-heading zuul-patchset-header')
|
||||
.append(zuul.format.change_header(change));
|
||||
|
||||
var panel_id = change.id ? change.id.replace(',', '_')
|
||||
|
|
@ -372,10 +372,111 @@
|
|||
return $panel;
|
||||
},
|
||||
|
||||
change_status_icon: function(change) {
|
||||
var icon_name = 'green.png';
|
||||
var icon_title = 'Succeeding';
|
||||
|
||||
if (change.active !== true) {
|
||||
// Grey icon
|
||||
icon_name = 'grey.png';
|
||||
icon_title = 'Waiting until closer to head of queue to' +
|
||||
' start jobs';
|
||||
}
|
||||
else if (change.failing_reasons &&
|
||||
change.failing_reasons.length > 0) {
|
||||
var reason = change.failing_reasons.join(', ');
|
||||
icon_title = 'Failing because ' + reason;
|
||||
if (reason.match(/merge conflict/)) {
|
||||
// Black icon
|
||||
icon_name = 'black.png';
|
||||
}
|
||||
else {
|
||||
// Red icon
|
||||
icon_name = 'red.png';
|
||||
}
|
||||
}
|
||||
|
||||
var $icon = $('<img />')
|
||||
.attr('src', 'images/' + icon_name)
|
||||
.attr('title', icon_title)
|
||||
.css('margin-top', '-6px');
|
||||
|
||||
return $icon;
|
||||
},
|
||||
|
||||
change_with_status_tree: function(change, change_queue) {
|
||||
var $change_row = $('<tr />');
|
||||
|
||||
for (var i = 0; i < change_queue._tree_columns; i++) {
|
||||
var $tree_cell = $('<td />')
|
||||
.css('height', '100%')
|
||||
.css('padding', '0 0 10px 0')
|
||||
.css('margin', '0')
|
||||
.css('width', '16px')
|
||||
.css('min-width', '16px')
|
||||
.css('overflow', 'hidden')
|
||||
.css('vertical-align', 'top');
|
||||
|
||||
if (i < change._tree.length && change._tree[i] !== null) {
|
||||
$tree_cell.css('background-image',
|
||||
'url(\'images/line.png\')')
|
||||
.css('background-repeat', 'repeat-y');
|
||||
}
|
||||
|
||||
if (i === change._tree_index) {
|
||||
$tree_cell.append(
|
||||
zuul.format.change_status_icon(change));
|
||||
}
|
||||
if (change._tree_branches.indexOf(i) !== -1) {
|
||||
var $image = $('<img />')
|
||||
.css('vertical-align', 'baseline');
|
||||
if (change._tree_branches.indexOf(i) ===
|
||||
change._tree_branches.length - 1) {
|
||||
// Angle line
|
||||
$image.attr('src', 'images/line-angle.png');
|
||||
}
|
||||
else {
|
||||
// T line
|
||||
$image.attr('src', 'images/line-t.png');
|
||||
}
|
||||
$tree_cell.append($image);
|
||||
}
|
||||
$change_row.append($tree_cell);
|
||||
}
|
||||
|
||||
var change_width = 360 - 16*change_queue._tree_columns;
|
||||
var $change_column = $('<td />')
|
||||
.css('width', change_width + 'px')
|
||||
.addClass('zuul-change-cell')
|
||||
.append(zuul.format.change_panel(change));
|
||||
|
||||
$change_row.append($change_column);
|
||||
|
||||
var $change_table = $('<table />')
|
||||
.addClass('zuul-change-box')
|
||||
.css('-moz-box-sizing', 'content-box')
|
||||
.css('box-sizing', 'content-box')
|
||||
.append($change_row);
|
||||
|
||||
return $change_table;
|
||||
},
|
||||
|
||||
pipeline: function (pipeline) {
|
||||
var count = zuul.create_tree(pipeline);
|
||||
var $html = $('<div />')
|
||||
.addClass('zuul-pipeline col-md-4')
|
||||
.append($('<h3 />').text(pipeline.name));
|
||||
.append(
|
||||
$('<h3 />')
|
||||
.css('vertical-align', 'middle')
|
||||
.text(pipeline.name)
|
||||
.append(
|
||||
$('<span />')
|
||||
.addClass('badge pull-right')
|
||||
.css('vertical-align', 'middle')
|
||||
.css('margin-top', '0.5em')
|
||||
.text(count)
|
||||
)
|
||||
);
|
||||
|
||||
if (typeof pipeline.description === 'string') {
|
||||
$html.append(
|
||||
|
|
@ -386,11 +487,11 @@
|
|||
}
|
||||
|
||||
$.each(pipeline.change_queues,
|
||||
function (queueNum, changeQueue) {
|
||||
$.each(changeQueue.heads, function (headNum, changes) {
|
||||
function (queue_i, change_queue) {
|
||||
$.each(change_queue.heads, function (head_i, changes) {
|
||||
if (pipeline.change_queues.length > 1 &&
|
||||
headNum === 0) {
|
||||
var name = changeQueue.name;
|
||||
head_i === 0) {
|
||||
var name = change_queue.name;
|
||||
var short_name = name;
|
||||
if (short_name.length > 32) {
|
||||
short_name = short_name.substr(0, 32) + '...';
|
||||
|
|
@ -405,10 +506,13 @@
|
|||
)
|
||||
);
|
||||
}
|
||||
$.each(changes, function (changeNum, change) {
|
||||
var $panel = zuul.format.change_panel(change);
|
||||
$html.append($panel);
|
||||
zuul.display_patchset($panel);
|
||||
|
||||
$.each(changes, function (change_i, change) {
|
||||
var $change_box =
|
||||
zuul.format.change_with_status_tree(
|
||||
change, change_queue);
|
||||
$html.append($change_box);
|
||||
zuul.display_patchset($change_box);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -510,7 +614,7 @@
|
|||
// Toggle showing/hiding the patchset when the header is clicked
|
||||
// Grab the patchset panel
|
||||
var $panel = $(e.target).parents('.zuul-change');
|
||||
var $body = $panel.children(':not(.patchset-header)');
|
||||
var $body = $panel.children('.zuul-patchset-body');
|
||||
$body.toggle(200);
|
||||
var collapsed_index = zuul.collapsed_exceptions.indexOf(
|
||||
$panel.attr('id'));
|
||||
|
|
@ -524,15 +628,18 @@
|
|||
}
|
||||
},
|
||||
|
||||
display_patchset: function($panel, animate) {
|
||||
display_patchset: function($change_box, animate) {
|
||||
// Determine if to show or hide the patchset and/or the results
|
||||
// when loaded
|
||||
|
||||
// See if we should hide the body/results
|
||||
var $body = $panel.children(':not(.patchset-header)');
|
||||
var $panel = $change_box.find('.zuul-change');
|
||||
var panel_change = $panel.attr('id');
|
||||
var $body = $panel.children('.zuul-patchset-body');
|
||||
var expand_by_default = $('#expand_by_default').prop('checked');
|
||||
var collapsed_index = zuul.collapsed_exceptions.indexOf(
|
||||
$panel.attr('id'));
|
||||
|
||||
var collapsed_index = zuul.collapsed_exceptions.indexOf(panel_change);
|
||||
|
||||
if (expand_by_default && collapsed_index === -1 ||
|
||||
!expand_by_default && collapsed_index !== -1) {
|
||||
// Expand by default, or is an exception
|
||||
|
|
@ -545,9 +652,11 @@
|
|||
// Check if we should hide the whole panel
|
||||
var panel_project = $panel.find('.change_project').text()
|
||||
.toLowerCase();
|
||||
var panel_pipeline = $panel.parents('.zuul-pipeline')
|
||||
.children('h3').text().toLowerCase();
|
||||
var panel_change = $panel.attr('id');
|
||||
|
||||
|
||||
var panel_pipeline = $change_box.parents('.zuul-pipeline')
|
||||
.children('h3').html().toLowerCase();
|
||||
|
||||
if (current_filter !== '') {
|
||||
var show_panel = false;
|
||||
var filter = current_filter.trim().split(/[\s,]+/);
|
||||
|
|
@ -562,14 +671,14 @@
|
|||
}
|
||||
});
|
||||
if (show_panel === true) {
|
||||
$panel.show(animate);
|
||||
$change_box.show(animate);
|
||||
}
|
||||
else {
|
||||
$panel.hide(animate);
|
||||
$change_box.hide(animate);
|
||||
}
|
||||
}
|
||||
else {
|
||||
$panel.show(animate);
|
||||
$change_box.show(animate);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -584,9 +693,9 @@
|
|||
$('#filter_form_clear_box').show();
|
||||
}
|
||||
|
||||
$('.zuul-change').each(function(index, obj) {
|
||||
var $panel = $(obj);
|
||||
zuul.display_patchset($panel, 200);
|
||||
$('.zuul-change-box').each(function(index, obj) {
|
||||
var $change_box = $(obj);
|
||||
zuul.display_patchset($change_box, 200);
|
||||
});
|
||||
return false;
|
||||
},
|
||||
|
|
@ -595,11 +704,73 @@
|
|||
// Handle toggling expand by default
|
||||
set_cookie('zuul_expand_by_default', e.target.checked);
|
||||
zuul.collapsed_exceptions = [];
|
||||
$('.zuul-change').each(function(index, obj) {
|
||||
var $panel = $(obj);
|
||||
zuul.display_patchset($panel, 200);
|
||||
$('.zuul-change-box').each(function(index, obj) {
|
||||
var $change_box = $(obj);
|
||||
zuul.display_patchset($change_box, 200);
|
||||
});
|
||||
},
|
||||
|
||||
create_tree: function(pipeline) {
|
||||
var count = 0;
|
||||
var pipeline_max_tree_columns = 1;
|
||||
$.each(pipeline.change_queues, function(change_queue_i,
|
||||
change_queue) {
|
||||
var tree = [];
|
||||
var max_tree_columns = 1;
|
||||
var changes = [];
|
||||
var last_tree_length = 0;
|
||||
$.each(change_queue.heads, function(head_i, head) {
|
||||
$.each(head, function(change_i, change) {
|
||||
changes[change.id] = change;
|
||||
change._tree_position = change_i;
|
||||
});
|
||||
});
|
||||
$.each(change_queue.heads, function(head_i, head) {
|
||||
$.each(head, function(change_i, change) {
|
||||
count += 1;
|
||||
var idx = tree.indexOf(change.id);
|
||||
if (idx > -1) {
|
||||
change._tree_index = idx;
|
||||
// remove...
|
||||
tree[idx] = null;
|
||||
while (tree[tree.length - 1] === null) {
|
||||
tree.pop();
|
||||
}
|
||||
} else {
|
||||
change._tree_index = 0;
|
||||
}
|
||||
change._tree_branches = [];
|
||||
change._tree = [];
|
||||
if (typeof(change.items_behind) === 'undefined') {
|
||||
change.items_behind = [];
|
||||
}
|
||||
change.items_behind.sort(function(a, b) {
|
||||
return (changes[b]._tree_position -
|
||||
changes[a]._tree_position);
|
||||
});
|
||||
$.each(change.items_behind, function(i, id) {
|
||||
tree.push(id);
|
||||
if (tree.length>last_tree_length &&
|
||||
last_tree_length > 0) {
|
||||
change._tree_branches.push(
|
||||
tree.length - 1);
|
||||
}
|
||||
});
|
||||
if (tree.length > max_tree_columns) {
|
||||
max_tree_columns = tree.length;
|
||||
}
|
||||
if (tree.length > pipeline_max_tree_columns) {
|
||||
pipeline_max_tree_columns = tree.length;
|
||||
}
|
||||
change._tree = tree.slice(0); // make a copy
|
||||
last_tree_length = tree.length;
|
||||
});
|
||||
});
|
||||
change_queue._tree_columns = max_tree_columns;
|
||||
});
|
||||
pipeline._tree_columns = pipeline_max_tree_columns;
|
||||
return count;
|
||||
},
|
||||
};
|
||||
|
||||
current_filter = read_cookie('zuul_filter_string', current_filter);
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 355 B |
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
Binary file not shown.
|
After Width: | Height: | Size: 364 B |
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
Binary file not shown.
|
After Width: | Height: | Size: 216 B |
Binary file not shown.
|
After Width: | Height: | Size: 192 B |
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
|
|
@ -22,6 +22,10 @@ under the License.
|
|||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
|
||||
<style>
|
||||
.zuul-change {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.zuul-change-id {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -54,6 +58,10 @@ under the License.
|
|||
cursor: progress;
|
||||
}
|
||||
|
||||
.zuul-change-cell {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.zuul-change-job {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue