cc: Add ransomware report tab

monkey/monkey_island/cc/ui/src/components/Main.js

@@ -171,6 +171,9 @@ class AppComponent extends AuthComponent {
             {this.renderRoute('/report/zeroTrust',
               <StandardLayoutComponent component={ReportPage}
                                        completedSteps={this.state.completedSteps}/>)}
+            {this.renderRoute('/report/ransomware',
+              <StandardLayoutComponent component={ReportPage}
+                                       completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/license',
               <StandardLayoutComponent component={LicensePage}
                                        onStatusChange={this.updateStatus}

monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js

@@ -3,9 +3,10 @@ import {Route} from 'react-router-dom';
 import {Col, Nav} from 'react-bootstrap';
 import AuthComponent from '../AuthComponent';
 import MustRunMonkeyWarning from '../report-components/common/MustRunMonkeyWarning';
-import AttackReport from '../report-components/AttackReport'
+import AttackReport from '../report-components/AttackReport';
-import SecurityReport from '../report-components/SecurityReport'
+import RansomwareReport from '../report-components/RansomwareReport';
-import ZeroTrustReport from '../report-components/ZeroTrustReport'
+import SecurityReport from '../report-components/SecurityReport';
+import ZeroTrustReport from '../report-components/ZeroTrustReport';
 import {extractExecutionStatusFromServerResponse} from '../report-components/common/ExecutionStatus';
 import MonkeysStillAliveWarning from '../report-components/common/MonkeysStillAliveWarning';
 
@@ -14,17 +15,19 @@ class ReportPageComponent extends AuthComponent {
 
   constructor(props) {
     super(props);
-    this.sectionsOrder = ['security', 'zeroTrust', 'attack'];
+    this.sectionsOrder = ['security', 'zeroTrust', 'attack', 'ransomware'];
     this.state = {
       securityReport: {},
       attackReport: {},
       zeroTrustReport: {},
+      ransomwareReport: {},
       allMonkeysAreDead: false,
       runStarted: true,
       selectedSection: ReportPageComponent.selectReport(this.sectionsOrder),
       sections: [{key: 'security', title: 'Security report'},
         {key: 'zeroTrust', title: 'Zero trust report'},
-        {key: 'attack', title: 'ATT&CK report'}]
+        {key: 'attack', title: 'ATT&CK report'},
+        {key: 'ransomware', title: 'Ransomware report'}]
     };
   }
 
@@ -56,6 +59,16 @@ class ReportPageComponent extends AuthComponent {
       this.getZeroTrustReportFromServer().then((ztReport) => {
         this.setState({zeroTrustReport: ztReport})
       });
+      this.setState({
+        ransomwareReport: {'report': ''}
+      });
+      // this.authFetch('/api/report/ransomware')
+      //   .then(res => res.json())
+      //   .then(res => {
+      //     this.setState({
+      //       ransomwareReport: res
+      //     });
+      //   });
     }
   }
 
@@ -144,6 +157,8 @@ class ReportPageComponent extends AuthComponent {
         return (<AttackReport report={this.state.attackReport}/>);
       case 'zeroTrust':
         return (<ZeroTrustReport report={this.state.zeroTrustReport}/>);
+      case 'ransomware':
+        return (<RansomwareReport report={this.state.ransomwareReport}/>);
     }
   }
 

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import ReportHeader, {ReportTypes} from './common/ReportHeader';
+import ReportLoader from './common/ReportLoader';
+
+class RansomwareReport extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+        report: props.report
+    };
+  }
+
+  stillLoadingDataFromServer() {
+    return Object.keys(this.state.report).length === 0;
+  }
+
+  generateReportContent() {
+    return (
+        <div>
+          <p>
+            This report shows information about the ransomware simulation run by Infection Monkey.
+          </p>
+        </div>
+    )
+  }
+
+  render() {
+    let content = {};
+    if (this.stillLoadingDataFromServer()) {
+        content = <ReportLoader loading={true}/>;
+    } else {
+      content = <div> {this.generateReportContent()}</div>;
+    }
+    return (
+    <div className='report-page'>
+      <ReportHeader report_type={ReportTypes.ransomware}/>
+      <hr/>
+      {content}
+     </div>)
+  }
+}
+
+export default RansomwareReport;

monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js

@@ -8,6 +8,7 @@ export const ReportTypes = {
   zeroTrust: 'Zero Trust',
   security: 'Security',
   attack: 'ATT&CK',
+  ransomware: 'Ransomware',
   null: ''
 };