p17860254
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved overall style of attack report, made all table fields have word wrapping, navigation made sticky

This commit is contained in:
VakarisZ 2019-11-28 09:25:14 +02:00
parent 5dbf0d39a6
commit 28bb6356c2
6 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,3 +1,5 @@
import '../../styles/report/ReportPage.scss';
import React from 'react'; import React from 'react';
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';
@ -97,7 +99,7 @@ class ReportPageComponent extends AuthComponent {
renderNav = () => { renderNav = () => {
return (<Nav bsStyle="tabs" justified return (<Nav bsStyle="tabs" justified
activeKey={this.state.selectedSection} onSelect={this.setSelectedSection} activeKey={this.state.selectedSection} onSelect={this.setSelectedSection}
style={{'marginBottom': '2em'}}> className={"report-nav"}>
{this.state.sections.map(section => <NavItem key={section.key} eventKey={section.key}>{section.title}</NavItem>)} {this.state.sections.map(section => <NavItem key={section.key} eventKey={section.key}>{section.title}</NavItem>)}
</Nav>) </Nav>)
}; };

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

@ -1,12 +1,12 @@
import React from 'react'; 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons'; import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons';
import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons'; import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons';
import ReportHeader, {ReportTypes} from './common/ReportHeader';
import {ScanStatus} from '../attack/techniques/Helpers'; import {ScanStatus} from '../attack/techniques/Helpers';
import Matrix from './attack/ReportMatrix'; import Matrix from './attack/ReportMatrix';
import SelectedTechnique from './attack/SelectedTechnique'; import SelectedTechnique from './attack/SelectedTechnique';
@ -130,22 +130,21 @@ class AttackReport extends React.Component {
generateReportContent() { generateReportContent() {
return ( return (
<div id="attack" className="attack-report"> <div id="attack" className="attack-report report-page">
<h3> <ReportHeader report_type={ReportTypes.attack}/>
ATT&CK report <hr/>
</h3> <p>
<p> This report shows information about ATT&CK techniques used by Infection Monkey.
This report shows information about ATT&CK techniques used by Infection Monkey. </p>
</p> {this.renderLegend()}
{this.renderLegend()} <Matrix techniques={this.state.techniques} schema={this.state.schema} onClick={this.onTechniqueSelect}/>
<Matrix techniques={this.state.techniques} schema={this.state.schema} onClick={this.onTechniqueSelect}/> <SelectedTechnique techComponents={techComponents}
<SelectedTechnique techComponents={techComponents} techniques={this.state.techniques}
techniques={this.state.techniques} selected={this.state.selectedTechnique}/>
selected={this.state.selectedTechnique}/> <TechniqueDropdowns techniques={this.state.techniques}
<TechniqueDropdowns techniques={this.state.techniques} techComponents={techComponents}/>
techComponents={techComponents}/> <br/>
<br/> </div>
</div>
) )
} }

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

@ -62,7 +62,7 @@ class SelectedTechnique extends React.Component {
return ( return (
<div> <div>
<h4 className="selected-technique-title">Selected technique:</h4> <h3 className="selected-technique-title">Selected technique:</h3>
<section className="attack-report selected-technique"> <section className="attack-report selected-technique">
{content} {content}
</section> </section>

1
monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js
View File

@ -7,6 +7,7 @@ let monkeyLogoImage = require('../../../images/monkey-icon.svg');
export const ReportTypes = { export const ReportTypes = {
zeroTrust: 'Zero Trust', zeroTrust: 'Zero Trust',
security: 'Security', security: 'Security',
attack: 'Attack',
null: '' null: ''
}; };

15
monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
View File

@ -25,3 +25,18 @@
.attack-report .selected-technique { .attack-report .selected-technique {
cursor: default; cursor: default;
} }
.attack-report {
padding: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.attack-report .padded{
padding: 2em 2em 0 2em;
}
.ReactTable .rt-td{
white-space: pre-line !important;
word-wrap: break-word;
}

11
monkey/monkey_island/cc/ui/src/styles/report/ReportPage.scss Normal file
View File

@ -0,0 +1,11 @@
.report-nav {
margin-bottom: 2em !important;
position: sticky;
top: 0;
z-index: 1000000;
background-color: #ffffff;
}
.report-nav > li > a{
height: 50px !important;
}