Merge pull request #2616 from weaveworks/use-report-persistence-flag-in-the-ui

Time Travel: remove the feature flag and make the availability depend on historic reports capability

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

@@ -1,5 +1,6 @@
 import debug from 'debug';
 import { find } from 'lodash';
+import { fromJS } from 'immutable';
 
 import ActionTypes from '../constants/action-types';
 import { saveGraph } from '../utils/file-utils';
@@ -657,6 +658,7 @@ export function receiveTopologies(topologies) {
 export function receiveApiDetails(apiDetails) {
   return {
     type: ActionTypes.RECEIVE_API_DETAILS,
+    capabilities: fromJS(apiDetails.capabilities),
     hostname: apiDetails.hostname,
     version: apiDetails.version,
     newVersion: apiDetails.newVersion,

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

@@ -3,8 +3,6 @@ import moment from 'moment';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 
-import CloudFeature from './cloud-feature';
-import TimeTravelButton from './time-travel-button';
 import { trackMixpanelEvent } from '../utils/tracking-utils';
 import { pauseTimeAtNow, resumeTime, startTimeTravel } from '../actions/app-actions';
 
@@ -65,7 +63,8 @@ class TimeControl extends React.Component {
   }
 
   render() {
-    const { showingTimeTravel, pausedAt, timeTravelTransitioning, topologiesLoaded } = this.props;
+    const { showingTimeTravel, pausedAt, timeTravelTransitioning, topologiesLoaded,
+      hasHistoricReports } = this.props;
 
     const isPausedNow = pausedAt && !showingTimeTravel;
     const isTimeTravelling = showingTimeTravel;
@@ -95,13 +94,13 @@ class TimeControl extends React.Component {
               {isPausedNow && <span className="fa fa-pause" />}
               <span className="label">{isPausedNow ? 'Paused' : 'Pause'}</span>
             </span>
-            <CloudFeature>
-              <TimeTravelButton
-                className={className(isTimeTravelling)}
-                onClick={this.handleTravelClick}
-                isTimeTravelling={isTimeTravelling}
-              />
-            </CloudFeature>
+            {hasHistoricReports && <span
+              className={className(isTimeTravelling)}
+              onClick={this.handleTravelClick}
+              title="Travel back in time">
+              {isTimeTravelling && <span className="fa fa-clock-o" />}
+              <span className="label">Time Travel</span>
+            </span>}
           </div>
         </div>
         {(isPausedNow || isTimeTravelling) && <span
@@ -120,6 +119,7 @@ class TimeControl extends React.Component {
 
 function mapStateToProps(state) {
   return {
+    hasHistoricReports: state.getIn(['capabilities', 'historic_reports']),
     topologyViewMode: state.get('topologyViewMode'),
     topologiesLoaded: state.get('topologiesLoaded'),
     currentTopology: state.get('currentTopology'),

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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-
-
-// TODO: Move this back into TimeTravelControls once we move away from CloudFeature.
-class TimeTravelButton extends React.Component {
-  render() {
-    const { className, onClick, isTimeTravelling, hasTimeTravel } = this.props;
-
-    if (!hasTimeTravel) return null;
-
-    return (
-      <span className={className} onClick={onClick} title="Travel back in time">
-        {isTimeTravelling && <span className="fa fa-clock-o" />}
-        <span className="label">Time Travel</span>
-      </span>
-    );
-  }
-}
-
-function mapStateToProps({ root }, { params }) {
-  const cloudInstance = root.instances[params.orgId] || {};
-  const featureFlags = cloudInstance.featureFlags || [];
-  return {
-    hasTimeTravel: featureFlags.includes('time-travel'),
-  };
-}
-
-export default connect(mapStateToProps)(TimeTravelButton);

client/app/scripts/reducers/root.js

@@ -40,6 +40,7 @@ const topologySorter = topology => topology.get('rank');
 // Initial values
 
 export const initialState = makeMap({
+  capabilities: makeMap(),
   contrastMode: false,
   controlPipes: makeOrderedMap(), // pipeId -> controlPipe
   controlStatus: makeMap(),
@@ -658,10 +659,11 @@ export function rootReducer(state = initialState, action) {
       state = state.set('errorUrl', null);
 
       return state.merge({
+        capabilities: action.capabilities,
         hostname: action.hostname,
-        version: action.version,
         plugins: action.plugins,
-        versionUpdate: action.newVersion
+        version: action.version,
+        versionUpdate: action.newVersion,
       });
     }