p15670423
/
monkey
1
0
Fork 5
Code Issues Pull Requests 3 Projects Releases Wiki Activity

Style improvements to pass travis

This commit is contained in:
VakarisZ 2019-11-29 10:07:43 +02:00
parent aff66d8994
commit 4d68da2c15
5 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
View File

@ -1,7 +1,7 @@
import '../../styles/report/ReportPage.scss'; import '../../styles/report/ReportPage.scss';
import React from 'react'; import React from 'react';
import {Route} from "react-router-dom"; import {Route} from 'react-router-dom';
import {Col, Nav, NavItem} from 'react-bootstrap'; import {Col, Nav, NavItem} from 'react-bootstrap';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {edgeGroupToColor, options} from 'components/map/MapOptions'; 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 AttackReport from '../report-components/AttackReport'
import SecurityReport from '../report-components/SecurityReport' import SecurityReport from '../report-components/SecurityReport'
import ZeroTrustReport from '../report-components/ZeroTrustReport' import ZeroTrustReport from '../report-components/ZeroTrustReport'
import {extractExecutionStatusFromServerResponse} from "../report-components/common/ExecutionStatus"; import {extractExecutionStatusFromServerResponse} from '../report-components/common/ExecutionStatus';
import MonkeysStillAliveWarning from "../report-components/common/MonkeysStillAliveWarning"; import MonkeysStillAliveWarning from '../report-components/common/MonkeysStillAliveWarning';
class ReportPageComponent extends AuthComponent { class ReportPageComponent extends AuthComponent {
@ -110,10 +110,10 @@ class ReportPageComponent extends AuthComponent {
renderNav = () => { renderNav = () => {
return ( return (
<Route render={({history}) => ( <Route render={({history}) => (
<Nav bsStyle="tabs" justified <Nav bsStyle='tabs' justified
activeKey={this.state.selectedSection} activeKey={this.state.selectedSection}
onSelect={(key) => {this.setSelectedSection(key); history.push(key)}} onSelect={(key) => {this.setSelectedSection(key); history.push(key)}}
className={"report-nav"}> className={'report-nav'}>
{this.state.sections.map(section => this.renderNavButton(section))} {this.state.sections.map(section => this.renderNavButton(section))}
</Nav>)}/>) </Nav>)}/>)
}; };
@ -147,7 +147,7 @@ class ReportPageComponent extends AuthComponent {
} }
return ( return (
<Col xs={12} lg={10}> <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()} {this.renderNav()}
<MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/> <MonkeysStillAliveWarning allMonkeysAreDead={this.state.allMonkeysAreDead}/>
<div style={{'fontSize': '1.2em'}}> <div style={{'fontSize': '1.2em'}}>

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

@ -71,7 +71,7 @@ class AttackReport extends React.Component {
super(props); super(props);
this.state = { this.state = {
selectedTechnique: false, selectedTechnique: false,
collapseOpen: '', collapseOpen: ''
}; };
if (typeof this.props.report.schema !== 'undefined' && typeof this.props.report.techniques !== 'undefined'){ if (typeof this.props.report.schema !== 'undefined' && typeof this.props.report.techniques !== 'undefined'){
this.state['schema'] = this.props.report['schema']; this.state['schema'] = this.props.report['schema'];
@ -87,7 +87,6 @@ class AttackReport extends React.Component {
} }
onTechniqueSelect = (technique, value, mapped = false) => { onTechniqueSelect = (technique, value, mapped = false) => {
//this.setState({selectedTechnique: technique});
let selectedTechnique = this.getTechniqueByTitle(technique); let selectedTechnique = this.getTechniqueByTitle(technique);
if (selectedTechnique === false){ if (selectedTechnique === false){
return; return;
@ -107,17 +106,17 @@ 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={4}> <Col xs={4}>
<FontAwesomeIcon icon={faCircle} className="icon-default"/> <FontAwesomeIcon icon={faCircle} className='icon-default'/>
<span> - Not scanned</span> <span> - Not scanned</span>
</Col> </Col>
<Col xs={4}> <Col xs={4}>
<FontAwesomeIcon icon={faCircle} className="icon-info"/> <FontAwesomeIcon icon={faCircle} className='icon-info'/>
<span> - Scanned</span> <span> - Scanned</span>
</Col> </Col>
<Col xs={4}> <Col xs={4}>
<FontAwesomeIcon icon={faCircle} className="icon-danger"/> <FontAwesomeIcon icon={faCircle} className='icon-danger'/>
<span> - Used</span> <span> - Used</span>
</Col> </Col>
</div>) </div>)
@ -125,12 +124,12 @@ class AttackReport extends React.Component {
generateReportContent() { generateReportContent() {
return ( return (
<div id="attack" className="attack-report report-page"> <div id='attack' className='attack-report report-page'>
<ReportHeader report_type={ReportTypes.attack}/> <ReportHeader report_type={ReportTypes.attack}/>
<hr/> <hr/>
<p> <p>
This report shows information about 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. techniques used by Infection Monkey.
</p> </p>
{this.renderLegend()} {this.renderLegend()}
@ -147,6 +146,7 @@ class AttackReport extends React.Component {
getTechniqueByTitle(title){ getTechniqueByTitle(title){
for (let tech_id in this.state.techniques){ for (let tech_id in this.state.techniques){
if (! this.state.techniques.hasOwnProperty(tech_id)) {return false;}
let technique = this.state.techniques[tech_id]; let technique = this.state.techniques[tech_id];
if (technique.title === title){ if (technique.title === title){
technique['tech_id'] = tech_id; technique['tech_id'] = tech_id;
@ -159,8 +159,10 @@ class AttackReport extends React.Component {
static addLinksToTechniques(schema, techniques){ static addLinksToTechniques(schema, techniques){
schema = schema.properties; schema = schema.properties;
for(let type in schema){ for(let type in schema){
if (! schema.hasOwnProperty(type)) {return false;}
let typeTechniques = schema[type].properties; let typeTechniques = schema[type].properties;
for(let tech_id in typeTechniques){ for(let tech_id in typeTechniques){
if (! typeTechniques.hasOwnProperty(tech_id)) {return false;}
if (typeTechniques[tech_id] !== undefined){ if (typeTechniques[tech_id] !== undefined){
techniques[tech_id]['link'] = typeTechniques[tech_id].link techniques[tech_id]['link'] = typeTechniques[tech_id].link
} }

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

@ -1,9 +1,9 @@
import React from "react"; import React from 'react';
import Collapse from '@kunukn/react-collapse'; import Collapse from '@kunukn/react-collapse';
import AttackReport from '../AttackReport'; import AttackReport from '../AttackReport';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons"; import {faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
const classNames = require('classnames'); const classNames = require('classnames');
@ -34,13 +34,13 @@ class SelectedTechnique extends React.Component {
AttackReport.getComponentClass(tech_id, this.state.techniques))}> AttackReport.getComponentClass(tech_id, this.state.techniques))}>
<span>{this.state.techniques[tech_id].title}</span> <span>{this.state.techniques[tech_id].title}</span>
<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}/> <FontAwesomeIcon icon={faQuestionCircle}/>
</a> </a>
</span> </span>
</button> </button>
<Collapse <Collapse
className="collapse-comp" className='collapse-comp'
isOpen={true} isOpen={true}
render={() => { render={() => {
return (<div className={`content ${tech_id}`}> return (<div className={`content ${tech_id}`}>
@ -55,15 +55,15 @@ class SelectedTechnique extends React.Component {
let content = {}; let content = {};
let selectedTechId = this.state.selectedTechnique; let selectedTechId = this.state.selectedTechnique;
if(selectedTechId === false){ if(selectedTechId === false){
content = "None. Select a technique from ATT&CK matrix above."; content = 'None. Select a technique from ATT&CK matrix above.';
} else { } else {
content = this.getSelectedTechniqueComponent(selectedTechId) content = this.getSelectedTechniqueComponent(selectedTechId)
} }
return ( return (
<div> <div>
<h3 className="selected-technique-title">Selected technique:</h3> <h3 className='selected-technique-title'>Selected technique:</h3>
<section className="attack-report selected-technique"> <section className='attack-report selected-technique'>
{content} {content}
</section> </section>
</div> </div>

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

@ -1,4 +1,4 @@
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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faQuestionCircle, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons' import { faQuestionCircle, faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
@ -36,14 +36,14 @@ 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>
<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}/> <FontAwesomeIcon icon={faQuestionCircle}/>
</a> </a>
<FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/> <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>
</span> </span>
</button> </button>
<Collapse <Collapse
className="collapse-comp" className='collapse-comp'
isOpen={this.state.collapseOpen === tech_id} isOpen={this.state.collapseOpen === tech_id}
onChange={({collapseState}) => { onChange={({collapseState}) => {
this.setState({tech_id: collapseState}); this.setState({tech_id: collapseState});
@ -73,18 +73,18 @@ class TechniqueDropdowns extends React.Component{
let listClass = ''; let listClass = '';
let content = []; let content = [];
if (this.state.techniquesHidden){ if (this.state.techniquesHidden){
listClass = "hidden-list" listClass = 'hidden-list'
} else { } else {
Object.keys(this.state.techniques).forEach((tech_id) => { Object.keys(this.state.techniques).forEach((tech_id) => {
content.push(this.getTechniqueCollapse(tech_id)) content.push(this.getTechniqueCollapse(tech_id))
}); });
} }
return ( return (
<div className="dropdown-list"> <div className='dropdown-list'>
<Button bsStyle="link" <Button bsStyle='link'
bsSize="large" bsSize='large'
onClick={() => this.toggleTechList()}> onClick={() => this.toggleTechList()}>
{this.state.techniquesHidden ? "Show all" : "Hide all"} {this.state.techniquesHidden ? 'Show all' : 'Hide all'}
</Button> </Button>
<section className={`attack-report ${listClass}`}>{content}</section> <section className={`attack-report ${listClass}`}>{content}</section>
</div>); </div>);

10
monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js
View File

@ -19,7 +19,7 @@ class CheckboxComponent extends React.PureComponent {
*/ */
constructor(props) { constructor(props) {
super(props); super(props);
if (this.props.hasOwnProperty("status")){ if (this.props.hasOwnProperty('status')){
this.status = this.props.status; this.status = this.props.status;
} else { } else {
this.status = false this.status = false
@ -79,11 +79,11 @@ class CheckboxComponent extends React.PureComponent {
<div <div
className={cl} className={cl}
onClick={this.state.necessary ? void (0) : this.toggleChecked}> onClick={this.state.necessary ? void (0) : this.toggleChecked}>
<input className="ui ui-checkbox" <input className='ui ui-checkbox'
type="checkbox" value={this.state.checked} type='checkbox' value={this.state.checked}
name={this.props.name}/> name={this.props.name}/>
<label className="text">{this.props.children}</label> <label className='text'>{this.props.children}</label>
<div className="ui-btn-ping" onTransitionEnd={this.stopAnimation}></div> <div className='ui-btn-ping' onTransitionEnd={this.stopAnimation}></div>
</div> </div>
) )
} }