Unified style and look of two reports loading location, + added print buttom component.

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {Button, Col} from 'react-bootstrap';
 import BreachedServers from 'components/report-components/security/BreachedServers';
 import ScannedServers from 'components/report-components/security/ScannedServers';
@@ -17,6 +17,7 @@ import {MonkeysStillAliveWarning} from "../report-components/common/MonkeysStill
 import ReportLoader from "../report-components/common/ReportLoader";
 import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
 import {SecurityIssuesGlance} from "../report-components/common/SecurityIssuesGlance";
+import PrintReportButton from "../report-components/common/PrintReportButton";
 
 let guardicoreLogoImage = require('../../images/guardicore-logo.png');
 
@@ -71,15 +72,11 @@ class ReportPageComponent extends AuthComponent {
 
   render() {
     let content;
-    if (Object.keys(this.state.report).length === 0) {
+
     if (this.state.runStarted) {
-        content = (<ReportLoader loading={true}/>);
-      } else {
-        content =
-          <MustRunMonkeyWarning/>;
-      }
-    } else {
       content = this.generateReportContent();
+    } else {
+      content = <MustRunMonkeyWarning/>;
     }
 
     return (
@@ -92,6 +89,10 @@ class ReportPageComponent extends AuthComponent {
     );
   }
 
+  stillLoadingDataFromServer() {
+    return Object.keys(this.state.report).length === 0;
+  }
+
   updateMonkeysRunning = () => {
     return this.authFetch('/api')
       .then(res => res.json())
@@ -130,32 +131,38 @@ class ReportPageComponent extends AuthComponent {
   }
 
   generateReportContent() {
-    return (
+    let content;
+
+    if (this.stillLoadingDataFromServer()) {
+      console.log("still loading?: " + this.stillLoadingDataFromServer());
+      content = <ReportLoader loading={true}/>;
+    } else {
+      console.log("not still loading: " + this.stillLoadingDataFromServer());
+      content =
         <div>
-        {
-          // extract to print component.
-        }
-        <div className="text-center no-print" style={{marginBottom: '20px'}}>
-          <Button bsSize="large" onClick={() => {
-            print();
-          }}><i className="glyphicon glyphicon-print"/> Print Report</Button>
-        </div>
-        <div className="report-page">
-          <ReportHeader report_type={ReportTypes.security}/>
-          <hr/>
             {this.generateReportOverviewSection()}
             {this.generateReportFindingsSection()}
             {this.generateReportRecommendationsSection()}
             {this.generateReportGlanceSection()}
             {this.generateAttackSection()}
             {this.generateReportFooter()}
+        </div>;
+    }
+
+    return (
+      <Fragment>
+        <div style={{marginBottom: '20px'}}>
+          <PrintReportButton onClick={() => {print();}} />
         </div>
-        <div className="text-center no-print" style={{marginTop: '20px'}}>
-          <Button bsSize="large" onClick={() => {
-            print();
-          }}><i className="glyphicon glyphicon-print"/> Print Report</Button>
+        <div className="report-page">
+          <ReportHeader report_type={ReportTypes.security}/>
+          <hr/>
+          {content}
         </div>
+        <div style={{marginTop: '20px'}}>
+          <PrintReportButton onClick={() => {print();}} />
         </div>
+      </Fragment>
     );
   }
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import {Button, Col, Row, Grid} from 'react-bootstrap';
 import AuthComponent from '../AuthComponent';
 import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader";
@@ -10,6 +10,7 @@ import ReportLoader from "../report-components/common/ReportLoader";
 import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
 import {SecurityIssuesGlance} from "../report-components/common/SecurityIssuesGlance";
 import {StatusesToPillarsSummary} from "../report-components/zerotrust/StatusesToPillarsSummary";
+import PrintReportButton from "../report-components/common/PrintReportButton";
 
 class ZeroTrustReportPageComponent extends AuthComponent {
 
@@ -104,19 +105,19 @@ class ZeroTrustReportPageComponent extends AuthComponent {
     }
 
     return (
-      <div>
-        <div className="text-center no-print" style={{marginBottom: '20px'}}>
-          <Button bsSize="large" onClick={() => {
-            this.print();
-          }}><i className="glyphicon glyphicon-print"/> Print Report</Button>
+      <Fragment>
+        <div style={{marginBottom: '20px'}}>
+          <PrintReportButton onClick={() => {this.print();}} />
         </div>
-
         <div className="report-page">
           <ReportHeader report_type={ReportTypes.zeroTrust}/>
           <hr/>
           {content}
         </div>
+        <div style={{marginTop: '20px'}}>
+          <PrintReportButton onClick={() => {this.print();}} />
         </div>
+      </Fragment>
     )
   }
 

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

@@ -0,0 +1,14 @@
+import React, {Component} from "react";
+import {Button} from "react-bootstrap";
+import * as PropTypes from "prop-types";
+
+export default class PrintReportButton extends Component {
+  render() {
+    return <div className="text-center no-print">
+      <Button bsSize="large" onClick={this.props.onClick}><i className="glyphicon glyphicon-print"/> Print
+        Report</Button>
+    </div>
+  }
+}
+
+PrintReportButton.propTypes = {onClick: PropTypes.func};