From c9e6d890e746e4c62ef7598a4e1d66653c36195a Mon Sep 17 00:00:00 2001 From: Itay Mizeretz Date: Tue, 14 Nov 2017 10:59:18 +0200 Subject: [PATCH] Add map to report --- .../cc/ui/src/components/map/MapOptions.js | 52 ++++++++++++++++ .../{ => map}/preview-pane/PreviewPane.js | 0 .../cc/ui/src/components/pages/MapPage.js | 60 ++----------------- .../cc/ui/src/components/pages/ReportPage.js | 45 +++++++++----- 4 files changed, 87 insertions(+), 70 deletions(-) create mode 100644 monkey_island/cc/ui/src/components/map/MapOptions.js rename monkey_island/cc/ui/src/components/{ => map}/preview-pane/PreviewPane.js (100%) diff --git a/monkey_island/cc/ui/src/components/map/MapOptions.js b/monkey_island/cc/ui/src/components/map/MapOptions.js new file mode 100644 index 000000000..701adcf29 --- /dev/null +++ b/monkey_island/cc/ui/src/components/map/MapOptions.js @@ -0,0 +1,52 @@ +let groupNames = ['clean_unknown', 'clean_linux', 'clean_windows', 'exploited_linux', 'exploited_windows', 'island', + 'island_monkey_linux', 'island_monkey_linux_running', 'island_monkey_windows', 'island_monkey_windows_running', + 'manual_linux', 'manual_linux_running', 'manual_windows', 'manual_windows_running', 'monkey_linux', + 'monkey_linux_running', 'monkey_windows', 'monkey_windows_running']; + +let getGroupsOptions = () => { + let groupOptions = {}; + for (let groupName of groupNames) { + groupOptions[groupName] = + { + shape: 'image', + size: 50, + image: require('../../images/nodes/' + groupName + '.png') + }; + } + return groupOptions; +}; + +export const options = { + autoResize: true, + layout: { + improvedLayout: false + }, + edges: { + width: 2, + smooth: { + type: 'curvedCW' + } + }, + physics: { + barnesHut: { + gravitationalConstant: -120000, + avoidOverlap: 0.5 + }, + minVelocity: 0.75 + }, + groups: getGroupsOptions() +}; + +export function edgeGroupToColor(group) { + switch (group) { + case 'exploited': + return '#c00'; + case 'tunnel': + return '#0058aa'; + case 'scan': + return '#f90'; + case 'island': + return '#aaa'; + } + return 'black'; +} diff --git a/monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js b/monkey_island/cc/ui/src/components/map/preview-pane/PreviewPane.js similarity index 100% rename from monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js rename to monkey_island/cc/ui/src/components/map/preview-pane/PreviewPane.js diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js index 81f3baf8a..aa5468380 100644 --- a/monkey_island/cc/ui/src/components/pages/MapPage.js +++ b/monkey_island/cc/ui/src/components/pages/MapPage.js @@ -2,48 +2,10 @@ import React from 'react'; import {Col} from 'react-bootstrap'; import {Link} from 'react-router-dom'; import {Icon} from 'react-fa'; -import PreviewPane from 'components/preview-pane/PreviewPane'; -import {ReactiveGraph} from '../reactive-graph/ReactiveGraph'; +import PreviewPane from 'components/map/preview-pane/PreviewPane'; +import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; import {ModalContainer, ModalDialog} from 'react-modal-dialog'; - -let groupNames = ['clean_unknown', 'clean_linux', 'clean_windows', 'exploited_linux', 'exploited_windows', 'island', - 'island_monkey_linux', 'island_monkey_linux_running', 'island_monkey_windows', 'island_monkey_windows_running', - 'manual_linux', 'manual_linux_running', 'manual_windows', 'manual_windows_running', 'monkey_linux', - 'monkey_linux_running', 'monkey_windows', 'monkey_windows_running']; - -let getGroupsOptions = () => { - let groupOptions = {}; - for (let groupName of groupNames) { - groupOptions[groupName] = - { - shape: 'image', - size: 50, - image: require('../../images/nodes/' + groupName + '.png') - }; - } - return groupOptions; -}; - -let options = { - autoResize: true, - layout: { - improvedLayout: false - }, - edges: { - width: 2, - smooth: { - type: 'curvedCW' - } - }, - physics: { - barnesHut: { - gravitationalConstant: -120000, - avoidOverlap: 0.5 - }, - minVelocity: 0.75 - }, - groups: getGroupsOptions() -}; +import {options, edgeGroupToColor} from 'components/map/MapOptions'; class MapPageComponent extends React.Component { constructor(props) { @@ -61,20 +23,6 @@ class MapPageComponent extends React.Component { select: event => this.selectionChanged(event) }; - static edgeGroupToColor(group) { - switch (group) { - case 'exploited': - return '#c00'; - case 'tunnel': - return '#0058aa'; - case 'scan': - return '#f90'; - case 'island': - return '#aaa'; - } - return 'black'; - } - componentDidMount() { this.updateMapFromServer(); this.interval = setInterval(this.updateMapFromServer, 1000); @@ -89,7 +37,7 @@ class MapPageComponent extends React.Component { .then(res => res.json()) .then(res => { res.edges.forEach(edge => { - edge.color = MapPageComponent.edgeGroupToColor(edge.group); + edge.color = edgeGroupToColor(edge.group); }); this.setState({graph: res}); this.props.onStatusChange(); diff --git a/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey_island/cc/ui/src/components/pages/ReportPage.js index c568aa13b..81aceeaac 100644 --- a/monkey_island/cc/ui/src/components/pages/ReportPage.js +++ b/monkey_island/cc/ui/src/components/pages/ReportPage.js @@ -2,24 +2,42 @@ import React from 'react'; import {Col} from 'react-bootstrap'; import BreachedServers from 'components/report-components/BreachedServers'; import ScannedServers from 'components/report-components/ScannedServers'; - -const list_item = { - label: 'machine 1', - ip_addresses: ['1.2.3.4', '5.6.7.8'], - accessible_from_nodes: ['machine 2', 'machine 3'], - services: ['tcp-80', 'tcp-443'] -}; +import {ReactiveGraph} from 'components/reactive-graph/ReactiveGraph'; +import {options, edgeGroupToColor} from 'components/map/MapOptions'; class ReportPageComponent extends React.Component { constructor(props) { super(props); this.state = { - report: {} + report: {}, + graph: {nodes: [], edges: []} }; } componentDidMount() { + this.getReportFromServer(); + this.updateMapFromServer(); + this.interval = setInterval(this.updateMapFromServer, 1000); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + updateMapFromServer = () => { + fetch('/api/netmap') + .then(res => res.json()) + .then(res => { + res.edges.forEach(edge => { + edge.color = edgeGroupToColor(edge.group); + }); + this.setState({graph: res}); + this.props.onStatusChange(); + }); + }; + + getReportFromServer() { fetch('/api/report') .then(res => res.json()) .then(res => { @@ -31,7 +49,7 @@ class ReportPageComponent extends React.Component { render() { if (Object.keys(this.state.report).length === 0) { - return (
); + return (
); } return ( @@ -47,10 +65,9 @@ class ReportPageComponent extends React.Component {

From the attacker's point of view, the network looks like this: - {/* TODO: Add map */}

-
-

* Imagine Map here :) *

+
+
{/* TODO: Replace 3 with data */} @@ -85,11 +102,11 @@ class ReportPageComponent extends React.Component {
Detailed recommendations in the next part of the report.

Breached Servers

- +

Scanned Servers

- + {/* TODO: Add table of scanned servers */}