Report section set to full width, icons added

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

@@ -146,7 +146,7 @@ class ReportPageComponent extends AuthComponent {
       content = <MustRunMonkeyWarning/>;
     }
     return (
-      <Col xs={12} lg={10}>
+      <Col xs={12} lg={12}>
         <h1 className='page-title no-print'>4. Security Reports</h1>
         {this.renderNav()}
         <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>

monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js

@@ -3,7 +3,7 @@ import {Col, Button} from 'react-bootstrap';
 import '../../styles/Collapse.scss';
 import '../../styles/report/AttackReport.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import {faCircle, faEye, faEyeSlash, faRadiation} from '@fortawesome/free-solid-svg-icons';
 
 import ReportHeader, {ReportTypes} from './common/ReportHeader';
 import {ScanStatus} from '../attack/techniques/Helpers';
@@ -65,6 +65,17 @@ class AttackReport extends React.Component {
     }
   }
 
+  static getStatusIcon(tech_id, techniques){
+    switch (techniques[tech_id].status){
+      case ScanStatus.SCANNED:
+        return <FontAwesomeIcon icon={faEye} className={"technique-status-icon"}/>;
+      case ScanStatus.USED:
+        return <FontAwesomeIcon icon={faRadiation} className={"technique-status-icon"}/>;
+      default:
+        return <FontAwesomeIcon icon={faEyeSlash} className={"technique-status-icon"}/>;
+    }
+  }
+
   renderLegend() {
     return (<div id='header' className='row justify-content-between attack-legend'>
       <Col xs={4}>

monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js

@@ -32,7 +32,10 @@ class SelectedTechnique extends React.Component {
         <button className={classNames('btn-collapse',
                                       'selected-technique',
                                       AttackReport.getComponentClass(tech_id, this.state.techniques))}>
-          <span>{this.state.techniques[tech_id].title}</span>
+          <span>
+            {AttackReport.getStatusIcon(tech_id, this.state.techniques)}
+            {this.state.techniques[tech_id].title}
+          </span>
           <span>
             <a href={this.state.techniques[tech_id].link} target='_blank' className={'link-to-technique'}>
               <FontAwesomeIcon icon={faQuestionCircle}/>

monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js

@@ -34,7 +34,10 @@ class TechniqueDropdowns extends React.Component{
       <div key={tech_id} className={classNames('collapse-item', {'item--active': this.state.collapseOpen === tech_id})}>
         <button className={classNames('btn-collapse', AttackReport.getComponentClass(tech_id, this.state.techniques))}
                 onClick={() => this.onToggle(tech_id)}>
-          <span>{this.state.techniques[tech_id].title}</span>
+          <span>
+            {AttackReport.getStatusIcon(tech_id, this.state.techniques)}
+            {this.state.techniques[tech_id].title}
+          </span>
           <span>
             <a href={this.state.techniques[tech_id].link} target='_blank' className={'link-to-technique'}>
               <FontAwesomeIcon icon={faQuestionCircle}/>

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

@@ -26,12 +26,6 @@
   cursor: default;
 }
 
-.attack-report {
-  padding: 0 !important;
-  -webkit-box-shadow: none !important;
-  box-shadow: none !important;
-}
-
 .attack-report .padded{
   padding: 2em 2em 0 2em;
 }
@@ -53,7 +47,7 @@
 
 .attack-report .toggle-btn {
   padding: 0;
-  margin-bottom: 33px;
+  margin-bottom: 30px;
   margin-left: 6px;
   outline: none !important;
   font-size: 15px;
@@ -81,3 +75,8 @@
   transform: scaleX(-1);
   color: gray;
 }
+
+.technique-status-icon {
+  padding-right:5px;
+  margin-bottom: 1px;
+}