diff --git a/monkey_island/cc/ui/package.json b/monkey_island/cc/ui/package.json index 537982386..5ee2e5389 100644 --- a/monkey_island/cc/ui/package.json +++ b/monkey_island/cc/ui/package.json @@ -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" diff --git a/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey_island/cc/ui/src/components/pages/ReportPage.js index 4e34dd3a8..bb45f0d5c 100644 --- a/monkey_island/cc/ui/src/components/pages/ReportPage.js +++ b/monkey_island/cc/ui/src/components/pages/ReportPage.js @@ -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 = (

Generating Report...

); } else { + let exploitPercentage = + (100 * this.state.report.glance.exploited.length) / this.state.report.glance.scanned.length; + content = (
@@ -416,25 +419,22 @@ class ReportPageComponent extends React.Component { The Network from the Monkey's Eyes
- -

- The Monkey discovered {this.state.report.glance.scanned.length} machines and - successfully breached {this.state.report.glance.exploited.length} of them. -
- In addition, while attempting to exploit additional hosts , security software installed in the - network should have picked up the attack attempts and logged them. -
- Detailed recommendations in the next part of the report. -

- - -
- -
- +

+ The Monkey discovered {this.state.report.glance.scanned.length} machines and + successfully breached {this.state.report.glance.exploited.length} of them. +
+ In addition, while attempting to exploit additional hosts , security software installed in the + network should have picked up the attack attempts and logged them. +
+ Detailed recommendations in the next part of the report. +

+
+ + {Math.round(exploitPercentage)}% of machines exploited +

From the attacker's point of view, the network looks like this: diff --git a/monkey_island/cc/ui/src/components/report-components/ScannedBreachedChart.js b/monkey_island/cc/ui/src/components/report-components/ScannedBreachedChart.js deleted file mode 100644 index 413a19058..000000000 --- a/monkey_island/cc/ui/src/components/report-components/ScannedBreachedChart.js +++ /dev/null @@ -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 ( -

- -
- { - data.map((element, i) => ( -
- - {element.label} : {element.value} - -
- )) - } -
-
- ) - } -} - -export default ScannedBreachedChartComponent;