Island: refactor file encryption table to display how many files were encrypted

monkey/monkey_island/cc/ui/src/components/report-components/common/RenderBool.tsx

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

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;

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;