From 3f3ae121ef082a430f4bdc84ab7970a5633d552a Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 29 Apr 2020 15:13:20 +0200
Subject: Frontend checkpoint
---
frontend/package.json | 14 +-
frontend/src/App.css | 38 --
frontend/src/App.js | 26 -
frontend/src/App.test.js | 9 -
frontend/src/colors.scss | 11 +
frontend/src/components/Connection.js | 73 +++
frontend/src/components/Connection.scss | 54 ++
frontend/src/components/ConnectionContent.js | 61 ++
frontend/src/components/ConnectionContent.scss | 28 +
frontend/src/index.css | 13 -
frontend/src/index.js | 5 +-
frontend/src/index.scss | 88 +++
frontend/src/views/App.js | 26 +
frontend/src/views/App.scss | 2 +
frontend/src/views/Connections.js | 96 +++
frontend/src/views/Connections.scss | 13 +
frontend/src/views/Footer.js | 19 +
frontend/src/views/Footer.scss | 14 +
frontend/src/views/Header.js | 48 ++
frontend/src/views/Header.scss | 18 +
frontend/src/views/MainPane.js | 49 ++
frontend/src/views/MainPane.scss | 9 +
frontend/yarn.lock | 805 ++++++++++++++++++++++++-
23 files changed, 1403 insertions(+), 116 deletions(-)
delete mode 100644 frontend/src/App.css
delete mode 100644 frontend/src/App.js
delete mode 100644 frontend/src/App.test.js
create mode 100644 frontend/src/colors.scss
create mode 100644 frontend/src/components/Connection.js
create mode 100644 frontend/src/components/Connection.scss
create mode 100644 frontend/src/components/ConnectionContent.js
create mode 100644 frontend/src/components/ConnectionContent.scss
delete mode 100644 frontend/src/index.css
create mode 100644 frontend/src/index.scss
create mode 100644 frontend/src/views/App.js
create mode 100644 frontend/src/views/App.scss
create mode 100644 frontend/src/views/Connections.js
create mode 100644 frontend/src/views/Connections.scss
create mode 100644 frontend/src/views/Footer.js
create mode 100644 frontend/src/views/Footer.scss
create mode 100644 frontend/src/views/Header.js
create mode 100644 frontend/src/views/Header.scss
create mode 100644 frontend/src/views/MainPane.js
create mode 100644 frontend/src/views/MainPane.scss
diff --git a/frontend/package.json b/frontend/package.json
index 4dd1930..a78cd6c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,12 +3,21 @@
"version": "0.1.0",
"private": false,
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^1.2.28",
+ "@fortawesome/free-solid-svg-icons": "^5.13.0",
+ "@fortawesome/react-fontawesome": "^0.1.9",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
+ "axios": "^0.19.2",
+ "bootstrap": "^4.4.1",
+ "node-sass": "^4.14.0",
"react": "^16.13.1",
+ "react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
- "react-scripts": "3.4.1"
+ "react-router-dom": "^5.1.2",
+ "react-scripts": "3.4.1",
+ "typed.js": "^2.0.11"
},
"scripts": {
"start": "react-scripts start",
@@ -30,5 +39,6 @@
"last 1 firefox version",
"last 1 safari version"
]
- }
+ },
+ "proxy": "http://localhost:3333"
}
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index 74b5e05..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/frontend/src/App.js b/frontend/src/App.js
deleted file mode 100644
index ce9cbd2..0000000
--- a/frontend/src/App.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
-
- );
-}
-
-export default App;
diff --git a/frontend/src/App.test.js b/frontend/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/frontend/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- const { getByText } = render();
- const linkElement = getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/frontend/src/colors.scss b/frontend/src/colors.scss
new file mode 100644
index 0000000..290a0cd
--- /dev/null
+++ b/frontend/src/colors.scss
@@ -0,0 +1,11 @@
+$color-primary-0: #17223B; // Main Primary color */
+$color-primary-1: #040B1B;
+$color-primary-2: #0F192E;
+$color-primary-3: #1D2841;
+$color-primary-4: #EAEAEA;
+
+$color-secondary-0: #FF6767;
+$color-secondary-1: #A20A0A;
+$color-secondary-2: #DF3030;
+$color-secondary-3: #FF9D9D;
+$color-secondary-4: #FFDFDF;
diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
new file mode 100644
index 0000000..4bdc8cd
--- /dev/null
+++ b/frontend/src/components/Connection.js
@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import './Connection.scss';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+ faCloudDownloadAlt,
+ faCloudUploadAlt,
+ faComment,
+ faEyeSlash,
+ faHourglassHalf,
+ faLaptop,
+ faLink,
+ faServer,
+ faThumbtack,
+} from '@fortawesome/free-solid-svg-icons'
+
+class Connection extends Component {
+ render() {
+ let conn = this.props.data
+ let serviceName = "assign"
+ let serviceColor = "#fff"
+ if (conn.service != null) {
+ serviceName = conn.service.name
+ serviceColor = conn.service.color
+ }
+ let startedAt = new Date(conn.started_at)
+ let closedAt = new Date(conn.closed_at)
+ let duration = ((closedAt - startedAt) / 1000).toFixed(3)
+ let timeInfo = `Started at ${startedAt}\nClosed at ${closedAt}\nProcessed at ${new Date(conn.processed_at)}`
+
+
+ return (
+
+
+
+
+
+
+
+ {conn.ip_src}:{conn.port_src}
+
+ {"->"}
+
+
+ {conn.ip_dst}:{conn.port_dst}
+
+
+
+
+ {duration}s
+
+
+
+ {conn.client_bytes}
+
+ {conn.server_bytes}
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+}
+
+
+export default Connection;
diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
new file mode 100644
index 0000000..8910cb4
--- /dev/null
+++ b/frontend/src/components/Connection.scss
@@ -0,0 +1,54 @@
+@import '../colors.scss';
+
+.connection {
+ background-color: $color-primary-0;
+ margin-bottom: 5px;
+
+
+ &.connection-marked {
+ border-right: 5px solid $color-secondary-2;
+ }
+
+ .connection-service {
+ padding: 0 12px 0 0;
+
+ .btn {
+ font-size: 12px;
+ width: 120px;
+ }
+ }
+
+ .connection-separator {
+ margin: 0 10px;
+ }
+
+ .connection-duration {
+ margin-left: 15px;
+
+ //.connection-seconds {
+ // width: 75px;
+ // display: inline-block;
+ // text-align: right;
+ //}
+ }
+
+ .connection-bytes {
+ margin-left: 10px;
+ margin-right: 10px;
+
+ .connection-bytes-count {
+ margin-right: 5px;
+ }
+ }
+
+ .connection-hide, .connection-mark, .connection-comment, .connection-link {
+ margin-left: 5px;
+ }
+
+
+ svg {
+ margin-right: 6px;
+ }
+
+}
+
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
new file mode 100644
index 0000000..061282c
--- /dev/null
+++ b/frontend/src/components/ConnectionContent.js
@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import './ConnectionContent.scss';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+
+} from '@fortawesome/free-solid-svg-icons'
+import {useParams} from "react-router-dom";
+import { Dropdown } from 'react-bootstrap';
+
+class ConnectionContent extends Component {
+ render() {
+ let content = this.props.connectionPayload
+
+ console.log(content)
+
+ if (content === undefined) {
+ return nope
+ }
+
+ let payload = content.map(c =>
+
+ {c.content}
+
+
+ )
+
+
+
+
+ return (
+
+
+
+
+ format
+
+
+
+ plain
+ hex
+ hexdump
+ base32
+ base64
+ ascii
+
+
+
+
+
+
+
{payload}
+
+
+
+
+
+
+ } />
+ } />
+
+
+
+
+ );
+ }
+}
+
+export default App;
diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss
new file mode 100644
index 0000000..2ee17ac
--- /dev/null
+++ b/frontend/src/views/App.scss
@@ -0,0 +1,2 @@
+.app {
+}
\ No newline at end of file
diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
new file mode 100644
index 0000000..5876a40
--- /dev/null
+++ b/frontend/src/views/Connections.js
@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import './Connections.scss';
+import axios from 'axios'
+import Connection from "../components/Connection";
+import {Link} from "react-router-dom";
+import Table from 'react-bootstrap/Table';
+
+class Connections extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ connections: [],
+ };
+ }
+
+
+ componentDidMount() {
+ axios.get("/api/connections").then(res => this.setState({connections: res.data}))
+ }
+
+ render() {
+ let connection = {
+ "id": "5dd95ff0fe7ae01ae7f419c2",
+ "ip_src": "10.62.82.1",
+ "ip_dst": "10.62.82.2",
+ "port_src": 59113,
+ "port_dst": 23179,
+ "started_at": "2019-11-23T16:36:00.1Z",
+ "closed_at": "2019-11-23T16:36:00.971Z",
+ "client_bytes": 331,
+ "server_bytes": 85,
+ "client_documents": 1,
+ "server_documents": 1,
+ "processed_at": "2020-04-21T17:10:29.532Z",
+ "matched_rules": [],
+ "hidden": false,
+ "marked": true,
+ "comment": "",
+ "service": {
+ "port": 23179,
+ "name": "kaboom",
+ "color": "#3C6D3C",
+ "notes": "wdddoddddddw"
+ }
+ }
+
+ return (
+
+
+
+
+ | service |
+ srcip |
+ dstip |
+ srcport |
+ dstport |
+ duration |
+ up |
+ down |
+ actions |
+
+
+
+
+ | 1 |
+ Mark |
+ Otto |
+ @mdo |
+
+
+ | 2 |
+ Jacob |
+ Thornton |
+ @fat |
+
+
+ | 3 |
+ Larry the Bird |
+ @twitter |
+
+
+
+
+ {
+ this.state.connections.map(c =>
+
+ )
+ }
+