Island UI: alter ransomware report to contain a section describing manual executions

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

@@ -6,6 +6,7 @@ import FileEncryptionTable from './ransomware/FileEncryptionTable';
 import LateralMovement from './ransomware/LateralMovement';
 
 import '../../styles/pages/report/RansomwareReport.scss';
+import BreachSection from './ransomware/BreachSection';
 
 class RansomwareReport extends React.Component {
 
@@ -16,6 +17,7 @@ class RansomwareReport extends React.Component {
   generateReportContent() {
     return (
       <div>
+        <BreachSection/>
         <LateralMovement propagationStats={this.props.report.propagation_stats} />
         <FileEncryptionTable tableData={this.props.report.encrypted_files_table} />
       </div>

monkey/monkey_island/cc/ui/src/components/report-components/common/RenderArrays.js

@@ -1,8 +1,34 @@
 import React from 'react';
 
-export let renderArray = function (val) {
-    return <>{val.map(x => <div key={x}>{x}</div>)}</>;
+export let renderArray = function (val, className='') {
+    return <>{val.map(x => <div key={x} className={className}>{x}</div>)}</>;
 };
 export let renderIpAddresses = function (val) {
-    return <div>{renderArray(val.ip_addresses)} {(val.domain_name ? ' ('.concat(val.domain_name, ')') : '')} </div>;
+    return <div>
+      {renderArray(val.ip_addresses, 'ip-address')} {(val.domain_name ? ' ('.concat(val.domain_name, ')') : '')}
+    </div>;
 };
+
+export let renderLimitedArray = function (array,
+                                          limit,
+                                          className='',
+                                          separator=',') {
+  let elements = [];
+  if(array.length < limit){
+    limit = array.length;
+  }
+  for(let i = 0; i < limit; i++){
+    let element = '';
+    if(i !== 0) {
+      element = (<>{separator} {array[i]}</>);
+    } else {
+      element = (<>{array[i]}</>);
+    }
+    elements.push(<div className={className}>{element}</div>);
+  }
+  let remainder = array.length - limit;
+  if(remainder > 0){
+    elements.push(<div className={className}>&nbsp;and {remainder} more</div>);
+  }
+  return elements
+}

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

@@ -0,0 +1,49 @@
+import React, {useEffect, useState} from "react";
+import IslandHttpClient from "../../IslandHttpClient";
+import NumberedReportSection from "./NumberedReportSection";
+import LoadingIcon from "../../ui-components/LoadingIcon";
+import {renderLimitedArray} from "../common/RenderArrays";
+
+function BreachSection() {
+  const [machines, setMachines] = useState(null);
+  let description = 'Ransomware attacks start after machines in the internal network get compromised. ' +
+    'The initial compromise was simulated by running monkeys manually.';
+
+  useEffect(() => {
+    IslandHttpClient.get('/api/exploitations/manual')
+      .then(resp => setMachines(resp.body['manual_exploitations']));
+  }, []);
+
+  if(machines !== null){
+    let body = getBreachSectionBody(machines);
+    return (<NumberedReportSection index={1} title={'Breach'} description={description} body={body}/>)
+  } else {
+    return <LoadingIcon />
+  }
+}
+
+function getBreachSectionBody(machines) {
+    let machineList = [];
+    for(let i = 0; i < machines.length; i++){
+      machineList.push(<li>{getMachine(machines[i])}</li>);
+    }
+    return (
+      <div className={'ransomware-breach-section'}>
+        <p>Ransomware attack started from these machines on the network:</p>
+        <ul>
+          {machineList}
+        </ul>
+      </div>
+    )
+  }
+
+function getMachine(machine) {
+  return (
+    <>
+    <b>{machine['hostname']}</b>
+      ({renderLimitedArray(machine['ip_addresses'], 2, 'ip-address')}) at {machine['start_time']}
+    </>
+  )
+}
+
+export default BreachSection;

monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss

@@ -18,3 +18,7 @@
     margin-top: .28em;
     margin-right: .5em;
 }
+
+.ransomware-breach-section .ip-address {
+  display: inline-block;
+}