Add services dialog

3 files changed, 52 insertions, 77 deletions

diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 4bdc8cd..ce2b173 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -1,24 +1,13 @@
 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'
+import {Button, OverlayTrigger, Tooltip} from "react-bootstrap";
 
 class Connection extends Component {
     render() {
         let conn = this.props.data
-        let serviceName = "assign"
-        let serviceColor = "#fff"
-        if (conn.service != null) {
+        let serviceName = "/dev/null"
+        let serviceColor = "#0F192E"
+        if (conn.service.port !== 0) {
             serviceName = conn.service.name
             serviceColor = conn.service.color
         }
@@ -27,41 +16,40 @@ class Connection extends Component {
         let duration = ((closedAt - startedAt) / 1000).toFixed(3)
         let timeInfo = `Started at ${startedAt}\nClosed at ${closedAt}\nProcessed at ${new Date(conn.processed_at)}`
 
+        let classes = "connection"
+        if (this.props.selected) {
+            classes += " connection-selected"
+        }
+        if (conn.marked){
+            classes += " connection-marked"
+        }
 
         return (
-            <tr className={conn.marked ? "connection connection-marked" : "connection"}>
-                <div className="connection-header">
+            <tr className={classes}>
+                <td>
                     <span className="connection-service">
-                        <button className="btn" style={{
+                        <Button size="sm" 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>
+                        }}>{serviceName}</Button>
                     </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>
-
+                </td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>{conn.ip_src}</td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>{conn.port_src}</td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>{conn.ip_dst}</td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>{conn.port_dst}</td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>
+                    {/*<OverlayTrigger placement="top" overlay={<Tooltip id={`tooltip-${conn.id}`}>{timeInfo}</Tooltip>}>*/}
+                        <span className="test-tooltip">{duration}s</span>
+                    {/*</OverlayTrigger>*/}
+                </td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>{conn.client_bytes}</td>
+                <td className="clickable" onClick={() => this.props.onSelected()}>{conn.server_bytes}</td>
+                <td>
+                    <span className="connection-icon connection-hide">%</span>
+                    <span className="connection-icon connection-mark">!!</span>
+                    <span className="connection-icon connection-comment">@</span>
+                    <span className="connection-icon connection-link">#</span>
+                </td>
 
             </tr>
         );
diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
index 8910cb4..d27ebc8 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -2,52 +2,41 @@
 
 .connection {
   background-color: $color-primary-0;
-  margin-bottom: 5px;
+  border-top: 3px solid $color-primary-3;
+  border-bottom: 3px solid $color-primary-3;
 
+  td {
+    vertical-align: middle;
+  }
 
   &.connection-marked {
     border-right: 5px solid $color-secondary-2;
   }
 
   .connection-service {
-    padding: 0 12px 0 0;
-
     .btn {
-      font-size: 12px;
-      width: 120px;
+      width: 100%;
     }
-  }
-
-  .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;
+    .btn:hover {
+      background-color: $color-primary-1 !important;
+      color: $color-primary-4;
     }
   }
 
-  .connection-hide, .connection-mark, .connection-comment, .connection-link {
-    margin-left: 5px;
+  .connection-icon {
+    font-weight: 600;
+    font-size: 18px;
+    margin-right: 6px;
+    cursor: pointer;
   }
 
+  &:hover {
+    background-color: $color-primary-2;
+  }
 
-  svg {
-    margin-right: 6px;
+  &.connection-selected {
+    background-color: $color-primary-2;
   }
 
 }
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 061282c..bd35b5c 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -11,8 +11,6 @@ class ConnectionContent extends Component {
     render() {
         let content = this.props.connectionPayload
 
-        console.log(content)
-
         if (content === undefined) {
             return <div>nope</div>
         }