forked from p15670423/monkey
Style improvements to pass travis
This commit is contained in:
parent
aff66d8994
commit
4d68da2c15
|
@ -1,7 +1,7 @@
|
|||
import '../../styles/report/ReportPage.scss';
|
||||
|
||||
import React from 'react';
|
||||
import {Route} from "react-router-dom";
|
||||
import {Route} from 'react-router-dom';
|
||||
import {Col, Nav, NavItem} from 'react-bootstrap';
|
||||
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
|
||||
import {edgeGroupToColor, options} from 'components/map/MapOptions';
|
||||
|
@ -10,8 +10,8 @@ import MustRunMonkeyWarning from '../report-components/common/MustRunMonkeyWarni
|
|||
import AttackReport from '../report-components/AttackReport'
|
||||
import SecurityReport from '../report-components/SecurityReport'
|
||||
import ZeroTrustReport from '../report-components/ZeroTrustReport'
|
||||
import {extractExecutionStatusFromServerResponse} from "../report-components/common/ExecutionStatus";
|
||||
import MonkeysStillAliveWarning from "../report-components/common/MonkeysStillAliveWarning";
|
||||
import {extractExecutionStatusFromServerResponse} from '../report-components/common/ExecutionStatus';
|
||||
import MonkeysStillAliveWarning from '../report-components/common/MonkeysStillAliveWarning';
|
||||
|
||||
|
||||
class ReportPageComponent extends AuthComponent {
|
||||
|
@ -110,10 +110,10 @@ class ReportPageComponent extends AuthComponent {
|
|||
renderNav = () => {
|
||||
return (
|
||||
<Route render={({history}) => (
|
||||
<Nav bsStyle="tabs" justified
|
||||
<Nav bsStyle='tabs' justified
|
||||
activeKey={this.state.selectedSection}
|
||||
onSelect={(key) => {this.setSelectedSection(key); history.push(key)}}
|
||||
className={"report-nav"}>
|
||||
className={'report-nav'}>
|
||||
{this.state.sections.map(section => this.renderNavButton(section))}
|
||||
</Nav>)}/>)
|
||||
};
|
||||
|
@ -147,7 +147,7 @@ class ReportPageComponent extends AuthComponent {
|
|||
}
|
||||
return (
|
||||
<Col xs={12} lg={10}>
|
||||
<h1 className="page-title no-print">4. Security Reports</h1>
|
||||
<h1 className='page-title no-print'>4. Security Reports</h1>
|
||||
{this.renderNav()}
|
||||
<MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
|
||||
<div style={{'fontSize': '1.2em'}}>
|
||||
|
|
|
@ -71,7 +71,7 @@ class AttackReport extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
selectedTechnique: false,
|
||||
collapseOpen: '',
|
||||
collapseOpen: ''
|
||||
};
|
||||
if (typeof this.props.report.schema !== 'undefined' && typeof this.props.report.techniques !== 'undefined'){
|
||||
this.state['schema'] = this.props.report['schema'];
|
||||
|
@ -87,7 +87,6 @@ class AttackReport extends React.Component {
|
|||
}
|
||||
|
||||
onTechniqueSelect = (technique, value, mapped = false) => {
|
||||
//this.setState({selectedTechnique: technique});
|
||||
let selectedTechnique = this.getTechniqueByTitle(technique);
|
||||
if (selectedTechnique === false){
|
||||
return;
|
||||
|
@ -107,17 +106,17 @@ class AttackReport extends React.Component {
|
|||
}
|
||||
|
||||
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={4}>
|
||||
<FontAwesomeIcon icon={faCircle} className="icon-default"/>
|
||||
<FontAwesomeIcon icon={faCircle} className='icon-default'/>
|
||||
<span> - Not scanned</span>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<FontAwesomeIcon icon={faCircle} className="icon-info"/>
|
||||
<FontAwesomeIcon icon={faCircle} className='icon-info'/>
|
||||
<span> - Scanned</span>
|
||||
</Col>
|
||||
<Col xs={4}>
|
||||
<FontAwesomeIcon icon={faCircle} className="icon-danger"/>
|
||||
<FontAwesomeIcon icon={faCircle} className='icon-danger'/>
|
||||
<span> - Used</span>
|
||||
</Col>
|
||||
</div>)
|
||||
|
@ -125,12 +124,12 @@ class AttackReport extends React.Component {
|
|||
|
||||
generateReportContent() {
|
||||
return (
|
||||
<div id="attack" className="attack-report report-page">
|
||||
<div id='attack' className='attack-report report-page'>
|
||||
<ReportHeader report_type={ReportTypes.attack}/>
|
||||
<hr/>
|
||||
<p>
|
||||
This report shows information about
|
||||
<Button bsStyle={"link"} href={"https://attack.mitre.org/"} bsSize={"lg"} className={"attack-link"}>ATT&CK </Button>
|
||||
<Button bsStyle={'link'} href={'https://attack.mitre.org/'} bsSize={'lg'} className={'attack-link'}>ATT&CK </Button>
|
||||
techniques used by Infection Monkey.
|
||||
</p>
|
||||
{this.renderLegend()}
|
||||
|
@ -147,6 +146,7 @@ class AttackReport extends React.Component {
|
|||
|
||||
getTechniqueByTitle(title){
|
||||
for (let tech_id in this.state.techniques){
|
||||
if (! this.state.techniques.hasOwnProperty(tech_id)) {return false;}
|
||||
let technique = this.state.techniques[tech_id];
|
||||
if (technique.title === title){
|
||||
technique['tech_id'] = tech_id;
|
||||
|
@ -159,8 +159,10 @@ class AttackReport extends React.Component {
|
|||
static addLinksToTechniques(schema, techniques){
|
||||
schema = schema.properties;
|
||||
for(let type in schema){
|
||||
if (! schema.hasOwnProperty(type)) {return false;}
|
||||
let typeTechniques = schema[type].properties;
|
||||
for(let tech_id in typeTechniques){
|
||||
if (! typeTechniques.hasOwnProperty(tech_id)) {return false;}
|
||||
if (typeTechniques[tech_id] !== undefined){
|
||||
techniques[tech_id]['link'] = typeTechniques[tech_id].link
|
||||
}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React from "react";
|
||||
import React from 'react';
|
||||
import Collapse from '@kunukn/react-collapse';
|
||||
|
||||
import AttackReport from '../AttackReport';
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const classNames = require('classnames');
|
||||
|
||||
|
@ -34,13 +34,13 @@ class SelectedTechnique extends React.Component {
|
|||
AttackReport.getComponentClass(tech_id, this.state.techniques))}>
|
||||
<span>{this.state.techniques[tech_id].title}</span>
|
||||
<span>
|
||||
<a href={this.state.techniques[tech_id].link} target="_blank" className={"link-to-technique"}>
|
||||
<a href={this.state.techniques[tech_id].link} target='_blank' className={'link-to-technique'}>
|
||||
<FontAwesomeIcon icon={faQuestionCircle}/>
|
||||
</a>
|
||||
</span>
|
||||
</button>
|
||||
<Collapse
|
||||
className="collapse-comp"
|
||||
className='collapse-comp'
|
||||
isOpen={true}
|
||||
render={() => {
|
||||
return (<div className={`content ${tech_id}`}>
|
||||
|
@ -55,15 +55,15 @@ class SelectedTechnique extends React.Component {
|
|||
let content = {};
|
||||
let selectedTechId = this.state.selectedTechnique;
|
||||
if(selectedTechId === false){
|
||||
content = "None. Select a technique from ATT&CK matrix above.";
|
||||
content = 'None. Select a technique from ATT&CK matrix above.';
|
||||
} else {
|
||||
content = this.getSelectedTechniqueComponent(selectedTechId)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="selected-technique-title">Selected technique:</h3>
|
||||
<section className="attack-report selected-technique">
|
||||
<h3 className='selected-technique-title'>Selected technique:</h3>
|
||||
<section className='attack-report selected-technique'>
|
||||
{content}
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
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'
|
||||
|
@ -36,14 +36,14 @@ class TechniqueDropdowns extends React.Component{
|
|||
onClick={() => this.onToggle(tech_id)}>
|
||||
<span>{this.state.techniques[tech_id].title}</span>
|
||||
<span>
|
||||
<a href={this.state.techniques[tech_id].link} target="_blank" className={"link-to-technique"}>
|
||||
<a href={this.state.techniques[tech_id].link} target='_blank' className={'link-to-technique'}>
|
||||
<FontAwesomeIcon icon={faQuestionCircle}/>
|
||||
</a>
|
||||
<FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>
|
||||
</span>
|
||||
</button>
|
||||
<Collapse
|
||||
className="collapse-comp"
|
||||
className='collapse-comp'
|
||||
isOpen={this.state.collapseOpen === tech_id}
|
||||
onChange={({collapseState}) => {
|
||||
this.setState({tech_id: collapseState});
|
||||
|
@ -73,18 +73,18 @@ class TechniqueDropdowns extends React.Component{
|
|||
let listClass = '';
|
||||
let content = [];
|
||||
if (this.state.techniquesHidden){
|
||||
listClass = "hidden-list"
|
||||
listClass = 'hidden-list'
|
||||
} else {
|
||||
Object.keys(this.state.techniques).forEach((tech_id) => {
|
||||
content.push(this.getTechniqueCollapse(tech_id))
|
||||
});
|
||||
}
|
||||
return (
|
||||
<div className="dropdown-list">
|
||||
<Button bsStyle="link"
|
||||
bsSize="large"
|
||||
<div className='dropdown-list'>
|
||||
<Button bsStyle='link'
|
||||
bsSize='large'
|
||||
onClick={() => this.toggleTechList()}>
|
||||
{this.state.techniquesHidden ? "Show all" : "Hide all"}
|
||||
{this.state.techniquesHidden ? 'Show all' : 'Hide all'}
|
||||
</Button>
|
||||
<section className={`attack-report ${listClass}`}>{content}</section>
|
||||
</div>);
|
||||
|
|
|
@ -19,7 +19,7 @@ class CheckboxComponent extends React.PureComponent {
|
|||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (this.props.hasOwnProperty("status")){
|
||||
if (this.props.hasOwnProperty('status')){
|
||||
this.status = this.props.status;
|
||||
} else {
|
||||
this.status = false
|
||||
|
@ -79,11 +79,11 @@ class CheckboxComponent extends React.PureComponent {
|
|||
<div
|
||||
className={cl}
|
||||
onClick={this.state.necessary ? void (0) : this.toggleChecked}>
|
||||
<input className="ui ui-checkbox"
|
||||
type="checkbox" value={this.state.checked}
|
||||
<input className='ui ui-checkbox'
|
||||
type='checkbox' value={this.state.checked}
|
||||
name={this.props.name}/>
|
||||
<label className="text">{this.props.children}</label>
|
||||
<div className="ui-btn-ping" onTransitionEnd={this.stopAnimation}></div>
|
||||
<label className='text'>{this.props.children}</label>
|
||||
<div className='ui-btn-ping' onTransitionEnd={this.stopAnimation}></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue