Merge pull request #670 from guardicore/485/handle-missing-binaries

485/handle missing binaries

monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage.js

@@ -13,6 +13,8 @@ import {Link} from 'react-router-dom';
 import AuthComponent from '../AuthComponent';
 import AwsRunTable from '../run-monkey/AwsRunTable';
 
+import MissingBinariesModal from '../ui-components/MissingBinariesModal';
+
 import '../../styles/MonkeyRunPage.scss';
 
 const loading_css_override = css`
@@ -40,8 +42,12 @@ class RunMonkeyPageComponent extends AuthComponent {
       awsMachines: [],
       isLoadingAws: true,
       isErrorWhileCollectingAwsMachines: false,
-      awsMachineCollectionErrorMsg: ''
+      awsMachineCollectionErrorMsg: '',
+      showModal: false,
+      errorDetails: ''
     };
+
+    this.closeModal = this.closeModal.bind(this);
   }
 
   componentDidMount() {
@@ -130,6 +136,13 @@ class RunMonkeyPageComponent extends AuthComponent {
             runningOnIslandState: 'installing'
           });
         } else {
+          /* If Monkey binaries are missing, change the state accordingly */
+          if (res['error_text'].startsWith('Copy file failed')) {
+            this.setState({
+              showModal: true,
+              errorDetails: res['error_text']}
+            );
+          }
           this.setState({
             runningOnIslandState: 'not_running'
           });
@@ -285,6 +298,12 @@ class RunMonkeyPageComponent extends AuthComponent {
     )
   }
 
+  closeModal = () => {
+    this.setState({
+      showModal: false
+    })
+  };
+
   render() {
     return (
       <Col xs={12} lg={8}>
@@ -296,11 +315,14 @@ class RunMonkeyPageComponent extends AuthComponent {
         <p>
           <button onClick={this.runLocalMonkey}
                   className="btn btn-default btn-lg center-block"
-                  disabled={this.state.runningOnIslandState !== 'not_running'}
-          >
+                  disabled={this.state.runningOnIslandState !== 'not_running'}>
             Run on Monkey Island Server
             {RunMonkeyPageComponent.renderIconByState(this.state.runningOnIslandState)}
           </button>
+          <MissingBinariesModal
+                        showModal = {this.state.showModal}
+                        onClose = {this.closeModal}
+                        errorDetails = {this.state.errorDetails}/>
           {
             // TODO: implement button functionality
             /*

monkey/monkey_island/cc/ui/src/components/ui-components/MissingBinariesModal.js

@@ -0,0 +1,63 @@
+import {Modal} from 'react-bootstrap';
+import React from 'react';
+import {GridLoader} from 'react-spinners';
+
+
+class MissingBinariesModal extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showModal: this.props.showModal,
+      errorDetails: this.props.errorDetails
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props !== prevProps) {
+      this.setState({
+        showModal: this.props.showModal,
+        errorDetails: this.props.errorDetails
+      })
+    }
+  }
+
+  render = () => {
+    return (
+      <Modal show={this.state.showModal} onHide={() => this.props.onClose()}>
+        <Modal.Body>
+          <h3>
+            <div className='text-center'>Uh oh...</div>
+          </h3>
+          <div style={{'marginTop': '1em', 'marginBottom': '1em'}}>
+            <p className="alert alert-warning">
+              <i className="glyphicon glyphicon-info-sign" style={{'marginRight': '5px'}}/>
+              Some Monkey binaries are not found where they should be...<br/>
+              You can download the files from <a href="https://github.com/guardicore/monkey/releases/latest" target="blank">here</a>,
+              at the bottommost section titled "Assets", and place them under the directory <code>monkey/monkey_island/cc/binaries</code>.
+            </p>
+          </div>
+          <hr/>
+          <h4>
+            Error Details
+          </h4>
+          <div style={{'marginTop': '1em', 'marginBottom': '1em'}}>
+            <pre>
+              {this.state.errorDetails}
+            </pre>
+          </div>
+          <div className='text-center'>
+            <button type='button' className='btn btn-success btn-lg' style={{margin: '5px'}}
+                    onClick={() => this.props.onClose()}>
+              Dismiss
+            </button>
+          </div>
+        </Modal.Body>
+      </Modal>
+    )
+  };
+
+}
+
+export default MissingBinariesModal;