Always show time travel.

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

@@ -339,14 +339,15 @@ export function clickNode(nodeId, label, origin, topologyId = null) {
 
 export function pauseTimeAtNow() {
   return (dispatch, getState) => {
+    const getScopeState = () => getState().scope || getState();
     dispatch({
       type: ActionTypes.PAUSE_TIME_AT_NOW
     });
-    updateRoute(getState);
-    if (!getState().get('nodesLoaded')) {
-      getNodes(getState, dispatch);
-      if (isResourceViewModeSelector(getState())) {
-        getResourceViewNodesSnapshot(getState(), dispatch);
+    updateRoute(getScopeState);
+    if (!getScopeState().get('nodesLoaded')) {
+      getNodes(getScopeState, dispatch);
+      if (isResourceViewModeSelector(getScopeState())) {
+        getResourceViewNodesSnapshot(getScopeState(), dispatch);
       }
     }
   };
@@ -549,7 +550,8 @@ export function receiveNodeDetails(details, requestTimestamp) {
 
 export function receiveNodesDelta(delta) {
   return (dispatch, getState) => {
-    if (!isPausedSelector(getState())) {
+    const getScopeState = () => getState().scope || getState();
+    if (!isPausedSelector(getScopeState())) {
       // Allow css-animation to run smoothly by scheduling it to run on the
       // next tick after any potentially expensive canvas re-draws have been
       // completed.
@@ -559,7 +561,7 @@ export function receiveNodesDelta(delta) {
       // 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 (getState().get('timeTravelTransitioning')) {
+      if (getScopeState().get('timeTravelTransitioning')) {
         dispatch({ type: ActionTypes.FINISH_TIME_TRAVEL_TRANSITION });
       }
 
@@ -576,16 +578,17 @@ export function receiveNodesDelta(delta) {
 
 export function resumeTime() {
   return (dispatch, getState) => {
-    if (isPausedSelector(getState())) {
+    const getScopeState = () => getState().scope || getState();
+    if (isPausedSelector(getScopeState())) {
       dispatch({
         type: ActionTypes.RESUME_TIME
       });
-      updateRoute(getState);
+      updateRoute(getScopeState);
       // After unpausing, all of the following calls will re-activate polling.
-      getTopologies(getState, dispatch);
-      getNodes(getState, dispatch, true);
-      if (isResourceViewModeSelector(getState())) {
-        getResourceViewNodesSnapshot(getState(), dispatch);
+      getTopologies(getScopeState, dispatch);
+      getNodes(getScopeState, dispatch, true);
+      if (isResourceViewModeSelector(getScopeState())) {
+        getResourceViewNodesSnapshot(getScopeState(), dispatch);
       }
     }
   };

client/app/scripts/components/time-travel-wrapper.js

@@ -1,28 +1,18 @@
 import React from 'react';
 import moment from 'moment';
-import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { TimeTravel } from 'weaveworks-ui-components';
 
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
-import { jumpToTime } from '../actions/app-actions';
+import { jumpToTime, resumeTime, pauseTimeAtNow } from '../actions/app-actions';
 
 
-const TimeTravelContainer = styled.div`
-  transition: all .15s ease-in-out;
-  position: relative;
-  overflow: hidden;
-  height: 0;
-
-  ${props => props.visible && `
-    height: 105px;
-  `}
-`;
-
 class TimeTravelWrapper extends React.Component {
   constructor(props, context) {
     super(props, context);
 
+    this.handleLiveModeChange = this.handleLiveModeChange.bind(this);
+
     this.trackTimestampEdit = this.trackTimestampEdit.bind(this);
     this.trackTimelinePanButtonClick = this.trackTimelinePanButtonClick.bind(this);
     this.trackTimelineLabelClick = this.trackTimelineLabelClick.bind(this);
@@ -71,20 +61,29 @@ class TimeTravelWrapper extends React.Component {
     });
   }
 
+  handleLiveModeChange(showingLive) {
+    if (showingLive) {
+      this.props.resumeTime();
+    } else {
+      this.props.pauseTimeAtNow();
+    }
+  }
+
   render() {
     return (
-      <TimeTravelContainer visible={this.props.visible}>
-        <TimeTravel
-          timestamp={this.props.timestamp}
-          earliestTimestamp={this.props.earliestTimestamp}
-          onChangeTimestamp={this.props.jumpToTime}
-          onTimestampInputEdit={this.trackTimestampEdit}
-          onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
-          onTimelineLabelClick={this.trackTimelineLabelClick}
-          onTimelineZoom={this.trackTimelineZoom}
-          onTimelinePan={this.trackTimelinePan}
-        />
-      </TimeTravelContainer>
+      <TimeTravel
+        hasLiveMode
+        showingLive={this.props.showingLive}
+        onChangeLiveMode={this.handleLiveModeChange}
+        timestamp={this.props.timestamp}
+        earliestTimestamp={this.props.earliestTimestamp}
+        onChangeTimestamp={this.props.jumpToTime}
+        onTimestampInputEdit={this.trackTimestampEdit}
+        onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
+        onTimelineLabelClick={this.trackTimelineLabelClick}
+        onTimelineZoom={this.trackTimelineZoom}
+        onTimelinePan={this.trackTimelinePan}
+      />
     );
   }
 }
@@ -103,6 +102,7 @@ function mapStateToProps(state, { params }) {
 
   return {
     visible: scopeState.get('showingTimeTravel'),
+    showingLive: !scopeState.get('pausedAt'),
     topologyViewMode: scopeState.get('topologyViewMode'),
     currentTopology: scopeState.get('currentTopology'),
     earliestTimestamp: firstSeenConnectedAt,
@@ -112,5 +112,5 @@ function mapStateToProps(state, { params }) {
 
 export default connect(
   mapStateToProps,
-  { jumpToTime },
+  { jumpToTime, resumeTime, pauseTimeAtNow },
 )(TimeTravelWrapper);

client/app/styles/_base.scss

@@ -211,6 +211,8 @@ a {
   .selectors {
     display: flex;
     position: relative;
+    margin-top: -10px;
+
     > * {
       z-index: 20;
       flex: 1 1;