Hidden the timeline control behind Cloud context and a feature flag.

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

@@ -432,12 +432,13 @@ export function startWebsocketTransition() {
 }
 
 export function websocketQueryInPast(millisecondsInPast) {
-  return (dispatch, getState) => {
+  return (dispatch, getServiceState) => {
     dispatch({
       type: ActionTypes.WEBSOCKET_QUERY_MILLISECONDS_IN_PAST,
       millisecondsInPast,
     });
-    updateWebsocketChannel(getState(), dispatch);
+    const scopeState = getServiceState().scope;
+    updateWebsocketChannel(scopeState, dispatch);
     dispatch(resetNodesDeltaBuffer());
   };
 }
@@ -596,7 +597,12 @@ export function receiveNodesDelta(delta) {
     //
     setTimeout(() => dispatch({ type: ActionTypes.SET_RECEIVED_NODES_DELTA }), 0);
 
-    const state = getState();
+    // TODO: This way of getting the Scope state is a bit hacky, so try to replace
+    // it with something better. The problem is that all the actions that are called
+    // from the components wrapped in <CloudFeature /> have a global Service state
+    // returned by getState(). Since method is called from both contexts, getState()
+    // will sometimes return Scope state subtree and sometimes the whole Service state.
+    const state = getState().scope || getState();
     const movingInTime = state.get('websocketTransitioning');
     const hasChanges = delta.add || delta.update || delta.remove;
 
@@ -629,13 +635,13 @@ function updateFromNodesDeltaBuffer(dispatch, state) {
 }
 
 export function clickResumeUpdate() {
-  return (dispatch, getState) => {
+  return (dispatch, getServiceState) => {
     dispatch({
       type: ActionTypes.CLICK_RESUME_UPDATE
     });
     // Periodically merge buffered nodes deltas until the buffer is emptied.
     nodesDeltaBufferUpdateTimer = setInterval(
-      () => updateFromNodesDeltaBuffer(dispatch, getState()),
+      () => updateFromNodesDeltaBuffer(dispatch, getServiceState().scope),
       NODES_DELTA_BUFFER_FEED_INTERVAL,
     );
   };

client/app/scripts/components/app.js

@@ -12,6 +12,7 @@ import Search from './search';
 import Status from './status';
 import Topologies from './topologies';
 import TopologyOptions from './topology-options';
+import CloudFeature from './cloud-feature';
 import { getApiDetails, getTopologies } from '../utils/web-api-utils';
 import {
   focusSearch,
@@ -191,7 +192,9 @@ class App extends React.Component {
 
         <Nodes />
 
-        {!isResourceViewMode && <TimelineControl />}
+        <CloudFeature>
+          {!isResourceViewMode && <TimelineControl />}
+        </CloudFeature>
 
         <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
           {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}

client/app/scripts/components/pause-button.js

@@ -35,12 +35,12 @@ class PauseButton extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps({ scope }) {
   return {
-    hasUpdates: !state.get('nodesDeltaBuffer').isEmpty(),
-    updateCount: state.get('nodesDeltaBuffer').size,
-    updatePausedAt: state.get('updatePausedAt'),
-    isPaused: isPausedSelector(state),
+    hasUpdates: !scope.get('nodesDeltaBuffer').isEmpty(),
+    updateCount: scope.get('nodesDeltaBuffer').size,
+    updatePausedAt: scope.get('updatePausedAt'),
+    isPaused: isPausedSelector(scope),
   };
 }
 

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

@@ -181,10 +181,13 @@ class TimelineControl extends React.Component {
   }
 
   render() {
-    const { websocketTransitioning } = this.props;
+    const { websocketTransitioning, hasTimelineControl } = this.props;
     const { showSliderPanel, millisecondsInPast } = this.state;
     const isCurrent = (millisecondsInPast === 0);
 
+    // Don't render the timeline control if it's not explicitly enabled for this instance.
+    if (!hasTimelineControl) return null;
+
     return (
       <div className="timeline-control">
         {showSliderPanel && <div className="slider-panel">
@@ -229,9 +232,12 @@ class TimelineControl extends React.Component {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps({ scope, root }, { params }) {
+  const cloudInstance = root.instances[params.orgId] || {};
+  const featureFlags = cloudInstance.featureFlags || [];
   return {
-    websocketTransitioning: state.get('websocketTransitioning'),
+    hasTimelineControl: featureFlags.includes('timeline-control'),
+    websocketTransitioning: scope.get('websocketTransitioning'),
   };
 }
 

client/app/scripts/components/topology-timestamp-button.js

@@ -7,7 +7,7 @@ import { isPausedSelector } from '../selectors/timeline';
 import { TIMELINE_TICK_INTERVAL } from '../constants/timer';
 
 
-class TopologyTimestampButton extends React.PureComponent {
+class TopologyTimestampButton extends React.Component {
   componentDidMount() {
     this.timer = setInterval(() => {
       if (!this.props.isPaused) {
@@ -48,10 +48,10 @@ class TopologyTimestampButton extends React.PureComponent {
   }
 }
 
-function mapStateToProps(state) {
+function mapStateToProps({ scope }) {
   return {
-    isPaused: isPausedSelector(state),
-    updatePausedAt: state.get('updatePausedAt'),
+    isPaused: isPausedSelector(scope),
+    updatePausedAt: scope.get('updatePausedAt'),
   };
 }