From 554d033da1403c9961a21d1c089056b5cb60a56f Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Fri, 9 Feb 2018 20:39:01 +0100 Subject: [PATCH] Fixup --- client/app/scripts/components/app.js | 15 +++-- client/app/scripts/components/nodes.js | 1 - client/app/scripts/components/time-control.js | 67 ++++++------------- .../scripts/components/time-travel-wrapper.js | 1 - client/app/scripts/reducers/root.js | 4 -- client/app/scripts/selectors/time-travel.js | 2 + client/app/styles/_base.scss | 1 - 7 files changed, 30 insertions(+), 61 deletions(-) diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js index 7ce06f7f7a..20826a6e9c 100644 --- a/client/app/scripts/components/app.js +++ b/client/app/scripts/components/app.js @@ -44,6 +44,7 @@ import DebugToolbar, { showingDebugToolbar, toggleDebugToolbar } from './debug-t import { getRouter, getUrlState } from '../utils/router-utils'; import { trackAnalyticsEvent } from '../utils/tracking-utils'; import { availableNetworksSelector } from '../selectors/node-networks'; +import { timeTravelSupportedSelector } from '../selectors/time-travel'; import { isResourceViewModeSelector, isTableViewModeSelector, @@ -177,10 +178,10 @@ class App extends React.Component { const { isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails, showingHelp, showingNetworkSelector, showingTroubleshootingMenu, - timeTravelTransitioning, showingTimeTravel + timeTravelTransitioning, timeTravelSupported } = this.props; - const className = classNames('scope-app', { 'time-travel-open': showingTimeTravel }); + const className = classNames('scope-app', { 'time-travel-open': timeTravelSupported }); const isIframe = window !== window.top; return ( @@ -195,9 +196,11 @@ class App extends React.Component { {showingDetails &&
}
- - - + {timeTravelSupported && ( + + + + )}
@@ -244,11 +247,11 @@ function mapStateToProps(state) { searchQuery: state.get('searchQuery'), showingDetails: state.get('nodeDetails').size > 0, showingHelp: state.get('showingHelp'), - showingTimeTravel: state.get('showingTimeTravel'), showingTroubleshootingMenu: state.get('showingTroubleshootingMenu'), showingNetworkSelector: availableNetworksSelector(state).count() > 0, showingTerminal: state.get('controlPipes').size > 0, topologyViewMode: state.get('topologyViewMode'), + timeTravelSupported: timeTravelSupportedSelector(state), timeTravelTransitioning: state.get('timeTravelTransitioning'), urlState: getUrlState(state) }; diff --git a/client/app/scripts/components/nodes.js b/client/app/scripts/components/nodes.js index e5933858ca..88e9f8db61 100644 --- a/client/app/scripts/components/nodes.js +++ b/client/app/scripts/components/nodes.js @@ -86,7 +86,6 @@ function mapStateToProps(state) { topologyNodeCountZero: isTopologyNodeCountZero(state), nodesDisplayEmpty: isNodesDisplayEmpty(state), nodesLoaded: nodesLoadedSelector(state), - timeTravelTransitioning: state.get('timeTravelTransitioning'), currentTopology: state.get('currentTopology'), topologies: state.get('topologies'), topologiesLoaded: state.get('topologiesLoaded'), diff --git a/client/app/scripts/components/time-control.js b/client/app/scripts/components/time-control.js index f835701b81..96a83b6539 100644 --- a/client/app/scripts/components/time-control.js +++ b/client/app/scripts/components/time-control.js @@ -4,7 +4,8 @@ import classNames from 'classnames'; import { connect } from 'react-redux'; import { trackAnalyticsEvent } from '../utils/tracking-utils'; -import { pauseTimeAtNow, resumeTime, startTimeTravel } from '../actions/app-actions'; +import { pauseTimeAtNow, resumeTime } from '../actions/app-actions'; +import { isPausedSelector, timeTravelSupportedSelector } from '../selectors/time-travel'; const className = isSelected => ( @@ -17,7 +18,6 @@ class TimeControl extends React.Component { this.handleNowClick = this.handleNowClick.bind(this); this.handlePauseClick = this.handlePauseClick.bind(this); - this.handleTravelClick = this.handleTravelClick.bind(this); this.getTrackingMetadata = this.getTrackingMetadata.bind(this); } @@ -50,71 +50,44 @@ class TimeControl extends React.Component { this.props.pauseTimeAtNow(); } - handleTravelClick() { - if (!this.props.showingTimeTravel) { - trackAnalyticsEvent('scope.time.travel.click', this.getTrackingMetadata({ open: true })); - this.props.startTimeTravel(); - } else { - trackAnalyticsEvent('scope.time.travel.click', this.getTrackingMetadata({ open: false })); - this.props.resumeTime(); - } - } - render() { - const { - showingTimeTravel, pausedAt, timeTravelTransitioning, topologiesLoaded, - hasHistoricReports - } = this.props; - - const isPausedNow = pausedAt && !showingTimeTravel; - const isTimeTravelling = showingTimeTravel; - const isRunningNow = !pausedAt; + const { isPaused, pausedAt, topologiesLoaded } = this.props; - if (!topologiesLoaded) return null; + // If Time Travel is supported, show an empty placeholder div instead + // of this control, since time will be controlled through the timeline. + // We return
instead of null so that selector controls would + // be aligned the same way between WC Explore and Scope standalone. + if (this.props.timeTravelSupported) return
; return (
-
- {timeTravelTransitioning && } -
- {isRunningNow && } + {!isPaused && } Live - {isPausedNow && } - {isPausedNow ? 'Paused' : 'Pause'} + {isPaused && } + {isPaused ? 'Paused' : 'Pause'} - {hasHistoricReports && - - {isTimeTravelling && } - Time Travel - - }
- {(isPausedNow || isTimeTravelling) && + {isPaused && Showing state from {moment(pausedAt).fromNow()} } - {isRunningNow && timeTravelTransitioning && - Resuming the live state - }
); } @@ -122,12 +95,11 @@ class TimeControl extends React.Component { function mapStateToProps(state) { return { - hasHistoricReports: state.getIn(['capabilities', 'historic_reports']), + isPaused: isPausedSelector(state), + timeTravelSupported: timeTravelSupportedSelector(state), topologyViewMode: state.get('topologyViewMode'), topologiesLoaded: state.get('topologiesLoaded'), currentTopology: state.get('currentTopology'), - showingTimeTravel: state.get('showingTimeTravel'), - timeTravelTransitioning: state.get('timeTravelTransitioning'), pausedAt: state.get('pausedAt'), }; } @@ -137,6 +109,5 @@ export default connect( { resumeTime, pauseTimeAtNow, - startTimeTravel, } )(TimeControl); diff --git a/client/app/scripts/components/time-travel-wrapper.js b/client/app/scripts/components/time-travel-wrapper.js index d19e2ce782..f8c5e687d0 100644 --- a/client/app/scripts/components/time-travel-wrapper.js +++ b/client/app/scripts/components/time-travel-wrapper.js @@ -101,7 +101,6 @@ function mapStateToProps(state, { params }) { } return { - visible: scopeState.get('showingTimeTravel'), showingLive: !scopeState.get('pausedAt'), topologyViewMode: scopeState.get('topologyViewMode'), currentTopology: scopeState.get('currentTopology'), diff --git a/client/app/scripts/reducers/root.js b/client/app/scripts/reducers/root.js index 8e04ed00d1..d9d3465064 100644 --- a/client/app/scripts/reducers/root.js +++ b/client/app/scripts/reducers/root.js @@ -75,7 +75,6 @@ export const initialState = makeMap({ selectedNetwork: null, selectedNodeId: null, showingHelp: false, - showingTimeTravel: false, showingTroubleshootingMenu: false, showingNetworks: false, timeTravelTransitioning: false, @@ -369,18 +368,15 @@ export function rootReducer(state = initialState, action) { case ActionTypes.RESUME_TIME: { state = state.set('timeTravelTransitioning', true); - state = state.set('showingTimeTravel', false); return state.set('pausedAt', null); } case ActionTypes.PAUSE_TIME_AT_NOW: { - state = state.set('showingTimeTravel', false); state = state.set('timeTravelTransitioning', false); return state.set('pausedAt', moment().utc().format()); } case ActionTypes.START_TIME_TRAVEL: { - state = state.set('showingTimeTravel', true); state = state.set('timeTravelTransitioning', false); return state.set('pausedAt', action.timestamp || moment().utc().format()); } diff --git a/client/app/scripts/selectors/time-travel.js b/client/app/scripts/selectors/time-travel.js index 40a70772a8..c3bfa556a7 100644 --- a/client/app/scripts/selectors/time-travel.js +++ b/client/app/scripts/selectors/time-travel.js @@ -7,3 +7,5 @@ export const isPausedSelector = createSelector( ], pausedAt => !!pausedAt ); + +export const timeTravelSupportedSelector = state => state.getIn(['capabilities', 'historic_reports']); diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss index d2cc66e4f0..6d83b70229 100644 --- a/client/app/styles/_base.scss +++ b/client/app/styles/_base.scss @@ -211,7 +211,6 @@ a { .selectors { display: flex; position: relative; - margin-top: -10px; > * { z-index: 20;