p15693087
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Added legend and improved matrix UI

This commit is contained in:
VakarisZ 2019-04-17 13:52:04 +03:00
parent 2191aa2149
commit ef90d8a788
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
monkey/monkey_island/cc/ui/src/components/pages/AttackPage.js
View File

@ -2,6 +2,8 @@ import React from 'react';
import AuthComponent from '../AuthComponent'; import AuthComponent from '../AuthComponent';
import 'filepond/dist/filepond.min.css'; import 'filepond/dist/filepond.min.css';
import MatrixComponent from '../attack/MatrixComponent' import MatrixComponent from '../attack/MatrixComponent'
import {Col} from "react-bootstrap";
import '../../styles/Checkbox.scss'
class AttackComponent extends AuthComponent { class AttackComponent extends AuthComponent {
constructor(props) { constructor(props) {
@ -38,7 +40,24 @@ class AttackComponent extends AuthComponent {
if (Object.keys(this.state.configuration).length === 0) { if (Object.keys(this.state.configuration).length === 0) {
content = (<h1>Fetching configuration...</h1>); content = (<h1>Fetching configuration...</h1>);
} else { } else {
content = (<MatrixComponent configuration={this.state.configuration} />); content = (
<div>
<div id="header" className="row justify-content-between attack-legend">
<Col xs={4}>
<i className="fa fa-circle-thin icon-unchecked"></i>
<span> - Dissabled</span>
</Col>
<Col xs={4}>
<i className="fa fa-circle icon-checked"></i>
<span> - Enabled</span>
</Col>
<Col xs={4}>
<i className="fa fa-circle icon-mandatory"></i>
<span> - Mandatory</span>
</Col>
</div>
<MatrixComponent configuration={this.state.configuration} />
</div>);
} }
return <div>{content}</div>; return <div>{content}</div>;
} }

21
monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
View File

@ -1,7 +1,7 @@
// colors // colors
$light-grey: #EAF4F4; $light-grey: #EAF4F4;
$medium-grey: #7B9EA8; $medium-grey: #7B9EA8;
$dark-grey: #7a7d7b; $dark-green: #007d02;
$green: #44CF6C; $green: #44CF6C;
$black: #000000; $black: #000000;
@ -34,13 +34,12 @@ $black: #000000;
} }
&.blocked { &.blocked {
background-color: $dark-grey; background-color: $dark-green;
color: $black; color: $light-grey;
fill: $black; fill: $light-grey;
} }
&.is-checked { &.is-checked {
border: 1px solid $green;
background-color: $green; background-color: $green;
color: white; color: white;
fill: white; fill: white;
@ -92,3 +91,15 @@ $black: #000000;
background-color: rgba(white, .08); background-color: rgba(white, .08);
} }
} }
.icon-checked{
color:$green
}
.icon-mandatory{
color:$dark-green
}
.icon-unchecked{
color:$black;
}