Finished adding link to the attack technique in attack report

This commit is contained in:
VakarisZ 2019-11-27 12:58:01 +02:00
parent d4f91614b5
commit 10dff6b7eb
3 changed files with 19 additions and 6 deletions

View File

@ -2,6 +2,8 @@ import React from "react";
import Collapse from '@kunukn/react-collapse'; import Collapse from '@kunukn/react-collapse';
import AttackReport from '../AttackReport'; import AttackReport from '../AttackReport';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
const classNames = require('classnames'); const classNames = require('classnames');
@ -27,8 +29,15 @@ class SelectedTechnique extends React.Component {
const TechniqueComponent = this.state.techComponents[tech_id]; const TechniqueComponent = this.state.techComponents[tech_id];
return ( return (
<div key={tech_id} className={classNames('collapse-item', {'item--active': true})}> <div key={tech_id} className={classNames('collapse-item', {'item--active': true})}>
<button className={classNames('btn-collapse', AttackReport.getComponentClass(tech_id, this.state.techniques))}> <button className={classNames('btn-collapse',
'selected-technique',
AttackReport.getComponentClass(tech_id, this.state.techniques))}>
<span>{this.state.techniques[tech_id].title}</span> <span>{this.state.techniques[tech_id].title}</span>
<span>
<a href={this.state.techniques[tech_id].link} target="_blank" className={"link-to-technique"}>
<FontAwesomeIcon icon={faQuestionCircle}/>
</a>
</span>
</button> </button>
<Collapse <Collapse
className="collapse-comp" className="collapse-comp"

View File

@ -36,7 +36,7 @@ class TechniqueDropdowns extends React.Component{
onClick={() => this.onToggle(tech_id)}> onClick={() => this.onToggle(tech_id)}>
<span>{this.state.techniques[tech_id].title}</span> <span>{this.state.techniques[tech_id].title}</span>
<span> <span>
<a href={this.state.techniques[tech_id].link} target="_blank"> <a href={this.state.techniques[tech_id].link} target="_blank" className={"link-to-technique"}>
<FontAwesomeIcon icon={faQuestionCircle}/> <FontAwesomeIcon icon={faQuestionCircle}/>
</a> </a>
<FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/> <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>

View File

@ -4,10 +4,6 @@
margin-top: 20px; margin-top: 20px;
} }
.attack-report .btn-collapse span:nth-of-type(2) {
flex: 0;
}
.attack-report div.attack-legend { .attack-report div.attack-legend {
margin-top: 30px; margin-top: 30px;
} }
@ -21,3 +17,11 @@
margin-bottom: 20px; margin-bottom: 20px;
padding: 0; padding: 0;
} }
.attack-report .link-to-technique {
margin-right: 10px;
}
.attack-report .selected-technique {
cursor: default;
}