From 720bb7d043af9f52ce582131f99f4f6a420f0ef1 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Mon, 3 Jul 2017 20:03:15 +0200 Subject: [PATCH] Fixed the flow. --- client/app/scripts/actions/app-actions.js | 18 ++++++----- client/app/scripts/components/time-control.js | 30 +++++++++---------- client/app/scripts/reducers/root.js | 3 +- client/app/scripts/utils/web-api-utils.js | 2 -- 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/client/app/scripts/actions/app-actions.js b/client/app/scripts/actions/app-actions.js index db7dd0f316..595dd50552 100644 --- a/client/app/scripts/actions/app-actions.js +++ b/client/app/scripts/actions/app-actions.js @@ -548,12 +548,18 @@ export function receiveNodesDelta(delta) { setTimeout(() => dispatch({ type: ActionTypes.SET_RECEIVED_NODES_DELTA }), 0); const state = getState(); - const hasChanges = delta.add || delta.update || delta.remove; - if (hasChanges) { - if (isPausedSelector(state)) { - // dispatch({ type: ActionTypes.BUFFER_NODES_DELTA, delta }); - } else { + if (!isPausedSelector(state)) { + // When moving in time, we will consider the transition complete + // only when the first batch of nodes delta has been received. We + // do that because we want to keep the previous state blurred instead + // of transitioning over an empty state like when switching topologies. + if (state.get('timeTravelTransitioning')) { + dispatch({ type: ActionTypes.FINISH_TIME_TRAVEL_TRANSITION }); + } + + const hasChanges = delta.add || delta.update || delta.remove; + if (hasChanges) { dispatch({ type: ActionTypes.RECEIVE_NODES_DELTA, delta @@ -599,8 +605,6 @@ export function jumpToTime(timestamp) { timestamp, }); getNodes(getState(), dispatch); - // updateWebsocketChannel(getState(), dispatch); - // dispatch(resetNodesDeltaBuffer()); getTopologies(getState(), dispatch); if (isResourceViewModeSelector(getState())) { getResourceViewNodesSnapshot(getState(), dispatch); diff --git a/client/app/scripts/components/time-control.js b/client/app/scripts/components/time-control.js index 12c8511818..a565b18e32 100644 --- a/client/app/scripts/components/time-control.js +++ b/client/app/scripts/components/time-control.js @@ -20,35 +20,30 @@ class TimeControl extends React.Component { this.handleNowClick = this.handleNowClick.bind(this); this.handlePauseClick = this.handlePauseClick.bind(this); this.handleTravelClick = this.handleTravelClick.bind(this); + this.getTrackingMetadata = this.getTrackingMetadata.bind(this); } - handleNowClick() { + getTrackingMetadata() { const { currentTopology } = this.props; - trackMixpanelEvent('scope.time.resume.click', { + return { layout: this.props.topologyViewMode, topologyId: currentTopology && currentTopology.get('id'), parentTopologyId: currentTopology && currentTopology.get('parentId'), - }); + }; + } + + handleNowClick() { + trackMixpanelEvent('scope.time.resume.click', this.getTrackingMetadata()); this.props.clickResumeUpdate(); } handlePauseClick() { - const { currentTopology } = this.props; - trackMixpanelEvent('scope.time.pause.click', { - layout: this.props.topologyViewMode, - topologyId: currentTopology && currentTopology.get('id'), - parentTopologyId: currentTopology && currentTopology.get('parentId'), - }); + trackMixpanelEvent('scope.time.pause.click', this.getTrackingMetadata()); this.props.clickPauseUpdate(); } handleTravelClick() { - const { currentTopology } = this.props; - trackMixpanelEvent('scope.time.travel.click', { - layout: this.props.topologyViewMode, - topologyId: currentTopology && currentTopology.get('id'), - parentTopologyId: currentTopology && currentTopology.get('parentId'), - }); + trackMixpanelEvent('scope.time.travel.click', this.getTrackingMetadata()); this.props.clickTimeTravel(); } @@ -95,6 +90,10 @@ class TimeControl extends React.Component { title={moment(pausedAt).utc().toISOString()}> Paused {moment(pausedAt).fromNow()} } + {isRunningNow && timeTravelTransitioning && + Resuming the live state + } ); } @@ -102,7 +101,6 @@ class TimeControl extends React.Component { function mapStateToProps(state) { return { - update: state.get('topologyViewMode'), topologyViewMode: state.get('topologyViewMode'), currentTopology: state.get('currentTopology'), showingTimeTravel: state.get('showingTimeTravel'), diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js index 14fabe5e32..b828f7388a 100644 --- a/client/app/scripts/reducers/root.js +++ b/client/app/scripts/reducers/root.js @@ -364,6 +364,7 @@ export function rootReducer(state = initialState, action) { // case ActionTypes.RESUME_TIME_FROM_NOW: { + state = state.set('timeTravelTransitioning', true); state = state.set('showingTimeTravel', false); return state.set('pausedAt', null); } @@ -582,7 +583,7 @@ export function rootReducer(state = initialState, action) { 'update', size(action.delta.update), 'add', size(action.delta.add)); - // nodes that no longer exist + // remove nodes that no longer exist each(action.delta.remove, (nodeId) => { state = state.deleteIn(['nodes', nodeId]); }); diff --git a/client/app/scripts/utils/web-api-utils.js b/client/app/scripts/utils/web-api-utils.js index 5e943e9a32..6cdbb55f17 100644 --- a/client/app/scripts/utils/web-api-utils.js +++ b/client/app/scripts/utils/web-api-utils.js @@ -233,8 +233,6 @@ export function getResourceViewNodesSnapshot(state, dispatch) { } export function getTopologies(state, dispatch, initialPoll = false) { - // TODO: Remove this once TimeTravel is out of the feature flag. - state = state.scope || state; // Used to resume polling when navigating between pages in Weave Cloud. continuePolling = initialPoll === true ? true : continuePolling; clearTimeout(topologyTimer);