Hide queue headers for empty queues when filtering

When filtering the status page for Zuul, the queues that don't
match the filter but still have jobs will have their headers
shown, resulting in a long list of nothing.

This patch addresses this issue by making sure that we count
the number of visible change boxes, if there are none, we don't
display the `div` that contains the change queue.

The only caveat of this change is that when hitting 'enter' after
filling out the filter form, it will result in a full reload of
the page and an HTTP request back to the status server, however,
this isn't something that is done often so we can get away
with this until we convert the status page to using Angular
entirely, which will allow for easier filtering.

Change-Id: I939912882ae900ab1fdf1a2adf9f024158572887
This commit is contained in:
Mohammed Naser 2018-06-05 19:59:17 -04:00 committed by Monty Taylor
parent 36aecc1229
commit 683f50ed55
No known key found for this signature in database
GPG Key ID: 7BAE94BC7141A594
1 changed files with 29 additions and 19 deletions

View File

@ -525,13 +525,18 @@ import LineTImage from '../images/line-t.png';
$.each(pipeline.change_queues, function (queueIndex, changeQueue) {
$.each(changeQueue.heads, function (headIndex, changes) {
let $changeQueueHtml = $('<div />')
.addClass('change-queue')
.data('zuul-pipeline', pipeline.name)
$html.append($changeQueueHtml)
if (pipeline.change_queues.length > 1 && headIndex === 0) {
let name = changeQueue.name
let shortName = name
if (shortName.length > 32) {
shortName = shortName.substr(0, 32) + '...'
}
$html.append($('<p />')
$changeQueueHtml.append($('<p />')
.text('Queue: ')
.append(
$('<abbr />')
@ -541,13 +546,18 @@ import LineTImage from '../images/line-t.png';
)
}
$.each(changes, function (changeIndex, change) {
let $changeBox =
format.change_with_status_tree(
change, changeQueue)
$html.append($changeBox)
format.display_patchset($changeBox)
let $changeBoxes = $.map(changes, function (change) {
return format.change_with_status_tree(change, changeQueue)
})
let visible = $.map($changeBoxes, function (changeBox) {
$changeQueueHtml.append(changeBox)
return format.display_patchset(changeBox)
}).some(function (visible) {
return visible
})
if (!visible) $changeQueueHtml.remove()
})
})
return $html
@ -607,8 +617,10 @@ import LineTImage from '../images/line-t.png';
.html()
.toLowerCase()
let showPanel = true
if (currentFilter !== '') {
let showPanel = false
showPanel = false
let filter = currentFilter.trim().split(/[\s,]+/)
$.each(filter, function (index, filterVal) {
if (filterVal !== '') {
@ -620,14 +632,15 @@ import LineTImage from '../images/line-t.png';
}
}
})
if (showPanel === true) {
$changeBox.show(animate)
} else {
$changeBox.hide(animate)
}
} else {
$changeBox.show(animate)
}
if (showPanel === true) {
$changeBox.show(animate)
} else {
$changeBox.hide(animate)
}
return showPanel
}
}
@ -833,10 +846,7 @@ import LineTImage from '../images/line-t.png';
$('#filter_form_clear_box').show()
}
$('.zuul-change-box').each(function (index, obj) {
let $changeBox = $(obj)
format.display_patchset($changeBox, 200)
})
this.update()
return false
},