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