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

Replace pie-chart with progress bar

This commit is contained in:
Itay Mizeretz 2017-11-28 17:55:38 +02:00
parent 88ea57dc88
commit e3bd980a12
3 changed files with 21 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
monkey_island/cc/ui/package.json
View File

@ -67,6 +67,7 @@
"js-file-download": "^0.4.1",
"normalize.css": "^4.0.0",
"prop-types": "^15.5.10",
"rc-progress": "^2.2.5",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-copy-to-clipboard": "^5.0.0",
@ -80,7 +81,6 @@
"react-modal-dialog": "^4.0.7",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-svg-piechart": "^1.4.0",
"react-table": "^6.7.4",
"react-toggle": "^4.0.1",
"redux": "^3.7.2"

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

@ -5,8 +5,8 @@ import ScannedServers from 'components/report-components/ScannedServers';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
import {edgeGroupToColor, options} from 'components/map/MapOptions';
import StolenPasswords from 'components/report-components/StolenPasswords';
import ScannedBreachedChart from 'components/report-components/ScannedBreachedChart';
import CollapsibleWellComponent from 'components/report-components/CollapsibleWell';
import {Line} from 'rc-progress';
class ReportPageComponent extends React.Component {
@ -336,6 +336,9 @@ class ReportPageComponent extends React.Component {
if (Object.keys(this.state.report).length === 0) {
content = (<h1>Generating Report...</h1>);
} else {
let exploitPercentage =
(100 * this.state.report.glance.exploited.length) / this.state.report.glance.scanned.length;
content =
(
<div className="report-page">
@ -416,25 +419,22 @@ class ReportPageComponent extends React.Component {
The Network from the Monkey's Eyes
</h1>
<div>
<Col lg={10}>
<p>
The Monkey discovered <span
className="label label-info">{this.state.report.glance.scanned.length}</span> machines and
successfully breached <span
className="label label-warning">{this.state.report.glance.exploited.length}</span> of them.
<br/>
In addition, while attempting to exploit additional hosts , security software installed in the
network should have picked up the attack attempts and logged them.
<br/>
Detailed recommendations in the <a href="#recommendations">next part of the report</a>.
</p>
</Col>
<Col lg={2}>
<div style={{marginBottom: '20px'}}>
<ScannedBreachedChart scanned={this.state.report.glance.scanned.length}
exploited={this.state.report.glance.exploited.length}/>
</div>
</Col>
<p>
The Monkey discovered <span
className="label label-warning">{this.state.report.glance.scanned.length}</span> machines and
successfully breached <span
className="label label-danger">{this.state.report.glance.exploited.length}</span> of them.
<br/>
In addition, while attempting to exploit additional hosts , security software installed in the
network should have picked up the attack attempts and logged them.
<br/>
Detailed recommendations in the <a href="#recommendations">next part of the report</a>.
</p>
<div className="center-block text-center" style={{margin: '10px'}}>
<Line style={{width: '300px', marginRight: '5px'}} percent={exploitPercentage} strokeWidth="4" trailWidth="4"
strokeColor="#d9534f" trailColor="#f0ad4e"/>
<b>{Math.round(exploitPercentage)}% of machines exploited</b>
</div>
</div>
<p>
From the attacker's point of view, the network looks like this:

49
monkey_island/cc/ui/src/components/report-components/ScannedBreachedChart.js
View File

@ -1,49 +0,0 @@
import React from 'react'
import PieChart from 'react-svg-piechart'
class ScannedBreachedChartComponent extends React.Component {
constructor() {
super();
this.state = {
expandedSector: null
};
this.handleMouseEnterOnSector = this.handleMouseEnterOnSector.bind(this);
}
handleMouseEnterOnSector(sector) {
this.setState({expandedSector: sector});
}
render() {
const data = [
{label: 'Scanned', value: this.props.scanned - this.props.exploited, color: '#f0ad4e'},
{label: 'Exploited', value: this.props.exploited, color: '#d9534f'}
];
return (
<div>
<PieChart
data={ data }
expandedSector={this.state.expandedSector}
onSectorHover={this.handleMouseEnterOnSector}
sectorStrokeWidth={2}
/>
<div>
{
data.map((element, i) => (
<div key={i}>
<span style={{fontWeight: this.state.expandedSector === i ? 'bold' : null}}>
<i className="fa fa-md fa-circle" style={{color: element.color}} /> {element.label} : {element.value}
</span>
</div>
))
}
</div>
</div>
)
}
}
export default ScannedBreachedChartComponent;