Island: refactor ransomware report to improve readability and UI

This commit is contained in:
VakarisZ 2021-07-13 10:17:48 +03:00
parent 60cac3b287
commit b408c650dc
2 changed files with 16 additions and 10 deletions

View File

@ -5,6 +5,8 @@ import ReportLoader from './common/ReportLoader';
import pluralize from 'pluralize' import pluralize from 'pluralize'
import FileEncryptionTable from './ransomware/FileEncryptionTable'; import FileEncryptionTable from './ransomware/FileEncryptionTable';
import '../../styles/pages/report/RansomwareReport.scss';
class RansomwareReport extends React.Component { class RansomwareReport extends React.Component {
constructor(props) { constructor(props) {
@ -28,24 +30,25 @@ class RansomwareReport extends React.Component {
return ( return (
<div> <div>
{this.getExploitationStats()} {this.getExploitationStats()}
<FileEncryptionTable tableData={this.state.report.encrypted_files_table} />
</div> </div>
) )
} }
getExploitationStats() { getExploitationStats() {
return ( return (
<div> <>
<p> <p>
This report shows information about the ransomware simulation run by Infection Monkey. This report shows information about the ransomware simulation run by Infection Monkey.
</p> </p>
<FileEncryptionTable tableData={this.state.report.encrypted_files_table} /> <div>
<div> <h3 className={'report-section-header'}>
<h2> Propagation
Propagation </h3>
</h2> {this.getScannedVsExploitedStats()}
{this.getScannedVsExploitedStats()} {this.getExploitationStatsPerExploit()}
{this.getExploitationStatsPerExploit()} </div>
</div> </>
) )
} }
@ -89,7 +92,7 @@ class RansomwareReport extends React.Component {
} }
return ( return (
<div className='report-page'> <div className={`report-page ransomware-report`}>
<ReportHeader report_type={ReportTypes.ransomware}/> <ReportHeader report_type={ReportTypes.ransomware}/>
<hr/> <hr/>
{content} {content}

View File

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