UI: Add lateral movement section to ransomware report

monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 import ReportHeader, {ReportTypes} from './common/ReportHeader';
 import ReportLoader from './common/ReportLoader';
-import pluralize from 'pluralize'
 import FileEncryptionTable from './ransomware/FileEncryptionTable';
+import LateralMovement from './ransomware/LateralMovement';
 
 import '../../styles/pages/report/RansomwareReport.scss';
 
@@ -16,55 +16,12 @@ class RansomwareReport extends React.Component {
   generateReportContent() {
     return (
       <div>
-        {this.getExploitationStats()}
+        <LateralMovement propagationStats={this.props.report.propagation_stats} />
         <FileEncryptionTable tableData={this.props.report.encrypted_files_table} />
       </div>
     )
   }
 
-  getExploitationStats() {
-    return (
-      <div>
-        <h3 className={'report-section-header'}>
-          Propagation
-        </h3>
-        {this.getScannedVsExploitedStats()}
-        {this.getExploitationStatsPerExploit()}
-      </div>
-    )
-  }
-
-  getScannedVsExploitedStats() {
-    let num_scanned = this.props.report.propagation_stats.num_scanned_nodes;
-    let num_exploited = this.props.report.propagation_stats.num_exploited_nodes;
-
-    return(
-      <p>
-        The Monkey discovered <span className='badge badge-warning'>{num_scanned}</span> machines
-        and successfully breached <span className='badge badge-danger'>{num_exploited}</span> of them.
-      </p>
-    )
-  }
-
-  getExploitationStatsPerExploit() {
-    let exploit_counts = this.props.report.propagation_stats.num_exploited_per_exploit;
-
-    let exploitation_details = [];
-
-    for (let exploit in exploit_counts) {
-      let count = exploit_counts[exploit];
-      exploitation_details.push(
-        <div>
-          <span className='badge badge-danger'>{count}</span>&nbsp;
-          {pluralize('machine', count)} {pluralize('was', count)} exploited by the&nbsp;
-          <span className='badge badge-danger'>{exploit}</span>.
-        </div>
-      );
-    }
-
-    return exploitation_details;
-  }
-
   render() {
     let content = {};
     if (this.stillLoadingDataFromServer()) {

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/LateralMovement.tsx

@@ -0,0 +1,60 @@
+import React, {ReactElement} from 'react';
+import NumberedReportSection from './NumberedReportSection';
+import pluralize from 'pluralize'
+
+const LATERAL_MOVEMENT_DESCRIPTION = 'After the initial breach, the attacker will begin the Lateral \
+                                      Movement phase of the attack. They will employ various \
+                                      techniques in order to compromise other systems in your \
+                                      network and encrypt as many files as possible.'
+
+type PropagationStats = {
+  num_scanned_nodes: number,
+  num_exploited_nodes: number,
+  num_exploited_per_exploit: Array<number>,
+}
+
+function LateralMovement({propagationStats}: {propagationStats: PropagationStats}): ReactElement {
+  let body = (
+    <>
+      {getScannedVsExploitedStats(propagationStats.num_scanned_nodes, propagationStats.num_exploited_nodes)}
+      {getExploitationStatsPerExploit(propagationStats.num_exploited_per_exploit)}
+    </>
+  )
+
+  return (
+    <NumberedReportSection
+      index={2}
+      title='Lateral Movement'
+      description={LATERAL_MOVEMENT_DESCRIPTION}
+      body={body}
+    />
+  );
+}
+
+function getScannedVsExploitedStats(num_scanned_nodes: number, num_exploited_nodes: number): ReactElement {
+  return(
+    <p>
+      The Monkey discovered <span className='badge badge-warning'>{num_scanned_nodes}</span> machines
+      and successfully breached <span className='badge badge-danger'>{num_exploited_nodes}</span> of them.
+    </p>
+  );
+}
+
+function getExploitationStatsPerExploit(num_exploited_per_exploit: Array<number>): Array<ReactElement> {
+  let exploitation_details = [];
+
+  for (let exploit in num_exploited_per_exploit) {
+    let count = num_exploited_per_exploit[exploit];
+    exploitation_details.push(
+      <div key={exploit}>
+        <span className='badge badge-danger'>{count}</span>&nbsp;
+        {pluralize('machine', count)} {pluralize('was', count)} exploited by the&nbsp;
+        <span className='badge badge-danger'>{exploit}</span>.
+      </div>
+    );
+  }
+
+  return exploitation_details;
+}
+
+export default LateralMovement;