Merge pull request #1317 from guardicore/ransomware_table_ui

Ransomware table UI

monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js

@@ -3,8 +3,12 @@ import React from 'react';
 import ReportHeader, {ReportTypes} from './common/ReportHeader';
 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 {
+
   stillLoadingDataFromServer() {
     return Object.keys(this.props.report).length === 0;
   }
@@ -13,6 +17,7 @@ class RansomwareReport extends React.Component {
     return (
       <div>
         {this.getExploitationStats()}
+        <FileEncryptionTable tableData={this.props.report.encrypted_files_table} />
       </div>
     )
   }
@@ -20,9 +25,9 @@ class RansomwareReport extends React.Component {
   getExploitationStats() {
     return (
       <div>
-        <h2>
+        <h3 className={'report-section-header'}>
           Propagation
-        </h2>
+        </h3>
         {this.getScannedVsExploitedStats()}
         {this.getExploitationStatsPerExploit()}
       </div>
@@ -69,7 +74,7 @@ class RansomwareReport extends React.Component {
     }
 
     return (
-    <div className='report-page'>
+    <div className={`report-page ransomware-report`}>
       <ReportHeader report_type={ReportTypes.ransomware}/>
       <hr/>
       {content}

monkey/monkey_island/cc/ui/src/components/report-components/ransomware/FileEncryptionTable.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import ReactTable from 'react-table';
+import {renderArray} from '../common/RenderArrays';
+
+
+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 className={'report-section-header'}>
+          File encryption
+      </h3>
+      <div className="data-table-container">
+        <ReactTable
+          columns={columns}
+          data={props.tableData}
+          showPagination={showPagination}
+          defaultPageSize={defaultPageSize}
+        />
+      </div>
+    </>
+  );
+}
+
+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)}
+    ]
+  }
+];
+
+function renderFileEncryptionStats(successful: number, total: number) {
+  let textClassName = ''
+
+  if(successful > 0) {
+    if (successful === total) {
+      textClassName = 'text-danger'
+    } else {
+      textClassName = 'text-warning'
+    }
+  } else {
+    textClassName = 'text-success'
+  }
+
+  return (<p className={textClassName}>{successful} out of {total}</p>);
+}
+
+
+export default FileEncryptionTable;

monkey/monkey_island/cc/ui/src/styles/pages/report/RansomwareReport.scss

@@ -0,0 +1,3 @@
+.ransomware-report .report-section-header {
+  margin-top: 40px;
+}