From 95a42232bbc410053530ab2fb02f5e5a855e6d84 Mon Sep 17 00:00:00 2001 From: VakarisZ <vakarisz@yahoo.com> Date: Mon, 6 Jan 2020 11:02:36 +0200 Subject: [PATCH 1/4] Copied modal into a separate react component --- .../ui-components/StartOverModal.js | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js new file mode 100644 index 000000000..057d45779 --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js @@ -0,0 +1,45 @@ +import {Modal} from "react-bootstrap"; +import Modal from "react-bootstrap/es/Modal"; +import ReactComponent from "react"; +import AuthComponent from "../AuthComponent"; + + +class StartOverModal extends ReactComponent { + render = () => { + return ( + <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}> + <Modal.Body> + <h2> + <div className="text-center">Reset environment</div> + </h2> + <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/> + } + <div className="text-center"> + <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> + </div> + </Modal.Body> + </Modal> + ) + + }; +} From 18731a430bf2e431623d66a499a6cd3f1692aabc Mon Sep 17 00:00:00 2001 From: VakarisZ <vakarisz@yahoo.com> Date: Tue, 7 Jan 2020 16:06:50 +0200 Subject: [PATCH 2/4] Fixed start over modal and start over page, added stylesheet --- .../ui/src/components/pages/StartOverPage.js | 63 ++++++----------- .../ui-components/StartOverModal.js | 67 +++++++++++++------ .../cc/ui/src/styles/StartOverPage.scss | 9 +++ 3 files changed, 77 insertions(+), 62 deletions(-) create mode 100644 monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss diff --git a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js index eca159133..2aaeddec7 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js @@ -1,7 +1,9 @@ import React from 'react'; -import {Col, Modal} from 'react-bootstrap'; +import {Col} from 'react-bootstrap'; import {Link} from 'react-router-dom'; import AuthComponent from '../AuthComponent'; +import StartOverModal from '../ui-components/StartOverModal'; +import '../../styles/StartOverPage.scss'; class StartOverPageComponent extends AuthComponent { constructor(props) { @@ -12,6 +14,9 @@ class StartOverPageComponent extends AuthComponent { showCleanDialog: false, allMonkeysAreDead: false }; + + this.cleanup = this.cleanup.bind(this); + this.closeModal = this.closeModal.bind(this); } updateMonkeysRunning = () => { @@ -25,48 +30,14 @@ class StartOverPageComponent extends AuthComponent { }); }; - renderCleanDialogModal = () => { - return ( - <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}> - <Modal.Body> - <h2> - <div className="text-center">Reset environment</div> - </h2> - <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/> - } - <div className="text-center"> - <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> - </div> - </Modal.Body> - </Modal> - ) - - }; - render() { return ( <Col xs={12} lg={8}> - {this.renderCleanDialogModal()} + <StartOverModal cleaned = {this.state.cleaned} + showCleanDialog = {this.state.showCleanDialog} + allMonkeysAreDead = {this.state.allMonkeysAreDead} + onVerify = {this.cleanup} + onClose = {this.closeModal}/> <h1 className="page-title">Start Over</h1> <div style={{'fontSize': '1.2em'}}> <p> @@ -104,7 +75,7 @@ class StartOverPageComponent extends AuthComponent { this.setState({ cleaned: false }); - this.authFetch('/api?action=reset') + return this.authFetch('/api?action=reset') .then(res => res.json()) .then(res => { if (res['status'] === 'OK') { @@ -112,8 +83,14 @@ class StartOverPageComponent extends AuthComponent { cleaned: true }); } - }); - } + }).then(this.updateMonkeysRunning()); + }; + + closeModal = () => { + this.setState({ + showCleanDialog: false, + }) + }; } export default StartOverPageComponent; diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js index 057d45779..5c0ae1cb2 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js @@ -1,13 +1,30 @@ import {Modal} from "react-bootstrap"; -import Modal from "react-bootstrap/es/Modal"; -import ReactComponent from "react"; -import AuthComponent from "../AuthComponent"; +import React from "react"; +import {GridLoader} from 'react-spinners'; -class StartOverModal extends ReactComponent { +class StartOverModal extends React.PureComponent { + + constructor(props) { + super(props); + + this.state = { + showCleanDialog: this.props.showCleanDialog, + allMonkeysAreDead: this.props.allMonkeysAreDead, + loading: false + }; + } + + componentDidUpdate(prevProps) { + if (this.props !== prevProps) { + this.setState({ showCleanDialog: this.props.showCleanDialog, + allMonkeysAreDead: this.props.allMonkeysAreDead}) + } + } + render = () => { return ( - <Modal show={this.state.showCleanDialog} onHide={() => this.setState({showCleanDialog: false})}> + <Modal show={this.state.showCleanDialog} onHide={() => this.props.onClose()}> <Modal.Body> <h2> <div className="text-center">Reset environment</div> @@ -24,22 +41,34 @@ class StartOverModal extends ReactComponent { : <div/> } - <div className="text-center"> - <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> - </div> + { + this.state.loading ? <div className={"modalLoader"}><GridLoader/></div> : this.showModalButtons() + } </Modal.Body> </Modal> ) - }; + + showModalButtons() { + return (<div className="text-center"> + <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}} + onClick={this.modalVerificationOnClick}> + Reset environment + </button> + <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}} + onClick={() => this.setState({showCleanDialog: false})}> + Cancel + </button> + </div>) + } + + modalVerificationOnClick = async () => { + this.setState({loading: true}); + this.props.onVerify() + .then(() => {this.setState({loading: false}); + this.props.onClose();}) + + } } + +export default StartOverModal; diff --git a/monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss b/monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss new file mode 100644 index 000000000..ee4ab65ea --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/styles/StartOverPage.scss @@ -0,0 +1,9 @@ +$yellow: #ffcc00; + +.modalLoader div{ + margin-left: auto; + margin-right: auto; +} +.modalLoader div>div{ + background-color: $yellow; +} From b130dd35ec8456f6c4870ee12af0c4312cefc547 Mon Sep 17 00:00:00 2001 From: VakarisZ <vakarisz@yahoo.com> Date: Wed, 8 Jan 2020 08:57:25 +0200 Subject: [PATCH 3/4] double quotes to single quotes in StartOverModal --- .../components/ui-components/StartOverModal.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js index 5c0ae1cb2..5694d463a 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js @@ -1,5 +1,5 @@ -import {Modal} from "react-bootstrap"; -import React from "react"; +import {Modal} from 'react-bootstrap'; +import React from 'react'; import {GridLoader} from 'react-spinners'; @@ -27,22 +27,22 @@ class StartOverModal extends React.PureComponent { <Modal show={this.state.showCleanDialog} onHide={() => this.props.onClose()}> <Modal.Body> <h2> - <div className="text-center">Reset environment</div> + <div className='text-center'>Reset environment</div> </h2> <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'}}/> + <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/> } { - this.state.loading ? <div className={"modalLoader"}><GridLoader/></div> : this.showModalButtons() + this.state.loading ? <div className={'modalLoader'}><GridLoader/></div> : this.showModalButtons() } </Modal.Body> </Modal> @@ -50,12 +50,12 @@ class StartOverModal extends React.PureComponent { }; showModalButtons() { - return (<div className="text-center"> - <button type="button" className="btn btn-danger btn-lg" style={{margin: '5px'}} + return (<div className='text-center'> + <button type='button' className='btn btn-danger btn-lg' style={{margin: '5px'}} onClick={this.modalVerificationOnClick}> Reset environment </button> - <button type="button" className="btn btn-success btn-lg" style={{margin: '5px'}} + <button type='button' className='btn btn-success btn-lg' style={{margin: '5px'}} onClick={() => this.setState({showCleanDialog: false})}> Cancel </button> From 91c05ae0f4651ef133b3912d8de34f125fa38461 Mon Sep 17 00:00:00 2001 From: VakarisZ <vakarisz@yahoo.com> Date: Wed, 8 Jan 2020 09:19:29 +0200 Subject: [PATCH 4/4] dangling comma removed from StartOverPage --- .../monkey_island/cc/ui/src/components/pages/StartOverPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js index 2aaeddec7..a57c81ca5 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js +++ b/monkey/monkey_island/cc/ui/src/components/pages/StartOverPage.js @@ -88,7 +88,7 @@ class StartOverPageComponent extends AuthComponent { closeModal = () => { this.setState({ - showCleanDialog: false, + showCleanDialog: false }) }; }