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/src/components/Connection.js | 73 ++++++++++++++++++++++++++
frontend/src/components/Connection.scss | 54 +++++++++++++++++++
frontend/src/components/ConnectionContent.js | 61 +++++++++++++++++++++
frontend/src/components/ConnectionContent.scss | 28 ++++++++++
4 files changed, 216 insertions(+)
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
(limited to 'frontend/src/components')
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}
+
+
+