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..a57c81ca5 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 ( - this.setState({showCleanDialog: false})}> - -

-
Reset environment
-

-

- Are you sure you want to reset the environment? -

- { - !this.state.allMonkeysAreDead ? -
- - Some monkeys are still running. It's advised to kill all monkeys before resetting. -
- : -
- } -
- - -
- - - ) - - }; - render() { return ( - {this.renderCleanDialogModal()} +

Start Over

@@ -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 new file mode 100644 index 000000000..5694d463a --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/StartOverModal.js @@ -0,0 +1,74 @@ +import {Modal} from 'react-bootstrap'; +import React from 'react'; +import {GridLoader} from 'react-spinners'; + + +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 ( + this.props.onClose()}> + +

+
Reset environment
+

+

+ Are you sure you want to reset the environment? +

+ { + !this.state.allMonkeysAreDead ? +
+ + Some monkeys are still running. It's advised to kill all monkeys before resetting. +
+ : +
+ } + { + this.state.loading ?
: this.showModalButtons() + } + + + ) + }; + + showModalButtons() { + return (
+ + +
) + } + + 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; +}