Don't load replica executions for each replica

Remove 'Tasks Remaining' header in replicas list
Add 'Total Executions' header in replicas list
Greatly reduce the number of calls to the API

src/components/molecules/MainListItem/MainListItem.jsx

@@ -104,6 +104,7 @@ class MainListItem extends React.Component {
     item: PropTypes.object.isRequired,
     onClick: PropTypes.func,
     selected: PropTypes.bool,
+    useTasksRemaining: PropTypes.bool,
     image: PropTypes.string,
     endpointType: PropTypes.func,
     onSelectedChange: PropTypes.func,
@@ -148,6 +149,10 @@ class MainListItem extends React.Component {
     return `${unfinished} of ${total}`
   }
 
+  getTotalExecutions() {
+    return (this.props.item.executions && this.props.item.executions.length) || '-'
+  }
+
   renderLastExecution() {
     let lastExecution = this.getLastExecution()
     let label = 'Last Execution'
@@ -197,8 +202,8 @@ class MainListItem extends React.Component {
           {endpointImages}
           {this.renderLastExecution()}
           <TasksRemaining>
-            <ItemLabel>Tasks Remaining</ItemLabel>
-            <ItemValue>{this.getTasksRemaining()}</ItemValue>
+            <ItemLabel>{this.props.useTasksRemaining ? 'Tasks Remaining' : 'Total Executions'}</ItemLabel>
+            <ItemValue>{this.props.useTasksRemaining ? this.getTasksRemaining() : this.getTotalExecutions()}</ItemValue>
           </TasksRemaining>
         </Content>
       </Wrapper>

src/components/pages/MigrationsPage/MigrationsPage.jsx

@@ -198,6 +198,7 @@ class MigrationsPage extends React.Component {
                   {...options}
                   image={migrationItemImage}
                   endpointType={id => this.getEndpoint(id).type}
+                  useTasksRemaining
                 />)
               }
               emptyListImage={migrationLargeImage}

src/components/pages/ReplicasPage/ReplicasPage.jsx

@@ -75,7 +75,6 @@ class ReplicasPage extends React.Component {
     document.title = 'Coriolis Replicas'
 
     ProjectActions.getProjects()
-    ReplicaActions.getReplicas()
     EndpointActions.getEndpoints()
 
     this.pollData()
@@ -114,7 +113,6 @@ class ReplicasPage extends React.Component {
       ProjectActions.getProjects()
       ReplicaActions.getReplicas()
       EndpointActions.getEndpoints()
-      this.pollData()
     })
 
     UserActions.switchProject(project.id)
@@ -124,7 +122,6 @@ class ReplicasPage extends React.Component {
     ProjectActions.getProjects()
     ReplicaActions.getReplicas({ showLoading: true })
     EndpointActions.getEndpoints()
-    this.pollData()
   }
 
   handleItemClick(item) {
@@ -169,11 +166,9 @@ class ReplicasPage extends React.Component {
   }
 
   pollData() {
-    Wait.for(() => this.props.replicaStore.replicas.length !== 0, () => {
-      ReplicaActions.getReplicasExecutions(this.props.replicaStore.replicas)
-      Wait.for(() => !this.props.replicaStore.replicasExecutionsLoading, () => {
-        this.pollTimeout = setTimeout(() => { this.pollData() }, requestPollTimeout)
-      })
+    ReplicaActions.getReplicas()
+    Wait.for(() => !this.props.replicaStore.backgroundLoading, () => {
+      this.pollTimeout = setTimeout(() => { this.pollData() }, requestPollTimeout)
     })
   }
 

src/sources/ReplicaSource.js

@@ -39,12 +39,12 @@ class ReplicaSourceUtils {
     replicas.sort((a, b) => {
       ReplicaSourceUtils.sortExecutions(a.executions)
       ReplicaSourceUtils.sortExecutions(b.executions)
-      let aLastExecution = a.executions && a.executions.length ?
-        a.executions[a.executions.length - 1].updated_at : null
-      let bLastExecution = b.executions && b.executions.length ?
-        b.executions[b.executions.length - 1].updated_at : null
-      let aTime = aLastExecution || a.updated_at || a.created_at
-      let bTime = bLastExecution || b.updated_at || b.created_at
+      let aLastExecution = a.executions && a.executions.length ? a.executions[a.executions.length - 1] : null
+      let bLastExecution = b.executions && b.executions.length ? b.executions[b.executions.length - 1] : null
+      let aLastTime = aLastExecution ? aLastExecution.updated_at || aLastExecution.created_at : null
+      let bLastTime = bLastExecution ? bLastExecution.updated_at || bLastExecution.created_at : null
+      let aTime = aLastTime || a.updated_at || a.created_at
+      let bTime = bLastTime || b.updated_at || b.created_at
       return moment(bTime).diff(moment(aTime))
     })
   }
@@ -82,8 +82,8 @@ class ReplicaSource {
         method: 'GET',
       }).then(response => {
         let replicas = response.data.replicas
-        replicas = ReplicaSourceUtils.filterDeletedExecutionsInReplicas(response.data.replicas)
-        ReplicaSourceUtils.sortReplicas(response.data.replicas)
+        replicas = ReplicaSourceUtils.filterDeletedExecutionsInReplicas(replicas)
+        ReplicaSourceUtils.sortReplicas(replicas)
         resolve(replicas)
       }, reject).catch(reject)
     })

src/stores/ReplicaStore.js

@@ -21,6 +21,7 @@ class ReplicaStore {
     this.replicas = []
     this.replicaDetails = {}
     this.loading = true
+    this.backgroundLoading = false
     this.detailsLoading = true
     this.replicasExecutionsLoading = false
 
@@ -44,25 +45,22 @@ class ReplicaStore {
   }
 
   handleGetReplicas({ showLoading }) {
+    this.backgroundLoading = true
+
     if (showLoading || this.replicas.length === 0) {
       this.loading = true
     }
   }
 
   handleGetReplicasSuccess(replicas) {
-    this.replicas = replicas.map(replica => {
-      let oldReplica = this.replicas.find(r => r.id === replica.id)
-      if (oldReplica) {
-        replica.executions = oldReplica.executions
-      }
-
-      return replica
-    })
+    this.replicas = replicas
     this.loading = false
+    this.backgroundLoading = false
   }
 
   handleGetReplicasFailed() {
     this.loading = false
+    this.backgroundLoading = false
   }
 
   handleGetReplicasExecutions() {