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

This commit is contained in:
Shay Nehmad 2019-08-19 15:21:55 +03:00
parent e88c2baf64
commit c4805b70e2
3 changed files with 58 additions and 36 deletions

View File

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

View File

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

View File

@ -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};