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] 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;
+}