Merge pull request #3195 from weaveworks/2538-use-timestamp-tag

Use TimestampTag component

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import moment from 'moment';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
+import { TimestampTag } from 'weaveworks-ui-components';
 
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { pauseTimeAtNow, resumeTime } from '../actions/app-actions';
@@ -13,24 +13,7 @@ const className = isSelected => (
 );
 
 class TimeControl extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleNowClick = this.handleNowClick.bind(this);
-    this.handlePauseClick = this.handlePauseClick.bind(this);
-    this.getTrackingMetadata = this.getTrackingMetadata.bind(this);
-  }
-
-  componentDidMount() {
-    // Force periodic updates every one second for the paused info.
-    this.timer = setInterval(() => { this.forceUpdate(); }, 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timer);
-  }
-
-  getTrackingMetadata(data = {}) {
+  getTrackingMetadata = (data = {}) => {
     const { currentTopology } = this.props;
     return {
       layout: this.props.topologyViewMode,
@@ -40,12 +23,12 @@ class TimeControl extends React.Component {
     };
   }
 
-  handleNowClick() {
+  handleNowClick = () => {
     trackAnalyticsEvent('scope.time.resume.click', this.getTrackingMetadata());
     this.props.resumeTime();
   }
 
-  handlePauseClick() {
+  handlePauseClick = () => {
     trackAnalyticsEvent('scope.time.pause.click', this.getTrackingMetadata());
     this.props.pauseTimeAtNow();
   }
@@ -82,10 +65,8 @@ class TimeControl extends React.Component {
           </div>
         </div>
         {isPaused &&
-          <span
-            className="time-control-info"
-            title={moment(pausedAt).toISOString()}>
-            Showing state from {moment(pausedAt).fromNow()}
+          <span className="time-control-info">
+            Showing state from <TimestampTag inheritStyles relative timestamp={pausedAt} />
           </span>
         }
       </div>

client/package.json

@@ -44,7 +44,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "2.2.4",
-    "weaveworks-ui-components": "0.4.76",
+    "weaveworks-ui-components": "0.4.82",
     "whatwg-fetch": "2.0.3",
     "xterm": "3.3.0"
   },

client/yarn.lock

@@ -6605,6 +6605,12 @@ react-dom@16.1.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-input-autosize@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-motion@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -8339,9 +8345,9 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-weaveworks-ui-components@0.4.76:
-  version "0.4.76"
-  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.4.76.tgz#0e0a28f128eb233a28db12397399bac3e395a218"
+weaveworks-ui-components@0.4.82:
+  version "0.4.82"
+  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.4.82.tgz#c09cd529f59d553e2a3d426413e4f59f7e23d6d2"
   dependencies:
     classnames "2.2.5"
     d3-drag "1.2.1"
@@ -8351,6 +8357,7 @@ weaveworks-ui-components@0.4.76:
     d3-shape "1.2.0"
     polished "1.9.0"
     prop-types "15.6.0"
+    react-input-autosize "2.2.1"
     react-motion "0.5.2"
     react-resize-aware "2.7.0"