Replace pie-chart with progress bar

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"

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 = (<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
+                  className="label label-warning">{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.
+                  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>
-                </Col>
+                <div className="center-block text-center" style={{margin: '10px'}}>
-                <Col lg={2}>
+                  <Line style={{width: '300px', marginRight: '5px'}} percent={exploitPercentage} strokeWidth="4" trailWidth="4"
-                  <div style={{marginBottom: '20px'}}>
+                        strokeColor="#d9534f" trailColor="#f0ad4e"/>
-                    <ScannedBreachedChart scanned={this.state.report.glance.scanned.length}
+                  <b>{Math.round(exploitPercentage)}% of machines exploited</b>
-                                          exploited={this.state.report.glance.exploited.length}/>
                 </div>
-                </Col>
               </div>
               <p>
                 From the attacker's point of view, the network looks like this:

monkey_island/cc/ui/src/components/report-components/ScannedBreachedChart.js

@@ -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;