From 4d6f4037105f582b2bb17c1e9af87d9f046a047a Mon Sep 17 00:00:00 2001 From: VakarisZ Date: Wed, 3 Apr 2019 18:16:51 +0300 Subject: [PATCH] UI improved, collapse component almost added --- .../cc/services/attack/attack_config.py | 14 ++ .../technique_reports/technique_service.py | 5 +- monkey/monkey_island/cc/ui/package-lock.json | 14 +- monkey/monkey_island/cc/ui/package.json | 1 + .../src/components/pages/AttackReportPage.js | 47 ++++++- .../cc/ui/src/styles/Collapse.scss | 132 ++++++++++++++++++ 6 files changed, 199 insertions(+), 14 deletions(-) diff --git a/monkey/monkey_island/cc/services/attack/attack_config.py b/monkey/monkey_island/cc/services/attack/attack_config.py index c153a40f7..4957fac98 100644 --- a/monkey/monkey_island/cc/services/attack/attack_config.py +++ b/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 diff --git a/monkey/monkey_island/cc/services/attack/technique_reports/technique_service.py b/monkey/monkey_island/cc/services/attack/technique_reports/technique_service.py index d064783ed..3799dfde0 100644 --- a/monkey/monkey_island/cc/services/attack/technique_reports/technique_service.py +++ b/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'] diff --git a/monkey/monkey_island/cc/ui/package-lock.json b/monkey/monkey_island/cc/ui/package-lock.json index c3dc196e2..b266d05eb 100644 --- a/monkey/monkey_island/cc/ui/package-lock.json +++ b/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": { diff --git a/monkey/monkey_island/cc/ui/package.json b/monkey/monkey_island/cc/ui/package.json index 9d5277954..d0ef4f0f3 100644 --- a/monkey/monkey_island/cc/ui/package.json +++ b/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", diff --git a/monkey/monkey_island/cc/ui/src/components/pages/AttackReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/AttackReportPage.js index 08aa63635..0a2d8d6f0 100644 --- a/monkey/monkey_island/cc/ui/src/components/pages/AttackReportPage.js +++ b/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 ( +
+ + { + this.setState({ item1: collapseState }); + }} + onInit={({ collapseState }) => { + this.setState({ item1: collapseState }); + }}> + + +
+ ); + } + generateReportContent(){ let content = ''; - Object.keys(this.state.report).forEach((Technique) => { - content = ; + Object.keys(this.state.report).forEach((technique) => { + content = this.getTechniqueCollapse(technique) }); - return content + return
{content}
} render() { - console.log(React.version); let content; if (Object.keys(this.state.report).length === 0) { if (this.state.runStarted) { diff --git a/monkey/monkey_island/cc/ui/src/styles/Collapse.scss b/monkey/monkey_island/cc/ui/src/styles/Collapse.scss index 5f7371475..f01ef40c4 100644 --- a/monkey/monkey_island/cc/ui/src/styles/Collapse.scss +++ b/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;