forked from p15670423/monkey
Unified style and look of two reports loading location, + added print buttom component.
This commit is contained in:
parent
e88c2baf64
commit
c4805b70e2
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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};
|
Loading…
Reference in New Issue