Merge "Hide skipped jobs in status/reports"

web/src/containers/status/ChangePanel.jsx

@@ -18,6 +18,7 @@ import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import * as moment from 'moment'
 import 'moment-duration-format'
+import { Button } from '@patternfly/react-core'
 
 
 class ChangePanel extends React.Component {
@@ -30,9 +31,11 @@ class ChangePanel extends React.Component {
   constructor () {
     super()
     this.state = {
-      expanded: false
+      expanded: false,
+      showSkipped: false,
     }
     this.onClick = this.onClick.bind(this)
+    this.toggleSkippedJobs = this.toggleSkippedJobs.bind(this)
     this.clicked = false
   }
 
@@ -120,12 +123,13 @@ class ChangePanel extends React.Component {
   }
 
   renderProgressBar (change) {
-    let jobPercent = (100 / change.jobs.length).toFixed(2)
+    const interesting_jobs = change.jobs.filter(j => this.jobStrResult(j) !== 'skipped')
+    let jobPercent = (100 / interesting_jobs.length).toFixed(2)
     return (
       <div className='progress zuul-change-total-result'>
         {change.jobs.map((job, idx) => {
           let result = this.jobStrResult(job)
-          if (['queued', 'waiting'].includes(result)) {
+          if (['queued', 'waiting', 'skipped'].includes(result)) {
             return ''
           }
           let className = ''
@@ -144,7 +148,6 @@ class ChangePanel extends React.Component {
               className = ' progress-bar-warning'
               break
             case 'paused':
-            case 'skipped':
               className = ' progress-bar-info'
               break
             default:
@@ -302,15 +305,39 @@ class ChangePanel extends React.Component {
       </span>)
   }
 
+  toggleSkippedJobs (e) {
+    // Skip middle mouse button
+    if (e.button === 1) {
+      return
+    }
+    this.setState({ showSkipped: !this.state.showSkipped })
+  }
+
   renderJobList (jobs, times) {
+    const [buttonText, interestingJobs] = this.state.showSkipped ?
+          ['Hide', jobs] :
+          ['Show', jobs.filter(j => this.jobStrResult(j) !== 'skipped')]
+    const skippedJobCount = jobs.length - interestingJobs.length
+
     return (
-      <ul className='list-group zuul-patchset-body'>
-        {jobs.map((job, idx) => (
-          <li key={idx} className='list-group-item zuul-change-job'>
-            {this.renderJob(job, times.jobs[job.name])}
-          </li>
-        ))}
-      </ul>)
+      <>
+        <ul className='list-group zuul-patchset-body'>
+          {interestingJobs.map((job, idx) => (
+            <li key={idx} className='list-group-item zuul-change-job'>
+              {this.renderJob(job, times.jobs[job.name])}
+            </li>
+          ))}
+          {(this.state.showSkipped || skippedJobCount) ? (
+            <li key='last' className='list-group-item zuul-change-job'>
+              <Button variant="link" className='zuul-skipped-jobs-button'
+                      onClick={this.toggleSkippedJobs}>
+                {buttonText} {skippedJobCount ? skippedJobCount : ''} skipped job{skippedJobCount === 1 ? '' : 's'}
+              </Button>
+            </li>
+          ) : ''}
+        </ul>
+      </>
+    )
   }
 
   calculateTimes (change) {

web/src/containers/status/ChangePanel.test.jsx

@@ -16,6 +16,7 @@ import React from 'react'
 import { Link, BrowserRouter as Router } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { create } from 'react-test-renderer'
+import { Button } from '@patternfly/react-core'
 
 import { setTenantAction } from '../../actions/tenant'
 import configureStore from '../../store'
@@ -45,6 +46,8 @@ it('change panel render multi tenant links', () => {
   const jobLink = application.root.findByType(Link)
   expect(jobLink.props.to).toEqual(
     '/t/tenant-one/stream/42')
+  const skipButton = application.root.findAllByType(Button)
+  expect(skipButton === undefined)
 })
 
 it('change panel render white-label tenant links', () => {
@@ -60,4 +63,29 @@ it('change panel render white-label tenant links', () => {
   const jobLink = application.root.findByType(Link)
   expect(jobLink.props.to).toEqual(
     '/stream/42')
+  const skipButton = application.root.findAllByType(Button)
+  expect(skipButton === undefined)
+})
+
+it('change panel skip jobs', () => {
+  const fakeChange = {
+    project: 'org-project',
+    jobs: [{
+      name: 'job-name',
+      url: 'stream/42',
+      result: 'skipped'
+    }]
+  }
+
+  const store = configureStore()
+  store.dispatch(setTenantAction('tenant-one', true))
+  const application = create(
+    <Provider store={store}>
+      <Router>
+        <ChangePanel change={fakeChange} globalExpanded={true} />
+      </Router>
+    </Provider>
+  )
+  const skipButton = application.root.findByType(Button)
+  expect(skipButton.props.children.includes('skipped job'))
 })

web/src/index.css

@@ -189,6 +189,11 @@ a.refresh {
     font-size: small;
 }
 
+.zuul-skipped-jobs-button {
+    font-size: small;
+    padding: 0;
+}
+
 .zuul-non-voting-desc {
     font-size: smaller;
 }