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

This commit is contained in:
VakarisZ 2019-11-26 18:53:34 +02:00
parent 4932ddd3d3
commit 0f98a80c2b
18 changed files with 133 additions and 57 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,6 @@
import React from 'react'; 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 Toggle from 'react-toggle';
import {OverlayTrigger, Tooltip} from 'react-bootstrap'; import {OverlayTrigger, Tooltip} from 'react-bootstrap';
import download from 'downloadjs' import download from 'downloadjs'
@ -273,7 +274,7 @@ class PreviewPaneComponent extends AuthComponent {
<div className="preview-pane"> <div className="preview-pane">
{!info ? {!info ?
<span> <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 Select an item on the map for a detailed look
</span> </span>
: :

View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import {Col, Modal} from 'react-bootstrap'; import {Col, Modal} from 'react-bootstrap';
import {Link} from 'react-router-dom'; 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 InfMapPreviewPaneComponent from 'components/map/preview-pane/InfMapPreviewPane';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {options, edgeGroupToColor} from 'components/map/MapOptions'; import {options, edgeGroupToColor} from 'components/map/MapOptions';
@ -157,13 +158,13 @@ class MapPageComponent extends AuthComponent {
<Col xs={8}> <Col xs={8}>
<div className="map-legend"> <div className="map-legend">
<b>Legend: </b> <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> <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> <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> <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>
{this.renderTelemetryConsole()} {this.renderTelemetryConsole()}
<div style={{height: '80vh'}}> <div style={{height: '80vh'}}>
@ -180,7 +181,7 @@ class MapPageComponent extends AuthComponent {
Telemetry</Link> Telemetry</Link>
<button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right" <button onClick={() => this.setState({showKillDialog: true})} className="btn btn-danger pull-right"
style={{'width': '48%'}}> style={{'width': '48%'}}>
<Icon name="stop-circle" style={{'marginRight': '0.5em'}}/> <FontAwesomeIcon icon={faStopCircle} style={{'marginRight': '0.5em'}}/>
Kill All Monkeys Kill All Monkeys
</button> </button>
</div> </div>

View File

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

View File

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

View File

@ -15,6 +15,9 @@ import ReportLoader from './common/ReportLoader';
import SecurityIssuesGlance from './common/SecurityIssuesGlance'; import SecurityIssuesGlance from './common/SecurityIssuesGlance';
import PrintReportButton from './common/PrintReportButton'; 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'); let guardicoreLogoImage = require('../../images/guardicore-logo.png');
@ -384,13 +387,13 @@ class ReportPageComponent extends AuthComponent {
</p> </p>
<div className="map-legend"> <div className="map-legend">
<b>Legend: </b> <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> <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> <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> <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>
<div style={{position: 'relative', height: '80vh'}}> <div style={{position: 'relative', height: '80vh'}}>
<ReactiveGraph graph={this.state.graph} options={options}/> <ReactiveGraph graph={this.state.graph} options={options}/>
@ -429,7 +432,7 @@ class ReportPageComponent extends AuthComponent {
</p> </p>
<div className="map-legend"> <div className="map-legend">
<b>Legend: </b> <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> style={{color: '#aeaeae'}}> | </b>
</div> </div>
<div> <div>

View File

@ -1,5 +1,7 @@
import React from "react"; import React from "react";
import Collapse from '@kunukn/react-collapse'; 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 {Button} from 'react-bootstrap';
import AttackReport from '../AttackReport'; import AttackReport from '../AttackReport';
@ -34,7 +36,10 @@ class TechniqueDropdowns extends React.Component{
onClick={() => this.onToggle(tech_id)}> onClick={() => this.onToggle(tech_id)}>
<span>{this.state.techniques[tech_id].title}</span> <span>{this.state.techniques[tech_id].title}</span>
<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> </span>
</button> </button>
<Collapse <Collapse

View File

@ -3,6 +3,9 @@ import EventsModal from './EventsModal';
import {Badge, Button} from 'react-bootstrap'; import {Badge, Button} from 'react-bootstrap';
import * as PropTypes from 'prop-types'; 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 { export default class EventsButton extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -25,7 +28,7 @@ export default class EventsButton extends Component {
exportFilename={this.props.exportFilename}/> exportFilename={this.props.exportFilename}/>
<div className="text-center" style={{'display': 'grid'}}> <div className="text-center" style={{'display': 'grid'}}>
<Button className="btn btn-primary btn-lg" onClick={this.show}> <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> </Button>
</div> </div>
</Fragment>; </Fragment>;

View File

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

View File

@ -2,21 +2,24 @@ import React, {Component} from 'react';
import {statusToLabelType} from './StatusLabel'; import {statusToLabelType} from './StatusLabel';
import * as PropTypes from 'prop-types'; 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 = { 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 { export default class PillarLabel extends Component {
render() { render() {
const className = 'label ' + statusToLabelType[this.props.status]; 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>
} }
} }

View File

@ -13,7 +13,7 @@ const columns = [
{ {
Header: 'Status', id: 'status', Header: 'Status', id: 'status',
accessor: x => { 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 maxWidth: MAX_WIDTH_STATUS_COLUMN
}, },

View File

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

View File

@ -5,6 +5,9 @@ import React from 'react';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
import {Panel} from 'react-bootstrap'; 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 { export default class SinglePillarPrinciplesStatus extends AuthComponent {
render() { render() {
if (this.props.principlesStatus.length === 0) { if (this.props.principlesStatus.length === 0) {
@ -15,7 +18,7 @@ export default class SinglePillarPrinciplesStatus extends AuthComponent {
<Panel.Heading> <Panel.Heading>
<Panel.Title toggle> <Panel.Title toggle>
<h3 style={{textAlign: 'center', marginTop: '1px', marginBottom: '1px'}}> <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]}/> status={this.props.pillarsToStatuses[this.props.pillar]}/>
</h3> </h3>
</Panel.Title> </Panel.Title>

View File

@ -1,11 +1,14 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import * as PropTypes from 'prop-types'; 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 = { 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 = { export const statusToLabelType = {
@ -24,7 +27,7 @@ export default class StatusLabel extends Component {
return ( return (
<div className={'label ' + statusToLabelType[this.props.status]} style={{display: 'flow-root'}}> <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> </div>
); );
} }

View File

@ -1,5 +1,7 @@
import React from 'react'; 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 { class VersionComponent extends React.Component {
constructor(props) { constructor(props) {
@ -32,7 +34,7 @@ class VersionComponent extends React.Component {
<div> <div>
<b>Newer version available!</b> <b>Newer version available!</b>
<br/> <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> </div>
: :
undefined undefined