From 0325521936dcb367e2edaea6709e5aeab381685a Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Wed, 14 Aug 2019 10:34:04 +0300
Subject: [PATCH] Extracted MustRunMonkeyWarning and ReportLoader to seperate
 compoments

and other small various fixes
---
 .../cc/ui/src/components/pages/ReportPage.js  | 12 ++++-----
 .../components/pages/ZeroTrustReportPage.js   | 22 ++++++----------
 .../common/MustRunMonkeyWarning.js            | 11 ++++++++
 .../report-components/common/ReportLoader.js  | 25 +++++++++++++++++++
 4 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/MustRunMonkeyWarning.js
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js

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 081271e12..4da1c0bac 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/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();
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
index 665bf4b02..737e524fe 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
+++ b/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>
     )
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/MustRunMonkeyWarning.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/MustRunMonkeyWarning.js
new file mode 100644
index 000000000..f1d23e302
--- /dev/null
+++ b/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>
+  }
+}
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/ReportLoader.js
new file mode 100644
index 000000000..873d70177
--- /dev/null
+++ b/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>
+  }
+}