Fix tap start/stop button not toggling at the right time (#1432)

Problem:
We depend on the websocketRequestSent bool (renamed to 
tapRequestInProgress in this branch) to determine whether the 
start/stop button says start or stop. However, we don't change 
this value in setState until we open the websocket connection 
(which could take some time). This led to a delay in when you 
press the Start button and when it changes colour.

Solution:
Set the state before waiting for the websocket to open, so the 
button colour changes immediately and the form feels more responsive
This commit is contained in:
Risha Mars 2018-08-10 12:12:40 -07:00 committed by GitHub
parent 00a0572098
commit e63e28e243
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 7 deletions

View File

@ -62,7 +62,7 @@ class Tap extends React.Component {
},
maxLinesToDisplay: 40,
awaitingWebSocketConnection: false,
webSocketRequestSent: false,
tapRequestInProgress: false,
showAdvancedForm: false,
pollingInterval: 10000,
pendingRequests: false
@ -90,7 +90,6 @@ class Tap extends React.Component {
...query
}));
this.setState({
webSocketRequestSent: true,
awaitingWebSocketConnection: false,
error: ""
});
@ -101,13 +100,13 @@ class Tap extends React.Component {
}
onWebsocketClose = e => {
this.stopTapStreaming();
if (!e.wasClean) {
this.setState({
error: `Websocket [${e.code}] ${e.reason}`
});
}
this.stopTapStreaming();
}
onWebsocketError = e => {
@ -288,11 +287,11 @@ class Tap extends React.Component {
startTapSteaming() {
this.setState({
awaitingWebSocketConnection: true,
tapRequestInProgress: true,
tapResultsById: {},
tapResultFilterOptions: this.getInitialTapFilterOptions()
});
let protocol = window.location.protocol === "https:" ? "wss" : "ws";
let tapWebSocket = `${protocol}://${window.location.host}${this.props.pathPrefix}/api/tap`;
@ -305,7 +304,7 @@ class Tap extends React.Component {
stopTapStreaming() {
this.setState({
webSocketRequestSent: false,
tapRequestInProgress: false,
awaitingWebSocketConnection: false
});
}
@ -442,7 +441,7 @@ class Tap extends React.Component {
<Col span={colSpan}>
<Form.Item>
{
this.state.webSocketRequestSent ?
this.state.tapRequestInProgress ?
<Button type="primary" className="tap-stop" onClick={this.handleTapStop}>Stop</Button> :
<Button type="primary" className="tap-start" onClick={this.handleTapStart}>Start</Button>
}