Improved the node details time transitioning logic

client/app/scripts/actions/app-actions.js

@@ -539,9 +539,10 @@ export function receiveControlSuccess(nodeId) {
   };
 }
 
-export function receiveNodeDetails(details) {
+export function receiveNodeDetails(details, timestamp = null) {
   return {
     type: ActionTypes.RECEIVE_NODE_DETAILS,
+    timestamp,
     details
   };
 }

client/app/scripts/components/node-details.js

@@ -68,7 +68,11 @@ class NodeDetails extends React.Component {
             onClick={this.handleShowTopologyForNode}>
             <span>Show in <span>{this.props.topologyId.replace(/-/g, ' ')}</span></span>
           </span>}
-          <span title="Close details" className="fa fa-close" onClick={this.handleClickClose} />
+          <span
+            title="Close details"
+            className="fa fa-close close-details"
+            onClick={this.handleClickClose}
+          />
         </div>
       </div>
     );
@@ -284,6 +288,7 @@ function mapStateToProps(state, ownProps) {
   const currentTopologyId = state.get('currentTopologyId');
   return {
     nodeMatches: state.getIn(['searchNodeMatches', currentTopologyId, ownProps.id]),
+    transitioning: state.get('pausedAt') && (!ownProps.timestamp || ownProps.timestamp.toISOString() !== state.get('pausedAt').toISOString()),
     nodes: state.get('nodes'),
     selectedNodeId: state.get('selectedNodeId'),
   };

client/app/scripts/reducers/root.js

@@ -552,13 +552,12 @@ export function rootReducer(state = initialState, action) {
 
       // disregard if node is not selected anymore
       if (state.hasIn(['nodeDetails', action.details.id])) {
-        state = state.updateIn(['nodeDetails', action.details.id], (obj) => {
-          const result = Object.assign({}, obj);
-          result.notFound = false;
-          result.transitioning = false;
-          result.details = action.details;
-          return result;
-        });
+        console.log(action.timestamp && action.timestamp.toISOString());
+        state = state.updateIn(['nodeDetails', action.details.id], obj => ({ ...obj,
+          notFound: false,
+          timestamp: action.timestamp,
+          details: action.details,
+        }));
       }
       return state;
     }
@@ -566,7 +565,9 @@ export function rootReducer(state = initialState, action) {
     case ActionTypes.NODE_DETAILS_START_TRANSITION: {
       const topNode = state.get('nodeDetails').last();
       if (topNode && topNode.id) {
-        state = state.updateIn(['nodeDetails', topNode.id], d => ({ ...d, transitioning: true }));
+        state = state.updateIn(['nodeDetails', topNode.id], obj => ({ ...obj,
+          transitioning: true,
+        }));
       }
       return state;
     }
@@ -636,11 +637,9 @@ export function rootReducer(state = initialState, action) {
 
     case ActionTypes.RECEIVE_NOT_FOUND: {
       if (state.hasIn(['nodeDetails', action.nodeId])) {
-        state = state.updateIn(['nodeDetails', action.nodeId], (obj) => {
-          const result = Object.assign({}, obj);
-          result.notFound = true;
-          return result;
-        });
+        state = state.updateIn(['nodeDetails', action.nodeId], obj => ({ ...obj,
+          notFound: true,
+        }));
       }
       return state;
     }

client/app/scripts/utils/web-api-utils.js

@@ -294,19 +294,22 @@ export function getNodeDetails(getState, dispatch) {
     const topologyOptions = currentTopologyId === obj.topologyId
       ? activeTopologyOptionsSelector(state) : makeMap();
 
+    const timestamp = state.get('pausedAt');
     const query = buildUrlQuery(topologyOptions, state);
     if (query) {
       urlComponents = urlComponents.concat(['?', query]);
     }
     const url = urlComponents.join('');
 
-    dispatch(nodeDetailsStartTransition());
+    // if (isPausedSelector(state)) {
+    //   dispatch(nodeDetailsStartTransition());
+    // }
     doRequest({
       url,
       success: (res) => {
         // make sure node is still selected
         if (nodeMap.has(res.node.id)) {
-          dispatch(receiveNodeDetails(res.node));
+          dispatch(receiveNodeDetails(res.node, timestamp));
         }
       },
       error: (err) => {

client/app/styles/_base.scss

@@ -737,6 +737,10 @@
     top: 6px;
     right: 8px;
 
+    .close-details {
+      position: relative;
+      z-index: 1024;
+    }
 
     > span {
       @extend .btn-opacity;