Skip to content

Commit

Permalink
Polishing & refactoring.
Browse files Browse the repository at this point in the history
  • Loading branch information
fbarl committed Jun 7, 2017
1 parent dbe7e42 commit dc4855b
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 139 deletions.
30 changes: 14 additions & 16 deletions client/app/scripts/actions/app-actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ import { find } from 'lodash';
import ActionTypes from '../constants/action-types';
import { saveGraph } from '../utils/file-utils';
import { updateRoute } from '../utils/router-utils';
import {
isNodesDeltaPaused,
getUpdateBufferSize,
} from '../utils/update-buffer-utils';
import {
doControlRequest,
getAllNodes,
Expand All @@ -21,6 +17,7 @@ import {
} from '../utils/web-api-utils';
import { storageSet } from '../utils/storage-utils';
import { loadTheme } from '../utils/contrast-utils';
import { isPausedSelector } from '../selectors/timeline';
import {
availableMetricTypesSelector,
nextPinnedMetricTypeSelector,
Expand All @@ -32,11 +29,14 @@ import {
isResourceViewModeSelector,
resourceViewAvailableSelector,
} from '../selectors/topology';

import { NODES_DELTA_BUFFER_SIZE_LIMIT } from '../constants/limits';
import { NODES_DELTA_BUFFER_FEED_INTERVAL } from '../constants/timer';
import {
GRAPH_VIEW_MODE,
TABLE_VIEW_MODE,
RESOURCE_VIEW_MODE,
} from '../constants/naming';
} from '../constants/naming';


const log = debug('scope:app-actions');
Expand Down Expand Up @@ -88,16 +88,15 @@ function bufferDeltaUpdate(delta) {
return;
}

const bufferLength = 100;
if (getUpdateBufferSize(getState()) >= bufferLength) {
if (getState().get('nodesDeltaBuffer').size >= NODES_DELTA_BUFFER_SIZE_LIMIT) {
dispatch({ type: ActionTypes.CONSOLIDATE_NODES_DELTA_BUFFER });
}

dispatch({
type: ActionTypes.ADD_TO_NODES_DELTA_BUFFER,
delta,
});
log('Buffering node delta, new size', getUpdateBufferSize(getState()));
log('Buffering node delta, new size', getState().get('nodesDeltaBuffer').size);
};
}

Expand Down Expand Up @@ -626,7 +625,7 @@ export function receiveNodesDelta(delta) {
const hasChanges = delta.add || delta.update || delta.remove;

if (hasChanges || movingInTime) {
if (state.get('updatePausedAt') !== null) {
if (isPausedSelector(state)) {
dispatch(bufferDeltaUpdate(delta));
} else {
dispatch({
Expand All @@ -640,20 +639,19 @@ export function receiveNodesDelta(delta) {

function maybeUpdateFromNodesDeltaBuffer() {
return (dispatch, getState) => {
const state = getState();
if (isNodesDeltaPaused(state)) {
if (isPausedSelector(getState())) {
dispatch(resetNodesDeltaBuffer());
} else {
if (getUpdateBufferSize(state) > 0) {
const delta = state.get('nodesDeltaBuffer').first();
if (!getState().get('nodesDeltaBuffer').isEmpty()) {
const delta = getState().get('nodesDeltaBuffer').first();
dispatch({ type: ActionTypes.POP_NODES_DELTA_BUFFER });
dispatch(receiveNodesDelta(delta));
}
if (getUpdateBufferSize(state) > 0) {
const feedInterval = 1000;
if (!getState().get('nodesDeltaBuffer').isEmpty()) {
nodesDeltaBufferUpdateTimer = setTimeout(
() => dispatch(maybeUpdateFromNodesDeltaBuffer()),
feedInterval);
NODES_DELTA_BUFFER_FEED_INTERVAL,
);
}
}
};
Expand Down
18 changes: 10 additions & 8 deletions client/app/scripts/components/pause-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@ import moment from 'moment';
import classNames from 'classnames';
import { connect } from 'react-redux';

import { getUpdateBufferSize } from '../utils/update-buffer-utils';
import { isPausedSelector } from '../selectors/timeline';
import { clickPauseUpdate, clickResumeUpdate } from '../actions/app-actions';


class PauseButton extends React.Component {
render() {
const isPaused = this.props.updatePausedAt !== null;
const updateCount = this.props.updateCount;
const hasUpdates = updateCount > 0;
const title = isPaused ?
`Paused ${moment(this.props.updatePausedAt).fromNow()}` :
'Pause updates (freezes the nodes in their current layout)';
const { isPaused, hasUpdates, updateCount, updatePausedAt } = this.props;
const action = isPaused ? this.props.clickResumeUpdate : this.props.clickPauseUpdate;
const className = classNames('button pause-button', { active: isPaused });

const title = isPaused ?
`Paused ${moment(updatePausedAt).fromNow()}` :
'Pause updates (freezes the nodes in their current layout)';

let label = '';
if (hasUpdates && isPaused) {
label = `Paused +${updateCount}`;
Expand All @@ -37,8 +37,10 @@ class PauseButton extends React.Component {

function mapStateToProps(state) {
return {
updateCount: getUpdateBufferSize(state),
hasUpdates: !state.get('nodesDeltaBuffer').isEmpty(),
updateCount: state.get('nodesDeltaBuffer').size,
updatePausedAt: state.get('updatePausedAt'),
isPaused: isPausedSelector(state),
};
}

Expand Down
89 changes: 30 additions & 59 deletions client/app/scripts/components/timeline-control.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,83 +20,51 @@ const sliderRanges = {
last15Minutes: {
label: 'Last 15 minutes',
getStart: () => moment().utc().subtract(15, 'minutes'),
getEnd: () => moment().utc(),
},
last1Hour: {
label: 'Last 1 hour',
getStart: () => moment().utc().subtract(1, 'hour'),
getEnd: () => moment().utc(),
},
last6Hours: {
label: 'Last 6 hours',
getStart: () => moment().utc().subtract(6, 'hours'),
getEnd: () => moment().utc(),
},
last24Hours: {
label: 'Last 24 hours',
getStart: () => moment().utc().subtract(24, 'hours'),
getEnd: () => moment().utc(),
},
last7Days: {
label: 'Last 7 days',
getStart: () => moment().utc().subtract(7, 'days'),
getEnd: () => moment().utc(),
},
last30Days: {
label: 'Last 30 days',
getStart: () => moment().utc().subtract(30, 'days'),
getEnd: () => moment().utc(),
},
last90Days: {
label: 'Last 90 days',
getStart: () => moment().utc().subtract(90, 'days'),
getEnd: () => moment().utc(),
},
last1Year: {
label: 'Last 1 year',
getStart: () => moment().subtract(1, 'year'),
getEnd: () => moment().utc(),
},
todaySoFar: {
label: 'Today so far',
getStart: () => moment().utc().startOf('day'),
getEnd: () => moment().utc(),
},
thisWeekSoFar: {
label: 'This week so far',
getStart: () => moment().utc().startOf('week'),
getEnd: () => moment().utc(),
},
thisMonthSoFar: {
label: 'This month so far',
getStart: () => moment().utc().startOf('month'),
getEnd: () => moment().utc(),
},
thisYearSoFar: {
label: 'This year so far',
getStart: () => moment().utc().startOf('year'),
getEnd: () => moment().utc(),
},
// yesterday: {
// label: 'Yesterday',
// getStart: () => moment().utc().subtract(1, 'day').startOf('day'),
// getEnd: () => moment().utc().subtract(1, 'day').endOf('day'),
// },
// previousWeek: {
// label: 'Previous week',
// getStart: () => moment().utc().subtract(1, 'week').startOf('week'),
// getEnd: () => moment().utc().subtract(1, 'week').endOf('week'),
// },
// previousMonth: {
// label: 'Previous month',
// getStart: () => moment().utc().subtract(1, 'month').startOf('month'),
// getEnd: () => moment().utc().subtract(1, 'month').endOf('month'),
// },
// previousYear: {
// label: 'Previous year',
// getStart: () => moment().utc().subtract(1, 'year').startOf('year'),
// getEnd: () => moment().utc().subtract(1, 'year').endOf('year'),
// },
};

class TimelineControl extends React.Component {
Expand All @@ -105,7 +73,7 @@ class TimelineControl extends React.Component {

this.state = {
showTimelinePanel: false,
offsetMilliseconds: 0,
millisecondsInPast: 0,
rangeOptionSelected: sliderRanges.last1Hour,
};

Expand All @@ -130,42 +98,46 @@ class TimelineControl extends React.Component {
this.setState({ showTimelinePanel: !this.state.showTimelinePanel });
}

handleSliderChange(value) {
const offsetMilliseconds = this.getRangeMilliseconds() - value;
handleSliderChange(sliderValue) {
const millisecondsInPast = this.getRangeMilliseconds() - sliderValue;
this.props.startMovingInTime();
this.debouncedUpdateTimestamp(offsetMilliseconds);
this.setState({ offsetMilliseconds });
this.debouncedUpdateTimestamp(millisecondsInPast);
this.setState({ millisecondsInPast });
}

getRangeMilliseconds() {
const range = this.state.rangeOptionSelected;
return range.getEnd().diff(range.getStart());
handleRangeOptionClick(rangeOption) {
this.setState({ rangeOptionSelected: rangeOption });

const rangeMilliseconds = this.getRangeMilliseconds(rangeOption);
if (this.state.millisecondsInPast > rangeMilliseconds) {
this.updateTimestamp(rangeMilliseconds);
this.setState({ millisecondsInPast: rangeMilliseconds });
}
}

getRangeMilliseconds(rangeOption) {
rangeOption = rangeOption || this.state.rangeOptionSelected;
return moment().diff(rangeOption.getStart());
}

jumpToNow() {
this.setState({
showTimelinePanel: false,
offsetMilliseconds: 0,
millisecondsInPast: 0,
rangeOptionSelected: sliderRanges.last1Hour,
});
this.props.startMovingInTime();
this.updateTimestamp(null);
}

getTotalOffset() {
const { rangeOptionSelected, offsetMilliseconds } = this.state;
const rangeBehindMilliseconds = moment().utc().diff(rangeOptionSelected.getEnd());
return offsetMilliseconds + rangeBehindMilliseconds;
}

renderRangeOption(option) {
const handleClick = () => { this.setState({ rangeOptionSelected: option }); };
const selected = (this.state.rangeOptionSelected.label === option.label);
renderRangeOption(rangeOption) {
const handleClick = () => { this.handleRangeOptionClick(rangeOption); };
const selected = (this.state.rangeOptionSelected.label === rangeOption.label);
const className = classNames('option', { selected });

return (
<a key={option.label} className={className} onClick={handleClick}>
{option.label}
<a key={rangeOption.label} className={className} onClick={handleClick}>
{rangeOption.label}
</a>
);
}
Expand All @@ -179,23 +151,22 @@ class TimelineControl extends React.Component {
}

renderTimelineSlider() {
const { offsetMilliseconds } = this.state;
const { millisecondsInPast } = this.state;
const rangeMilliseconds = this.getRangeMilliseconds();

return (
<Slider
onChange={this.handleSliderChange}
value={rangeMilliseconds - offsetMilliseconds}
value={rangeMilliseconds - millisecondsInPast}
max={rangeMilliseconds}
/>
);
}

render() {
const { movingInTime } = this.props;
const { showTimelinePanel, offsetMilliseconds } = this.state;

const showingCurrent = (this.getTotalOffset() === 0);
const { showTimelinePanel, millisecondsInPast } = this.state;
const isCurrent = (millisecondsInPast === 0);

return (
<div className="timeline-control">
Expand Down Expand Up @@ -230,10 +201,10 @@ class TimelineControl extends React.Component {
</div>}
<TopologyTimestampButton
onClick={this.toggleTimelinePanel}
millisecondsInPast={millisecondsInPast}
selected={showTimelinePanel}
offset={offsetMilliseconds}
/>
{!showingCurrent && this.renderJumpToNowButton()}
{!isCurrent && this.renderJumpToNowButton()}
<PauseButton />
</div>
</div>
Expand Down
Loading

0 comments on commit dc4855b

Please sign in to comment.