Implements file encryption table in the ransomware report page

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

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;

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;