From c4805b70e2757a596de746d77b3532a54e4322a6 Mon Sep 17 00:00:00 2001
From: Shay Nehmad <shay.nehmad@guardicore.com>
Date: Mon, 19 Aug 2019 15:21:55 +0300
Subject: [PATCH] Unified style and look of two reports loading location, +
added print buttom component.
---
.../cc/ui/src/components/pages/ReportPage.js | 63 ++++++++++---------
.../components/pages/ZeroTrustReportPage.js | 17 ++---
.../common/PrintReportButton.js | 14 +++++
3 files changed, 58 insertions(+), 36 deletions(-)
create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/common/PrintReportButton.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 72fba9c48..cd224ea0c 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, {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 {
+
+ if (this.state.runStarted) {
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() {
+ 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>
+ {this.generateReportOverviewSection()}
+ {this.generateReportFindingsSection()}
+ {this.generateReportRecommendationsSection()}
+ {this.generateReportGlanceSection()}
+ {this.generateAttackSection()}
+ {this.generateReportFooter()}
+ </div>;
+ }
+
return (
- <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>
+ <Fragment>
+ <div style={{marginBottom: '20px'}}>
+ <PrintReportButton onClick={() => {print();}} />
</div>
<div className="report-page">
<ReportHeader report_type={ReportTypes.security}/>
<hr/>
- {this.generateReportOverviewSection()}
- {this.generateReportFindingsSection()}
- {this.generateReportRecommendationsSection()}
- {this.generateReportGlanceSection()}
- {this.generateAttackSection()}
- {this.generateReportFooter()}
+ {content}
</div>
- <div className="text-center no-print" style={{marginTop: '20px'}}>
- <Button bsSize="large" onClick={() => {
- print();
- }}><i className="glyphicon glyphicon-print"/> Print Report</Button>
+ <div style={{marginTop: '20px'}}>
+ <PrintReportButton onClick={() => {print();}} />
</div>
- </div>
+ </Fragment>
);
}
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 21b1a7e3b..282662b94 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ZeroTrustReportPage.js
+++ b/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>
+ <div style={{marginTop: '20px'}}>
+ <PrintReportButton onClick={() => {this.print();}} />
+ </div>
+ </Fragment>
)
}
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/common/PrintReportButton.js b/monkey/monkey_island/cc/ui/src/components/report-components/common/PrintReportButton.js
new file mode 100644
index 000000000..1a692bd68
--- /dev/null
+++ b/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};