Changed the websocket global state variables a bit.

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

@@ -1,5 +1,4 @@
 import debug from 'debug';
-import moment from 'moment';
 import { find } from 'lodash';
 
 import ActionTypes from '../constants/action-types';
@@ -451,20 +450,17 @@ export function startMovingInTime() {
   };
 }
 
-export function websocketQueryTimestamp(queryTimestamp) {
-  const requestTimestamp = moment();
+export function websocketQueryTimestamp(timestampSinceNow) {
   // If the timestamp stands for a time less than one second ago,
   // assume we are actually interested in the current time.
-  if (requestTimestamp.diff(queryTimestamp) >= 1000) {
-    queryTimestamp = queryTimestamp.toISOString();
-  } else {
-    queryTimestamp = null;
+  if (timestampSinceNow < 1000) {
+    timestampSinceNow = null;
   }
 
   return (dispatch, getState) => {
     dispatch({
       type: ActionTypes.WEBSOCKET_QUERY_TIMESTAMP,
-      queryTimestamp,
+      timestampSinceNow,
     });
     updateWebsocketChannel(getState(), dispatch);
     dispatch(resetNodesDeltaBuffer());

client/app/scripts/components/status.js

@@ -50,7 +50,7 @@ function mapStateToProps(state) {
   return {
     errorUrl: state.get('errorUrl'),
     filteredNodeCount: state.get('nodes').filter(node => node.get('filtered')).size,
-    showingCurrentState: !state.get('websocketQueryPastAt'),
+    showingCurrentState: !state.get('websocketTimestampOffset'),
     topologiesLoaded: state.get('topologiesLoaded'),
     topology: state.get('currentTopology'),
     websocketClosed: state.get('websocketClosed'),

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

@@ -118,11 +118,11 @@ class TimelineControl extends React.Component {
   }
 
   componentWillUnmount() {
-    this.updateTimestamp(moment());
+    this.updateTimestamp(null);
   }
 
-  updateTimestamp(timestamp) {
-    this.props.websocketQueryTimestamp(timestamp);
+  updateTimestamp(timestampSinceNow) {
+    this.props.websocketQueryTimestamp(timestampSinceNow);
     this.props.clickResumeUpdate();
   }
 
@@ -132,9 +132,8 @@ class TimelineControl extends React.Component {
 
   handleSliderChange(value) {
     const offsetMilliseconds = this.getRangeMilliseconds() - value;
-    const timestamp = moment().utc().subtract(offsetMilliseconds);
     this.props.startMovingInTime();
-    this.debouncedUpdateTimestamp(timestamp);
+    this.debouncedUpdateTimestamp(offsetMilliseconds);
     this.setState({ offsetMilliseconds });
   }
 
@@ -150,12 +149,12 @@ class TimelineControl extends React.Component {
       rangeOptionSelected: sliderRanges.last1Hour,
     });
     this.props.startMovingInTime();
-    this.updateTimestamp(moment());
+    this.updateTimestamp(null);
   }
 
   getTotalOffset() {
     const { rangeOptionSelected, offsetMilliseconds } = this.state;
-    const rangeBehindMilliseconds = moment().diff(rangeOptionSelected.getEnd());
+    const rangeBehindMilliseconds = moment().utc().diff(rangeOptionSelected.getEnd());
     return offsetMilliseconds + rangeBehindMilliseconds;
   }
 

client/app/scripts/reducers/root.js

@@ -23,6 +23,7 @@ import {
 } from '../selectors/topology';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/zooming';
 import { consolidatedBeginningOfNodesDeltaBuffer } from '../utils/update-buffer-utils';
+import { getWebsocketQueryTimestamp } from '../utils/web-api-utils';
 import { applyPinnedSearches } from '../utils/search-utils';
 import {
   findTopologyById,
@@ -93,7 +94,7 @@ export const initialState = makeMap({
   viewport: makeMap(),
   websocketClosed: false,
   websocketMovingInTime: false,
-  websocketQueryPastAt: null,
+  websocketQueryTimestampSinceNow: null,
   zoomCache: makeMap(),
   serviceImages: makeMap()
 });
@@ -296,7 +297,9 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.CLICK_PAUSE_UPDATE: {
-      return state.set('updatePausedAt', moment().utc());
+      const pausedAt = state.get('websocketQueryTimestampSinceNow') ?
+        moment(getWebsocketQueryTimestamp(state)) : moment().utc();
+      return state.set('updatePausedAt', pausedAt);
     }
 
     case ActionTypes.CLICK_RELATIVE: {
@@ -356,7 +359,7 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.WEBSOCKET_QUERY_TIMESTAMP: {
-      return state.set('websocketQueryPastAt', action.queryTimestamp);
+      return state.set('websocketQueryTimestampSinceNow', action.timestampSinceNow);
     }
 
     case ActionTypes.CLOSE_WEBSOCKET: {

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

@@ -1,4 +1,5 @@
 import debug from 'debug';
+import moment from 'moment';
 import reqwest from 'reqwest';
 import { defaults } from 'lodash';
 import { fromJS, Map as makeMap, List } from 'immutable';
@@ -236,10 +237,15 @@ export function getTopologies(options, dispatch, initialPoll) {
   });
 }
 
+export function getWebsocketQueryTimestamp(state) {
+  const sinceNow = state.get('websocketQueryTimestampSinceNow');
+  return sinceNow ? moment().utc().subtract(sinceNow).toISOString() : null;
+}
+
 export function updateWebsocketChannel(state, dispatch) {
   const topologyUrl = getCurrentTopologyUrl(state);
   const topologyOptions = activeTopologyOptionsSelector(state);
-  const queryTimestamp = state.get('websocketQueryPastAt');
+  const queryTimestamp = getWebsocketQueryTimestamp(state);
   const websocketUrl = buildWebsocketUrl(topologyUrl, topologyOptions, queryTimestamp);
   // Only recreate websocket if url changed or if forced (weave cloud instance reload);
   const isNewUrl = websocketUrl !== currentUrl;