Reloading deployments in Time Travel.

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

@@ -870,6 +870,12 @@ export function getImagesForService(orgId, serviceId) {
   };
 }
 
+export function getFluxHistory(...params) {
+  return (dispatch, getState, { actions }) => (
+    dispatch(actions.getFluxHistory(...params))
+  );
+}
+
 export function setMonitorState(monitor) {
   return {
     type: ActionTypes.MONITOR_STATE,

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

@@ -2,13 +2,30 @@ import React from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { TimeTravel } from 'weaveworks-ui-components';
-import { get, orderBy } from 'lodash';
+import { get, orderBy, debounce } from 'lodash';
 
 import { trackAnalyticsEvent } from '../utils/tracking-utils';
-import { jumpToTime, resumeTime, pauseTimeAtNow } from '../actions/app-actions';
+import { jumpToTime, resumeTime, pauseTimeAtNow, getFluxHistory } from '../actions/app-actions';
 
+// Load deployments in timeline only on zoom levels up to this range.
+const MAX_DEPLOYMENTS_RANGE_SECS = moment.duration(2, 'weeks').asSeconds();
+
+// Reused from Service UI.
+const FLUX_ALL_SERVICES = '<all>';
 
 class TimeTravelWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoadingDeployments: false,
+      visibleRangeStartAtSec: null,
+      visibleRangeEndAtSec: null,
+    };
+
+    this.debouncedUpdateVisibleRange = debounce(this.updateVisibleRange, 500);
+  }
+
   trackTimestampEdit = () => {
     trackAnalyticsEvent('scope.time.timestamp.edit', {
       layout: this.props.topologyViewMode,
@@ -58,7 +75,42 @@ class TimeTravelWrapper extends React.Component {
     }
   }
 
+
+  updateVisibleRange = ({ startAt, endAt }) => {
+    const { orgId } = this.props.params;
+
+    const visibleRangeEndAtSec = moment(endAt).unix();
+    const visibleRangeStartAtSec = moment(startAt).unix();
+    this.setState({ visibleRangeStartAtSec, visibleRangeEndAtSec });
+
+    // Load deployment annotations only if not zoomed out too much.
+    // See https://github.com/weaveworks/service-ui/issues/1858.
+    const visibleRangeSec = visibleRangeEndAtSec - visibleRangeStartAtSec;
+    if (visibleRangeSec < MAX_DEPLOYMENTS_RANGE_SECS) {
+      this.setState({ isLoadingDeployments: true });
+      this.props
+        .getFluxHistory(orgId, FLUX_ALL_SERVICES, null, endAt, true, startAt)
+        .then(() => {
+          this.setState({ isLoadingDeployments: false });
+        });
+    }
+  }
+
   render() {
+    const {
+      visibleRangeStartAtSec,
+      visibleRangeEndAtSec,
+    } = this.state;
+
+    // Don't pass any deployments that are outside of the timeline visible range.
+    const visibleDeployments = this.props.deployments.filter((deployment) => {
+      const deploymentAtSec = moment(deployment.Stamp).unix();
+      return (
+        visibleRangeStartAtSec <= deploymentAtSec &&
+        deploymentAtSec <= visibleRangeEndAtSec
+      );
+    });
+
     return (
       <div className="tour-step-anchor time-travel-wrapper">
         <TimeTravel
@@ -68,7 +120,9 @@ class TimeTravelWrapper extends React.Component {
           timestamp={this.props.timestamp}
           earliestTimestamp={this.props.earliestTimestamp}
           onChangeTimestamp={this.props.jumpToTime}
-          deployments={this.props.deployments}
+          deployments={visibleDeployments}
+          isLoading={this.state.isLoadingDeployments}
+          onUpdateVisibleRange={this.debouncedUpdateVisibleRange}
           onTimestampInputEdit={this.trackTimestampEdit}
           onTimelinePanButtonClick={this.trackTimelinePanButtonClick}
           onTimelineLabelClick={this.trackTimelineLabelClick}
@@ -92,7 +146,11 @@ function mapStateToProps(state, { params }) {
     }
   }
 
-  const unsortedDeployments = get(state, ['root', 'fluxInstanceHistory', orgId, '<all>'], []);
+  const unsortedDeployments = get(
+    state,
+    ['root', 'fluxInstanceHistory', orgId, FLUX_ALL_SERVICES],
+    []
+  );
 
   return {
     showingLive: !state.scope.get('pausedAt'),
@@ -106,5 +164,7 @@ function mapStateToProps(state, { params }) {
 
 export default connect(
   mapStateToProps,
-  { jumpToTime, resumeTime, pauseTimeAtNow },
+  {
+    jumpToTime, resumeTime, pauseTimeAtNow, getFluxHistory
+  },
 )(TimeTravelWrapper);

client/app/styles/_base.scss

@@ -212,6 +212,11 @@ a {
   pointer-events: none;
   width: 100%;
 
+  .time-travel-wrapper {
+    position: relative;
+    z-index: $layer-front;
+  }
+
   .selectors {
     display: flex;
     position: relative;

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.82",
+    "weaveworks-ui-components": "0.4.95",
     "whatwg-fetch": "2.0.3",
     "xterm": "3.3.0"
   },

client/yarn.lock

@@ -8345,9 +8345,9 @@ wd@^0.4.0:
     underscore.string "~3.0.3"
     vargs "~0.1.0"
 
-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"
+weaveworks-ui-components@0.4.95:
+  version "0.4.95"
+  resolved "https://registry.yarnpkg.com/weaveworks-ui-components/-/weaveworks-ui-components-0.4.95.tgz#6f80f8e00e4fcef06033cadc377588bc3ed443fa"
   dependencies:
     classnames "2.2.5"
     d3-drag "1.2.1"