From 95a42232bbc410053530ab2fb02f5e5a855e6d84 Mon Sep 17 00:00:00 2001 From: VakarisZ 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 ( + 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. +
+ : +
+ } +
+ + +
+ + + ) + + }; +} From 18731a430bf2e431623d66a499a6cd3f1692aabc Mon Sep 17 00:00:00 2001 From: VakarisZ 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 ( - 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 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 ( - this.setState({showCleanDialog: false})}> + this.props.onClose()}>

Reset environment
@@ -24,22 +41,34 @@ class StartOverModal extends ReactComponent { :
} -
- - -
+ { + 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; +} From b130dd35ec8456f6c4870ee12af0c4312cefc547 Mon Sep 17 00:00:00 2001 From: VakarisZ 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 { this.props.onClose()}>

-
Reset environment
+
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() + this.state.loading ?
: this.showModalButtons() } @@ -50,12 +50,12 @@ class StartOverModal extends React.PureComponent { }; showModalButtons() { - return (
- - From 91c05ae0f4651ef133b3912d8de34f125fa38461 Mon Sep 17 00:00:00 2001 From: VakarisZ 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 }) }; }