feat(FeedVersion): show loading spinner when version validating

landonreed · landonreed · commit 2fe9e375b1ae · 2017-03-14T15:59:06.000-04:00
diff --git a/lib/manager/components/FeedVersionNavigator.js b/lib/manager/components/FeedVersionNavigator.js
@@ -26,7 +26,8 @@ export default class FeedVersionNavigator extends Component {
     notesRequestedForVersion: PropTypes.func,
     createDeploymentFromFeedSource: PropTypes.func,
     fetchValidationResult: PropTypes.func,
-    setVersionIndex: PropTypes.func
+    setVersionIndex: PropTypes.func,
+    validationJob: PropTypes.object
   }
   constructor (props) {
     super(props)
@@ -38,7 +39,6 @@ export default class FeedVersionNavigator extends Component {
     }
   }
   render () {
-    console.log(this.props)
     const versionTitleStyle = {
       fontSize: '24px',
       fontWeight: 'bold'
diff --git a/lib/manager/components/FeedVersionReport.js b/lib/manager/components/FeedVersionReport.js
@@ -51,7 +51,14 @@ export default class FeedVersionReport extends Component {
     const poly = bounds && bboxPoly([bounds.west, bounds.south, bounds.east, bounds.east])
     return poly && area(poly)
   }
-  getVersionDateLabel (version) {
+  getVersionDates (version, validationJob) {
+    const text = validationJob
+      ? <span className='loading-ellipsis'>Processing feed ({validationJob.status.percentComplete}%)</span>
+      : `Valid from ${moment(version.validationSummary.startDate).format(dateFormat)} to ${moment(version.validationSummary.endDate).format(dateFormat)}`
+    return <span><Icon type='calendar' /> {text}</span>
+  }
+  getVersionDateLabel (version, validationJob) {
+    if (validationJob) return null
     const now = +moment()
     const future = version.validationSummary && version.validationSummary.startDate > now
     const expired = version.validationSummary && version.validationSummary.endDate < now
@@ -159,7 +166,14 @@ export default class FeedVersionReport extends Component {
     ))
   }
   render () {
-    const version = this.props.version
+    const {
+      version,
+      validationJob,
+      isPublic,
+      feedVersionRenamed,
+      isPublished,
+      publishFeedVersion
+    } = this.props
     const messages = getComponentMessages('FeedVersionReport')
 
     if (!version) return <p>{getMessage(messages, 'noVersionsExist')}</p>
@@ -170,20 +184,22 @@ export default class FeedVersionReport extends Component {
           style={{margin: '0px'}}
         >
           {/* Name Display / Editor */}
-          {version.validationSummary.loadStatus === 'SUCCESS' && version.validationSummary.errorCount === 0
+          {validationJob
+            ? <Icon title='Feed is processing...' className='fa-spin' type='refresh' />
+            : version.validationSummary.loadStatus === 'SUCCESS' && version.validationSummary.errorCount === 0
             ? <Icon title='Feed loaded successfully, and is error-free!' className='text-success' type='check' style={{marginRight: 10}} />
             : version.validationSummary.errorCount > 0
             ? <Icon title='Feed loaded successfully, but has errors.' className='text-warning' type='exclamation-triangle' style={{marginRight: 10}} />
             : <Icon title='Feed did not load successfully, something has gone wrong!' className='text-danger' type='times' style={{marginRight: 10}} />
           }
-          {this.props.isPublic
+          {isPublic
             ? <span>{version.name}</span>
             : <EditableTextField
               inline
               value={version.name}
               maxWidth={40}
-              disabled={this.props.isPublic}
-              onChange={(value) => this.props.feedVersionRenamed(version, value)} />
+              disabled={isPublic}
+              onChange={(value) => feedVersionRenamed(version, value)} />
           }
           <VersionButtonToolbar
             {...this.props}
@@ -227,7 +243,7 @@ export default class FeedVersionReport extends Component {
             </ButtonGroup>
             <ActiveGtfsMap
               ref='map'
-              version={this.props.version}
+              version={version}
               disableRefresh
               disableScroll
               disablePopup
@@ -243,21 +259,21 @@ export default class FeedVersionReport extends Component {
             <h4>
               {isExtensionEnabled('mtc')
                 ? <Button
-                  disabled={this.props.isPublished}
+                  disabled={isPublished}
                   className='pull-right'
-                  bsStyle={this.props.isPublished ? 'success' : 'warning'}
-                  onClick={() => this.props.publishFeedVersion(version)}
+                  bsStyle={isPublished ? 'success' : 'warning'}
+                  onClick={() => publishFeedVersion(version)}
                 >
-                  {this.props.isPublished
+                  {isPublished
                     ? <span><Icon type='check-circle' /> Published</span>
                     : <span>Publish to MTC</span>
                   }
                 </Button>
                 : null
               }
-              <Icon type='calendar' /> {`Valid from ${moment(version.validationSummary.startDate).format(dateFormat)} to ${moment(version.validationSummary.endDate).format(dateFormat)}`}
+              {this.getVersionDates(version, validationJob)}
               {' '}
-              {this.getVersionDateLabel(version)}
+              {this.getVersionDateLabel(version, validationJob)}
             </h4>
             <p>
               {version.validationSummary && version.validationSummary.avgDailyRevenueTime
@@ -294,21 +310,21 @@ export default class FeedVersionReport extends Component {
               </Tab>
               <Tab eventKey={'routes'} title='Routes'>
                 <Routes
-                  version={this.props.version}
+                  version={version}
                   selectTab={(key) => this.selectTab(key)}
                   tableOptions={tableOptions}
                 />
               </Tab>
               <Tab eventKey={'patterns'} title='Patterns'>
                 <Patterns
-                  version={this.props.version}
+                  version={version}
                   selectTab={(key) => this.selectTab(key)}
                   tableOptions={tableOptions}
                 />
               </Tab>
               <Tab eventKey={'stops'} title='Stops'>
                 <Stops
-                  version={this.props.version}
+                  version={version}
                   selectTab={(key) => this.selectTab(key)}
                   tableOptions={tableOptions}
                 />
diff --git a/lib/manager/components/FeedVersionViewer.js b/lib/manager/components/FeedVersionViewer.js
@@ -28,10 +28,21 @@ export default class FeedVersionViewer extends Component {
     notesRequested: PropTypes.func,
     fetchValidationResult: PropTypes.func,
     downloadFeedClicked: PropTypes.func,
-    loadFeedVersionForEditing: PropTypes.func
+    loadFeedVersionForEditing: PropTypes.func,
+    validationJob: PropTypes.object
   }
   render () {
-    const version = this.props.version
+    const {
+      version,
+      feedVersionIndex,
+      versionSection,
+      feedSource,
+      fetchValidationResult,
+      user,
+      validationJob,
+      notesRequested,
+      newNotePosted
+    } = this.props
     const messages = getComponentMessages('FeedVersionViewer')
 
     if (!version) return <p className='text-center lead'>{getMessage(messages, 'noVersionsExist')}</p>
@@ -61,37 +72,38 @@ export default class FeedVersionViewer extends Component {
           <Row>
             <Col xs={12} sm={3}>
               <VersionSectionSelector
-                version={this.props.version}
-                feedVersionIndex={this.props.feedVersionIndex}
-                versionSection={this.props.versionSection}
+                version={version}
+                feedVersionIndex={feedVersionIndex}
+                validationJob={validationJob}
+                versionSection={versionSection}
               />
             </Col>
             <Col xs={12} sm={9}>
-              {!this.props.versionSection
+              {!versionSection
                 ? <FeedVersionReport
-                  isPublished={version.id === this.props.feedSource.publishedVersionId}
+                  isPublished={version.id === feedSource.publishedVersionId}
                   {...this.props}
                 />
-                : this.props.versionSection === 'issues'
+                : versionSection === 'issues'
                 ? <GtfsValidationViewer
                   validationResult={version.validationResult}
                   version={version}
-                  fetchValidationResult={() => { this.props.fetchValidationResult(version) }}
+                  fetchValidationResult={() => { fetchValidationResult(version) }}
                 />
-                : this.props.versionSection === 'gtfsplus' && isModuleEnabled('gtfsplus')
+                : versionSection === 'gtfsplus' && isModuleEnabled('gtfsplus')
                 ? <ActiveGtfsPlusVersionSummary
                   version={version}
                 />
-                : this.props.versionSection === 'comments'
+                : versionSection === 'comments'
                 ? <NotesViewer
                   type='feed-version'
                   stacked
-                  user={this.props.user}
-                  version={this.props.version}
+                  user={user}
+                  version={version}
                   notes={version.notes}
                   noteCount={version.noteCount}
-                  notesRequested={() => { this.props.notesRequested() }}
-                  newNotePosted={(note) => { this.props.newNotePosted(note) }}
+                  notesRequested={() => { notesRequested() }}
+                  newNotePosted={(note) => { newNotePosted(note) }}
                 />
                 : null
               }
@@ -114,10 +126,19 @@ export class VersionButtonToolbar extends Component {
 
     downloadFeedClicked: PropTypes.func,
     deleteFeedVersionConfirmed: PropTypes.func,
-    loadFeedVersionForEditing: PropTypes.func
+    loadFeedVersionForEditing: PropTypes.func,
+    validationJob: PropTypes.object
   }
   render () {
-    const version = this.props.version
+    const {
+      version,
+      hasVersions,
+      downloadFeedClicked,
+      isPublic,
+      loadFeedVersionForEditing,
+      deleteDisabled,
+      deleteFeedVersionConfirmed
+    } = this.props
     const messages = getComponentMessages('FeedVersionViewer')
     return (
       <div style={{display: 'inline'}}>
@@ -127,21 +148,21 @@ export class VersionButtonToolbar extends Component {
           {/* "Download Feed" Button */}
           <Button
             bsStyle='primary'
-            disabled={!this.props.hasVersions}
-            onClick={(evt) => this.props.downloadFeedClicked(version, this.props.isPublic)}
+            disabled={!hasVersions}
+            onClick={(evt) => downloadFeedClicked(version, isPublic)}
           >
             <Glyphicon glyph='download' /><span className='hidden-xs'> {getMessage(messages, 'download')}</span><span className='hidden-xs hidden-sm'> {getMessage(messages, 'feed')}</span>
           </Button>
 
           {/* "Load for Editing" Button */}
-          {isModuleEnabled('editor') && !this.props.isPublic
+          {isModuleEnabled('editor') && !isPublic
             ? <Button bsStyle='success'
-              disabled={!this.props.hasVersions}
+              disabled={!hasVersions}
               onClick={(evt) => {
                 this.refs.confirm.open({
                   title: getMessage(messages, 'load'),
                   body: getMessage(messages, 'confirmLoad'),
-                  onConfirm: () => { this.props.loadFeedVersionForEditing(version) }
+                  onConfirm: () => { loadFeedVersionForEditing(version) }
                 })
               }}
             >
@@ -151,15 +172,15 @@ export class VersionButtonToolbar extends Component {
           }
 
           {/* "Delete Version" Button */}
-          {!this.props.isPublic
+          {!isPublic
             ? <Button
               bsStyle='danger'
-              disabled={this.props.deleteDisabled || !this.props.hasVersions || typeof this.props.deleteFeedVersionConfirmed === 'undefined'}
+              disabled={deleteDisabled || !hasVersions || typeof deleteFeedVersionConfirmed === 'undefined'}
               onClick={(evt) => {
                 this.refs.confirm.open({
                   title: `${getMessage(messages, 'delete')} ${getMessage(messages, 'version')}`,
                   body: getMessage(messages, 'confirmDelete'),
-                  onConfirm: () => { this.props.deleteFeedVersionConfirmed(version) }
+                  onConfirm: () => { deleteFeedVersionConfirmed(version) }
                 })
               }}
             >
@@ -176,17 +197,22 @@ export class VersionButtonToolbar extends Component {
 
 class VersionSectionSelector extends Component {
   static propTypes = {
+    validationJob: PropTypes.object,
     version: PropTypes.object,
     feedVersionIndex: PropTypes.number,
     versionSection: PropTypes.string
   }
   renderIssuesLabel (version) {
-    const color = version.validationSummary.loadStatus !== 'SUCCESS'
+    const color = this.props.validationJob
+      ? 'warning'
+      : version.validationSummary.loadStatus !== 'SUCCESS'
       ? 'danger'
       : version.validationSummary.errorCount
       ? 'warning'
       : 'success'
-    const text = version.validationSummary.loadStatus !== 'SUCCESS'
+    const text = this.props.validationJob
+      ? <span>processing <Icon className='fa-spin' type='refresh' /></span>
+      : version.validationSummary.loadStatus !== 'SUCCESS'
       ? 'critical error'
       : version.validationSummary.errorCount
     return (
diff --git a/lib/manager/containers/ActiveFeedVersionNavigator.js b/lib/manager/containers/ActiveFeedVersionNavigator.js
@@ -17,28 +17,33 @@ import { downloadGtfsPlusFeed } from '../../gtfsplus/actions/gtfsplus'
 
 const mapStateToProps = (state, ownProps) => {
   let feedVersionIndex
-  const routeVersionIndex = parseInt(ownProps.routeParams.feedVersionIndex, 10)
-  const hasVersionIndex = typeof ownProps.routeParams.feedVersionIndex !== 'undefined'
+  const {routeParams, feedSource} = ownProps
+  const {feedVersions, id} = feedSource
+  const {feedVersionIndex: fvi, subpage} = routeParams
+  const routeVersionIndex = parseInt(fvi, 10)
+  const hasVersionIndex = typeof fvi !== 'undefined'
 
-  if (ownProps.feedSource && typeof ownProps.feedSource.feedVersions !== 'undefined') {
+  if (feedSource && typeof feedVersions !== 'undefined') {
     if ((hasVersionIndex && isNaN(routeVersionIndex)) ||
-        routeVersionIndex > ownProps.feedSource.feedVersions.length ||
+        routeVersionIndex > feedVersions.length ||
         routeVersionIndex < 0) {
       console.log(`version index ${routeVersionIndex} is invalid`)
 
-      // CANNOT use browserHistory.push in middle of state transition
+      // TODO: CANNOT use browserHistory.push in middle of state transition
       // browserHistory.push(`/feed/${feedSourceId}`)
-      window.location.href = `/feed/${ownProps.feedSource.id}`
+      window.location.href = `/feed/${id}`
     } else {
       feedVersionIndex = hasVersionIndex
         ? routeVersionIndex
-        : ownProps.feedSource.feedVersions.length
+        : feedVersions.length
     }
   }
-
+  const { jobs } = state.status.jobMonitor
+  const validationJob = feedVersionIndex >= 1 && jobs.find(j => j.type === 'VALIDATE_FEED' && j.feedVersion.id === feedVersions[feedVersionIndex - 1].id)
   return {
     feedVersionIndex,
-    versionSection: ownProps.routeParams.subpage
+    validationJob,
+    versionSection: subpage
   }
 }
 
diff --git a/lib/style.css b/lib/style.css
@@ -128,3 +128,25 @@
 .gtfs-map-select > .Select > .Select-menu-outer {
 	z-index: 2000;
 }
+
+.loading-ellipsis:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4,end) 900ms infinite;
+  animation: ellipsis steps(4,end) 900ms infinite;
+  content: "\2026"; /* ascii code for the ellipsis character */
+  width: 0px;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 1.25em;
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,8 @@ export default class FeedVersionNavigator extends Component {`
`26`	`26`	`notesRequestedForVersion: PropTypes.func,`
`27`	`27`	`createDeploymentFromFeedSource: PropTypes.func,`
`28`	`28`	`fetchValidationResult: PropTypes.func,`
`29`		`- setVersionIndex: PropTypes.func`
	`29`	`+ setVersionIndex: PropTypes.func,`
	`30`	`+ validationJob: PropTypes.object`
`30`	`31`	`}`
`31`	`32`	`constructor (props) {`
`32`	`33`	`super(props)`
`@@ -38,7 +39,6 @@ export default class FeedVersionNavigator extends Component {`
`38`	`39`	`}`
`39`	`40`	`}`
`40`	`41`	`render () {`
`41`		`- console.log(this.props)`
`42`	`42`	`const versionTitleStyle = {`
`43`	`43`	`fontSize: '24px',`
`44`	`44`	`fontWeight: 'bold'`