From c1f52ee994a41493848a0f8289c4450a05d0389e Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Mon, 11 May 2020 22:36:38 +0300
Subject: [PATCH] Added a short summary sentence over each table in the
 security report

Solves https://github.com/guardicore/monkey/issues/635
---
 .../report-components/SecurityReport.js       | 17 ++++++----
 .../security/BreachedServers.js               | 23 ++++++++-----
 .../report-components/security/PostBreach.js  | 32 ++++++++++++-------
 .../security/ScannedServers.js                | 30 ++++++++++++-----
 4 files changed, 68 insertions(+), 34 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
index e25b7f126..d6891b5bb 100644
--- 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}/>
-        </div>
-        <div style={{marginBottom: '20px'}}>
-          <PostBreach data={this.state.report.glance.scanned}/>
-        </div>
+
         <div style={{marginBottom: '20px'}}>
           <ScannedServers data={this.state.report.glance.scanned}/>
         </div>
+
+        <div style={{marginBottom: '20px'}}>
+          <BreachedServers data={this.state.report.glance.exploited}/>
+        </div>
+
+        <div style={{marginBottom: '20px'}}>
+          <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
index 4eeb1f971..1b2efcd06 100644
--- 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
index b0fe5fa9e..2aa772db5 100644
--- 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
index 7a4495da3..f68415a3a 100644
--- 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>
+      </>
     );
   }
 }