UI improved, collapse component almost added

monkey/monkey_island/cc/services/attack/attack_config.py

@@ -14,6 +14,20 @@ def get_config():
     return config
 
 
+def get_technique(technique_id):
+    """
+    Gets technique by id
+    :param technique_id: E.g. T1210
+    :return: Technique object or false if technique is not found
+    """
+    attack_config = get_config()
+    for key, attack_type in attack_config['properties'].items():
+        for key, technique in attack_type['properties'].items():
+            if key == technique_id:
+                return technique
+    return False
+
+
 def get_config_schema():
     return SCHEMA
 

monkey/monkey_island/cc/services/attack/technique_reports/technique_service.py

@@ -1,5 +1,6 @@
-from cc.database import mongo
+from monkey_island.cc.database import mongo
 from common.utils.attack_status_enum import ScanStatus
+from monkey_island.cc.services.attack.attack_config import get_technique
 
 __author__ = "VakarisZ"
 
@@ -14,4 +15,4 @@ def technique_status(technique):
 
 
 def technique_title(technique):
-    return technique+" title from SCHEMA"
+    return get_technique(technique)['title']

monkey/monkey_island/cc/ui/package-lock.json

@@ -2764,9 +2764,9 @@
       }
     },
     "classnames": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
-      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
     },
     "clean-css": {
       "version": "4.1.11",
@@ -13924,7 +13924,7 @@
       "integrity": "sha512-xj+JfaPOvnvr3ow0aHC7Y3HaBKZNR1mm361hVxVzVX3fcdJNIrfiodbQ0m9nLBpNxiKG6FTU2lq/SbTDYT2vew==",
       "requires": {
         "@babel/runtime-corejs2": "7.1.5",
-        "classnames": "2.2.5",
+        "classnames": "2.2.6",
         "dom-helpers": "3.4.0",
         "invariant": "2.2.4",
         "keycode": "2.2.0",
@@ -14102,7 +14102,7 @@
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
       "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
       "requires": {
-        "classnames": "2.2.5",
+        "classnames": "2.2.6",
         "dom-helpers": "3.4.0",
         "prop-types": "15.6.2",
         "prop-types-extra": "1.1.0",
@@ -14226,7 +14226,7 @@
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.8.6.tgz",
       "integrity": "sha1-oK2LSDkxkFLVvvwBJgP7Fh5S7eM=",
       "requires": {
-        "classnames": "2.2.5"
+        "classnames": "2.2.6"
       }
     },
     "react-toggle": {
@@ -14234,7 +14234,7 @@
       "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.0.2.tgz",
       "integrity": "sha512-EPTWnN7gQHgEAUEmjheanZXNzY5TPnQeyyHfEs3YshaiWZf5WNjfYDrglO5F1Hl/dNveX18i4l0grTEsYH2Ccw==",
       "requires": {
-        "classnames": "2.2.5"
+        "classnames": "2.2.6"
       }
     },
     "react-tooltip-lite": {

monkey/monkey_island/cc/ui/package.json

@@ -66,6 +66,7 @@
   "dependencies": {
     "@kunukn/react-collapse": "^1.0.5",
     "bootstrap": "3.3.7",
+    "classnames": "^2.2.6",
     "core-js": "^2.5.7",
     "downloadjs": "^1.4.7",
     "fetch": "^1.1.0",

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

@@ -3,7 +3,15 @@ import {Button, Col} from 'react-bootstrap';
 import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph';
 import {edgeGroupToColor, options} from 'components/map/MapOptions';
 import AuthComponent from '../AuthComponent';
-import T1210 from '../attack/T1210'
+import Collapse from '@kunukn/react-collapse';
+import T1210 from '../attack/T1210';
+import '../../styles/Collapse.scss'
+
+const tech_components = {
+  'T1210': T1210
+};
+
+const classNames = require('classnames');
 
 class AttackReportPageComponent extends AuthComponent {
 
@@ -45,16 +53,45 @@ class AttackReportPageComponent extends AuthComponent {
     }
   }
 
+  state = {
+    index: 1,
+  };
+
+  onToggle = () => {
+    this.setState(state => ({ isOpen: !state.isOpen }));
+  };
+
+  getTechniqueCollapse(technique){
+    const TechniqueComponent = tech_components[technique];
+    return (
+      <div className={classNames("item", { "item--active": this.state.index === 1 })}>
+        <button className="btn" onClick={() => this.onToggle(1)}>
+          <span>select 1</span> <span>{this.state.item1}</span>
+        </button>
+        <Collapse
+          className="collapse"
+          isOpen={this.state.index === 1}
+          onChange={({ collapseState }) => {
+            this.setState({ item1: collapseState });
+          }}
+          onInit={({ collapseState }) => {
+            this.setState({ item1: collapseState });
+          }}>
+          <TechniqueComponent data={this.state.report[technique]} />
+        </Collapse>
+      </div>
+    );
+  }
+
   generateReportContent(){
     let content = '';
-    Object.keys(this.state.report).forEach((Technique) => {
-      content = <T1210 data={this.state.report[Technique]} />;
+    Object.keys(this.state.report).forEach((technique) => {
+      content = this.getTechniqueCollapse(technique)
     });
-    return content
+    return <section className="app">{content}</section>
   }
 
   render() {
-    console.log(React.version);
     let content;
     if (Object.keys(this.state.report).length === 0) {
       if (this.state.runStarted) {

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

@@ -1,3 +1,135 @@
+$transition: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  font-size: 10px;
+}
+
+body {
+  font: 1.6rem / 1.5 "Montserrat", sans-serif;
+  margin: 0;
+  min-height: 100vh;
+  font-size: 1.6rem;
+  overflow-y: scroll;
+}
+
+p {
+  margin: 0;
+}
+
+button {
+  font-size: inherit;
+  margin: 0;
+  padding: 1rem;
+  background: transparent;
+  border: 1px solid #ccc;
+  box-shadow: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+  vertical-align: bottom;
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  color: black;
+  font-size: inherit;
+}
+
+h2 {
+  margin: 0.5rem;
+}
+
+.info {
+  margin-bottom: 3rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.app {
+  min-height: 100vh;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.btn {
+  width: 100%;
+  box-shadow: 0 2px 6px #ccc;
+  border: none;
+  transition: background-color $transition;
+  font-family: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  > span {
+  }
+}
+
+.item {
+  padding: 0.5rem;
+  &--active {
+    .btn {
+      background-color: #f7f7f7;
+    }
+  }
+}
+
+.collapse {
+  transition: height $transition;
+  overflow: hidden;
+}
+
+.content {
+  padding: 2rem 0;
+  transition: transform $transition;
+  will-change: transform;
+  $offset: 10px;
+
+  &.collapsing {
+    transform: translateY(-$offset);
+  }
+  &.collapsed {
+    transform: translateY(-$offset);
+  }
+  &.expanding {
+    transform: translateX(0px);
+  }
+  &.expanded {
+    transform: translateX(0px);
+  }
+}
+
+.text {
+  margin-bottom: 1rem;
+}
+
+.state {
+  display: inline-block;
+  min-width: 6em;
+}
+
+
+.image-wrapper {
+  position: relative;
+  max-width: 500px;
+  height: 0;
+  padding-bottom: 40%;
+  margin-bottom: 1rem;
+  background: #eee;
+
+  &__img {
+    object-fit: cover;
+    width: 100%;
+    position: absolute;
+  }
+}
+
 .collapse-css-transition {
   transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;