Merge pull request #525 from VakarisZ/start_over_loading_ui

Start over page loading fix

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;

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 (
+      <Modal show={this.state.showCleanDialog} onHide={() => this.props.onClose()}>
+        <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/>
+          }
+          {
+            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;

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