Moved pause button back to footer. (#2585)

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

@@ -635,13 +635,15 @@ function updateFromNodesDeltaBuffer(dispatch, state) {
 }
 
 export function clickResumeUpdate() {
-  return (dispatch, getServiceState) => {
+  return (dispatch, getState) => {
     dispatch({
       type: ActionTypes.CLICK_RESUME_UPDATE
     });
+    // TODO: Find a better way to do this (see the comment above).
+    const state = getState().scope || getState();
     // Periodically merge buffered nodes deltas until the buffer is emptied.
     nodesDeltaBufferUpdateTimer = setInterval(
-      () => updateFromNodesDeltaBuffer(dispatch, getServiceState().scope),
+      () => updateFromNodesDeltaBuffer(dispatch, state),
       NODES_DELTA_BUFFER_FEED_INTERVAL,
     );
   };

client/app/scripts/components/footer.js

@@ -2,6 +2,7 @@ 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,
@@ -65,6 +66,7 @@ class Footer extends React.Component {
         </div>
 
         <div className="footer-tools">
+          <PauseButton />
           <a
             className="footer-icon"
             onClick={this.handleRelayoutClick}

client/app/scripts/components/pause-button.js

@@ -60,14 +60,14 @@ class PauseButton extends React.Component {
   }
 }
 
-function mapStateToProps({ scope }) {
+function mapStateToProps(state) {
   return {
-    hasUpdates: !scope.get('nodesDeltaBuffer').isEmpty(),
-    updateCount: scope.get('nodesDeltaBuffer').size,
-    updatePausedAt: scope.get('updatePausedAt'),
-    topologyViewMode: scope.get('topologyViewMode'),
-    currentTopology: scope.get('currentTopology'),
-    isPaused: isPausedSelector(scope),
+    hasUpdates: !state.get('nodesDeltaBuffer').isEmpty(),
+    updateCount: state.get('nodesDeltaBuffer').size,
+    updatePausedAt: state.get('updatePausedAt'),
+    topologyViewMode: state.get('topologyViewMode'),
+    currentTopology: state.get('currentTopology'),
+    isPaused: isPausedSelector(state),
   };
 }
 

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

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
-import PauseButton from './pause-button';
 import TimeTravelTimestamp from './time-travel-timestamp';
 import { trackMixpanelEvent } from '../utils/tracking-utils';
 import {
@@ -260,7 +259,6 @@ class TimeTravel extends React.Component {
             selected={showSliderPanel}
           />
           {!isCurrent && this.renderJumpToNowButton()}
-          <PauseButton />
         </div>
       </div>
     );
@@ -271,7 +269,7 @@ function mapStateToProps({ scope, root }, { params }) {
   const cloudInstance = root.instances[params.orgId] || {};
   const featureFlags = cloudInstance.featureFlags || [];
   return {
-    hasTimeTravel: featureFlags.includes('timeline-control'),
+    hasTimeTravel: featureFlags.includes('time-travel'),
     websocketTransitioning: scope.get('websocketTransitioning'),
     topologyViewMode: scope.get('topologyViewMode'),
     currentTopology: scope.get('currentTopology'),

client/app/styles/_base.scss

@@ -184,7 +184,7 @@
     margin-right: 1em;
   }
 
-  &-label {
+  &-label, .pause-text {
     text-transform: uppercase;
     margin: 0 0.25em;
   }