Pause info

client/app/scripts/components/footer.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import Plugins from './plugins';
-import PauseButton from './pause-button';
 import { trackMixpanelEvent } from '../utils/tracking-utils';
 import {
   clickDownloadGraph,
@@ -66,7 +65,6 @@ class Footer extends React.Component {
         </div>
 
         <div className="footer-tools">
-          <PauseButton />
           <a
             className="footer-icon"
             onClick={this.handleRelayoutClick}

client/app/scripts/components/time-control.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 
@@ -49,11 +50,26 @@ class TimeControl extends React.Component {
   }
 
   render() {
-    const { showingTimeTravel, pausedAt, timeTravelTransitioning } = this.props;
+    const { showingTimeTravel, pausedAt, timeTravelTransitioning,
+      hasUpdates, updateCount } = this.props;
+
     const isPausedNow = pausedAt && !showingTimeTravel;
     const isTimeTravelling = showingTimeTravel;
     const isRunningNow = !pausedAt;
 
+    const pauseTitle = isPausedNow ?
+      `Paused ${moment(pausedAt).fromNow()}` :
+      'Pause updates (freezes the nodes in their current layout)';
+
+    let info = '';
+    if (hasUpdates && isPausedNow) {
+      info = `Paused +${updateCount}`;
+    } else if (hasUpdates && !isPausedNow) {
+      info = `Resuming +${updateCount}`;
+    } else if (!hasUpdates && isPausedNow) {
+      info = 'Paused';
+    }
+
     return (
       <div className="time-control">
         <div className="time-control-icon">
@@ -69,7 +85,8 @@ class TimeControl extends React.Component {
           <span
             className={className(isPausedNow)}
             onClick={this.handlePauseClick}
-            disabled={isTimeTravelling}>
+            disabled={isTimeTravelling}
+            title={pauseTitle}>
             {isPausedNow && <span className="fa fa-pause" />}
             <span className="label">{isPausedNow ? 'Paused' : 'Pause'}</span>
           </span>
@@ -79,6 +96,7 @@ class TimeControl extends React.Component {
             <span className="label">Time Travel</span>
           </span>
         </div>
+        <span>{info}</span>
       </div>
     );
   }
@@ -95,6 +113,8 @@ function mapStateToProps(state) {
     showingTimeTravel: state.get('showingTimeTravel'),
     timeTravelTransitioning: state.get('timeTravelTransitioning'),
     pausedAt: state.get('pausedAt'),
+    hasUpdates: !state.get('nodesDeltaBuffer').isEmpty(),
+    updateCount: state.get('nodesDeltaBuffer').size,
   };
 }
 

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

@@ -17,8 +17,8 @@ import {
 } from '../constants/timer';
 
 
-const ONE_HOUR_MS = 60 * 60 * 1000;
-const FIVE_MINUTES_MS = 5 * 60 * 1000;
+const ONE_HOUR_MS = moment.duration(1, 'hour');
+const FIVE_MINUTES_MS = moment.duration(5, 'minutes');
 
 class TimeTravel extends React.Component {
   constructor(props, context) {
@@ -134,10 +134,10 @@ class TimeTravel extends React.Component {
           <span className="time-travel-jump-controls-timestamp">
             <input value={inputValue} onChange={this.handleTimestampInputChange} /> UTC
           </span>
-          <a className="button jump" onClick={() => this.jumpInTime(FIVE_MINUTES_MS)}>
+          <a className="button jump" onClick={() => this.jumpInTime(+FIVE_MINUTES_MS)}>
             <span className="fa fa-step-forward" /> 5 mins
           </a>
-          <a className="button jump" onClick={() => this.jumpInTime(ONE_HOUR_MS)}>
+          <a className="button jump" onClick={() => this.jumpInTime(+ONE_HOUR_MS)}>
             <span className="fa fa-fast-forward" /> 1 hour
           </a>
         </div>

client/app/scripts/reducers/root.js

@@ -174,11 +174,6 @@ function closeAllNodeDetails(state) {
   return state;
 }
 
-function resumeTimeFromNow(state) {
-  state = state.set('showingTimeTravel', false);
-  return state.set('pausedAt', null);
-}
-
 function clearNodes(state) {
   return state
     .update('nodes', nodes => nodes.clear())
@@ -196,7 +191,6 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CHANGE_TOPOLOGY_OPTION: {
-      state = resumeTimeFromNow(state);
       // set option on parent topology
       const topology = findTopologyById(state.get('topologies'), action.topologyId);
       if (topology) {
@@ -315,8 +309,6 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CLICK_SHOW_TOPOLOGY_FOR_NODE: {
-      state = resumeTimeFromNow(state);
-
       state = state.update('nodeDetails',
         nodeDetails => nodeDetails.filter((v, k) => k === action.nodeId));
       state = state.update('controlPipes', controlPipes => controlPipes.clear());
@@ -331,7 +323,6 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CLICK_TOPOLOGY: {
-      state = resumeTimeFromNow(state);
       state = closeAllNodeDetails(state);
 
       const currentTopologyId = state.get('currentTopologyId');
@@ -348,10 +339,12 @@ export function rootReducer(state = initialState, action) {
     //
 
     case ActionTypes.RESUME_TIME_FROM_NOW: {
-      return resumeTimeFromNow(state);
+      state = state.set('showingTimeTravel', false);
+      return state.set('pausedAt', null);
     }
 
     case ActionTypes.PAUSE_TIME_AT_NOW: {
+      state = state.set('showingTimeTravel', false);
       return state.set('pausedAt', moment().utc());
     }
 

client/app/styles/_base.scss

@@ -168,14 +168,12 @@
 }
 
 .header {
+  display: flex;
+  margin-top: 15px;
   pointer-events: none;
-
-  position: absolute;
-  top: 60px;
+  position: relative;
   width: 100%;
-  height: 80px;
   z-index: 20;
-  display: flex;
 
   .logo {
     margin: -10px 0 0 64px;
@@ -227,6 +225,7 @@
 .time-travel {
   align-items: center;
   display: flex;
+  margin-bottom: -15px;
   position: relative;
   padding: 10px 20px 0;
   width: 100%;