Font awesome v5 migration and added links to mitre techniques. ZT diagram not yet working

monkey/monkey_island/cc/services/attack/attack_schema.py

@@ -12,6 +12,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1059",
                     "description": "Adversaries may use command-line interfaces to interact with systems "
                                    "and execute other software during the course of an operation.",
                 },
@@ -20,6 +21,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1129",
                     "description": "The Windows module loader can be instructed to load DLLs from arbitrary "
                                    "local paths and arbitrary Universal Naming Convention (UNC) network paths.",
                     "depends_on": ["T1078", "T1003"]
@@ -29,6 +31,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1106",
                     "description": "Adversary tools may directly use the Windows application "
                                    "programming interface (API) to execute binaries.",
                     "depends_on": ["T1210"]
@@ -38,6 +41,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1086",
                     "description": "Adversaries can use PowerShell to perform a number of actions,"
                                    " including discovery of information and execution of code.",
                 },
@@ -46,6 +50,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1064",
                     "description": "Adversaries may use scripts to aid in operations and "
                                    "perform multiple actions that would otherwise be manual.",
                 },
@@ -54,6 +59,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1035",
                     "description": "Adversaries may execute a binary, command, or script via a method "
                                    "that interacts with Windows services, such as the Service Control Manager.",
                     "depends_on": ["T1210"]
@@ -70,6 +76,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1197",
                     "description": "Adversaries may abuse BITS to download, execute, "
                                    "and even clean up after running malicious code."
                 },
@@ -78,6 +85,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1107",
                     "description": "Adversaries may remove files over the course of an intrusion "
                                    "to keep their footprint low or remove them at the end as part "
                                    "of the post-intrusion cleanup process."
@@ -87,6 +95,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1222",
                     "description": "Adversaries may modify file permissions/attributes to evade intended DACLs."
                 }
             }
@@ -101,6 +110,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1110",
                     "description": "Adversaries may use brute force techniques to attempt access to accounts "
                                    "when passwords are unknown or when password hashes are obtained.",
                     "depends_on": ["T1210", "T1021"]
@@ -110,6 +120,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1003",
                     "description": "Mapped with T1078 Valid Accounts because both techniques require"
                                    " same credential harvesting modules. "
                                    "Credential dumping is the process of obtaining account login and password "
@@ -122,6 +133,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1145",
                     "description": "Adversaries may gather private keys from compromised systems for use in "
                                    "authenticating to Remote Services like SSH or for use in decrypting "
                                    "other collected files such as email.",
@@ -139,6 +151,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1018",
                     "description": "Adversaries will likely attempt to get a listing of other systems by IP address, "
                                    "hostname, or other logical identifier on a network for lateral movement."
                 },
@@ -147,6 +160,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1082",
                     "depends_on": ["T1016", "T1005"],
                     "description": "An adversary may attempt to get detailed information about the "
                                    "operating system and hardware, including version, patches, hotfixes, "
@@ -157,6 +171,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1016",
                     "depends_on": ["T1005", "T1082"],
                     "description": "Adversaries will likely look for details about the network configuration "
                                    "and settings of systems they access or through information discovery"
@@ -174,6 +189,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1210",
                     "description": "Exploitation of a software vulnerability occurs when an adversary "
                                    "takes advantage of a programming error in a program, service, or within the "
                                    "operating system software or kernel itself to execute adversary-controlled code."
@@ -183,6 +199,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1075",
                     "description": "Pass the hash (PtH) is a method of authenticating as a user without "
                                    "having access to the user's cleartext password."
                 },
@@ -191,6 +208,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1105",
                     "description": "Files may be copied from one system to another to stage "
                                    "adversary tools or other files over the course of an operation."
                 },
@@ -199,6 +217,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1021",
                     "depends_on": ["T1110"],
                     "description": "An adversary may use Valid Accounts to log into a service"
                                    " specifically designed to accept remote connections."
@@ -215,6 +234,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": False,
+                    "link": "https://attack.mitre.org/techniques/T1005",
                     "depends_on": ["T1016", "T1082"],
                     "description": "Sensitive data can be collected from local system sources, such as the file system "
                                    "or databases of information residing on the system prior to Exfiltration."
@@ -231,6 +251,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1090",
                     "description": "A connection proxy is used to direct network traffic between systems "
                                    "or act as an intermediary for network communications."
                 },
@@ -239,6 +260,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1065",
                     "description": "Adversaries may conduct C2 communications over a non-standard "
                                    "port to bypass proxies and firewalls that have been improperly configured."
                 },
@@ -247,6 +269,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1188",
                     "description": "To disguise the source of malicious traffic, "
                                    "adversaries may chain together multiple proxies."
                 }
@@ -262,6 +285,7 @@ SCHEMA = {
                     "type": "bool",
                     "value": True,
                     "necessary": True,
+                    "link": "https://attack.mitre.org/techniques/T1041",
                     "description": "Data exfiltration is performed over the Command and Control channel."
                 }
             }

monkey/monkey_island/cc/ui/src/components/Main.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import {BrowserRouter as Router, NavLink, Redirect, Route} from 'react-router-dom';
 import {Col, Grid, Row} from 'react-bootstrap';
-import {Icon} from 'react-fa';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faUndo } from '@fortawesome/free-solid-svg-icons'
 
 import RunServerPage from 'components/pages/RunServerPage';
 import ConfigurePage from 'components/pages/ConfigurePage';
@@ -127,7 +128,7 @@ class AppComponent extends AuthComponent {
                     <span className="number">1.</span>
                     Run Monkey Island Server
                     {this.state.completedSteps.run_server ?
-                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      <FontAwesomeIcon icon={faCheck} className="pull-right checkmark text-success"/>
                       : ''}
                   </NavLink>
                 </li>
@@ -136,7 +137,7 @@ class AppComponent extends AuthComponent {
                     <span className="number">2.</span>
                     Run Monkey
                     {this.state.completedSteps.run_monkey ?
-                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      <FontAwesomeIcon icon={faCheck} className="pull-right checkmark text-success"/>
                       : ''}
                   </NavLink>
                 </li>
@@ -145,7 +146,7 @@ class AppComponent extends AuthComponent {
                     <span className="number">3.</span>
                     Infection Map
                     {this.state.completedSteps.infection_done ?
-                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      <FontAwesomeIcon icon={faCheck} className="pull-right checkmark text-success"/>
                       : ''}
                   </NavLink>
                 </li>
@@ -154,13 +155,13 @@ class AppComponent extends AuthComponent {
                     <span className="number">4.</span>
                     Security Reports
                     {this.state.completedSteps.report_done ?
-                      <Icon name="check" className="pull-right checkmark text-success"/>
+                      <FontAwesomeIcon icon={faCheck} className="pull-right checkmark text-success"/>
                       : ''}
                   </NavLink>
                 </li>
                 <li>
                   <NavLink to="/start-over">
-                    <span className="number"><i className="fa fa-undo" style={{'marginLeft': '-1px'}}/></span>
+                    <span className="number"><FontAwesomeIcon icon={faUndo} style={{'marginLeft': '-1px'}}/></span>
                     Start Over
                   </NavLink>
                 </li>

monkey/monkey_island/cc/ui/src/components/attack/MatrixComponent.js

@@ -7,6 +7,10 @@ import 'filepond/dist/filepond.min.css';
 import '../../styles/Tooltip.scss';
 import {Col} from 'react-bootstrap';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons';
+
 class MatrixComponent extends AuthComponent {
   constructor(props) {
     super(props);
@@ -87,15 +91,15 @@ class MatrixComponent extends AuthComponent {
     return (
       <div id="header" className="row justify-content-between attack-legend">
         <Col xs={4}>
-          <i className="fa fa-circle-thin icon-unchecked"></i>
+          <FontAwesomeIcon icon={faCircleThin} className="icon-unchecked"/>
           <span> - Dissabled</span>
         </Col>
         <Col xs={4}>
-          <i className="fa fa-circle icon-checked"></i>
+          <FontAwesomeIcon icon={faCircle} className="icon-checked"/>
           <span> - Enabled</span>
         </Col>
         <Col xs={4}>
-          <i className="fa fa-circle icon-mandatory"></i>
+          <FontAwesomeIcon icon={faCircle} className="icon-mandatory"/>
           <span> - Mandatory</span>
         </Col>
       </div>)

monkey/monkey_island/cc/ui/src/components/map/preview-pane/InfMapPreviewPane.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import {Icon} from 'react-fa';
 import Toggle from 'react-toggle';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import download from 'downloadjs'

monkey/monkey_island/cc/ui/src/components/map/preview-pane/PreviewPane.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import {Icon} from 'react-fa';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHandPointLeft } from '@fortawesome/free-solid-svg-icons'
 import Toggle from 'react-toggle';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import download from 'downloadjs'
@@ -273,7 +274,7 @@ class PreviewPaneComponent extends AuthComponent {
       <div className="preview-pane">
         {!info ?
           <span>
-            <Icon name="hand-o-left" style={{'marginRight': '0.5em'}}/>
+            <FontAwesomeIcon icon={faHandPointLeft} style={{'marginRight': '0.5em'}}/>
             Select an item on the map for a detailed look
           </span>
           :

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import {Col, Modal} from 'react-bootstrap';
 import {Link} from 'react-router-dom';
-import {Icon} from 'react-fa';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faStopCircle, faMinus } from '@fortawesome/free-solid-svg-icons'
 import InfMapPreviewPaneComponent from 'components/map/preview-pane/InfMapPreviewPane';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {options, edgeGroupToColor} from 'components/map/MapOptions';
@@ -157,13 +158,13 @@ class MapPageComponent extends AuthComponent {
         <Col xs={8}>
           <div className="map-legend">
             <b>Legend: </b>
-            <span>Exploit <i className="fa fa-lg fa-minus" style={{color: '#cc0200'}}/></span>
+            <span>Exploit <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#cc0200'}}/></span>
             <b style={{color: '#aeaeae'}}> | </b>
-            <span>Scan <i className="fa fa-lg fa-minus" style={{color: '#ff9900'}}/></span>
+            <span>Scan <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#ff9900'}}/></span>
             <b style={{color: '#aeaeae'}}> | </b>
-            <span>Tunnel <i className="fa fa-lg fa-minus" style={{color: '#0158aa'}}/></span>
+            <span>Tunnel <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#0158aa'}}/></span>
             <b style={{color: '#aeaeae'}}> | </b>
-            <span>Island Communication <i className="fa fa-lg fa-minus" style={{color: '#a9aaa9'}}/></span>
+            <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#a9aaa9'}}/></span>
           </div>
           {this.renderTelemetryConsole()}
           <div style={{height: '80vh'}}>
@@ -180,7 +181,7 @@ class MapPageComponent extends AuthComponent {
               Telemetry</Link>
             <button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right"
                     style={{'width': '48%'}}>
-              <Icon name="stop-circle" style={{'marginRight': '0.5em'}}/>
+              <FontAwesomeIcon icon={faStopCircle} style={{'marginRight': '0.5em'}}/>
               Kill All Monkeys
             </button>
           </div>

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

@@ -4,7 +4,8 @@ import {Button, Col, Well, Nav, NavItem, Collapse} from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import GridLoader from 'react-spinners/GridLoader';
 
-import {Icon} from 'react-fa';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClipboard, faCheck, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import {Link} from 'react-router-dom';
 import AuthComponent from '../AuthComponent';
 import AwsRunTable from '../run-monkey/AwsRunTable';
@@ -147,7 +148,7 @@ class RunMonkeyPageComponent extends AuthComponent {
         <div style={{'overflow': 'auto', 'padding': '0.5em'}}>
           <CopyToClipboard text={cmdText} className="pull-right btn-sm">
             <Button style={{margin: '-0.5em'}} title="Copy to Clipboard">
-              <Icon name="clipboard"/>
+              <FontAwesomeIcon icon={faClipboard}/>
             </Button>
           </CopyToClipboard>
           <code>{cmdText}</code>
@@ -170,9 +171,9 @@ class RunMonkeyPageComponent extends AuthComponent {
 
   static renderIconByState(state) {
     if (state === 'running') {
-      return <Icon name="check" className="text-success" style={{'marginLeft': '5px'}}/>
+      return <FontAwesomeIcon icon={faCheck} className="text-success" style={{'marginLeft': '5px'}}/>
     } else if (state === 'installing') {
-      return <Icon name="refresh" className="text-success" style={{'marginLeft': '5px'}}/>
+      return <FontAwesomeIcon icon={faRefresh} className="text-success" style={{'marginLeft': '5px'}}/>
     } else {
       return '';
     }
@@ -272,7 +273,7 @@ class RunMonkeyPageComponent extends AuthComponent {
             className={'btn btn-default btn-md center-block'}
             disabled={this.state.awsClicked}>
             Run on selected machines
-            {this.state.awsClicked ? <Icon name="refresh" className="text-success" style={{'marginLeft': '5px'}}/> : null}
+            {this.state.awsClicked ? <FontAwesomeIcon icon={faRefresh} className="text-success" style={{'marginLeft': '5px'}}/> : null}
           </button>
         </div>
       </div>

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

@@ -3,6 +3,9 @@ import React from 'react';
 import {Col} from 'react-bootstrap';
 import '../../styles/Collapse.scss';
 import '../../styles/report/AttackReport.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons';
 
 import {ScanStatus} from '../attack/techniques/Helpers';
 import Matrix from './attack/ReportMatrix';
@@ -67,8 +70,8 @@ class AttackReport extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      techniques: this.props.report['techniques'],
       schema: this.props.report['schema'],
+      techniques: AttackReport.addLinksToTechniques(this.props.report['schema'], this.props.report['techniques']),
       selectedTechnique: false,
       collapseOpen: '',
     };
@@ -76,7 +79,8 @@ class AttackReport extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.report !== prevProps.report) {
-     this.setState({ report: this.props.report })
+     this.setState({schema: this.props.report['schema'],
+      techniques: AttackReport.addLinksToTechniques(this.props.report['schema'], this.props.report['techniques'])})
     }
   }
 
@@ -103,19 +107,19 @@ class AttackReport extends React.Component {
   renderLegend() {
     return (<div id="header" className="row justify-content-between attack-legend">
       <Col xs={3}>
-          <i className="fa fa-circle-thin icon-unchecked"></i>
+        <FontAwesomeIcon icon={faCircleThin} className="icon-unchecked"/>
         <span> - Dissabled</span>
       </Col>
       <Col xs={3}>
-        <i className="fa fa-circle icon-default"></i>
+        <FontAwesomeIcon icon={faCircle} className="icon-default"/>
         <span> - Unscanned</span>
       </Col>
       <Col xs={3}>
-        <i className="fa fa-circle icon-info"></i>
+        <FontAwesomeIcon icon={faCircle} className="icon-info"/>
         <span> - Scanned</span>
       </Col>
       <Col xs={3}>
-        <i className="fa fa-circle icon-danger"></i>
+        <FontAwesomeIcon icon={faCircle} className="icon-danger"/>
         <span> - Used</span>
       </Col>
     </div>)
@@ -153,6 +157,19 @@ class AttackReport extends React.Component {
     return false;
   }
 
+  static addLinksToTechniques(schema, techniques){
+    schema = schema.properties;
+    for(let type in schema){
+      let typeTechniques = schema[type].properties;
+      for(let tech_id in typeTechniques){
+        if (typeTechniques[tech_id] !== undefined){
+          techniques[tech_id]['link'] = typeTechniques[tech_id].link
+        }
+      }
+    }
+    return techniques
+  }
+
   render() {
     if (Object.keys(this.state.techniques).length === 0 && this.state.runStarted) {
         return (<h1>No techniques were scanned</h1>);

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

@@ -15,6 +15,9 @@ import ReportLoader from './common/ReportLoader';
 import SecurityIssuesGlance from './common/SecurityIssuesGlance';
 import PrintReportButton from './common/PrintReportButton';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faMinus } from '@fortawesome/free-solid-svg-icons';
+
 let guardicoreLogoImage = require('../../images/guardicore-logo.png');
 
 
@@ -384,13 +387,13 @@ class ReportPageComponent extends AuthComponent {
         </p>
         <div className="map-legend">
           <b>Legend: </b>
-          <span>Exploit <i className="fa fa-lg fa-minus" style={{color: '#cc0200'}}/></span>
+          <span>Exploit <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#cc0200'}}/></span>
           <b style={{color: '#aeaeae'}}> | </b>
-          <span>Scan <i className="fa fa-lg fa-minus" style={{color: '#ff9900'}}/></span>
+          <span>Scan <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#ff9900'}}/></span>
           <b style={{color: '#aeaeae'}}> | </b>
-          <span>Tunnel <i className="fa fa-lg fa-minus" style={{color: '#0158aa'}}/></span>
+          <span>Tunnel <FontAwesomeIcon icon={faMinus} size="lg" style={{color: '#0158aa'}}/></span>
           <b style={{color: '#aeaeae'}}> | </b>
-          <span>Island Communication <i className="fa fa-lg fa-minus" style={{color: '#a9aaa9'}}/></span>
+          <span>Island Communication <FontAwesomeIcon icon={faMinus} size="lg"  style={{color: '#a9aaa9'}}/></span>
         </div>
         <div style={{position: 'relative', height: '80vh'}}>
           <ReactiveGraph graph={this.state.graph} options={options}/>
@@ -429,7 +432,7 @@ class ReportPageComponent extends AuthComponent {
         </p>
         <div className="map-legend">
           <b>Legend: </b>
-          <span>Access credentials <i className="fa fa-lg fa-minus" style={{color: '#0158aa'}}/></span> <b
+          <span>Access credentials <FontAwesomeIcon icon={faMinus} size="lg"  style={{color: '#0158aa'}}/></span> <b
           style={{color: '#aeaeae'}}> | </b>
         </div>
         <div>

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

@@ -1,5 +1,7 @@
 import React from "react";
 import Collapse from '@kunukn/react-collapse';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestionCircle, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 import {Button} from 'react-bootstrap';
 import AttackReport from '../AttackReport';
@@ -34,7 +36,10 @@ class TechniqueDropdowns extends React.Component{
                 onClick={() => this.onToggle(tech_id)}>
           <span>{this.state.techniques[tech_id].title}</span>
           <span>
-              <i className={classNames('fa', this.state.collapseOpen === tech_id ? 'fa-chevron-down' : 'fa-chevron-up')}></i>
+            <a href={this.state.techniques[tech_id].link} target="_blank">
+              <FontAwesomeIcon icon={faQuestionCircle}/>
+            </a>
+              <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>
           </span>
         </button>
         <Collapse

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/EventsButton.js

@@ -3,6 +3,9 @@ import EventsModal from './EventsModal';
 import {Badge, Button} from 'react-bootstrap';
 import * as PropTypes from 'prop-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faList } from '@fortawesome/free-solid-svg-icons';
+
 export default class EventsButton extends Component {
   constructor(props) {
     super(props);
@@ -25,7 +28,7 @@ export default class EventsButton extends Component {
                    exportFilename={this.props.exportFilename}/>
       <div className="text-center" style={{'display': 'grid'}}>
         <Button className="btn btn-primary btn-lg" onClick={this.show}>
-          <i className="fa fa-list"/> Events {this.createEventsAmountBadge()}
+          <FontAwesomeIcon icon={faList}/> Events {this.createEventsAmountBadge()}
         </Button>
       </div>
     </Fragment>;

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/ExportEventsButton.js

@@ -2,12 +2,15 @@ import React, {Component} from 'react';
 import {Button} from 'react-bootstrap';
 import * as PropTypes from 'prop-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+
 export default class ExportEventsButton extends Component {
   render() {
     return <Button className="btn btn-primary btn-lg"
                    onClick={this.props.onClick}
     >
-      <i className="fa fa-download"/> Export
+      <FontAwesomeIcon icon={faDownload}/> Export
     </Button>
   }
 }

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PillarLabel.js

@@ -2,21 +2,24 @@ import React, {Component} from 'react';
 import {statusToLabelType} from './StatusLabel';
 import * as PropTypes from 'prop-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDatabase, faUser, faWifi, faCloud, faLaptop, faEyeSlash, faCogs } from '@fortawesome/free-solid-svg-icons';
+
 const pillarToIcon = {
-  'Data': 'fa fa-database',
+  'Data': faDatabase,
-  'People': 'fa fa-user',
+  'People': faUser,
-  'Networks': 'fa fa-wifi',
+  'Networks': faWifi,
-  'Workloads': 'fa fa-cloud',
+  'Workloads': faCloud,
-  'Devices': 'fa fa-laptop',
+  'Devices': faLaptop,
-  'Visibility & Analytics': 'fa fa-eye-slash',
+  'Visibility & Analytics': faEyeSlash,
-  'Automation & Orchestration': 'fa fa-cogs'
+  'Automation & Orchestration': faCogs
 };
 
 export default class PillarLabel extends Component {
   render() {
     const className = 'label ' + statusToLabelType[this.props.status];
-    return <div className={className} style={{margin: '2px', display: 'inline-block'}}><i
+    return <div className={className} style={{margin: '2px', display: 'inline-block'}}>
-      className={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</div>
+      <FontAwesomeIcon icon={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</div>
   }
 }
 

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/PrinciplesStatusTable.js

@@ -13,7 +13,7 @@ const columns = [
       {
         Header: 'Status', id: 'status',
         accessor: x => {
-          return <StatusLabel status={x.status} size="fa-3x" showText={false}/>;
+          return <StatusLabel status={x.status} size="3x" showText={false}/>;
         },
         maxWidth: MAX_WIDTH_STATUS_COLUMN
       },

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/ReportLegend.js

@@ -4,6 +4,9 @@ import {ZeroTrustStatuses} from './ZeroTrustPillars';
 import {NavLink} from 'react-router-dom';
 import {Panel} from 'react-bootstrap';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+
 
 class ZeroTrustReportLegend extends Component {
   render() {
@@ -13,7 +16,7 @@ class ZeroTrustReportLegend extends Component {
       <Panel>
         <Panel.Heading>
           <Panel.Title toggle>
-            <h3><i className="fa fa-chevron-down"/> Legend</h3>
+            <h3><FontAwesomeIcon icon={faChevronDown} /> Legend</h3>
           </Panel.Title>
         </Panel.Heading>
         <Panel.Collapse>

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/SinglePillarPrinciplesStatus.js

@@ -5,6 +5,9 @@ import React from 'react';
 import * as PropTypes from 'prop-types';
 import {Panel} from 'react-bootstrap';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+
 export default class SinglePillarPrinciplesStatus extends AuthComponent {
   render() {
     if (this.props.principlesStatus.length === 0) {
@@ -15,7 +18,7 @@ export default class SinglePillarPrinciplesStatus extends AuthComponent {
           <Panel.Heading>
             <Panel.Title toggle>
               <h3 style={{textAlign: 'center', marginTop: '1px', marginBottom: '1px'}}>
-                <i className="fa fa-chevron-down"/> <PillarLabel pillar={this.props.pillar}
+                <FontAwesomeIcon icon={faChevronDown}/> <PillarLabel pillar={this.props.pillar}
                                                                  status={this.props.pillarsToStatuses[this.props.pillar]}/>
               </h3>
             </Panel.Title>

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/StatusLabel.js

@@ -1,11 +1,14 @@
 import React, {Component} from 'react';
 import * as PropTypes from 'prop-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck, faExclamationTriangle, faBomb, faQuestion } from '@fortawesome/free-solid-svg-icons';
+
 const statusToIcon = {
-  'Passed': 'fa-check',
+  'Passed': faCheck,
-  'Verify': 'fa-exclamation-triangle',
+  'Verify': faExclamationTriangle,
-  'Failed': 'fa-bomb',
+  'Failed': faBomb,
-  'Unexecuted': 'fa-question'
+  'Unexecuted': faQuestion
 };
 
 export const statusToLabelType = {
@@ -24,7 +27,7 @@ export default class StatusLabel extends Component {
 
     return (
       <div className={'label ' + statusToLabelType[this.props.status]} style={{display: 'flow-root'}}>
-        <i className={'fa ' + statusToIcon[this.props.status] + ' ' + this.props.size}/>{text}
+        <FontAwesomeIcon icon={statusToIcon[this.props.status]} size={this.props.size}/>{text}
       </div>
     );
   }

monkey/monkey_island/cc/ui/src/components/side-menu/VersionComponent.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import {Icon} from 'react-fa';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
 
 class VersionComponent extends React.Component {
   constructor(props) {
@@ -32,7 +34,7 @@ class VersionComponent extends React.Component {
             <div>
               <b>Newer version available!</b>
               <br/>
-              <b><a target="_blank" href={this.state.downloadLink}>Download here <Icon name="download"/></a></b>
+              <b><a target="_blank" href={this.state.downloadLink}>Download here <FontAwesomeIcon icon={faDownload}/></a></b>
             </div>
             :
             undefined