4 files changed, 216 insertions, 0 deletions
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 (
+            <tr className={conn.marked ? "connection connection-marked" : "connection"}>
+                <div className="connection-header">
+                    <span className="connection-service">
+                        <button className="btn" style={{
+                            "backgroundColor": serviceColor
+                        }}>{serviceName}</button>
+                    </span>
+                    <span className="connection-src">
+                        <FontAwesomeIcon icon={faLaptop}/>
+                        <span className="connection-ip-port">{conn.ip_src}:{conn.port_src}</span>
+                    </span>
+                    <span className="connection-separator">{"->"}</span>
+                    <span className="connection-dst">
+                        <FontAwesomeIcon icon={faServer}/>
+                        <span className="connection-ip-port">{conn.ip_dst}:{conn.port_dst}</span>
+                    </span>
+
+                    <span className="connection-duration" data-toggle="tooltip" data-placement="top" title={timeInfo}>
+                        <FontAwesomeIcon icon={faHourglassHalf}/>
+                        <span className="connection-seconds">{duration}s</span>
+                    </span>
+                    <span className="connection-bytes">
+                        <FontAwesomeIcon icon={faCloudDownloadAlt}/>
+                        <span className="connection-bytes-count">{conn.client_bytes}</span>
+                        <FontAwesomeIcon icon={faCloudUploadAlt}/>
+                        <span className="connection-bytes-count">{conn.server_bytes}</span>
+                    </span>
+                    <span className="connection-hide"><FontAwesomeIcon icon={faEyeSlash}/></span>
+                    <span className="connection-mark"><FontAwesomeIcon icon={faThumbtack}/></span>
+                    <span className="connection-comment"><FontAwesomeIcon icon={faComment}/></span>
+                    <span className="connection-link"><FontAwesomeIcon icon={faLink}/></span>
+                </div>
+
+
+            </tr>
+        );
+    }
+
+}
+
+
+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 <div>nope</div>
+        }
+
+        let payload = content.map(c =>
+            <span key={c.id} className={c.from_client ? "from-client" : "from-server"} title="cccccc">
+                {c.content}
+
+            </span>
+        )
+
+
+
+
+        return (
+            <div className="connection-content">
+                <div className="connection-content-options">
+                    <Dropdown>
+                        <Dropdown.Toggle variant="success" id="dropdown-basic">
+                            format
+                        </Dropdown.Toggle>
+
+                        <Dropdown.Menu>
+                            <Dropdown.Item href="#/action-1">plain</Dropdown.Item>
+                            <Dropdown.Item href="#/action-2">hex</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">hexdump</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">base32</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">base64</Dropdown.Item>
+                            <Dropdown.Item href="#/action-3">ascii</Dropdown.Item>
+                        </Dropdown.Menu>
+                    </Dropdown>
+
+
+                </div>
+
+                <pre>{payload}</pre>
+
+
+            </div>
+        );
+    }
+
+}
+
+
+export default ConnectionContent;
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss
new file mode 100644
index 0000000..074d975
--- /dev/null
+++ b/frontend/src/components/ConnectionContent.scss
@@ -0,0 +1,28 @@
+@import '../colors.scss';
+
+.connection-content {
+  background-color: $color-primary-3;
+  height: 100%;
+  overflow: auto;
+
+
+  pre {
+    background-color: $color-primary-0;
+    padding: 10px 20px;
+    word-break: break-all;
+  }
+
+  .from-client {
+    color: #d4e0fc;
+  }
+
+  .from-server {
+    color: $color-secondary-4;
+
+    &:hover {
+      background-color: $color-primary-3;
+      border-top: 1px solid $color-primary-1;
+    }
+
+  }
+}
+\ No newline at end of file