From 5690ddc5d7d80d535d2ad91595c5f51c41ca713b Mon Sep 17 00:00:00 2001
From: Itay Mizeretz <itay.mizeretz@guardicore.com>
Date: Tue, 28 Nov 2017 18:34:57 +0200
Subject: [PATCH] Add print button, improve printability

---
 .../cc/ui/src/components/pages/ReportPage.js  | 14 +++++----
 .../report-components/CollapsibleWell.js      | 30 ++++++++++++-------
 monkey_island/cc/ui/src/styles/App.css        |  8 +++++
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey_island/cc/ui/src/components/pages/ReportPage.js
index bb45f0d5c..4eb847053 100644
--- a/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/monkey_island/cc/ui/src/components/pages/ReportPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Col} from 'react-bootstrap';
+import {Button, Col} from 'react-bootstrap';
 import BreachedServers from 'components/report-components/BreachedServers';
 import ScannedServers from 'components/report-components/ScannedServers';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
@@ -343,8 +343,11 @@ class ReportPageComponent extends React.Component {
         (
           <div className="report-page">
             <div id="overview">
+              <div className="text-center no-print">
+                <Button bsSize="large" onClick={() => {print();}}><i className="glyphicon glyphicon-print"/> Print Report</Button>
+              </div>
               <h1>
-                Executive Summary
+                Overview
               </h1>
               <p>
                 The first monkey run was started on <span
@@ -430,10 +433,11 @@ class ReportPageComponent extends React.Component {
                   <br/>
                   Detailed recommendations in the <a href="#recommendations">next part of the report</a>.
                 </p>
-                <div className="center-block text-center" style={{margin: '10px'}}>
-                  <Line style={{width: '300px', marginRight: '5px'}} percent={exploitPercentage} strokeWidth="4" trailWidth="4"
+                <div className="text-center" style={{margin: '10px'}}>
+                  <Line style={{width: '300px', marginRight: '5px'}} percent={exploitPercentage} strokeWidth="4"
+                        trailWidth="4"
                         strokeColor="#d9534f" trailColor="#f0ad4e"/>
-                  <b>{Math.round(exploitPercentage)}% of machines exploited</b>
+                  <b>{Math.round(exploitPercentage)}% of scanned machines exploited</b>
                 </div>
               </div>
               <p>
diff --git a/monkey_island/cc/ui/src/components/report-components/CollapsibleWell.js b/monkey_island/cc/ui/src/components/report-components/CollapsibleWell.js
index 0b92712db..6dee76601 100644
--- a/monkey_island/cc/ui/src/components/report-components/CollapsibleWell.js
+++ b/monkey_island/cc/ui/src/components/report-components/CollapsibleWell.js
@@ -10,18 +10,28 @@ class CollapsibleWellComponent extends React.Component {
   }
 
   render() {
+    let well =
+      (
+        <Well style={{margin: '10px'}}>
+          {this.props.children}
+        </Well>
+      );
+
     return (
       <div>
-        <a onClick={() => this.setState({ open: !this.state.open })}>
-          Read More...
-        </a>
-        <Collapse in={this.state.open}>
-          <div>
-            <Well style={{margin: '10px'}}>
-              {this.props.children}
-            </Well>
-          </div>
-        </Collapse>
+        <div className="no-print">
+          <a onClick={() => this.setState({open: !this.state.open})}>
+            Read More...
+          </a>
+          <Collapse in={this.state.open}>
+            <div>
+              {well}
+            </div>
+          </Collapse>
+        </div>
+        <div className="force-print" style={{display: 'none'}}>
+          {well}
+        </div>
       </div>
     );
   }
diff --git a/monkey_island/cc/ui/src/styles/App.css b/monkey_island/cc/ui/src/styles/App.css
index b221186d6..8575387c6 100644
--- a/monkey_island/cc/ui/src/styles/App.css
+++ b/monkey_island/cc/ui/src/styles/App.css
@@ -409,6 +409,14 @@ body {
     display: none;
   }
 
+  .no-print {
+    display: none;
+  }
+
+  .force-print {
+    display: block !important;
+  }
+
   .pie-chart {
     width: 100px;
   }