Add infinite scroll to connections, implement connection actions

3 files changed, 117 insertions, 29 deletions

diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 13b394a..8121d51 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -1,8 +1,50 @@
 import React, {Component} from 'react';
 import './Connection.scss';
-import {Button, OverlayTrigger, Tooltip} from "react-bootstrap";
+import axios from 'axios'
+import {Button, Form, OverlayTrigger, Popover} from "react-bootstrap";
 
 class Connection extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            update: false,
+            copiedMessage: false
+        };
+
+        this.copyTextarea = React.createRef();
+        this.handleAction = this.handleAction.bind(this);
+    }
+
+    handleAction(name) {
+        if (name === "hide") {
+            const enabled = !this.props.data.hidden;
+            axios.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`)
+                .then(res => {
+                    if (res.status === 202) {
+                        this.props.onEnabled(!enabled);
+                        this.setState({update: true});
+                    }
+                });
+        }
+        if (name === "mark") {
+            const marked = this.props.data.marked;
+            axios.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`)
+                .then(res => {
+                    if (res.status === 202) {
+                        this.props.onMarked(!marked);
+                        this.setState({update: true});
+                    }
+                });
+        }
+        if (name === "copy") {
+            this.copyTextarea.current.select();
+            document.execCommand('copy');
+            this.setState({copiedMessage: true});
+            setTimeout(() => this.setState({copiedMessage: false}), 3000);
+        }
+    }
+
     render() {
         let conn = this.props.data;
         let serviceName = "/dev/null";
@@ -13,16 +55,37 @@ class Connection extends Component {
         }
         let startedAt = new Date(conn.started_at);
         let closedAt = new Date(conn.closed_at);
+        let processedAt = new Date(conn.processed_at);
         let duration = ((closedAt - startedAt) / 1000).toFixed(3);
-        let timeInfo = `Started at ${startedAt}\nClosed at ${closedAt}\nProcessed at ${new Date(conn.processed_at)}`;
+        let timeInfo = <div>
+            <span>Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}</span><br/>
+            <span>Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}</span><br/>
+            <span>Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()}</span>
+        </div>;
 
         let classes = "connection";
         if (this.props.selected) {
             classes += " connection-selected";
         }
-        if (conn.marked){
-            classes += " connection-marked";
-        }
+
+        const popoverFor = function (name, content) {
+            return <Popover id={`popover-${name}-${conn.id}`} className="connection-popover">
+                <Popover.Content>
+                    {content}
+                </Popover.Content>
+            </Popover>;
+        };
+
+        const commentPopoverContent = <div>
+            <span>Click to <strong>{conn.comment.length > 0 ? "edit" : "add"}</strong> comment</span>
+            {conn.comment && <Form.Control as="textarea" readOnly={true} rows={2} defaultValue={conn.comment}/>}
+        </div>;
+
+        const copyPopoverContent = <div>
+            {this.state.copiedMessage ? <span><strong>Copied!</strong></span> :
+                <span>Click to <strong>copy</strong> the connection id</span>}
+            <Form.Control as="textarea" readOnly={true} rows={1} defaultValue={conn.id} ref={this.copyTextarea}/>
+        </div>;
 
         return (
             <tr className={classes}>
@@ -38,24 +101,39 @@ class Connection extends Component {
                 <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>}>*/}
+                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+                                    overlay={popoverFor("duration", timeInfo)}>
                         <span className="test-tooltip">{duration}s</span>
-                    {/*</OverlayTrigger>*/}
+                    </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>
+                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+                                    overlay={popoverFor("hide", <span>Hide this connection from the list</span>)}>
+                        <span className={"connection-icon" + (conn.hidden ? " icon-enabled" : "")}
+                              onClick={() => this.handleAction("hide")}>%</span>
+                    </OverlayTrigger>
+                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+                                    overlay={popoverFor("hide", <span>Mark this connection</span>)}>
+                        <span className={"connection-icon" + (conn.marked ? " icon-enabled" : "")}
+                              onClick={() => this.handleAction("mark")}>!!</span>
+                    </OverlayTrigger>
+                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+                                    overlay={popoverFor("comment", commentPopoverContent)}>
+                        <span className={"connection-icon" + (conn.comment ? " icon-enabled" : "")}
+                              onClick={() => this.handleAction("comment")}>@</span>
+                    </OverlayTrigger>
+                    <OverlayTrigger trigger={["focus", "hover"]} placement="right"
+                                    overlay={popoverFor("copy", copyPopoverContent)}>
+                        <span className="connection-icon"
+                              onClick={() => this.handleAction("copy")}>#</span>
+                    </OverlayTrigger>
                 </td>
-
             </tr>
         );
     }
 
 }
 
-
 export default Connection;
diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
index d27ebc8..5ad195d 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -9,10 +9,6 @@
     vertical-align: middle;
   }
 
-  &.connection-marked {
-    border-right: 5px solid $color-secondary-2;
-  }
-
   .connection-service {
     .btn {
       width: 100%;
@@ -31,6 +27,10 @@
     cursor: pointer;
   }
 
+  .connection-icon.icon-enabled {
+    color: $color-secondary-2;
+  }
+
   &:hover {
     background-color: $color-primary-2;
   }
@@ -41,3 +41,21 @@
 
 }
 
+.connection-popover {
+  background-color: $color-primary-4;
+  border: none;
+
+  .popover-body {
+    color: $color-primary-1;
+
+    textarea {
+      background-color: $color-primary-3;
+      font-size: 12px;
+      width: 200px;
+    }
+  }
+
+  .arrow::after {
+    border-right-color: $color-primary-4;
+  }
+}
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index bd35b5c..db63cbe 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,18 +1,13 @@
 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';
+import {Dropdown} from 'react-bootstrap';
 
 class ConnectionContent extends Component {
     render() {
-        let content = this.props.connectionPayload
+        let content = this.props.connectionPayload;
 
         if (content === undefined) {
-            return <div>nope</div>
+            return <div>nope</div>;
         }
 
         let payload = content.map(c =>
@@ -20,10 +15,7 @@ class ConnectionContent extends Component {
                 {c.content}
 
             </span>
-        )
-
-
-
+        );
 
         return (
             <div className="connection-content">