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
})
};
}