diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
index b2d1446b3..65707574e 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
@@ -22,7 +22,6 @@ class ReportPageComponent extends AuthComponent {
attackReport: {},
zeroTrustReport: {},
ransomwareReport: {},
- ransomwareTelemetry: {},
allMonkeysAreDead: false,
runStarted: true,
selectedSection: ReportPageComponent.selectReport(this.sections),
@@ -68,13 +67,6 @@ class ReportPageComponent extends AuthComponent {
ransomwareReport: res
});
});
- this.authFetch('/api/telemetry?telem_category=file_encryption')
- .then(res => res.json())
- .then(res => {
- this.setState({
- ransomwareTelemetry: res
- });
- });
}
}
@@ -167,7 +159,6 @@ class ReportPageComponent extends AuthComponent {
return (
);
}
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
index 2e437fab2..f4cced8c3 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/RansomwareReport.js
@@ -19,7 +19,7 @@ class RansomwareReport extends React.Component {
)
}
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/AttackSection.tsx b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/AttackSection.tsx
index bc20207c2..53f2e6a15 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/AttackSection.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/ransomware/AttackSection.tsx
@@ -1,6 +1,8 @@
-import React, {ReactElement} from 'react';
+import React, {ReactElement, ReactFragment, useEffect, useState} from 'react';
+import IslandHttpClient from '../../IslandHttpClient';
import {FileEncryptionTable, TableRow} from './FileEncryptionTable';
import NumberedReportSection from './NumberedReportSection';
+import LoadingIcon from '../../ui-components/LoadingIcon';
const ATTACK_DESCRIPTION = 'After the attacker or malware has propagated through your network, \
your data is at risk on any machine the attacker can access. It can be \
@@ -8,25 +10,38 @@ const ATTACK_DESCRIPTION = 'After the attacker or malware has propagated through
whatever way the attacker chooses.'
const HOSTNAME_REGEX = /^(.* - )?(\S+) :.*$/;
-function AttackSection({telemetry}: {telemetry: object}): ReactElement {
- let tableData = processTelemetry(telemetry);
- let body = (
- <>
- Infection Monkey has encrypted {tableData.length} files on your network:
-
- >
- );
+function AttackSection(): ReactElement {
+ const [tableData, setTableData] = useState(null);
+
+ useEffect(() => {
+ IslandHttpClient.get('/api/telemetry?telem_category=file_encryption')
+ .then(resp => setTableData(processTelemetry(resp.body)));
+ }, []);
+
+
+ if (tableData == null) {
+ return
+ }
return (
);
}
+function getBody(tableData): ReactFragment {
+ return (
+ <>
+ Infection Monkey has encrypted {tableData.length} files on your network:
+
+ >
+ );
+}
+
function processTelemetry(telemetry): Array {
// Sort ascending so that newer telemetry records overwrite older ones.
sortTelemetry(telemetry);