feat(JobMonitor): add clear completed button

Author: landonreed

lib/common/components/JobMonitor.js

@@ -2,7 +2,6 @@ import Icon from '@conveyal/woonerf/components/icon'
 import Pure from '@conveyal/woonerf/components/pure'
 import React, {PropTypes} from 'react'
 import {ProgressBar, Button} from 'react-bootstrap'
-import truncate from 'truncate'
 
 import SidebarPopover from './SidebarPopover'
 
@@ -24,6 +23,11 @@ export default class JobMonitor extends Pure {
     //   this.popover._onResize()
     // }
   }
+
+  removeAll = () => {
+    this.props.jobMonitor.retired.forEach(job => this.props.removeRetiredJob(job))
+  }
+
   render () {
     const jobContainerStyle = {
       marginBottom: 20
@@ -35,25 +39,23 @@ export default class JobMonitor extends Pure {
       fontSize: '12px',
       color: 'darkGray'
     }
-    const {
-      jobMonitor,
-      removeRetiredJob
-    } = this.props
+    const {jobMonitor, removeRetiredJob} = this.props
+    const {jobs, retired} = jobMonitor
     return (
       <SidebarPopover
         ref={(SidebarPopover) => { this.popover = SidebarPopover }}
         title='Server Jobs'
         {...this.props}>
-        {jobMonitor.retired.map(job => (
+        {retired.map(job => (
           <RetiredJob
             key={`retired-${job.jobId}`}
             job={job}
             removeRetiredJob={removeRetiredJob}
             statusStyle={statusMessageStyle}
             style={jobContainerStyle} />
           ))}
-        {jobMonitor.jobs.length
-          ? jobMonitor.jobs.map(job => (
+        {jobs.length
+          ? jobs.map(job => (
             <div key={job.jobId} style={jobContainerStyle}>
               <div style={{ float: 'left' }}>
                 <Icon type='spinner' className='fa-pulse' />
@@ -67,7 +69,15 @@ export default class JobMonitor extends Pure {
               </div>
             </div>
           ))
-          : <p>No active jobs.</p>
+          : <p className='lead text-center'>No active jobs.</p>
+        }
+        {retired.length
+          ? <Button
+            block
+            onClick={this.removeAll}>
+            <Icon type='times-circle' /> Clear completed
+          </Button>
+          : null
         }
       </SidebarPopover>
     )
@@ -98,7 +108,12 @@ class RetiredJob extends Pure {
           }
         </div>
         <div style={{ marginLeft: 25 }}>
-          <div>
+          <div style={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: '220px',
+            whiteSpace: 'nowrap'
+          }}>
             <Button
               bsStyle='link'
               className='pull-right'
@@ -107,7 +122,7 @@ class RetiredJob extends Pure {
             </Button>
             <strong
               title={job.name}>
-              {truncate(job.name, 25)}
+              {job.name}
             </strong>
           </div>
           <div