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 7c5f6cdc4..b57405fe0 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 @@ -3,6 +3,7 @@ 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'; @@ -152,7 +153,7 @@ class AttackReportPageComponent extends AuthComponent { content.push(this.getTechniqueCollapse(tech_id)) }); return ( -
+

ATT&CK report

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js index f37fbe9c9..86fc641d8 100644 --- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js +++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/Matrix.js @@ -2,6 +2,7 @@ import React from 'react'; import Checkbox from '../../ui-components/Checkbox'; import ReactTable from 'react-table'; import 'filepond/dist/filepond.min.css'; +import '../../../styles/report/ReportAttackMatrix.scss'; class MatrixComponent extends React.Component { constructor(props) { 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 ebd40aa3d..91d6512f3 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 @@ -23,7 +23,6 @@ class CheckboxComponent extends React.PureComponent { } else { this.status = false } - console.log(this.props); this.state = { status: this.status, checked: this.props.checked, @@ -56,7 +55,7 @@ class CheckboxComponent extends React.PureComponent { // Creates class string for component composeStateClasses(core) { let result = core; - if (this.state.status) { + if (this.state.status !== false) { result += ' status-'+this.state.status; } if (this.state.necessary) { diff --git a/monkey/monkey_island/cc/ui/src/styles/App.css b/monkey/monkey_island/cc/ui/src/styles/App.css index 5003ae87e..91267b7a1 100644 --- a/monkey/monkey_island/cc/ui/src/styles/App.css +++ b/monkey/monkey_island/cc/ui/src/styles/App.css @@ -525,7 +525,6 @@ body { .label-danger { background-color: #d9534f !important; } - } /* Attack pages */ @@ -537,10 +536,6 @@ body { margin-bottom: 20px; } -.attack-report .btn-collapse span:nth-of-type(2) { - flex: 0; -} - .icon-info { color: #ade3eb !important; } @@ -588,8 +583,3 @@ body { margin-right: auto; } -.attack-report.footer-text { - text-align: right; - font-size: 0.8em; - margin-top: 20px; -} diff --git a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss new file mode 100644 index 000000000..c9ff0b0a0 --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss @@ -0,0 +1,13 @@ +.attack-report.footer-text { + text-align: right; + font-size: 0.8em; + margin-top: 20px; +} + +.attack-report .btn-collapse span:nth-of-type(2) { + flex: 0; +} + +.attack-report div.attack-legend { + margin-top: 30px; +} diff --git a/monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss b/monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss new file mode 100644 index 000000000..c8eaeca9e --- /dev/null +++ b/monkey/monkey_island/cc/ui/src/styles/report/ReportAttackMatrix.scss @@ -0,0 +1,20 @@ +// colors +$light-grey: #e0ddde; +$light-blue: #ade3eb; +$light-red: #d9acac; +$black: #3a3a3a; + +.attack-matrix .status-0 { + background-color: $light-grey !important; + color: $black; +} + +.attack-matrix .status-1 { + background-color: $light-blue !important; + color: $black; +} + +.attack-matrix .status-2 { + background-color: $light-red !important; + color: $black; +}