Add warning to reset environment

This commit is contained in:
Itay Mizeretz 2017-10-08 17:58:40 +03:00
parent a2bdf0da90
commit 8ba6ccf939
1 changed files with 66 additions and 7 deletions

View File

@ -1,19 +1,71 @@
import React from 'react'; import React from 'react';
import {Col} from 'react-bootstrap'; import {Col} from 'react-bootstrap';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import {ModalContainer, ModalDialog} from 'react-modal-dialog';
class StartOverPageComponent extends React.Component { class StartOverPageComponent extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
cleaned: false cleaned: false,
showCleanDialog: false,
allMonkeysAreDead: false
}; };
} }
updateMonkeysRunning = () => {
fetch('/api')
.then(res => res.json())
.then(res => {
// This check is used to prevent unnecessary re-rendering
this.setState({
allMonkeysAreDead: (!res['completed_steps']['run_monkey']) || (res['completed_steps']['infection_done'])
});
});
};
renderCleanDialogModal = () => {
if (!this.state.showCleanDialog) {
return <div />
}
return (
<ModalContainer onClose={() => this.setState({showCleanDialog: false})}>
<ModalDialog onClose={() => this.setState({showCleanDialog: false})}>
<h1>Reset environment</h1>
<p style={{'fontSize': '1.2em', 'marginBottom': '2em'}}>
Are you sure you want to reset the environment?
</p>
{
!this.state.allMonkeysAreDead ?
<div className="alert alert-warning">
<i className="glyphicon glyphicon-warning-sign" style={{'marginRight': '5px'}}/>
Some monkeys are still running. It's advised to kill all monkeys before resetting.
</div>
:
<div />
}
<button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}}
onClick={() => {
this.cleanup();
this.setState({showCleanDialog: false});
}}>
Reset environment
</button>
<button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}}
onClick={() => this.setState({showCleanDialog: false})}>
Cancel
</button>
</ModalDialog>
</ModalContainer>
)
};
render() { render() {
return ( return (
<Col xs={8}> <Col xs={8}>
{this.renderCleanDialogModal()}
<h1 className="page-title">Start Over</h1> <h1 className="page-title">Start Over</h1>
<div style={{'fontSize': '1.2em'}}> <div style={{'fontSize': '1.2em'}}>
<p> <p>
@ -23,19 +75,26 @@ class StartOverPageComponent extends React.Component {
<p> <p>
After that you could go back to the <Link to="/run-monkey">Run Monkey</Link> page to start new infections. After that you could go back to the <Link to="/run-monkey">Run Monkey</Link> page to start new infections.
</p> </p>
<p> <p style={{margin: '20px'}}>
<a onClick={this.cleanup} className="btn btn-danger btn-lg">Reset Environment</a> <button className="btn btn-danger btn-lg center-block"
onClick={() => {
this.setState({showCleanDialog: true});
this.updateMonkeysRunning();}
}>
Reset Environment
</button>
</p> </p>
<div className="alert alert-info">
<i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
You can continue and <Link to="/run-monkey">Run More Monkeys</Link> as you wish,
and see the results on the <Link to="/infection/map">Infection Map</Link> without deleting anything.
</div>
{ this.state.cleaned ? { this.state.cleaned ?
<div className="alert alert-success"> <div className="alert alert-success">
<i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/> <i className="glyphicon glyphicon-ok-sign" style={{'marginRight': '5px'}}/>
Environment was reset successfully Environment was reset successfully
</div> </div>
: ''} : ''}
<p>
* BTW you can just continue and <Link to="/run-monkey">run more monkeys</Link> as you wish,
and see the results on the <Link to="/infection/map">Infection Map</Link> without deleting anything.
</p>
</div> </div>
</Col> </Col>
); );