Improved overall style of attack report, made all table fields have word wrapping, navigation made sticky

monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js

@@ -1,3 +1,5 @@
+import '../../styles/report/ReportPage.scss';
+
 import React from 'react';
 import {Col, Nav, NavItem} from 'react-bootstrap';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
@@ -97,7 +99,7 @@ class ReportPageComponent extends AuthComponent {
   renderNav = () => {
     return (<Nav bsStyle="tabs" justified
                  activeKey={this.state.selectedSection} onSelect={this.setSelectedSection}
-                 style={{'marginBottom': '2em'}}>
+                 className={"report-nav"}>
       {this.state.sections.map(section => <NavItem key={section.key} eventKey={section.key}>{section.title}</NavItem>)}
     </Nav>)
   };

monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js

@@ -1,12 +1,12 @@
 import React from 'react';
-
 import {Col} from 'react-bootstrap';
 import '../../styles/Collapse.scss';
-import '../../styles/report/AttackReport.scss'
+import '../../styles/report/AttackReport.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle as faCircle } from '@fortawesome/free-solid-svg-icons';
 import { faCircle as faCircleThin } from '@fortawesome/free-regular-svg-icons';
 
+import ReportHeader, {ReportTypes} from './common/ReportHeader';
 import {ScanStatus} from '../attack/techniques/Helpers';
 import Matrix from './attack/ReportMatrix';
 import SelectedTechnique from './attack/SelectedTechnique';
@@ -130,22 +130,21 @@ class AttackReport extends React.Component {
 
   generateReportContent() {
     return (
-      <div id="attack" className="attack-report">
-      <h3>
-        ATT&CK report
-      </h3>
-      <p>
-        This report shows information about ATT&CK techniques used by Infection Monkey.
-      </p>
-      {this.renderLegend()}
-      <Matrix techniques={this.state.techniques} schema={this.state.schema} onClick={this.onTechniqueSelect}/>
-      <SelectedTechnique techComponents={techComponents}
-                         techniques={this.state.techniques}
-                         selected={this.state.selectedTechnique}/>
-      <TechniqueDropdowns techniques={this.state.techniques}
-                          techComponents={techComponents}/>
-      <br/>
-    </div>
+        <div id="attack" className="attack-report report-page">
+          <ReportHeader report_type={ReportTypes.attack}/>
+          <hr/>
+          <p>
+            This report shows information about ATT&CK techniques used by Infection Monkey.
+          </p>
+          {this.renderLegend()}
+          <Matrix techniques={this.state.techniques} schema={this.state.schema} onClick={this.onTechniqueSelect}/>
+          <SelectedTechnique techComponents={techComponents}
+                             techniques={this.state.techniques}
+                             selected={this.state.selectedTechnique}/>
+          <TechniqueDropdowns techniques={this.state.techniques}
+                              techComponents={techComponents}/>
+          <br/>
+        </div>
     )
   }
 

monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js

@@ -62,7 +62,7 @@ class SelectedTechnique extends React.Component {
 
     return (
       <div>
-        <h4 className="selected-technique-title">Selected technique:</h4>
+        <h3 className="selected-technique-title">Selected technique:</h3>
         <section className="attack-report selected-technique">
           {content}
         </section>

monkey/monkey_island/cc/ui/src/components/report-components/common/ReportHeader.js

@@ -7,6 +7,7 @@ let monkeyLogoImage = require('../../../images/monkey-icon.svg');
 export const ReportTypes = {
   zeroTrust: 'Zero Trust',
   security: 'Security',
+  attack: 'Attack',
   null: ''
 };
 

monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss

@@ -25,3 +25,18 @@
 .attack-report .selected-technique {
   cursor: default;
 }
+
+.attack-report {
+  padding: 0 !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.attack-report .padded{
+  padding: 2em 2em 0 2em;
+}
+
+.ReactTable .rt-td{
+   white-space: pre-line !important;
+  word-wrap: break-word;
+}

monkey/monkey_island/cc/ui/src/styles/report/ReportPage.scss

@@ -0,0 +1,11 @@
+.report-nav {
+  margin-bottom: 2em !important;
+  position: sticky;
+  top: 0;
+  z-index: 1000000;
+  background-color: #ffffff;
+}
+
+.report-nav > li > a{
+  height: 50px !important;
+}