Added a short summary sentence over each table in the security report

Solves #635
guardicore · May 11, 2020 · c1f52ee · c1f52ee
1 parent 3fcc944
commit c1f52ee
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 31 deletions.
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/SecurityReport.js
@@ -407,18 +407,23 @@ class ReportPageComponent extends AuthComponent {
         <div style={{position: 'relative', height: '80vh'}}>
           <ReactiveGraph graph={this.state.graph} options={getOptions(this.state.nodeStateList)}/>
         </div>
+
         <div style={{marginBottom: '20px'}}>
-          <BreachedServers data={this.state.report.glance.exploited}/>
+          <ScannedServers data={this.state.report.glance.scanned}/>
         </div>
+
         <div style={{marginBottom: '20px'}}>
-          <PostBreach data={this.state.report.glance.scanned}/>
+          <BreachedServers data={this.state.report.glance.exploited}/>
         </div>
+
         <div style={{marginBottom: '20px'}}>
-          <ScannedServers data={this.state.report.glance.scanned}/>
+          <PostBreach data={this.state.report.glance.scanned}/>
         </div>
+
         <div style={{position: 'relative', height: '80vh'}}>
           {this.generateReportPthMap()}
         </div>
+
         <div style={{marginBottom: '20px'}}>
           <StolenPasswords data={this.state.report.glance.stolen_creds.concat(this.state.report.glance.ssh_keys)}/>
         </div>

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/security/BreachedServers.js b/monkey/monkey_island/cc/ui/src/components/report-components/security/BreachedServers.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactTable from 'react-table'
+import Pluralize from "pluralize";
 
 let renderArray = function (val) {
   return <div>{val.map(x => <div>{x}</div>)}</div>;
@@ -34,14 +35,20 @@ class BreachedServersComponent extends React.Component {
     let defaultPageSize = this.props.data.length > pageSize ? pageSize : this.props.data.length;
     let showPagination = this.props.data.length > pageSize;
     return (
-      <div className="data-table-container">
-        <ReactTable
-          columns={columns}
-          data={this.props.data}
-          showPagination={showPagination}
-          defaultPageSize={defaultPageSize}
-        />
-      </div>
+      <>
+        <p>
+          The Monkey successfully breached <span
+          className="label label-danger">{this.props.data.length}</span> {Pluralize('machines', this.props.data.length)}:
+        </p>
+        <div className="data-table-container">
+          <ReactTable
+            columns={columns}
+            data={this.props.data}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
+        </div>
+      </>
     );
   }
 }

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/security/PostBreach.js b/monkey/monkey_island/cc/ui/src/components/report-components/security/PostBreach.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactTable from 'react-table'
+import Pluralize from 'pluralize'
 
 let renderArray = function (val) {
   return <span>{val.map(x => <span key={x}> {x}</span>)}</span>;
@@ -62,19 +63,26 @@ class PostBreachComponent extends React.Component {
     });
     let defaultPageSize = pbaMachines.length > pageSize ? pageSize : pbaMachines.length;
     let showPagination = pbaMachines > pageSize;
+    const howManyPBAs = pbaMachines.reduce((accumulated, pbaMachine) => accumulated+pbaMachine["pba_results"].length,0)
     return (
-      <div className="data-table-container">
-        <ReactTable
-          columns={columns}
-          data={pbaMachines}
-          showPagination={showPagination}
-          defaultPageSize={defaultPageSize}
-          SubComponent={row => {
-            return renderDetails(row.original.pba_results);
-          }}
-        />
-      </div>
-
+      <>
+        <p>
+          The Monkey performed <span
+          className="label label-danger">{howManyPBAs}</span> post-breach {Pluralize('actions', howManyPBAs)} on <span
+          className="label label-warning">{pbaMachines.length}</span> {Pluralize('machines', pbaMachines.length)}:
+        </p>
+        <div className="data-table-container">
+          <ReactTable
+            columns={columns}
+            data={pbaMachines}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+            SubComponent={row => {
+              return renderDetails(row.original.pba_results);
+            }}
+          />
+        </div>
+      </>
     );
   }
 }

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/security/ScannedServers.js b/monkey/monkey_island/cc/ui/src/components/report-components/security/ScannedServers.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactTable from 'react-table'
+import Pluralize from 'pluralize'
 
 let renderArray = function (val) {
   return <div>{val.map(x => <div>{x}</div>)}</div>;
@@ -32,17 +33,30 @@ class ScannedServersComponent extends React.Component {
   }
 
   render() {
+
     let defaultPageSize = this.props.data.length > pageSize ? pageSize : this.props.data.length;
     let showPagination = this.props.data.length > pageSize;
+
+    const howManyScannedMachines = this.props.data.length;
+    const reducerFromScannedServerToServicesAmount = (accumulated, scannedServer) => accumulated + scannedServer["services"].length;
+    const howManyScannedServices = this.props.data.reduce(reducerFromScannedServerToServicesAmount, 0);
+
     return (
-      <div className="data-table-container">
-        <ReactTable
-          columns={columns}
-          data={this.props.data}
-          showPagination={showPagination}
-          defaultPageSize={defaultPageSize}
-        />
-      </div>
+      <>
+        <p>
+          The Monkey discovered <span
+          className="label label-danger">{howManyScannedServices}</span> open {Pluralize('services', howManyScannedServices)} on <span
+          className="label label-warning">{howManyScannedMachines}</span> {Pluralize('machines', howManyScannedMachines)}:
+        </p>
+        <div className="data-table-container">
+          <ReactTable
+            columns={columns}
+            data={this.props.data}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
+        </div>
+      </>
     );
   }
 }