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",
"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."
}
}

View File

@ -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>

View File

@ -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>)

View File

@ -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'

View File

@ -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>
:

View File

@ -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>

View File

@ -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>

View File

@ -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>
<span> - Dissabled</span>
<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>);

View File

@ -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>

View File

@ -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

View File

@ -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>;

View File

@ -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>
}
}

View File

@ -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',
'People': 'fa fa-user',
'Networks': 'fa fa-wifi',
'Workloads': 'fa fa-cloud',
'Devices': 'fa fa-laptop',
'Visibility & Analytics': 'fa fa-eye-slash',
'Automation & Orchestration': 'fa fa-cogs'
'Data': faDatabase,
'People': faUser,
'Networks': faWifi,
'Workloads': faCloud,
'Devices': faLaptop,
'Visibility & Analytics': faEyeSlash,
'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
className={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</div>
return <div className={className} style={{margin: '2px', display: 'inline-block'}}>
<FontAwesomeIcon icon={pillarToIcon[this.props.pillar]}/> {this.props.pillar}</div>
}
}

View File

@ -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
},

View File

@ -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>

View File

@ -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>

View File

@ -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',
'Verify': 'fa-exclamation-triangle',
'Failed': 'fa-bomb',
'Unexecuted': 'fa-question'
'Passed': faCheck,
'Verify': faExclamationTriangle,
'Failed': faBomb,
'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>
);
}

View File

@ -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