Add print button, improve printability

This commit is contained in:
Itay Mizeretz 2017-11-28 18:34:57 +02:00
parent e3bd980a12
commit 5690ddc5d7
3 changed files with 37 additions and 15 deletions

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {Col} from 'react-bootstrap'; import {Button, Col} from 'react-bootstrap';
import BreachedServers from 'components/report-components/BreachedServers'; import BreachedServers from 'components/report-components/BreachedServers';
import ScannedServers from 'components/report-components/ScannedServers'; import ScannedServers from 'components/report-components/ScannedServers';
import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
@ -343,8 +343,11 @@ class ReportPageComponent extends React.Component {
( (
<div className="report-page"> <div className="report-page">
<div id="overview"> <div id="overview">
<div className="text-center no-print">
<Button bsSize="large" onClick={() => {print();}}><i className="glyphicon glyphicon-print"/> Print Report</Button>
</div>
<h1> <h1>
Executive Summary Overview
</h1> </h1>
<p> <p>
The first monkey run was started on <span The first monkey run was started on <span
@ -430,10 +433,11 @@ class ReportPageComponent extends React.Component {
<br/> <br/>
Detailed recommendations in the <a href="#recommendations">next part of the report</a>. Detailed recommendations in the <a href="#recommendations">next part of the report</a>.
</p> </p>
<div className="center-block text-center" style={{margin: '10px'}}> <div className="text-center" style={{margin: '10px'}}>
<Line style={{width: '300px', marginRight: '5px'}} percent={exploitPercentage} strokeWidth="4" trailWidth="4" <Line style={{width: '300px', marginRight: '5px'}} percent={exploitPercentage} strokeWidth="4"
trailWidth="4"
strokeColor="#d9534f" trailColor="#f0ad4e"/> strokeColor="#d9534f" trailColor="#f0ad4e"/>
<b>{Math.round(exploitPercentage)}% of machines exploited</b> <b>{Math.round(exploitPercentage)}% of scanned machines exploited</b>
</div> </div>
</div> </div>
<p> <p>

View File

@ -10,19 +10,29 @@ class CollapsibleWellComponent extends React.Component {
} }
render() { render() {
let well =
(
<Well style={{margin: '10px'}}>
{this.props.children}
</Well>
);
return ( return (
<div> <div>
<div className="no-print">
<a onClick={() => this.setState({open: !this.state.open})}> <a onClick={() => this.setState({open: !this.state.open})}>
Read More... Read More...
</a> </a>
<Collapse in={this.state.open}> <Collapse in={this.state.open}>
<div> <div>
<Well style={{margin: '10px'}}> {well}
{this.props.children}
</Well>
</div> </div>
</Collapse> </Collapse>
</div> </div>
<div className="force-print" style={{display: 'none'}}>
{well}
</div>
</div>
); );
} }
} }

View File

@ -409,6 +409,14 @@ body {
display: none; display: none;
} }
.no-print {
display: none;
}
.force-print {
display: block !important;
}
.pie-chart { .pie-chart {
width: 100px; width: 100px;
} }