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

web/src/containers/status/ChangeQueue.jsx

@@ -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={pipeline.name}>
-        <p>Queue: <abbr title={fullName}>{shortName}</abbr></p>
+        <p>
+          Queue: <abbr title={fullName}>{shortName}</abbr>
+          <Tooltip position="bottom"
+                   content={
+                     <div>
+                       <p>Queue length: {changesList.length}</p>
+                       {is_dependent && <p>Window size: {window}</p>}
+                     </div>
+                   }>
+            <Badge>{changesList.length} {is_dependent && `/ ${window}`}</Badge>
+          </Tooltip>
+        </p>
         {changesList}
       </div>)
   }