Replica execution shown twice after wizard finish

Sometimes after the wizard finished a replica configuration set with `execute_now: true`, the running execution would appear twice in replica's executions page.
Also includes 'Loading executions ...' message while executions are being loaded for the first time.

Author: Sergiu Miclea

src/components/organisms/Executions/index.jsx

@@ -19,6 +19,7 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
 import StatusPill from '../../atoms/StatusPill'
+import StatusImage from '../../atoms/StatusImage'
 import CopyValue from '../../atoms/CopyValue'
 import Button from '../../atoms/Button'
 import Timeline from '../../molecules/Timeline'
@@ -31,7 +32,16 @@ import DateUtils from '../../../utils/DateUtils'
 
 import executionImage from './images/execution.svg'
 
-const Wrapper = styled.div`
+const Wrapper = styled.div``
+const LoadingWrapper = styled.div`
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+const LoadingText = styled.div`
+  margin-top: 38px;
+  font-size: 18px;
 `
 const ExecutionInfo = styled.div`
   background: ${Palette.grayscale[1]};
@@ -78,6 +88,7 @@ const NoExecutionText = styled.div`
 
 type Props = {
   item: ?MainItem,
+  loading: boolean,
   onCancelExecutionClick: (execution: ?Execution) => void,
   onDeleteExecutionClick: (execution: ?Execution) => void,
   onExecuteClick: () => void,
@@ -185,7 +196,24 @@ class Executions extends React.Component<Props, State> {
     this.props.onCancelExecutionClick(this.state.selectedExecution)
   }
 
+  renderLoading() {
+    if (!this.props.loading) {
+      return null
+    }
+
+    return (
+      <LoadingWrapper>
+        <StatusImage loading />
+        <LoadingText>Loading executions...</LoadingText>
+      </LoadingWrapper>
+    )
+  }
+
   renderTimeline() {
+    if (this.props.loading) {
+      return null
+    }
+
     return (
       <Timeline
         items={this.props.item ? this.props.item.executions : null}
@@ -224,7 +252,7 @@ class Executions extends React.Component<Props, State> {
   }
 
   renderExecutionInfo() {
-    if (!this.state.selectedExecution) {
+    if (!this.state.selectedExecution || this.props.loading) {
       return null
     }
 
@@ -248,7 +276,8 @@ class Executions extends React.Component<Props, State> {
 
   renderTasks() {
     if (!this.state.selectedExecution || !this.state.selectedExecution.tasks
-      || !this.state.selectedExecution.tasks.length) {
+      || !this.state.selectedExecution.tasks.length
+      || this.props.loading) {
       return null
     }
 
@@ -258,7 +287,7 @@ class Executions extends React.Component<Props, State> {
   }
 
   renderNoExecution() {
-    if (this.hasExecutions(this.props)) {
+    if (this.hasExecutions(this.props) || this.props.loading) {
       return null
     }
 
@@ -275,6 +304,7 @@ class Executions extends React.Component<Props, State> {
   render() {
     return (
       <Wrapper>
+        {this.renderLoading()}
         {this.renderTimeline()}
         {this.renderExecutionInfo()}
         {this.renderTasks()}

src/components/organisms/ReplicaDetailsContent/index.jsx

@@ -74,6 +74,7 @@ type Props = {
   scheduleStore: typeof ScheduleStore,
   page: string,
   detailsLoading: boolean,
+  executionsLoading: boolean,
   onCancelExecutionClick: (execution: ?Execution) => void,
   onDeleteExecutionClick: (execution: ?Execution) => void,
   onExecuteClick: () => void,
@@ -176,6 +177,7 @@ class ReplicaDetailsContent extends React.Component<Props, State> {
         onCancelExecutionClick={this.props.onCancelExecutionClick}
         onDeleteExecutionClick={this.props.onDeleteExecutionClick}
         onExecuteClick={this.props.onExecuteClick}
+        loading={this.props.executionsLoading}
         data-test-id="rdContent-executions"
       />
     )

src/components/pages/ReplicaDetailsPage/index.jsx

@@ -78,7 +78,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     ReplicaStore.getReplica(this.props.match.params.id)
     EndpointStore.getEndpoints()
     ScheduleStore.getSchedules(this.props.match.params.id)
-    this.pollData()
+    this.pollData(true)
   }
 
   componentWillUnmount() {
@@ -231,9 +231,9 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
     window.location.href = `/#/replica/executions/${ReplicaStore.replicaDetails ? ReplicaStore.replicaDetails.id : ''}`
   }
 
-  pollData() {
-    ReplicaStore.getReplicaExecutions(this.props.match.params.id).then(() => {
-      this.pollTimeout = setTimeout(() => { this.pollData() }, requestPollTimeout)
+  pollData(showLoading: boolean) {
+    ReplicaStore.getReplicaExecutions(this.props.match.params.id, showLoading).then(() => {
+      this.pollTimeout = setTimeout(() => { this.pollData(false) }, requestPollTimeout)
     })
   }
 
@@ -264,6 +264,7 @@ class ReplicaDetailsPage extends React.Component<Props, State> {
             endpoints={EndpointStore.endpoints}
             scheduleStore={ScheduleStore}
             detailsLoading={ReplicaStore.detailsLoading || EndpointStore.loading}
+            executionsLoading={ReplicaStore.executionsLoading}
             page={this.props.match.params.page || ''}
             onCancelExecutionClick={execution => { this.handleCancelExecutionClick(execution) }}
             onDeleteExecutionClick={execution => { this.handleDeleteExecutionClick(execution) }}

src/stores/ReplicaStore.js

@@ -27,7 +27,7 @@ class ReplicaStoreUtils {
     if (replicaDetails.executions) {
       return {
         ...replicaDetails,
-        executions: [...replicaDetails.executions, execution],
+        executions: [...replicaDetails.executions.filter(e => e.id !== execution.id), execution],
       }
     }
 
@@ -44,6 +44,7 @@ class ReplicaStore {
   @observable loading: boolean = true
   @observable backgroundLoading: boolean = false
   @observable detailsLoading: boolean = true
+  @observable executionsLoading: boolean = false
 
   replicasLoaded: boolean = false
 
@@ -65,7 +66,9 @@ class ReplicaStore {
     })
   }
 
-  @action getReplicaExecutions(replicaId: string): Promise<void> {
+  @action getReplicaExecutions(replicaId: string, showLoading: boolean = false): Promise<void> {
+    if (showLoading) this.executionsLoading = true
+
     return ReplicaSource.getReplicaExecutions(replicaId).then(executions => {
       let replica = this.replicas.find(replica => replica.id === replicaId)
 
@@ -79,7 +82,9 @@ class ReplicaStore {
           executions,
         }
       }
-    })
+
+      this.executionsLoading = false
+    }).catch(() => { this.executionsLoading = false })
   }
 
   @action getReplica(replicaId: string): Promise<void> {