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 be2ff34f5..4baed056e 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 @@ -8,6 +8,7 @@ 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 T1210 from '../attack/techniques/T1210'; import T1197 from '../attack/techniques/T1197'; @@ -34,7 +35,7 @@ import T1016 from '../attack/techniques/T1016'; import T1021 from '../attack/techniques/T1021'; import T1064 from '../attack/techniques/T1064'; -const tech_components = { +const techComponents = { 'T1210': T1210, 'T1197': T1197, 'T1110': T1110, @@ -63,14 +64,15 @@ const tech_components = { const classNames = require('classnames'); -class AttackReportPageComponent extends AuthComponent { +class AttackReport extends AuthComponent { constructor(props) { super(props); this.state = { techniques: this.props.report['techniques'], schema: this.props.report['schema'], - collapseOpen: '' + selectedTechnique: false, + collapseOpen: '', }; } @@ -83,8 +85,17 @@ class AttackReportPageComponent extends AuthComponent { onToggle = technique => this.setState(state => ({collapseOpen: state.collapseOpen === technique ? null : technique})); - getComponentClass(tech_id) { - switch (this.state.techniques[tech_id].status) { + onTechniqueSelect = (technique, value, mapped = false) => { + //this.setState({selectedTechnique: technique}); + let selectedTechnique = this.getTechniqueByTitle(technique); + if (selectedTechnique === false){ + return; + } + this.setState({selectedTechnique: selectedTechnique.tech_id}) + }; + + static getComponentClass(tech_id, techniques) { + switch (techniques[tech_id].status) { case ScanStatus.SCANNED: return 'collapse-info'; case ScanStatus.USED: @@ -97,7 +108,8 @@ class AttackReportPageComponent extends AuthComponent { getTechniqueCollapse(tech_id) { return (
- + { + return (
+ +
) + }}/> +
+ ); + } + + + + render(){ + let content = {}; + let selectedTechId = this.state.selectedTechnique; + if(selectedTechId === false){ + content = "Select a technique from attack matrix"; + } else { + content = this.getSelectedTechniqueComponent(selectedTechId) + } + + return ( +
+

Selected technique:

+
+ {content} +
+
+ ) + } +} + +export default SelectedTechnique; diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js b/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js index 91d6512f3..445f3f45b 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/Checkbox.js @@ -14,6 +14,7 @@ class CheckboxComponent extends React.PureComponent { changeHandler(name, checked) function will be called with these parameters: this.props.name (the name of this component) and this.state.checked (boolean indicating if this component is checked or not) + this.props.status (int) adds a class "status-x" to this checkbox. Used for styling. */ constructor(props) {