Fixed and moved AWS run components into a separate folder

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

@@ -1,109 +0,0 @@
-import React from 'react';
-import ReactTable from 'react-table'
-import checkboxHOC from 'react-table/lib/hoc/selectTable';
-
-const CheckboxTable = checkboxHOC(ReactTable);
-
-const columns = [
-  {
-    Header: 'Machines',
-    columns: [
-      {Header: 'Machine', accessor: 'name'},
-      {Header: 'Instance ID', accessor: 'instance_id'},
-      {Header: 'IP Address', accessor: 'ip_address'},
-      {Header: 'OS', accessor: 'os'}
-    ]
-  }
-];
-
-const pageSize = 10;
-
-class AwsRunTableComponent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selection: [],
-      selectAll: false,
-      result: {}
-    }
-  }
-
-  toggleSelection = (key) => {
-    // start off with the existing state
-    let selection = [...this.state.selection];
-    const keyIndex = selection.indexOf(key);
-    // check to see if the key exists
-    if (keyIndex >= 0) {
-      // it does exist so we will remove it using destructing
-      selection = [
-        ...selection.slice(0, keyIndex),
-        ...selection.slice(keyIndex + 1)
-      ];
-    } else {
-      // it does not exist so add it
-      selection.push(key);
-    }
-    // update the state
-    this.setState({selection});
-  };
-
-  isSelected = key => {
-    return this.state.selection.includes(key);
-  };
-
-  toggleAll = () => {
-    const selectAll = !this.state.selectAll;
-    const selection = [];
-    if (selectAll) {
-      // we need to get at the internals of ReactTable
-      const wrappedInstance = this.checkboxTable.getWrappedInstance();
-      // the 'sortedData' property contains the currently accessible records based on the filter and sort
-      const currentRecords = wrappedInstance.getResolvedState().sortedData;
-      // we just push all the IDs onto the selection array
-      currentRecords.forEach(item => {
-        selection.push(item._original.instance_id);
-      });
-    }
-    this.setState({selectAll, selection});
-  };
-
-  getTrProps = (_, r) => {
-    let color = 'inherit';
-    if (r) {
-      let instId = r.original.instance_id;
-      if (this.isSelected(instId)) {
-        color = '#ffed9f';
-      } else if (Object.prototype.hasOwnProperty.call(this.state.result, instId)) {
-        color = this.state.result[instId] ? '#00f01b' : '#f00000'
-      }
-    }
-
-    return {
-      style: {backgroundColor: color}
-    };
-  };
-
-  render() {
-    return (
-      <div className="data-table-container">
-        <CheckboxTable
-          ref={r => (this.checkboxTable = r)}
-          keyField="instance_id"
-          columns={columns}
-          data={this.props.data}
-          showPagination={true}
-          defaultPageSize={pageSize}
-          className="-highlight"
-          selectType="checkbox"
-          toggleSelection={this.toggleSelection}
-          isSelected={this.isSelected}
-          toggleAll={this.toggleAll}
-          selectAll={this.state.selectAll}
-          getTrProps={this.getTrProps}
-        />
-      </div>
-    );
-  }
-}
-
-export default AwsRunTableComponent;

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

@@ -0,0 +1,119 @@
+import React, {useState} from 'react';
+import ReactTable from 'react-table'
+import checkboxHOC from 'react-table/lib/hoc/selectTable';
+import PropTypes from 'prop-types';
+
+
+const CheckboxTable = checkboxHOC(ReactTable);
+
+const columns = [
+  {
+    Header: 'Machines',
+    columns: [
+      {Header: 'Machine', accessor: 'name'},
+      {Header: 'Instance ID', accessor: 'instance_id'},
+      {Header: 'IP Address', accessor: 'ip_address'},
+      {Header: 'OS', accessor: 'os'}
+    ]
+  }
+];
+
+const pageSize = 10;
+
+function AWSInstanceTable(props) {
+
+  const [allToggled, setAllToggled] = useState(false);
+  let checkboxTable = null;
+
+  function toggleSelection(key) {
+    key = key.replace('select-', '');
+    // start off with the existing state
+    let modifiedSelection = [...props.selection];
+    const keyIndex = modifiedSelection.indexOf(key);
+    // check to see if the key exists
+    if (keyIndex >= 0) {
+      // it does exist so we will remove it using destructing
+      modifiedSelection = [
+        ...modifiedSelection.slice(0, keyIndex),
+        ...modifiedSelection.slice(keyIndex + 1)
+      ];
+    } else {
+      // it does not exist so add it
+      modifiedSelection.push(key);
+    }
+    // update the state
+    props.setSelection(modifiedSelection);
+  }
+
+  function isSelected(key) {
+    return props.selection.includes(key);
+  }
+
+  function toggleAll() {
+    const selectAll = !allToggled;
+    const selection = [];
+    if (selectAll) {
+      // we need to get at the internals of ReactTable
+      const wrappedInstance = checkboxTable.getWrappedInstance();
+      // the 'sortedData' property contains the currently accessible records based on the filter and sort
+      const currentRecords = wrappedInstance.getResolvedState().sortedData;
+      // we just push all the IDs onto the selection array
+      currentRecords.forEach(item => {
+        selection.push(item._original.instance_id);
+      });
+    }
+    setAllToggled(selectAll);
+    props.setSelection(selection);
+  }
+
+  function getTrProps(_, r) {
+    let color = 'inherit';
+    if (r) {
+      let instId = r.original.instance_id;
+      if (isSelected(instId)) {
+        color = '#ffed9f';
+      } else if (Object.prototype.hasOwnProperty.call(props.results, instId)) {
+        color = props.results[instId] ? '#00f01b' : '#f00000'
+      }
+    }
+
+    return {
+      style: {backgroundColor: color}
+    };
+  }
+
+  return (
+    <div className="data-table-container">
+      <CheckboxTable
+        ref={r => (checkboxTable = r)}
+        keyField="instance_id"
+        columns={columns}
+        data={props.data}
+        showPagination={true}
+        defaultPageSize={pageSize}
+        className="-highlight"
+        selectType="checkbox"
+        toggleSelection={toggleSelection}
+        isSelected={isSelected}
+        toggleAll={toggleAll}
+        selectAll={allToggled}
+        getTrProps={getTrProps}
+      />
+    </div>
+  );
+
+}
+
+AWSInstanceTable.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.exact({
+    instance_id: PropTypes.string,
+    name: PropTypes.string,
+    os: PropTypes.string,
+    ip_address: PropTypes.string
+  })),
+  results: PropTypes.arrayOf(PropTypes.string),
+  selection: PropTypes.arrayOf(PropTypes.string),
+  setSelection: PropTypes.func
+}
+
+export default AWSInstanceTable;

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

@@ -1,11 +1,11 @@
 import React, {useEffect, useState} from 'react';
-import AuthComponent from '../../AuthComponent';
-import '../../../styles/components/RunOnIslandButton.scss';
+import AuthComponent from '../../../AuthComponent';
+import '../../../../styles/components/RunOnIslandButton.scss';
 import {faCloud} from '@fortawesome/free-solid-svg-icons';
-import AWSRunInstances from './AWSRunInstances';
-import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
+import AWSRunOptions from './AWSRunOptions';
+import NextSelectionButton from '../../../ui-components/inline-selection/NextSelectionButton';
 import {Alert, Button} from 'react-bootstrap';
-import LoadingIcon from '../../ui-components/LoadingIcon';
+import LoadingIcon from '../../../ui-components/LoadingIcon';
 
 
 function AWSRunButton(props) {
@@ -49,7 +49,7 @@ function AWSRunButton(props) {
                                 description={'Run on a chosen AWS instance in the cloud.'}
                                 icon={faCloud}
                                 onButtonClick={() => {
-                                  props.setComponent(AWSRunInstances,
+                                  props.setComponent(AWSRunOptions,
                                     {AWSInstances: AWSInstances, setComponent: props.setComponent})
                                 }}/>
   }

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

@@ -3,27 +3,36 @@ import {Button, Nav} from 'react-bootstrap';
 
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faSync} from '@fortawesome/free-solid-svg-icons/faSync';
-import '../../../styles/components/RunOnIslandButton.scss';
 import {faInfoCircle} from '@fortawesome/free-solid-svg-icons/faInfoCircle';
-import AwsRunTable from './AwsRunTable';
-import AuthComponent from '../../AuthComponent';
+import AwsRunTable from './AWSInstanceTable';
+import AuthComponent from '../../../AuthComponent';
+import InlineSelection from '../../../ui-components/inline-selection/InlineSelection';
 
 
-function AWSRunInstances(props) {
+const AWSRunOptions = (props) => {
+  return InlineSelection(getContents, {
+    ...props,
+    onBackButtonClick: () => {props.setComponent()}
+  })
+}
+
+
+const getContents = (props) => {
 
   const authComponent = new AuthComponent({});
 
-  let awsTable = null
   let [allIPs, setAllIPs] = useState([]);
   let [selectedIp, setSelectedIp] = useState(null);
   let [AWSClicked, setAWSClicked] = useState(false);
+  let [runResults, setRunResults] = useState([]);
+  let [selectedInstances, setSelectedInstances] = useState([]);
 
   useEffect(() => {
     getIps();
-  }, [allIPs]);
+  }, []);
 
   function getIps() {
-    this.authFetch('/api')
+    authComponent.authFetch('/api')
       .then(res => res.json())
       .then(res => {
         setAllIPs(res['ip_addresses']);
@@ -33,7 +42,7 @@ function AWSRunInstances(props) {
 
   function runOnAws() {
     setAWSClicked(true);
-    let instances = awsTable.state.selection.map(x => instanceIdToInstance(x));
+    let instances = selectedInstances.map(x => instanceIdToInstance(x));
 
     authComponent.authFetch('/api/remote-monkey',
       {
@@ -45,17 +54,14 @@ function AWSRunInstances(props) {
         let result = res['result'];
 
         // update existing state, not run-over
-        let prevRes = awsTable.state.result;
+        let prevRes = result;
         for (let key in result) {
           if (result.hasOwnProperty(key)) {
             prevRes[key] = result[key];
           }
         }
-        awsTable.setState({
-          result: prevRes,
-          selection: [],
-          selectAll: false
-        });
+        setRunResults(prevRes);
+        setSelectedInstances([]);
         setAWSClicked(false);
       });
   }
@@ -89,10 +95,13 @@ function AWSRunInstances(props) {
       }
       <AwsRunTable
         data={props.AWSInstances}
-        ref={r => (awsTable = r)}
+        results={runResults}
+        selection={selectedInstances}
+        setSelection={setSelectedInstances}
       />
-      <div style={{'marginTop': '1em'}}>
+      <div className={'aws-run-button-container'}>
         <Button
+          size={'lg'}
           onClick={runOnAws}
           className={'btn btn-default btn-md center-block'}
           disabled={AWSClicked}>
@@ -105,4 +114,4 @@ function AWSRunInstances(props) {
   );
 }
 
-export default AWSRunInstances;
+export default AWSRunOptions;

monkey/monkey_island/cc/ui/src/styles/pages/MonkeyRunPage.scss

@@ -14,3 +14,8 @@ div.run-on-os-buttons > .nav-item > .nav-link:hover{
   color: $monkey-white;
   background-color: $monkey-alt;
 }
+
+.aws-run-button-container {
+  margin-top: 2em;
+  text-align: center;
+}