From 2b2b8e66e7244592672c283fe7bb5d9a1fd9da99 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 8 Oct 2020 11:16:38 +0200
Subject: Minor changes

---
 frontend/src/components/Connection.js      | 33 ++++++++++++------------------
 frontend/src/components/Connection.scss    |  4 ++++
 frontend/src/components/Notifications.js   | 14 +++++++++----
 frontend/src/components/Notifications.scss |  1 +
 4 files changed, 28 insertions(+), 24 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 46a0cab..b7e2531 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -4,6 +4,7 @@ import {Form, OverlayTrigger, Popover} from "react-bootstrap";
 import backend from "../backend";
 import {dateTimeToTime, durationBetween, formatSize} from "../utils";
 import ButtonField from "./fields/ButtonField";
+import LinkPopover from "./objects/LinkPopover";
 
 const classNames = require('classnames');
 
@@ -54,9 +55,9 @@ class Connection extends Component {
             serviceName = service.name;
             serviceColor = service.color;
         }
-        let startedAt = new Date(conn.started_at);
-        let closedAt = new Date(conn.closed_at);
-        let processedAt = new Date(conn.processed_at);
+        let startedAt = new Date(conn["started_at"]);
+        let closedAt = new Date(conn["closed_at"]);
+        let processedAt = 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/>
@@ -88,28 +89,20 @@ class Connection extends Component {
                 <td>
                     <span className="connection-service">
                         <ButtonField small fullSpan color={serviceColor} name={serviceName}
-                                     onClick={() => this.props.addServicePortFilter(conn.port_dst)}/>
+                                     onClick={() => this.props.addServicePortFilter(conn["port_dst"])}/>
                     </span>
                 </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}>{dateTimeToTime(conn.started_at)}</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 trigger={["focus", "hover"]} placement="right"
-                                    overlay={popoverFor("duration", timeInfo)}>
-                        <span className="test-tooltip">{durationBetween(startedAt, closedAt)}</span>
-                    </OverlayTrigger>
+                    <LinkPopover text={dateTimeToTime(conn["started_at"])} content={timeInfo} placement="right"/>
                 </td>
-                <td className="clickable" onClick={this.props.onSelected}>{formatSize(conn.client_bytes)}</td>
-                <td className="clickable" onClick={this.props.onSelected}>{formatSize(conn.server_bytes)}</td>
+                <td className="clickable" onClick={this.props.onSelected}>{durationBetween(startedAt, closedAt)}</td>
+                <td className="clickable" onClick={this.props.onSelected}>{formatSize(conn["client_bytes"])}</td>
+                <td className="clickable" onClick={this.props.onSelected}>{formatSize(conn["server_bytes"])}</td>
                 <td>
-                    {/*<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" : "")}
diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss
index cb7fa54..cc1ea96 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -42,6 +42,10 @@
   &.has-matched-rules {
     border-bottom: 0;
   }
+
+  .link-popover {
+    font-weight: 400;
+  }
 }
 
 .connection-popover {
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index 4d6dcd4..9ce2b58 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -17,24 +17,30 @@ class Notifications extends Component {
             const notifications = this.state.notifications;
             notifications.push(notification);
             this.setState({notifications});
-
             setTimeout(() => {
                 const notifications = this.state.notifications;
                 notification.open = true;
                 this.setState({notifications});
             }, 100);
 
-            setTimeout(() => {
+            const hideHandle = setTimeout(() => {
                 const notifications = _.without(this.state.notifications, notification);
                 const closedNotifications = this.state.closedNotifications.concat([notification]);
                 notification.closed = true;
                 this.setState({notifications, closedNotifications});
             }, 5000);
 
-            setTimeout(() => {
+            const removeHandle = setTimeout(() => {
                 const closedNotifications = _.without(this.state.closedNotifications, notification);
                 this.setState({closedNotifications});
             }, 6000);
+
+            notification.onClick = () => {
+                clearTimeout(hideHandle);
+                clearTimeout(removeHandle);
+                const notifications = _.without(this.state.notifications, notification);
+                this.setState({notifications});
+            };
         });
     }
 
@@ -45,7 +51,7 @@ class Notifications extends Component {
                     {
                         this.state.closedNotifications.concat(this.state.notifications).map(n =>
                             <div className={classNames("notification", {"notification-closed": n.closed},
-                                {"notification-open": n.open})}>
+                                {"notification-open": n.open})} onClick={n.onClick}>
                                 <h3 className="notification-title">{n.event}</h3>
                                 <span className="notification-description">{JSON.stringify(n.message)}</span>
                             </div>
diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss
index bec7734..324d0bb 100644
--- a/frontend/src/components/Notifications.scss
+++ b/frontend/src/components/Notifications.scss
@@ -18,6 +18,7 @@
     color: $color-green-light;
     border-left: 5px solid $color-green-dark;
     background-color: $color-green;
+    cursor: pointer;
 
     .notification-title {
       font-size: 0.9em;
-- 
cgit v1.2.3-70-g09d2