From 4a9062c480c94ea7106c5ddadbd62039275c8eb2 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Fri, 9 Jul 2021 16:34:25 +0300
Subject: [PATCH 1/8] Implements file encryption table in the ransomware report
 page

---
 .../report-components/RansomwareReport.js     | 22 +++++++-
 .../report-components/common/RenderBool.tsx   | 13 +++++
 .../ransomware/FileEncryptionTable.tsx        | 50 +++++++++++++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
index bb24dcaa1..a7a05db5a 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
@@ -3,10 +3,25 @@ import React from 'react';
 import ReportHeader, {ReportTypes} from './common/ReportHeader';
 import ReportLoader from './common/ReportLoader';
 import pluralize from 'pluralize'
+import FileEncryptionTable from './ransomware/FileEncryptionTable';
 
 class RansomwareReport extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+        report: props.report
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.report !== prevProps.report) {
+     this.setState({report: this.props.report})
+    }
+  }
+
   stillLoadingDataFromServer() {
-    return Object.keys(this.props.report).length === 0;
+    return Object.keys(this.state.report).length === 0;
   }
 
   generateReportContent() {
@@ -19,6 +34,11 @@ class RansomwareReport extends React.Component {
 
   getExploitationStats() {
     return (
+        <div>
+          <p>
+            This report shows information about the ransomware simulation run by Infection Monkey.
+          </p>
+          <FileEncryptionTable tableData={this.state.report.encrypted_files_table} />
       <div>
         <h2>
           Propagation
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx
new file mode 100644
index 000000000..70d527682
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+
+function renderBool(val: Boolean) {
+
+    if(val === true){
+      return (<p className={"text-success"}>Yes</p>);
+    } else {
+      return (<p className={"text-danger"}>No</p>);
+    }
+}
+
+export default renderBool;
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
new file mode 100644
index 000000000..306cb5cc3
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactTable from 'react-table';
+import {renderArray} from '../common/RenderArrays';
+import renderBool from "../common/RenderBool";
+
+
+const columns = [
+  {
+    Header: 'Ransomware info',
+    columns: [
+      {Header: 'Machine', id: 'machine', accessor: x => x.hostname},
+      {Header: 'Exploits', id: 'exploits', accessor: x => renderArray(x.exploits)},
+      {Header: 'Files got encrypted?', id: 'files_encrypted', accessor: x => renderBool(x.files_encrypted)}
+    ]
+  }
+];
+
+const pageSize = 10;
+
+type TableRow = {
+  exploits: [string],
+  files_encrypted: boolean,
+  hostname: string
+}
+
+type Props = {
+  tableData: [TableRow]
+}
+
+const FileEncryptionTable = (props: Props) => {
+  let defaultPageSize = props.tableData.length > pageSize ? pageSize : props.tableData.length;
+  let showPagination = props.tableData.length > pageSize;
+  return (
+    <>
+      <h3>
+          File encryption
+      </h3>
+      <div className="data-table-container">
+        <ReactTable
+          columns={columns}
+          data={props.tableData}
+          showPagination={showPagination}
+          defaultPageSize={defaultPageSize}
+        />
+      </div>
+    </>
+  );
+}
+
+export default FileEncryptionTable;

From 60cac3b287adcfd5a3604bad49616042e0e83021 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 13 Jul 2021 10:17:14 +0300
Subject: [PATCH 2/8] Island: refactor file encryption table to display how
 many files were encrypted

---
 .../report-components/common/RenderBool.tsx   | 13 -----
 .../common/RenderFileEncryptionStats.tsx      | 12 +++++
 .../ransomware/FileEncryptionTable.tsx        | 47 ++++++++++---------
 3 files changed, 38 insertions(+), 34 deletions(-)
 delete mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx
deleted file mode 100644
index 70d527682..000000000
--- a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-
-function renderBool(val: Boolean) {
-
-    if(val === true){
-      return (<p className={"text-success"}>Yes</p>);
-    } else {
-      return (<p className={"text-danger"}>No</p>);
-    }
-}
-
-export default renderBool;
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
new file mode 100644
index 000000000..7e5853c14
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+
+function renderFileEncryptionStats(successful: number, total: number) {
+  if(successful > 0){
+    return (<p className={"text-success"}>{successful} out of {total}</p>);
+  } else {
+    return (<p className={"text-danger"}>{successful} out of {total}</p>);
+  }
+}
+
+export default renderFileEncryptionStats;
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
index 306cb5cc3..8be659eab 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
@@ -1,38 +1,29 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import {renderArray} from '../common/RenderArrays';
-import renderBool from "../common/RenderBool";
+import renderFileEncryptionStats from "../common/renderFileEncryptionStats";
 
 
-const columns = [
-  {
-    Header: 'Ransomware info',
-    columns: [
-      {Header: 'Machine', id: 'machine', accessor: x => x.hostname},
-      {Header: 'Exploits', id: 'exploits', accessor: x => renderArray(x.exploits)},
-      {Header: 'Files got encrypted?', id: 'files_encrypted', accessor: x => renderBool(x.files_encrypted)}
-    ]
-  }
-];
-
-const pageSize = 10;
-
-type TableRow = {
-  exploits: [string],
-  files_encrypted: boolean,
-  hostname: string
-}
-
 type Props = {
   tableData: [TableRow]
 }
 
+type TableRow = {
+  exploits: [string],
+  total_attempts: number,
+  successful_encryptions: number,
+  hostname: string
+}
+
+const pageSize = 10;
+
+
 const FileEncryptionTable = (props: Props) => {
   let defaultPageSize = props.tableData.length > pageSize ? pageSize : props.tableData.length;
   let showPagination = props.tableData.length > pageSize;
   return (
     <>
-      <h3>
+      <h3 className={'report-section-header'}>
           File encryption
       </h3>
       <div className="data-table-container">
@@ -47,4 +38,18 @@ const FileEncryptionTable = (props: Props) => {
   );
 }
 
+const columns = [
+  {
+    Header: 'Ransomware info',
+    columns: [
+      {Header: 'Machine', id: 'machine', accessor: x => x.hostname},
+      {Header: 'Exploits', id: 'exploits', accessor: x => renderArray(x.exploits)},
+      {Header: 'Files encrypted',
+        id: 'files_encrypted',
+        accessor: x => renderFileEncryptionStats(x.successful_encryptions, x.total_attempts)}
+    ]
+  }
+];
+
+
 export default FileEncryptionTable;

From b408c650dc597f26ef6b6bae1ad560a6da27dead Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 13 Jul 2021 10:17:48 +0300
Subject: [PATCH 3/8] Island: refactor ransomware report to improve readability
 and UI

---
 .../report-components/RansomwareReport.js     | 23 +++++++++++--------
 .../styles/pages/report/RansomwareReport.scss |  3 +++
 2 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
index a7a05db5a..4dd4b6f39 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
@@ -5,6 +5,8 @@ import ReportLoader from './common/ReportLoader';
 import pluralize from 'pluralize'
 import FileEncryptionTable from './ransomware/FileEncryptionTable';
 
+import '../../styles/pages/report/RansomwareReport.scss';
+
 class RansomwareReport extends React.Component {
 
   constructor(props) {
@@ -28,24 +30,25 @@ class RansomwareReport extends React.Component {
     return (
       <div>
         {this.getExploitationStats()}
+        <FileEncryptionTable tableData={this.state.report.encrypted_files_table} />
       </div>
     )
   }
 
   getExploitationStats() {
     return (
-        <div>
+        <>
           <p>
             This report shows information about the ransomware simulation run by Infection Monkey.
           </p>
-          <FileEncryptionTable tableData={this.state.report.encrypted_files_table} />
-      <div>
-        <h2>
-          Propagation
-        </h2>
-        {this.getScannedVsExploitedStats()}
-        {this.getExploitationStatsPerExploit()}
-      </div>
+          <div>
+            <h3 className={'report-section-header'}>
+              Propagation
+            </h3>
+            {this.getScannedVsExploitedStats()}
+            {this.getExploitationStatsPerExploit()}
+          </div>
+        </>
     )
   }
 
@@ -89,7 +92,7 @@ class RansomwareReport extends React.Component {
     }
 
     return (
-    <div className='report-page'>
+    <div className={`report-page ransomware-report`}>
       <ReportHeader report_type={ReportTypes.ransomware}/>
       <hr/>
       {content}
diff --git a/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
new file mode 100644
index 000000000..4d55ef8df
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss
@@ -0,0 +1,3 @@
+.ransomware-report .report-section-header {
+  margin-top: 40px;
+}

From 3e2cf1d69c934d266428ced6b4876d13ef1ac4e6 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 13 Jul 2021 15:33:50 +0300
Subject: [PATCH 4/8] Island: refactor RansomwareReport.js to not use the props
 in state initialization

---
 .../report-components/RansomwareReport.js       | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
index 4dd4b6f39..adda1f2e0 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
@@ -9,28 +9,15 @@ import '../../styles/pages/report/RansomwareReport.scss';
 
 class RansomwareReport extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-        report: props.report
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.report !== prevProps.report) {
-     this.setState({report: this.props.report})
-    }
-  }
-
   stillLoadingDataFromServer() {
-    return Object.keys(this.state.report).length === 0;
+    return Object.keys(this.props.report).length === 0;
   }
 
   generateReportContent() {
     return (
       <div>
         {this.getExploitationStats()}
-        <FileEncryptionTable tableData={this.state.report.encrypted_files_table} />
+        <FileEncryptionTable tableData={this.props.report.encrypted_files_table} />
       </div>
     )
   }

From 1f1b9bf2fcca6fadc565c05b6ad978daaa847670 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Tue, 13 Jul 2021 11:21:56 -0400
Subject: [PATCH 5/8] Island: Deduplicate <p> in renderFileEncryptionStats()

---
 .../common/RenderFileEncryptionStats.tsx                 | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
index 7e5853c14..fb6c612a9 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
@@ -2,11 +2,14 @@ import React from 'react';
 
 
 function renderFileEncryptionStats(successful: number, total: number) {
-  if(successful > 0){
-    return (<p className={"text-success"}>{successful} out of {total}</p>);
+  let textClassName = ""
+  if(successful > 0) {
+    textClassName = "text-success"
   } else {
-    return (<p className={"text-danger"}>{successful} out of {total}</p>);
+    textClassName = "text-danger"
   }
+  
+  return (<p className={textClassName}>{successful} out of {total}</p>);
 }
 
 export default renderFileEncryptionStats;

From 77754cb4ff111231734225d4d119ceba9e611182 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Tue, 13 Jul 2021 11:23:48 -0400
Subject: [PATCH 6/8] Island: Remove superfluous description from ransomware
 report

---
 .../report-components/RansomwareReport.js     | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
index adda1f2e0..688d3cc67 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
@@ -24,18 +24,13 @@ class RansomwareReport extends React.Component {
 
   getExploitationStats() {
     return (
-        <>
-          <p>
-            This report shows information about the ransomware simulation run by Infection Monkey.
-          </p>
-          <div>
-            <h3 className={'report-section-header'}>
-              Propagation
-            </h3>
-            {this.getScannedVsExploitedStats()}
-            {this.getExploitationStatsPerExploit()}
-          </div>
-        </>
+      <div>
+        <h3 className={'report-section-header'}>
+          Propagation
+        </h3>
+        {this.getScannedVsExploitedStats()}
+        {this.getExploitationStatsPerExploit()}
+      </div>
     )
   }
 

From 5aa5facf1f58a0a2e063e352e84df4e5f86b4965 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Tue, 13 Jul 2021 11:26:07 -0400
Subject: [PATCH 7/8] Island: Move renderFileEncryptionStats to
 FileEncryptionTable.tsx

---
 .../common/RenderFileEncryptionStats.tsx          | 15 ---------------
 .../ransomware/FileEncryptionTable.tsx            | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 16 deletions(-)
 delete mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
deleted file mode 100644
index fb6c612a9..000000000
--- a/monkey/monkey_island/cc/ui/src/components/report-components/common/RenderFileEncryptionStats.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-
-function renderFileEncryptionStats(successful: number, total: number) {
-  let textClassName = ""
-  if(successful > 0) {
-    textClassName = "text-success"
-  } else {
-    textClassName = "text-danger"
-  }
-  
-  return (<p className={textClassName}>{successful} out of {total}</p>);
-}
-
-export default renderFileEncryptionStats;
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
index 8be659eab..270b214a0 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactTable from 'react-table';
 import {renderArray} from '../common/RenderArrays';
-import renderFileEncryptionStats from "../common/renderFileEncryptionStats";
 
 
 type Props = {
@@ -51,5 +50,17 @@ const columns = [
   }
 ];
 
+function renderFileEncryptionStats(successful: number, total: number) {
+  let textClassName = ''
+
+  if(successful > 0) {
+    textClassName = 'text-success'
+  } else {
+    textClassName = 'text-danger'
+  }
+
+  return (<p className={textClassName}>{successful} out of {total}</p>);
+}
+
 
 export default FileEncryptionTable;

From 50cb68776956f4131bab1282ee81f7354dec8c79 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Tue, 13 Jul 2021 12:09:47 -0400
Subject: [PATCH 8/8] Island: Change colors of ransomware table text

If some files were encrypted, warning text color should be used. If all
files were encrypted, danger text color should be used.
---
 .../report-components/ransomware/FileEncryptionTable.tsx  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
index 270b214a0..cfb9ab3f3 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx
@@ -54,9 +54,13 @@ function renderFileEncryptionStats(successful: number, total: number) {
   let textClassName = ''
 
   if(successful > 0) {
-    textClassName = 'text-success'
+    if (successful === total) {
+      textClassName = 'text-danger'
+    } else {
+      textClassName = 'text-warning'
+    }
   } else {
-    textClassName = 'text-danger'
+    textClassName = 'text-success'
   }
 
   return (<p className={textClassName}>{successful} out of {total}</p>);