Added legend and improved matrix UI

monkey/monkey_island/cc/ui/src/components/pages/AttackPage.js

@@ -2,6 +2,8 @@ import React from 'react';
 import AuthComponent from '../AuthComponent';
 import 'filepond/dist/filepond.min.css';
 import MatrixComponent from '../attack/MatrixComponent'
+import {Col} from "react-bootstrap";
+import '../../styles/Checkbox.scss'
 
 class AttackComponent extends AuthComponent {
   constructor(props) {
@@ -38,7 +40,24 @@ class AttackComponent extends AuthComponent {
     if (Object.keys(this.state.configuration).length === 0) {
       content = (<h1>Fetching configuration...</h1>);
     } 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>;
   }

monkey/monkey_island/cc/ui/src/styles/Checkbox.scss

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