Merge pull request #2986 from weaveworks/bump-ui-components-to-include-decompose-time-travel

Bump ui-components to include decomposed Time Travel

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

@@ -88,7 +88,7 @@ class TimeControl extends React.Component {
             </span>
             <span
               className={className(isPausedNow)}
-              onClick={!isTimeTravelling && this.handlePauseClick}
+              onClick={!isTimeTravelling ? this.handlePauseClick : null}
               disabled={isTimeTravelling}
               title="Pause updates (freezes the nodes in their current layout)">
               {isPausedNow && <span className="fa fa-pause" />}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { TimeTravel } from 'weaveworks-ui-components';
 
@@ -7,13 +8,25 @@ import { trackAnalyticsEvent } from '../utils/tracking-utils';
 import { jumpToTime } from '../actions/app-actions';
 
 
+const TimeTravelContainer = styled.div`
+  transition: all .15s ease-in-out;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+
+  ${props => props.visible && `
+    height: 105px;
+  `}
+`;
+
 class TimeTravelWrapper extends React.Component {
   constructor(props, context) {
     super(props, context);
 
     this.changeTimestamp = this.changeTimestamp.bind(this);
     this.trackTimestampEdit = this.trackTimestampEdit.bind(this);
-    this.trackTimelineClick = this.trackTimelineClick.bind(this);
+    this.trackTimelinePanButtonClick = this.trackTimelinePanButtonClick.bind(this);
+    this.trackTimelineLabelClick = this.trackTimelineLabelClick.bind(this);
     this.trackTimelineZoom = this.trackTimelineZoom.bind(this);
     this.trackTimelinePan = this.trackTimelinePan.bind(this);
   }
@@ -30,8 +43,16 @@ class TimeTravelWrapper extends React.Component {
     });
   }
 
-  trackTimelineClick() {
-    trackAnalyticsEvent('scope.time.timeline.click', {
+  trackTimelinePanButtonClick() {
+    trackAnalyticsEvent('scope.time.timeline.pan.button.click', {
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+  }
+
+  trackTimelineLabelClick() {
+    trackAnalyticsEvent('scope.time.timeline.label.click', {
       layout: this.props.topologyViewMode,
       topologyId: this.props.currentTopology.get('id'),
       parentTopologyId: this.props.currentTopology.get('parentId'),
@@ -56,19 +77,19 @@ class TimeTravelWrapper extends React.Component {
   }
 
   render() {
-    const { visible, timestamp } = this.props;
-
     return (
-      <TimeTravel
-        visible={visible}
-        timestamp={timestamp}
-        earliestTimestamp={this.props.earliestTimestamp}
-        onChangeTimestamp={this.changeTimestamp}
-        onTimestampInputEdit={this.trackTimestampEdit}
-        onTimestampLabelClick={this.trackTimelineClick}
-        onTimelineZoom={this.trackTimelineZoom}
-        onTimelinePan={this.trackTimelinePan}
-      />
+      <TimeTravelContainer visible={this.props.visible}>
+        <TimeTravel
+          timestamp={this.props.timestamp}
+          earliestTimestamp={this.props.earliestTimestamp}
+          onChangeTimestamp={this.changeTimestamp}
+          onTimestampInputEdit={this.trackTimestampEdit}
+          onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
+          onTimelineLabelClick={this.trackTimelineLabelClick}
+          onTimelineZoom={this.trackTimelineZoom}
+          onTimelinePan={this.trackTimelinePan}
+        />
+      </TimeTravelContainer>
     );
   }
 }

client/package.json

@@ -43,7 +43,7 @@
     "reselect": "3.0.1",
     "reselect-map": "1.0.3",
     "styled-components": "2.2.4",
-    "weaveworks-ui-components": "0.3.10",
+    "weaveworks-ui-components": "0.4.1",
     "whatwg-fetch": "2.0.3",
     "xterm": "2.9.2"
   },

client/yarn.lock

@@ -6416,9 +6416,9 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-weaveworks-ui-components@0.3.10:
-  version "0.3.10"
-  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.3.10.tgz#c4af00c61908cd394d6bd51c3a04da4831ee3148"
+weaveworks-ui-components@0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.4.1.tgz#cd6fd85882689f19043f2d71081728559689a136"
   dependencies:
     classnames "2.2.5"
     d3-drag "1.2.1"