Run monkey page improvement, small style and attack report fixes

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {css} from '@emotion/core';
-import {Button, Col, Card, Nav, Collapse} from 'react-bootstrap';
+import {Button, Col, Card, Nav, Collapse, Row} from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import GridLoader from 'react-spinners/GridLoader';
 
@@ -17,8 +17,6 @@ import AwsRunTable from '../run-monkey/AwsRunTable';
 
 import MissingBinariesModal from '../ui-components/MissingBinariesModal';
 
-import '../../styles/MonkeyRunPage.scss';
-
 const loading_css_override = css`
     display: block;
     margin-right: auto;
@@ -141,8 +139,9 @@ class RunMonkeyPageComponent extends AuthComponent {
           /* If Monkey binaries are missing, change the state accordingly */
           if (res['error_text'].startsWith('Copy file failed')) {
             this.setState({
-              showModal: true,
+                showModal: true,
-              errorDetails: res['error_text']}
+                errorDetails: res['error_text']
+              }
             );
           }
           this.setState({
@@ -327,9 +326,9 @@ class RunMonkeyPageComponent extends AuthComponent {
             {RunMonkeyPageComponent.renderIconByState(this.state.runningOnIslandState)}
           </Button>
           <MissingBinariesModal
-                        showModal = {this.state.showModal}
+            showModal={this.state.showModal}
-                        onClose = {this.closeModal}
+            onClose={this.closeModal}
-                        errorDetails = {this.state.errorDetails}/>
+            errorDetails={this.state.errorDetails}/>
           {
             // TODO: implement button functionality
             /*
@@ -358,38 +357,55 @@ class RunMonkeyPageComponent extends AuthComponent {
         <Collapse in={this.state.showManual}>
           <div style={{'marginBottom': '2em'}}>
             <p style={{'fontSize': '1.2em'}}>
-              Choose the operating system where you want to run the monkey
+              Choose the operating system where you want to run the monkey:
-              {this.state.ips.length > 1 ? ', and the interface to communicate with.' : '.'}
             </p>
-            <Nav variant='pills' id={'bootstrap-override'} className={'run-on-os-buttons'}
+            <Row>
-                 activeKey={this.state.selectedOs} onSelect={this.setSelectedOs}>
+              <Col>
-              <Nav.Item>
+                <Nav variant='pills' fill id={'bootstrap-override'} className={'run-on-os-buttons'}
-                <Nav.Link eventKey={'windows-32'}>
+                     activeKey={this.state.selectedOs} onSelect={this.setSelectedOs}>
-                  Windows (32 bit)
+                  <Nav.Item>
-                </Nav.Link>
+                    <Nav.Link eventKey={'windows-32'}>
-              </Nav.Item>
+                      Windows (32 bit)
-              <Nav.Item>
+                    </Nav.Link>
-                <Nav.Link eventKey='windows-64'>
+                  </Nav.Item>
-                  Windows (64 bit)
+                  <Nav.Item>
-                </Nav.Link>
+                    <Nav.Link eventKey='windows-64'>
-              </Nav.Item>
+                      Windows (64 bit)
-              <Nav.Item>
+                    </Nav.Link>
-                <Nav.Link eventKey='linux-32' variant={'monkey-alt'}>
+                  </Nav.Item>
-                  Linux (32 bit)
+                  <Nav.Item>
-                </Nav.Link>
+                    <Nav.Link eventKey='linux-32'>
-              </Nav.Item>
+                      Linux (32 bit)
-              <Nav.Item>
+                    </Nav.Link>
-                <Nav.Link eventKey='linux-64'>
+                  </Nav.Item>
-                  Linux (64 bit)
+                  <Nav.Item>
-                </Nav.Link>
+                    <Nav.Link eventKey='linux-64'>
-              </Nav.Item>
+                      Linux (64 bit)
-            </Nav>
+                    </Nav.Link>
+                  </Nav.Item>
+                </Nav>
+              </Col>
+            </Row>
+
             {this.state.ips.length > 1 ?
-              <Nav variant="pills" activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
+              <div>
-                   className={'run-on-os-buttons'}>
+                <Row>
-                {this.state.ips.map(ip => <Nav.Item>
+                  <Col>
-                  <Nav.Link eventKey={ip}>{ip}</Nav.Link></Nav.Item>)}
+                    <p style={{'fontSize': '1.2em'}}>
-              </Nav>
+                      Choose the interface to communicate with:
+                    </p>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col>
+                    <Nav variant="pills" fill activeKey={this.state.selectedIp} onSelect={this.setSelectedIp}
+                         className={'run-on-os-buttons'}>
+                      {this.state.ips.map(ip => <Nav.Item>
+                        <Nav.Link eventKey={ip}>{ip}</Nav.Link></Nav.Item>)}
+                    </Nav>
+                  </Col>
+                </Row>
+              </div>
               : <div style={{'marginBottom': '2em'}}/>
             }
             <p style={{'fontSize': '1.2em'}}>

monkey/monkey_island/cc/ui/src/styles/Main.scss

@@ -3,11 +3,12 @@
 @import '../../node_modules/bootstrap/scss/bootstrap';
 
 // Imports that require variables
-@import './report/ReportPage';
+@import './report/ReportPage.scss';
 @import './report/AttackReport.scss';
 @import './PreviewPane.scss';
-@import './ConfigurationPage';
+@import './ConfigurationPage.scss';
-@import './AuthPage';
+@import './AuthPage.scss';
+@import './MonkeyRunPage.scss';
 
 
 // Define custom elements after bootstrap import
@@ -16,6 +17,11 @@
   color: $monkey-black;
 }
 
+.btn-outline-monkey-alt, button {
+  @include button-outline-variant($monkey-alt, $monkey-white, $monkey-alt, $monkey-alt);
+  color: $monkey-black;
+}
+
 .btn-outline-standard, button {
   @include button-outline-variant($light-gray, $monkey-black, $light-gray, $light-gray);
   color: $monkey-black;

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

@@ -5,3 +5,12 @@ div.run-on-os-buttons {
 div.run-on-os-buttons > .nav-item{
   margin: 0 10px 0 10px;
 }
+
+div.run-on-os-buttons > .nav-item > .nav-link{
+  border: 1px solid $monkey-alt;
+}
+
+div.run-on-os-buttons > .nav-item > .nav-link:hover{
+  color: $monkey-white;
+  background-color: $monkey-alt;
+}

monkey/monkey_island/cc/ui/src/styles/_variables.scss

@@ -1,6 +1,6 @@
 $monkey-alt: #28a745;
 $monkey-yellow: #ffc107;
-$monkey-black: #000;
+$monkey-black: #000000;
 $monkey-white: #ffffff;
 $light-gray: #ececec;
 

monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss

@@ -50,6 +50,7 @@
 }
 
 .attack-report .toggle-btn {
+  box-shadow: None !important;
   padding: 0;
   margin-bottom: 30px;
   margin-left: 6px;