Configuration saved successfully.
+ : ''}
+
+ );
+ }
+}
+
+export default ConfigurePageComponent;
diff --git a/monkey_island/cc/ui/src/components/pages/FullLogsPage.js b/monkey_island/cc/ui/src/components/pages/FullLogsPage.js
new file mode 100644
index 000000000..3b115464e
--- /dev/null
+++ b/monkey_island/cc/ui/src/components/pages/FullLogsPage.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import {Col} from 'react-bootstrap';
+import ReactJson from 'react-json-view'
+import JSONTree from 'react-json-tree'
+import ReactDataGrid, {Row} from 'react-data-grid';
+import {Icon} from "react-fa";
+const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons');
+
+// Custom Formatter component
+const JsonCellFormatter = React.createClass({
+ render() {
+ return (
+ this.row = node } {...this.props}/>
+ );
+ }
+ // height: '50px',
+ //
+ // onClick() {
+ // this.height = '200px';
+ // },
+ //
+ // render() {
+ // return (
+ //
+ //
+ // this.row = node } {...this.props}/>
+ //
+ // );
+ // }
+});
+
+class FullLogsPageComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ ...this.getInitialState()
+ };
+ }
+
+ getInitialState() {
+ this._columns = [
+ {
+ key: 'telem_type',
+ name: 'Type',
+ width: 200,
+ filterable: true,
+ sortable: true
+ },
+ {
+ key: 'monkey_guid',
+ name: 'Monkey ID',
+ filterable: true,
+ sortable: true
+ },
+ {
+ key: 'timestamp',
+ name: 'Time',
+ filterable: true,
+ sortable: true
+ },
+ {
+ key: 'data',
+ name: 'More Info',
+ formatter: JsonCellFormatter
+ }
+ ];
+
+ return { rows: [], filters: {}, sortColumn: null, sortDirection: null };
+ }
+
+ getRandomDate(start, end) {
+ return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleDateString();
+ }
+
+ getRows() {
+ return Selectors.getRows(this.state);
+ }
+
+ getSize() {
+ return this.getRows().length;
+ }
+
+ rowGetter = (rowIdx) => {
+ const rows = this.getRows();
+ return rows[rowIdx];
+ };
+
+ handleGridSort = (sortColumn, sortDirection) => {
+ this.setState({ sortColumn: sortColumn, sortDirection: sortDirection });
+ };
+
+ handleFilterChange = (filter) => {
+ let newFilters = Object.assign({}, this.state.filters);
+ if (filter.filterTerm) {
+ newFilters[filter.column.key] = filter;
+ } else {
+ delete newFilters[filter.column.key];
+ }
+
+ this.setState({ filters: newFilters });
+ };
+
+ onClearFilters = () => {
+ this.setState({ filters: {} });
+ };
+
+ componentDidMount = () => {
+ this.dataGrid.setState({canFilter: true}, () => this.hideFilterButton());
+ fetch('/api/telemetry')
+ .then(res => res.json())
+ .then(res => this.setState({rows: res.objects}));
+ };
+
+ hideFilterButton = () => document.getElementsByClassName('react-grid-Toolbar')[0].style.display = 'none';
+
+ render() {
+ return (
+
+ Full Logs
+
+ { this.dataGrid = grid; }}
+ rowRenderer={RowRenderer}
+ rowHeight={50}
+ minHeight={500}
+ columns={this._columns}
+ toolbar={}
+ rowGetter={this.rowGetter}
+ rowsCount={this.getSize()}
+ onGridSort={this.handleGridSort}
+ onAddFilter={this.handleFilterChange}
+ onClearFilters={this.onClearFilters} />
+
+
+ );
+ }
+}
+
+export default FullLogsPageComponent;
diff --git a/monkey_island/cc/ui/src/components/pages/MapPage.js b/monkey_island/cc/ui/src/components/pages/MapPage.js
new file mode 100644
index 000000000..fb236d857
--- /dev/null
+++ b/monkey_island/cc/ui/src/components/pages/MapPage.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import {Col} from 'react-bootstrap';
+import Graph from 'react-graph-vis';
+import {Icon} from 'react-fa'
+
+
+let options = {
+ layout: {
+ improvedLayout: false
+ },
+ groups: {
+ manuallyInfected: {
+ shape: 'icon',
+ icon: {
+ face: 'FontAwesome',
+ code: '\uf120',
+ size: 50,
+ color: '#8f5a0b'
+ }
+ },
+ infected: {
+ shape: 'icon',
+ icon: {
+ face: 'FontAwesome',
+ code: '\uf06d',
+ size: 50,
+ color: '#d30d09'
+ }
+ },
+ clean: {
+ shape: 'icon',
+ icon: {
+ face: 'FontAwesome',
+ code: '\uf108',
+ size: 50,
+ color: '#999'
+ }
+ }
+ }
+
+};
+
+class MapPageComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ graph: {nodes: [], edges: []}
+ };
+ }
+
+ events = {
+ select: event => this.selectionChanged(event)
+ };
+
+ componentDidMount() {
+ fetch('/api/netmap')
+ .then(res => res.json())
+ .then(res => this.setState({graph: res}));
+ }
+
+ selectionChanged(event) {
+ if (event.nodes.length === 1) {
+ console.log('selected node:', event.nodes[0]);
+ }
+ else if (event.edges.length === 1) {
+ console.log('selected edge:', event.edges[0]);
+ }
+ else {
+ console.log('no preview.');
+ }
+ }
+
+ render() {
+ return (
+
+
+
Infection Map
+
+
+
+
+
+
+
+
+
+
+
+
+ vm4
+ Infected Asset
+
+
+
+
+
Machine Info
+
...
+
+
Exploit Method
+
...
+
+
Timeline
+
+ -
+
+ failed attempt1
+
+ -
+
+ failed attempt2
+
+ -
+
+ Infection!
+
+
+
+
Run the Monkey
+ Run this snippet on a host for manually infecting it with a Monkey:
+
+
+
+
+ {this.state.cmd}
+
+
+ Or simply click here to Run on {this.state.ip}
+ { this.state.isRunning ?
+ Running...
+ : ''}
+
+
+ );
+ }
+}
+
+export default RunMonkeyPageComponent;
diff --git a/monkey_island/cc/ui/src/components/pages/RunServerPage.js b/monkey_island/cc/ui/src/components/pages/RunServerPage.js
new file mode 100644
index 000000000..dfa152809
--- /dev/null
+++ b/monkey_island/cc/ui/src/components/pages/RunServerPage.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import {Col} from 'react-bootstrap';
+import {Link} from 'react-router-dom';
+
+class RunServerPageComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {ip: '0.0.0.0'};
+ }
+
+ componentDidMount() {
+ fetch('/api')
+ .then(res => res.json())
+ .then(res => this.setState({ip: res.ips.join(', ')}));
+ }
+
+ render() {
+ return (
+
+ Monkey Island C&C Server
+
+
Your Monkey Island server is up and running on {this.state.ip} 👏 👏
+
+ Now configure the monkey (or just stick with the default configuration) and run the monkey.
+
+
Loading...
+
+
+
+
+
diff --git a/monkey_island/cc/ui/src/index.js b/monkey_island/cc/ui/src/index.js
new file mode 100644
index 000000000..3b4138107
--- /dev/null
+++ b/monkey_island/cc/ui/src/index.js
@@ -0,0 +1,8 @@
+import 'core-js/fn/object/assign';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/Main';
+import Bootstrap from 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
+
+// Render the main component into the dom
+ReactDOM.render(, document.getElementById('app'));
diff --git a/monkey_island/cc/ui/src/styles/App.css b/monkey_island/cc/ui/src/styles/App.css
new file mode 100644
index 000000000..9b6f4c28e
--- /dev/null
+++ b/monkey_island/cc/ui/src/styles/App.css
@@ -0,0 +1,209 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import url('https://fonts.googleapis.com/css?family=Alegreya');
+
+/* Base Application Styles */
+body {
+ color: #fff;
+ background: #222;
+}
+
+#app {
+ font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+/*
+ * Sidebar
+ */
+
+@media (min-width: 768px) {
+ .sidebar {
+ position: fixed !important;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ display: block;
+ padding: 1em;
+ overflow-x: hidden;
+ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+ background-color: #f5f5f5;
+ border-right: 1px solid #e8e8e8;
+ }
+
+ .header {
+ text-align: center;
+ font-weight: bold;
+ font-size: 1.2em;
+ }
+
+ .header img {
+ width: 100%;
+ }
+
+ .navigation {
+ margin-top: 1em;
+ }
+
+ ul {
+ list-style: none;
+ padding-left: 0;
+ }
+
+ li {
+ overflow: auto;
+ }
+
+ li .number {
+ color: #666;
+ display: inline-block;
+ width: 1.1em;
+ }
+
+ li a {
+ /*color: #d30d09;*/
+ color: #666;
+ display: block;
+ padding: 0.5em 1em;
+ margin: 0.1em 0;
+ }
+ li a:hover {
+ color: #000;
+ background: #e9e9e9;
+ text-decoration: none;
+ }
+ li a.active {
+ background: #fff;
+ text-decoration: none;
+ color: #d30d09;
+ }
+ li a.active:hover {
+ color: #d30d09;
+ }
+ li a.disabled {
+ color: #666;
+ cursor: auto;
+ pointer-events: none;
+ }
+
+ li ul {
+ margin-left: 1.5em;
+ }
+
+ li .checkmark {
+ font-size: 1.3em;
+ }
+}
+
+/*
+ * Main content
+ */
+
+.main {
+ padding: 2em 1em;
+}
+
+.page-title {
+ margin-top: 0;
+ margin-bottom: 1em;
+ padding-bottom: 0.5em;
+ border-bottom: 2px dotted #d30d09;
+ font-size: 2.5em;
+ color: #d30d09;
+ font-family: 'Alegreya', serif;
+}
+
+@media (min-width: 768px) {
+ .main {
+ padding-right: 40px;
+ padding-left: 40px;
+ }
+}
+.main .page-header {
+ margin-top: 0;
+}
+
+
+
+.index img {
+ margin: 40px auto;
+ border-radius: 4px;
+ background: #fff;
+ display: block;
+}
+
+.index .notice {
+ margin: 1em auto;
+ padding: 15px 0;
+ text-align: center;
+ border: 1px solid #000;
+ border-width: 1px 0;
+ background: #666;
+}
+
+/*
+ * Map Preview Pane
+ */
+
+.preview.well {
+ padding: 1em;
+}
+
+.preview h3 {
+ margin: 0;
+
+}
+.preview h3 small {
+ margin-top: 0.5em;
+ display: block;
+}
+.preview h3 .fa {
+ margin-right: 5px;
+}
+.preview h4 {
+ text-transform: uppercase;
+ color: #999;
+ font-size: 1em;
+ margin-top: 0;
+}
+.preview p, .preview .timeline {
+ margin-left: 1em;
+}
+
+.timeline {
+ position: relative;
+ padding: 0.5em 0;
+}
+
+.timeline:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 5px;
+ width: 2px;
+ height: 100%;
+ background: #ccc;
+ z-index: 1
+}
+
+.timeline li {
+ margin-left: 1.5em;
+ position: relative;
+ overflow: visible;
+ margin-bottom: 1em;
+}
+
+.timeline .bullet {
+ width: 16px;
+ background: #ccc;
+ position: absolute;
+ right: 100%;
+ top: 0;
+ bottom: 0;
+ margin: 2px 0.5em;
+ z-index: 2;
+ border-radius: 10px;
+}
+
+.timeline .bullet.bad {
+ background: #d30d09;
+}
diff --git a/monkey_island/cc/ui/webpack.config.js b/monkey_island/cc/ui/webpack.config.js
new file mode 100644
index 000000000..6b6a93914
--- /dev/null
+++ b/monkey_island/cc/ui/webpack.config.js
@@ -0,0 +1,32 @@
+'use strict';
+
+const path = require('path');
+const args = require('minimist')(process.argv.slice(2));
+
+// List of allowed environments
+const allowedEnvs = ['dev', 'dist', 'test'];
+
+// Set the correct environment
+let env;
+if (args._.length > 0 && args._.indexOf('start') !== -1) {
+ env = 'test';
+} else if (args.env) {
+ env = args.env;
+} else {
+ env = 'dev';
+}
+process.env.REACT_WEBPACK_ENV = env;
+
+/**
+ * Build the webpack configuration
+ * @param {String} wantedEnv The wanted environment
+ * @return {Object} Webpack config
+ */
+function buildConfig(wantedEnv) {
+ let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
+ let validEnv = isValid ? wantedEnv : 'dev';
+ let config = require(path.join(__dirname, 'cfg/' + validEnv));
+ return config;
+}
+
+module.exports = buildConfig(env);
+ by GuardiCore
+