From 4932ddd3d3cc388ab4ec5c3c7a215e0d575a5213 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 26 Nov 2019 10:18:13 +0200
Subject: [PATCH] Added show/hide techniques button in attack report,
 refactored technique dropdowns

---
 monkey/monkey_island/cc/ui/package.json       |  2 +-
 .../report-components/AttackReport.js         | 55 ++----------
 .../report-components/attack/ReportMatrix.js  |  1 +
 .../attack/SelectedTechnique.js               |  9 +-
 .../attack/TechniqueDropdowns.js              | 89 +++++++++++++++++++
 .../cc/ui/src/styles/report/AttackReport.scss | 10 +++
 6 files changed, 111 insertions(+), 55 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js

diff --git a/monkey/monkey_island/cc/ui/package.json b/monkey/monkey_island/cc/ui/package.json
index ad2d1e718..2396399e6 100644
--- a/monkey/monkey_island/cc/ui/package.json
+++ b/monkey/monkey_island/cc/ui/package.json
@@ -67,7 +67,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.22",
     "@kunukn/react-collapse": "^1.2.7",
-    "bootstrap": "3.4.1",
+    "bootstrap": "^3.4.1",
     "classnames": "^2.2.6",
     "core-js": "^2.6.10",
     "d3": "^5.14.1",
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js b/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
index 4baed056e..f2b86fe91 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/AttackReport.js
@@ -1,14 +1,13 @@
 import React from 'react';
+
 import {Col} from 'react-bootstrap';
-import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
-import {edgeGroupToColor, options} from 'components/map/MapOptions';
 import '../../styles/Collapse.scss';
 import '../../styles/report/AttackReport.scss'
-import AuthComponent from '../AuthComponent';
+
 import {ScanStatus} from '../attack/techniques/Helpers';
-import Collapse from '@kunukn/react-collapse';
 import Matrix from './attack/ReportMatrix';
 import SelectedTechnique from './attack/SelectedTechnique';
+import TechniqueDropdowns from './attack/TechniqueDropdowns';
 
 import T1210 from '../attack/techniques/T1210';
 import T1197 from '../attack/techniques/T1197';
@@ -62,9 +61,8 @@ const techComponents = {
   'T1064': T1064
 };
 
-const classNames = require('classnames');
 
-class AttackReport extends AuthComponent {
+class AttackReport extends React.Component {
 
   constructor(props) {
     super(props);
@@ -82,9 +80,6 @@ class AttackReport extends AuthComponent {
     }
   }
 
-  onToggle = technique =>
-    this.setState(state => ({collapseOpen: state.collapseOpen === technique ? null : technique}));
-
   onTechniqueSelect = (technique, value, mapped = false) => {
     //this.setState({selectedTechnique: technique});
     let selectedTechnique = this.getTechniqueByTitle(technique);
@@ -105,39 +100,6 @@ class AttackReport extends AuthComponent {
     }
   }
 
-  getTechniqueCollapse(tech_id) {
-    return (
-      <div key={tech_id} className={classNames('collapse-item', {'item--active': this.state.collapseOpen === tech_id})}>
-        <button className={classNames('btn-collapse', AttackReport.getComponentClass(tech_id, this.state.techniques))}
-                onClick={() => this.onToggle(tech_id)}>
-          <span>{this.state.techniques[tech_id].title}</span>
-          <span>
-              <i className={classNames('fa', this.state.collapseOpen === tech_id ? 'fa-chevron-down' : 'fa-chevron-up')}></i>
-          </span>
-        </button>
-        <Collapse
-          className="collapse-comp"
-          isOpen={this.state.collapseOpen === tech_id}
-          onChange={({collapseState}) => {
-            this.setState({tech_id: collapseState});
-          }}
-          onInit={({collapseState}) => {
-            this.setState({tech_id: collapseState});
-          }}
-          render={collapseState => this.createTechniqueContent(collapseState, tech_id)}/>
-      </div>
-    );
-  }
-
-  createTechniqueContent(collapseState, technique) {
-    const TechniqueComponent = techComponents[technique];
-    return (
-      <div className={`content ${collapseState}`}>
-        <TechniqueComponent data={this.state.techniques[technique]}/>
-      </div>
-    );
-  }
-
   renderLegend() {
     return (<div id="header" className="row justify-content-between attack-legend">
       <Col xs={3}>
@@ -160,10 +122,6 @@ class AttackReport extends AuthComponent {
   }
 
   generateReportContent() {
-    let content = [];
-    Object.keys(this.state.techniques).forEach((tech_id) => {
-      content.push(this.getTechniqueCollapse(tech_id))
-    });
     return (
       <div id="attack" className="attack-report">
       <h3>
@@ -177,9 +135,8 @@ class AttackReport extends AuthComponent {
       <SelectedTechnique techComponents={techComponents}
                          techniques={this.state.techniques}
                          selected={this.state.selectedTechnique}/>
-      <div>
-        <section className="attack-report">{content}</section>
-      </div>
+      <TechniqueDropdowns techniques={this.state.techniques}
+                          techComponents={techComponents}/>
       <br/>
     </div>
     )
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/ReportMatrix.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/ReportMatrix.js
index 1aaec933a..b27c49759 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/ReportMatrix.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/ReportMatrix.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Checkbox from '../../ui-components/Checkbox';
 import ReactTable from 'react-table';
 import 'filepond/dist/filepond.min.css';
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
index d4a11af99..d6dc29d6f 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
@@ -17,8 +17,9 @@ class SelectedTechnique extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.selected !== prevProps.selected) {
-     this.setState({ selectedTechnique: this.props.selected })
+    if (this.props.selected !== prevProps.selected || this.props.techniques !== prevProps.techniques) {
+     this.setState({ selectedTechnique: this.props.selected,
+                     techniques: this.props.techniques})
     }
   }
 
@@ -41,13 +42,11 @@ class SelectedTechnique extends React.Component {
     );
   }
 
-
-
   render(){
     let content = {};
     let selectedTechId = this.state.selectedTechnique;
     if(selectedTechId === false){
-      content = "Select a technique from attack matrix";
+      content = "None. Select a technique from ATT&CK matrix above.";
     } else {
       content = this.getSelectedTechniqueComponent(selectedTechId)
     }
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
new file mode 100644
index 000000000..34ee6c2d9
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
@@ -0,0 +1,89 @@
+import React from "react";
+import Collapse from '@kunukn/react-collapse';
+
+import {Button} from 'react-bootstrap';
+import AttackReport from '../AttackReport';
+
+const classNames = require('classnames');
+
+class TechniqueDropdowns extends React.Component{
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      techniques: this.props.techniques,
+      techComponents: this.props.techComponents,
+      collapseOpen: '',
+      techniquesHidden: true
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.techniques !== prevProps.techniques) {
+     this.setState({ techniques: this.props.techniques })
+    }
+  }
+
+  onToggle = technique =>
+    this.setState(state => ({collapseOpen: state.collapseOpen === technique ? null : technique}));
+
+  getTechniqueCollapse(tech_id) {
+    return (
+      <div key={tech_id} className={classNames('collapse-item', {'item--active': this.state.collapseOpen === tech_id})}>
+        <button className={classNames('btn-collapse', AttackReport.getComponentClass(tech_id, this.state.techniques))}
+                onClick={() => this.onToggle(tech_id)}>
+          <span>{this.state.techniques[tech_id].title}</span>
+          <span>
+              <i className={classNames('fa', this.state.collapseOpen === tech_id ? 'fa-chevron-down' : 'fa-chevron-up')}></i>
+          </span>
+        </button>
+        <Collapse
+          className="collapse-comp"
+          isOpen={this.state.collapseOpen === tech_id}
+          onChange={({collapseState}) => {
+            this.setState({tech_id: collapseState});
+          }}
+          onInit={({collapseState}) => {
+            this.setState({tech_id: collapseState});
+          }}
+          render={collapseState => this.createTechniqueContent(collapseState, tech_id)}/>
+      </div>
+    );
+  }
+
+  createTechniqueContent(collapseState, technique) {
+    const TechniqueComponent = this.state.techComponents[technique];
+    return (
+      <div className={`content ${collapseState}`}>
+        <TechniqueComponent data={this.state.techniques[technique]}/>
+      </div>
+    );
+  }
+
+  toggleTechList(){
+    this.setState({techniquesHidden: (! this.state.techniquesHidden)})
+  }
+
+  render(){
+    let listClass = '';
+    let content = [];
+    if (this.state.techniquesHidden){
+      listClass = "hidden-list"
+    } else {
+      Object.keys(this.state.techniques).forEach((tech_id) => {
+        content.push(this.getTechniqueCollapse(tech_id))
+      });
+    }
+    return (
+      <div className="dropdown-list">
+        <Button bsStyle="link"
+                bsSize="large"
+                onClick={() => this.toggleTechList()}>
+          {this.state.techniquesHidden ? "Show all" : "Hide all"}
+        </Button>
+        <section className={`attack-report ${listClass}`}>{content}</section>
+      </div>);
+  }
+}
+
+export default TechniqueDropdowns;
diff --git a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
index c9ff0b0a0..652ab4a22 100644
--- a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
@@ -11,3 +11,13 @@
 .attack-report div.attack-legend {
   margin-top: 30px;
 }
+
+.attack-report .hidden-list{
+  display: none;
+}
+
+.attack-report .dropdown-list .btn-lg {
+  margin-top: 30px;
+  margin-bottom: 20px;
+  padding: 0;
+}