Extracted MustRunMonkeyWarning and ReportLoader to seperate compoments

and other small various fixes

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {Button, Col} from 'react-bootstrap';
 import BreachedServers from 'components/report-components/security/BreachedServers';
 import ScannedServers from 'components/report-components/security/ScannedServers';
@@ -14,10 +14,13 @@ import StrongUsers from "components/report-components/security/StrongUsers";
 import AttackReport from "components/report-components/security/AttackReport";
 import ReportHeader, {ReportTypes} from "../report-components/common/ReportHeader";
 import {MonkeysStillAliveWarning} from "../report-components/common/MonkeysStillAliveWarning";
+import ReportLoader from "../report-components/common/ReportLoader";
+import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
 
 let guardicoreLogoImage = require('../../images/guardicore-logo.png');
 
 
+
 class ReportPageComponent extends AuthComponent {
 
   Issue =
@@ -70,13 +73,10 @@ class ReportPageComponent extends AuthComponent {
     let content;
     if (Object.keys(this.state.report).length === 0) {
       if (this.state.runStarted) {
-        content = (<h1>Generating Report...</h1>);
+        content = (<ReportLoader loading={true}/>);
       } else {
         content =
-          <p className="alert alert-warning">
-            <i className="glyphicon glyphicon-warning-sign" style={{'marginRight': '5px'}}/>
-            You have to run a monkey before generating a report!
-          </p>;
+          <MustRunMonkeyWarning/>;
       }
     } else {
       content = this.generateReportContent();

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

@@ -6,6 +6,8 @@ import PillarGrades from "../report-components/zerotrust/PillarGrades";
 import FindingsTable from "../report-components/zerotrust/FindingsTable";
 import {SinglePillarDirectivesStatus} from "../report-components/zerotrust/SinglePillarDirectivesStatus";
 import {MonkeysStillAliveWarning} from "../report-components/common/MonkeysStillAliveWarning";
+import ReportLoader from "../report-components/common/ReportLoader";
+import MustRunMonkeyWarning from "../report-components/common/MustRunMonkeyWarning";
 
 class ZeroTrustReportPageComponent extends AuthComponent {
 
@@ -36,8 +38,11 @@ class ZeroTrustReportPageComponent extends AuthComponent {
 
   render() {
     let content;
-
-    content = this.generateReportContent();
+    if (this.state.runStarted) {
+      content = this.generateReportContent();
+    } else {
+      content = <MustRunMonkeyWarning/>;
+    }
 
     return (
       <Col xs={12} lg={10}>
@@ -53,7 +58,7 @@ class ZeroTrustReportPageComponent extends AuthComponent {
     let content;
 
     if (this.stillLoadingDataFromServer()) {
-      content = "Still empty";
+      content = <ReportLoader loading={true}/>;
     } else {
       const pillarsSection = <div id="pillars-overview">
         <h2>Pillars Overview</h2>
@@ -97,17 +102,6 @@ class ZeroTrustReportPageComponent extends AuthComponent {
           <ReportHeader report_type={ReportTypes.zeroTrust}/>
           <hr/>
           {content}
-          <hr/>
-          THIS IS THE RAW SERVER DATA
-          <br/>
-          PILLARS:
-          <pre>{JSON.stringify(this.state.pillars, undefined, 2)}</pre>
-          <br/>
-          DIRECTIVES:
-          <pre>{JSON.stringify(this.state.directives, undefined, 2)}</pre>
-          <br/>
-          FINDINGS:
-          <pre>{JSON.stringify(this.state.findings, undefined, 2)}</pre>
         </div>
       </div>
     )

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

@@ -0,0 +1,11 @@
+import React, {Component} from "react";
+import {NavLink} from "react-router-dom";
+
+export default class MustRunMonkeyWarning extends Component {
+  render() {
+    return <p className="alert alert-warning">
+      <i className="glyphicon glyphicon-warning-sign" style={{'marginRight': '5px'}}/>
+      <b>You have to <NavLink to="/run-monkey">run a monkey</NavLink> before generating a report!</b>
+    </p>
+  }
+}

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

@@ -0,0 +1,25 @@
+import {css} from "@emotion/core";
+import React, {Component} from "react";
+import {GridLoader} from "react-spinners";
+
+const loading_css_override = css`
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+`;
+
+
+export default class ReportLoader extends Component {
+  render() {
+    return <div id="loading-report" className='sweet-loading'>
+      <h1>Generating Report...</h1>
+      <GridLoader
+        css={loading_css_override}
+        sizeUnit={"px"}
+        size={20}
+        color={'#ffcc00'}
+        loading={this.props.loading}
+      />
+    </div>
+  }
+}