Merge pull request #41 from smiclea/CORWEB-67

Allow navigation through executions while one is running CORWEB-67

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -74,11 +74,19 @@ class ReplicaExecutions extends Component {
 
   componentWillReceiveProps(newProps) {
     if (newProps.replica && newProps.replica.executions.length) {
-      let execution = newProps.replica.executions[newProps.replica.executions.length - 1]
-      this.setState({
-        executionRef: execution,
-        tasks: execution.tasks
-      })
+      let isNewExecution = newProps.replica.executions.length > (this.state.executionsCount || 0)
+      let lastExecution = newProps.replica.executions[newProps.replica.executions.length - 1]
+
+      // Don't update the component every time the last execution is updated
+      // Update the component if the last execution is the currently selected one
+      // Update the component if a new execution was just added
+      if (!this.state.executionRef || this.state.executionRef.id === lastExecution.id || isNewExecution) {
+        this.setState({
+          executionsCount: newProps.replica.executions.length,
+          executionRef: lastExecution,
+          tasks: lastExecution.tasks
+        })
+      }
     } else if (newProps.replica.executions.length == 0) {
       this.setState({
         executionRef: null,
@@ -153,15 +161,10 @@ class ReplicaExecutions extends Component {
   }
 
   pollTasks() {
-    if (this.props && this.props.replica && this.props.replica.executions.length) {
-      if (this.props.replica.executions[this.props.replica.executions.length - 1].status == "RUNNING") {
-        MigrationActions.getReplicaExecutionDetail(this.props.replica, this.state.executionRef.id,
-          (replica, executionId, response) => {
-            this.setState({
-              tasks: response.data.execution.tasks
-            })
-          })
-      }
+    let executions = this.props && this.props.replica && this.props.replica.executions
+    let lastExecution = executions && executions.length && executions[executions.length - 1]
+    if (lastExecution.status === 'RUNNING') {
+      MigrationActions.getReplicaExecutionDetail(this.props.replica, lastExecution.id)
     }
   }
 
@@ -183,14 +186,13 @@ class ReplicaExecutions extends Component {
     if (this.props.replica) {
       if (this.props.replica.executions.length && this.state.executionRef) {
         let executionBtn = <button className="wire red" onClick={(e) => this.deleteExecution(e)}>Delete</button>
-        if (this.props.replica.executions && this.props.replica.executions[this.props.replica.executions.length - 1] &&
-          this.props.replica.executions[this.props.replica.executions.length - 1].status == "RUNNING") {
-          executionBtn =
+
+        if (this.state.executionRef.status === 'RUNNING') {
+          executionBtn = 
             <button className="gray wire" onClick={(e) => this.cancelExecution(e)}>Cancel execution</button>
         }
 
         let executionsSorted = this.props.replica.executions
-
         executionsSorted.sort((a, b) => a.number - b.number)
         let executionTime = Helper.getTimeObject(this.state.executionRef.created_at)
 
@@ -216,7 +218,7 @@ class ReplicaExecutions extends Component {
                   {executionBtn}
                 </div>
               </div>
-              <Tasks tasks={this.state.tasks} />
+              <Tasks tasks={this.state.tasks} execution={this.state.executionRef} />
             </div>
             <ConfirmationDialog
               visible={this.state.deleteConfirmationDialog.visible}

src/components/Table/Table.js

@@ -25,6 +25,7 @@ class Table extends Component {
   static defaultProps = {
     headerItems: [],
     listItems: [],
+    parentId: null,
     show: true
   }
 
@@ -32,25 +33,29 @@ class Table extends Component {
     headerItems: PropTypes.array,
     listItems: PropTypes.array,
     customClassName: PropTypes.string,
-    show: PropTypes.bool
+    show: PropTypes.bool,
+    parentId: PropTypes.string
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      openState: []
+      openState: [],
+      parentId: null
     }
   }
 
   componentWillReceiveProps(newProps) {
     let openState = []
     for (let i in newProps.listItems) {
-      openState.push(newProps.listItems[i].openState)
+      // Use the previous open state if the table's parent ID is the same
+      // i.e. don't close the collapser if new props arrive
+      let prevOpenState = newProps.parentId === this.state.parentId && this.state.openState[i]
+      openState.push(newProps.listItems[i].openState || prevOpenState)
     }
-    this.setState({ openState: openState })
+    this.setState({ openState: openState, parentId: newProps.parentId })
   }
 
-
   toggleDrawer(index) {
     let newOpenState = this.state.openState
     let toggled = !newOpenState[index]

src/components/Tasks/Tasks.js

@@ -38,7 +38,8 @@ function hasProgress(msg) {
 class Tasks extends Component {
 
   static propTypes = {
-    tasks: PropTypes.array
+    tasks: PropTypes.array,
+    execution: PropTypes.object
   }
 
 
@@ -52,7 +53,8 @@ class Tasks extends Component {
     ]
 
     this.state = {
-      listItems: []
+      listItems: [],
+      execution: null
     }
   }
 
@@ -63,7 +65,7 @@ class Tasks extends Component {
   componentWillReceiveProps(newProps) {
     let listItems = []
     if (newProps.tasks) {
-      newProps.tasks.forEach((item) => {
+      newProps.tasks.forEach(item => {
         let latestMessage
         if (item.progress_updates.length && item.progress_updates[item.progress_updates.length - 1]) {
           latestMessage = item.progress_updates[item.progress_updates.length - 1].message
@@ -148,10 +150,9 @@ class Tasks extends Component {
         listItems.push(newItem)
       }, this)
     }
-    this.setState({ listItems: listItems })
+    this.setState({ listItems: listItems, execution: newProps.execution })
   }
 
-
   render() {
     return (
       <div className={s.root}>
@@ -159,6 +160,7 @@ class Tasks extends Component {
           (<div className={s.container}>
             <Table
               headerItems={this.headers}
+              parentId={this.state.execution && this.state.execution.id}
               listItems={this.state ? this.state.listItems : null}
               customClassName={s.table}
               show={this.state !== null}