Hide skipped jobs in status/reports

For heavy users of "dispatch jobs" (where many jobs are declared as
dependencies of a single job which then mutates the child_jobs
return value to indicate which few of those should be run), there
may be large numbers of "SKIPPED" jobs in the status page and in the
final job report, which reduces the usability of both of those.

Yet it is important for users to be able to see skipped jobs since
they may represent an error (they may be inadvertently skipped).

To address this, we remove "SKIPPED" jobs from the status page by
default, but add a button at the bottom of the change box which
can toggle their display.

We remove "SKIPPED" jobs from the report, but add a note at the
bottom which says "Skipped X jobs".  Users can follow the buildset
link to see which ones were skipped.

The buildset page will continue to show all the jobs for the buildset.

Change-Id: Ie297168cdf5b39d1d6f219e9b2efc44c01e87f35

3 files changed, 71 insertions, 11 deletions

diff --git a/web/src/containers/status/ChangePanel.jsx b/web/src/containers/status/ChangePanel.jsx
index 33fc4687c..dd4fc27e5 100644
--- a/web/src/containers/status/ChangePanel.jsx
+++ b/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) {
diff --git a/web/src/containers/status/ChangePanel.test.jsx b/web/src/containers/status/ChangePanel.test.jsx
index 5a4be8602..cd27edc73 100644
--- a/web/src/containers/status/ChangePanel.test.jsx
+++ b/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'))
 })
diff --git a/web/src/index.css b/web/src/index.css
index e8c67a372..eddbca673 100644
--- a/web/src/index.css
+++ b/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;
 }