Change pausedAt format from moment() back to ISO string for easier handling.

client/app/scripts/components/node-details.js

@@ -8,7 +8,6 @@ import { clickCloseDetails, clickShowTopologyForNode } from '../actions/app-acti
 import { brightenColor, getNeutralColor, getNodeColorDark } from '../utils/color-utils';
 import { isGenericTable, isPropertyList } from '../utils/node-details-utils';
 import { resetDocumentTitle, setDocumentTitle } from '../utils/title-utils';
-import { timestampsEqual } from '../utils/time-utils';
 
 import Overlay from './overlay';
 import MatchedText from './matched-text';
@@ -307,7 +306,7 @@ class NodeDetails extends React.Component {
 function mapStateToProps(state, ownProps) {
   const currentTopologyId = state.get('currentTopologyId');
   return {
-    transitioning: !timestampsEqual(state.get('pausedAt'), ownProps.timestamp),
+    transitioning: state.get('pausedAt') !== ownProps.timestamp,
     nodeMatches: state.getIn(['searchNodeMatches', currentTopologyId, ownProps.id]),
     nodes: state.get('nodes'),
     selectedNodeId: state.get('selectedNodeId'),

client/app/scripts/components/node-details/node-details-health-link-item.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import moment from 'moment';
 import { connect } from 'react-redux';
 
 import NodeDetailsHealthItem from './node-details-health-item';
@@ -23,7 +24,7 @@ export function appendTime(url, time) {
     const json = decodeURIComponent(url.substr(pos + cloudLinkPathEnd.length));
     try {
       payload = JSON.parse(json);
-      payload.time = { queryEnd: time.unix() };
+      payload.time = { queryEnd: moment(time).unix() };
     } catch (e) {
       return url;
     }

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

@@ -23,7 +23,6 @@ class TimeTravelWrapper extends React.Component {
   constructor(props, context) {
     super(props, context);
 
-    this.changeTimestamp = this.changeTimestamp.bind(this);
     this.trackTimestampEdit = this.trackTimestampEdit.bind(this);
     this.trackTimelinePanButtonClick = this.trackTimelinePanButtonClick.bind(this);
     this.trackTimelineLabelClick = this.trackTimelineLabelClick.bind(this);
@@ -31,10 +30,6 @@ class TimeTravelWrapper extends React.Component {
     this.trackTimelinePan = this.trackTimelinePan.bind(this);
   }
 
-  changeTimestamp(timestamp) {
-    this.props.jumpToTime(moment(timestamp).utc());
-  }
-
   trackTimestampEdit() {
     trackAnalyticsEvent('scope.time.timestamp.edit', {
       layout: this.props.topologyViewMode,
@@ -82,7 +77,7 @@ class TimeTravelWrapper extends React.Component {
         <TimeTravel
           timestamp={this.props.timestamp}
           earliestTimestamp={this.props.earliestTimestamp}
-          onChangeTimestamp={this.changeTimestamp}
+          onChangeTimestamp={this.props.jumpToTime}
           onTimestampInputEdit={this.trackTimestampEdit}
           onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
           onTimelineLabelClick={this.trackTimelineLabelClick}
@@ -96,14 +91,13 @@ class TimeTravelWrapper extends React.Component {
 
 function mapStateToProps(state, { params }) {
   const scopeState = state.scope || state;
-  const pausedAt = scopeState.get('pausedAt');
   let firstSeenConnectedAt;
 
   // If we're in the Weave Cloud context, use firstSeeConnectedAt as the earliest timestamp.
   if (state.root && state.root.instances) {
     const serviceInstance = state.root.instances[params && params.orgId];
     if (serviceInstance && serviceInstance.firstSeenConnectedAt) {
-      firstSeenConnectedAt = moment(serviceInstance.firstSeenConnectedAt);
+      firstSeenConnectedAt = moment(serviceInstance.firstSeenConnectedAt).utc().format();
     }
   }
 
@@ -111,8 +105,8 @@ function mapStateToProps(state, { params }) {
     visible: scopeState.get('showingTimeTravel'),
     topologyViewMode: scopeState.get('topologyViewMode'),
     currentTopology: scopeState.get('currentTopology'),
-    earliestTimestamp: firstSeenConnectedAt && firstSeenConnectedAt.utc().format(),
-    timestamp: pausedAt && pausedAt.utc().format(),
+    earliestTimestamp: firstSeenConnectedAt,
+    timestamp: scopeState.get('pausedAt'),
   };
 }
 

client/app/scripts/reducers/root.js

@@ -21,9 +21,7 @@ import {
 } from '../selectors/topology';
 import { isPausedSelector } from '../selectors/time-travel';
 import { activeTopologyZoomCacheKeyPathSelector } from '../selectors/zooming';
-import { timestampsEqual } from '../utils/time-utils';
 import { applyPinnedSearches } from '../utils/search-utils';
-import { deserializeTimestamp } from '../utils/web-api-utils';
 import {
   findTopologyById,
   setTopologyUrlsById,
@@ -381,13 +379,13 @@ export function rootReducer(state = initialState, action) {
     case ActionTypes.PAUSE_TIME_AT_NOW: {
       state = state.set('showingTimeTravel', false);
       state = state.set('timeTravelTransitioning', false);
-      return state.set('pausedAt', moment().utc());
+      return state.set('pausedAt', moment().utc().format());
     }
 
     case ActionTypes.START_TIME_TRAVEL: {
       state = state.set('showingTimeTravel', true);
       state = state.set('timeTravelTransitioning', false);
-      return state.set('pausedAt', action.timestamp || moment().utc());
+      return state.set('pausedAt', action.timestamp || moment().utc().format());
     }
 
     case ActionTypes.JUMP_TO_TIME: {
@@ -555,7 +553,7 @@ export function rootReducer(state = initialState, action) {
     case ActionTypes.RECEIVE_NODE_DETAILS: {
       // Ignore the update if paused and the timestamp didn't change.
       const setTimestamp = state.getIn(['nodeDetails', action.details.id, 'timestamp']);
-      if (isPausedSelector(state) && timestampsEqual(action.requestTimestamp, setTimestamp)) {
+      if (isPausedSelector(state) && action.requestTimestamp === setTimestamp) {
         return state;
       }
 
@@ -695,7 +693,7 @@ export function rootReducer(state = initialState, action) {
       });
       state = state.set('topologyViewMode', action.state.topologyViewMode);
       if (action.state.pausedAt) {
-        state = state.set('pausedAt', deserializeTimestamp(action.state.pausedAt));
+        state = state.set('pausedAt', action.state.pausedAt);
       }
       if (action.state.gridSortedBy) {
         state = state.set('gridSortedBy', action.state.gridSortedBy);

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

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import { Map as makeMap, OrderedMap as makeOrderedMap } from 'immutable';
 
 import { buildUrlQuery, basePath, getApiPath, getWebsocketUrl } from '../web-api-utils';
@@ -38,7 +37,7 @@ describe('WebApiUtils', () => {
     });
 
     it('should combine multiple options with a timestamp', () => {
-      state = state.set('pausedAt', moment('2015-06-14T21:12:05.275Z'));
+      state = state.set('pausedAt', '2015-06-14T21:12:05.275Z');
       expect(buildUrlQuery(makeOrderedMap([
         ['foo', 2],
         ['bar', 4]

client/app/scripts/utils/router-utils.js

@@ -3,7 +3,6 @@ import { each } from 'lodash';
 
 import { route } from '../actions/app-actions';
 import { storageGet, storageSet } from './storage-utils';
-import { serializeTimestamp } from './web-api-utils';
 
 //
 // page.js won't match the routes below if ":state" has a slash in it, so replace those before we
@@ -51,7 +50,7 @@ export function getUrlState(state) {
   const urlState = {
     controlPipe: cp ? cp.toJS() : null,
     nodeDetails: nodeDetails.toJS(),
-    pausedAt: serializeTimestamp(state.get('pausedAt')),
+    pausedAt: state.get('pausedAt'),
     topologyViewMode: state.get('topologyViewMode'),
     pinnedMetricType: state.get('pinnedMetricType'),
     pinnedSearches: state.get('pinnedSearches').toJS(),

client/app/scripts/utils/time-utils.js

@@ -9,9 +9,3 @@ export function timer(fn) {
   };
   return timedFn;
 }
-
-export function timestampsEqual(timestampA, timestampB) {
-  const stringifiedTimestampA = timestampA ? timestampA.toISOString() : '';
-  const stringifiedTimestampB = timestampB ? timestampB.toISOString() : '';
-  return stringifiedTimestampA === stringifiedTimestampB;
-}

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

@@ -1,5 +1,4 @@
 import debug from 'debug';
-import moment from 'moment';
 import reqwest from 'reqwest';
 import { defaults } from 'lodash';
 import { Map as makeMap, List } from 'immutable';
@@ -50,17 +49,9 @@ let firstMessageOnWebsocketAt = null;
 let continuePolling = true;
 
 
-export function serializeTimestamp(timestamp) {
-  return timestamp ? timestamp.toISOString() : null;
-}
-
-export function deserializeTimestamp(str) {
-  return str ? moment(str) : null;
-}
-
 export function buildUrlQuery(params = makeMap(), state) {
   // Attach the time travel timestamp to every request to the backend.
-  params = params.set('timestamp', serializeTimestamp(state.get('pausedAt')));
+  params = params.set('timestamp', state.get('pausedAt'));
 
   // Ignore the entries with values `null` or `undefined`.
   return params.map((value, param) => {