Add scanned-exploited pie chart

Merged stolen passwords section
Styled tables' header

monkey_island/cc/ui/package.json

@@ -80,6 +80,7 @@
     "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,6 +5,7 @@ import ScannedServers from 'components/report-components/ScannedServers';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {options, edgeGroupToColor} from 'components/map/MapOptions';
 import StolenPasswords from 'components/report-components/StolenPasswords';
+import ScannedBreachedChart from 'components/report-components/ScannedBreachedChart';
 
 class ReportPageComponent extends React.Component {
   constructor(props) {
@@ -102,32 +103,38 @@ class ReportPageComponent extends React.Component {
                 A full report of the Monkeys activities follows.
               </p>
             </div>
-            <div id="network_overview">
+            <div id="glance">
               <h1>
-                Network Overview
+                At a Glance
               </h1>
+              <div>
+                <Col lg={10}>
                   <p>
                     {/* TODO: Replace 6,2 with data */}
                     During the current run, the Monkey discovered <span className="label label-info">6</span> machines and successfully breached <span className="label label-warning">2</span> of them.
+                    <br />
                     In addition, it attempted to exploit the rest, any 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>
+                </Col>
-                Detailed recommendations in the next part of the <a href="#recommendations">report</a>.
+                <Col lg={2}>
-                <h4>Breached Servers</h4>
+                  <div style={{marginBottom: '20px'}}>
+                    <ScannedBreachedChart />
+                  </div>
+                </Col>
+              </div>
+              <div style={{marginBottom: '20px'}}>
                 <BreachedServers data={this.state.report.exploited} />
               </div>
-              <div>
+              <div style={{marginBottom: '20px'}}>
-                <h4>Scanned Servers</h4>
                 <ScannedServers data={this.state.report.scanned} />
                 {/* TODO: Add table of scanned servers */}
               </div>
-            </div>
+              <div>
-            <div id="passwords">
-              <h1>
-                Stolen Credentials
-              </h1>
                 <StolenPasswords data={this.stolen_passwords} />
               </div>
+            </div>
             <div id="recommendations">
               <h1>
                 Recommendations

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

@@ -9,9 +9,14 @@ let renderArray = function(val) {
 };
 
 const columns = [
+  {
+    Header: 'Breached Servers',
+    columns: [
       {Header: 'Machine', accessor: 'label'},
       {Header: 'IP Addresses', id: 'ip_addresses', accessor: x => renderArray(x.ip_addresses)},
       {Header: 'Exploits', id: 'exploits', accessor: x => renderArray(x.exploits)}
+      ]
+  }
 ];
 
 const pageSize = 10;

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

@@ -0,0 +1,49 @@
+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: 4, color: '#f0ad4e'},
+      {label: 'Exploited', value: 2, 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;

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

@@ -9,10 +9,15 @@ let renderArray = function(val) {
 };
 
 const columns = [
+  {
+    Header: 'Scanned Servers',
+    columns: [
       { Header: 'Machine', accessor: 'label'},
       { Header: 'IP Addresses', id: 'ip_addresses', accessor: x => renderArray(x.ip_addresses)},
       { Header: 'Accessible From', id: 'accessible_from_nodes', accessor: x => renderArray(x.accessible_from_nodes)},
       { Header: 'Services', id: 'services', accessor: x => renderArray(x.services)}
+    ]
+  }
 ];
 
 const pageSize = 10;

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

@@ -2,10 +2,15 @@ import React from 'react';
 import ReactTable from 'react-table'
 
 const columns = [
+  {
+    Header: 'Stolen Credentials',
+    columns: [
       { Header: 'Username', accessor: 'username'},
       { Header: 'Password/Hash', accessor: 'password'},
       { Header: 'Type', accessor: 'type'},
       { Header: 'Origin', accessor: 'origin'}
+    ]
+  }
 ];
 
 const pageSize = 10;