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

Solves https://github.com/guardicore/monkey/issues/635

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>

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
+        <p>
-          columns={columns}
+          The Monkey successfully breached <span
-          data={this.props.data}
+          className="label label-danger">{this.props.data.length}</span> {Pluralize('machines', this.props.data.length)}:
-          showPagination={showPagination}
+        </p>
-          defaultPageSize={defaultPageSize}
+        <div className="data-table-container">
-        />
+          <ReactTable
-      </div>
+            columns={columns}
+            data={this.props.data}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
+        </div>
+      </>
     );
   }
 }

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
+        <p>
-          columns={columns}
+          The Monkey performed <span
-          data={pbaMachines}
+          className="label label-danger">{howManyPBAs}</span> post-breach {Pluralize('actions', howManyPBAs)} on <span
-          showPagination={showPagination}
+          className="label label-warning">{pbaMachines.length}</span> {Pluralize('machines', pbaMachines.length)}:
-          defaultPageSize={defaultPageSize}
+        </p>
-          SubComponent={row => {
+        <div className="data-table-container">
-            return renderDetails(row.original.pba_results);
+          <ReactTable
-          }}
+            columns={columns}
-        />
+            data={pbaMachines}
-      </div>
+            showPagination={showPagination}
-
+            defaultPageSize={defaultPageSize}
+            SubComponent={row => {
+              return renderDetails(row.original.pba_results);
+            }}
+          />
+        </div>
+      </>
     );
   }
 }

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
+        <p>
-          columns={columns}
+          The Monkey discovered <span
-          data={this.props.data}
+          className="label label-danger">{howManyScannedServices}</span> open {Pluralize('services', howManyScannedServices)} on <span
-          showPagination={showPagination}
+          className="label label-warning">{howManyScannedMachines}</span> {Pluralize('machines', howManyScannedMachines)}:
-          defaultPageSize={defaultPageSize}
+        </p>
-        />
+        <div className="data-table-container">
-      </div>
+          <ReactTable
+            columns={columns}
+            data={this.props.data}
+            showPagination={showPagination}
+            defaultPageSize={defaultPageSize}
+          />
+        </div>
+      </>
     );
   }
 }