Indicate queue and window length on status page

For every pipeline, we already show the number of items in the
pipeline in a "badge" after the pipeline name.

This change extends that concept to show the length of the
individual change queues in the same way -- a new badge to the right
of the queue name.

Additionally, in the case of dependent pipelines, we add the current
window size to the badge.  So in check, a queue header might look like:

  Queue: [17]

If there are 17 changes in the queue.  And in gate it might look like:

  Queue: integrated [4 / 22]

If there are 4 changes in the queue and the window size is 22.

The new badge has a tooltip that breaks each of these values out so
that users can discover their individual meanings.  It looks like:

  Queue length: 4
  Window size: 22

Change-Id: I951e1b406926b2438a847874d64babee0d11fb6f
This commit is contained in:
James E. Blair 2023-08-23 16:38:02 -07:00
parent c0031e0ce9
commit 8021fdf37b
1 changed files with 16 additions and 1 deletions

View File

@ -14,6 +14,8 @@
import * as React from 'react'
import PropTypes from 'prop-types'
import { Badge } from 'patternfly-react'
import { Tooltip } from '@patternfly/react-core'
import Change from './Change'
@ -48,9 +50,22 @@ class ChangeQueue extends React.Component {
const window = queue.window || '\u221e' // infinity
const is_dependent = pipeline.manager === 'dependent'
return (
<div className="change-queue" data-zuul-pipeline={}>
<p>Queue: <abbr title={fullName}>{shortName}</abbr></p>
Queue: <abbr title={fullName}>{shortName}</abbr>
<Tooltip position="bottom"
<p>Queue length: {changesList.length}</p>
{is_dependent && <p>Window size: {window}</p>}
<Badge>{changesList.length} {is_dependent && `/ ${window}`}</Badge>