UI: Show loading icon while fetching file encryption telemetry

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 (
           <RansomwareReport
             report={this.state.ransomwareReport}
-            telemetry={this.state.ransomwareTelemetry}
           />
         );
     }

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

@@ -19,7 +19,7 @@ class RansomwareReport extends React.Component {
       <div>
         <BreachSection/>
         <LateralMovement propagationStats={this.props.report.propagation_stats} />
-        <AttackSection telemetry={this.props.telemetry} />
+        <AttackSection />
       </div>
     )
   }

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 {
+function AttackSection(): ReactElement {
-  let tableData = processTelemetry(telemetry);
+  const [tableData, setTableData] = useState(null);
-  let body = (
+
-    <>
+  useEffect(() => {
-      <p>Infection Monkey has encrypted <strong>{tableData.length} files</strong> on your network:</p>
+    IslandHttpClient.get('/api/telemetry?telem_category=file_encryption')
-      <FileEncryptionTable tableData={tableData} />
+      .then(resp => setTableData(processTelemetry(resp.body)));
-    </>
+  }, []);
-  );
+
+
+  if (tableData == null) {
+      return <LoadingIcon />
+  }
 
   return (
     <NumberedReportSection
       index={3}
       title='Attack'
       description={ATTACK_DESCRIPTION}
-      body={body}
+      body={getBody(tableData)}
     />
   );
 }
 
+function getBody(tableData): ReactFragment {
+  return (
+    <>
+      <p>Infection Monkey has encrypted <strong>{tableData.length} files</strong> on your network:</p>
+      <FileEncryptionTable tableData={tableData} />
+    </>
+  );
+}
+
 function processTelemetry(telemetry): Array<TableRow> {
   // Sort ascending so that newer telemetry records overwrite older ones.
   sortTelemetry(telemetry);