Add service_port filter

5 files changed, 181 insertions, 37 deletions

diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js
index 8121d51..e41f542 100644
--- a/frontend/src/components/Connection.js
+++ b/frontend/src/components/Connection.js
@@ -67,6 +67,9 @@ class Connection extends Component {
         if (this.props.selected) {
             classes += " connection-selected";
         }
+        if (this.props.containsFlag) {
+            classes += " contains-flag";
+        }
 
         const popoverFor = function (name, content) {
             return <Popover id={`popover-${name}-${conn.id}`} className="connection-popover">
@@ -93,27 +96,27 @@ class Connection extends Component {
                     <span className="connection-service">
                         <Button size="sm" style={{
                             "backgroundColor": serviceColor
-                        }}>{serviceName}</Button>
+                        }} onClick={() => this.props.addServicePortFilter(conn.port_dst)}>{serviceName}</Button>
                     </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()}>
+                <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">{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>
-                    <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>
+                <td className="clickable" onClick={this.props.onSelected}>{conn.client_bytes}</td>
+                <td className="clickable" onClick={this.props.onSelected}>{conn.server_bytes}</td>
+                <td className="contains-flag">
+                    {/*<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 5ad195d..7c8e00c 100644
--- a/frontend/src/components/Connection.scss
+++ b/frontend/src/components/Connection.scss
@@ -39,6 +39,10 @@
     background-color: $color-primary-2;
   }
 
+  &.contains-flag {
+    border-right: 3px solid $color-secondary-2;
+  }
+
 }
 
 .connection-popover {
diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js
index 2028158..40fdcad 100644
--- a/frontend/src/components/ConnectionContent.js
+++ b/frontend/src/components/ConnectionContent.js
@@ -1,9 +1,7 @@
 import React, {Component} from 'react';
 import './ConnectionContent.scss';
-import {Col, Container, Dropdown, Row} from 'react-bootstrap';
+import {Dropdown} from 'react-bootstrap';
 import axios from 'axios';
-import {withRouter} from "react-router-dom";
-import {Redirect} from "react-router";
 
 class ConnectionContent extends Component {
 
@@ -19,12 +17,6 @@ class ConnectionContent extends Component {
         this.setFormat = this.setFormat.bind(this);
     }
 
-    componentDidMount() {
-        if ('format' in this.props.match.params) {
-            this.setFormat(this.props.match.params.format);
-        }
-    }
-
     componentDidUpdate(prevProps, prevState, snapshot) {
         if (this.props.connection !== null && (
             this.props.connection !== prevProps.connection || this.state.format !== prevState.format)) {
@@ -51,11 +43,8 @@ class ConnectionContent extends Component {
             return <div>nope</div>;
         }
 
-        const format = this.state.format !== "default" ? `/${this.state.format}` : "";
-        const redirect = <Redirect push to={`/connections/${this.props.connection.id}${format}`}/>;
-
         let payload = content.map((c, i) =>
-            <span key={`content-${i}`} className={c.from_client ? "from-client" : "from-server"} title="cccccc">
+            <span key={`content-${i}`} className={c.from_client ? "from-client" : "from-server"}>
                 {c.content}
             </span>
         );
@@ -63,11 +52,11 @@ class ConnectionContent extends Component {
         return (
             <div className="connection-content">
                 <div className="connection-content-options">
-                    <Container>
-                        <Row>
-                            <Col md={2}>ciao</Col>
-                        </Row>
-                    </Container>
+                    {/*<Container>*/}
+                    {/*    <Row>*/}
+                    {/*        <Col md={2}>ciao</Col>*/}
+                    {/*    </Row>*/}
+                    {/*</Container>*/}
 
 
                     <Dropdown onSelect={this.setFormat} >
@@ -92,10 +81,6 @@ class ConnectionContent extends Component {
                 </div>
 
                 <pre>{payload}</pre>
-
-                {/*{redirect}*/}
-
-
             </div>
         );
     }
@@ -103,4 +88,4 @@ class ConnectionContent extends Component {
 }
 
 
-export default withRouter(ConnectionContent);
+export default ConnectionContent;
diff --git a/frontend/src/components/ServicePortFilter.js b/frontend/src/components/ServicePortFilter.js
new file mode 100644
index 0000000..72f2643
--- /dev/null
+++ b/frontend/src/components/ServicePortFilter.js
@@ -0,0 +1,91 @@
+import React, {Component} from 'react';
+import './ServicePortFilter.scss';
+import {withRouter} from "react-router-dom";
+import {Redirect} from "react-router";
+
+class ServicePortFilter extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            servicePort: "",
+            servicePortUrl: null,
+            timeoutHandle: null
+        };
+
+        this.servicePortChanged = this.servicePortChanged.bind(this);
+    }
+
+    componentDidMount() {
+        let params = new URLSearchParams(this.props.location.search);
+        let servicePort = params.get("service_port");
+        if (servicePort !== null) {
+            this.setState({
+                servicePort: servicePort,
+                servicePortUrl: servicePort
+            });
+        }
+    }
+
+    servicePortChanged(event) {
+        let value = event.target.value.replace(/[^\d]/gi, '');
+        if (value.startsWith("0")) {
+            return;
+        }
+        if (value !== "") {
+            let port = parseInt(value);
+            if (port > 65565) {
+                return;
+            }
+        }
+
+        if (this.state.timeoutHandle !== null) {
+            clearTimeout(this.state.timeoutHandle);
+        }
+        this.setState({
+            servicePort: value,
+            timeoutHandle: setTimeout(() =>
+                this.setState({servicePortUrl: value === "" ? null : value}), 300)
+        });
+    }
+
+    render() {
+        let redirect = null;
+        let urlParams = new URLSearchParams(this.props.location.search);
+        if (urlParams.get("service_port") !== this.state.servicePortUrl) {
+            if (this.state.servicePortUrl !== null) {
+                urlParams.set("service_port", this.state.servicePortUrl);
+            } else {
+                urlParams.delete("service_port");
+            }
+            redirect = <Redirect push to={`${this.props.location.pathname}?${urlParams}`} />;
+        }
+        let active = this.state.servicePort !== "";
+
+        return (
+            <div className={"filter d-inline-block" + (active ? " filter-active" : "")}
+                 style={{"width": "200px"}}>
+                <div className="input-group">
+                    <div className="filter-name-wrapper">
+                        <span className="filter-name" id="filter-service_port">service_port:</span>
+                    </div>
+                    <input placeholder="all ports" aria-label="service_port" aria-describedby="filter-service_port"
+                           className="form-control filter-value" onChange={this.servicePortChanged} value={this.state.servicePort} /></div>
+
+                { active &&
+                    <div className="filter-delete">
+                        <span className="filter-delete-icon" onClick={() => this.setState({
+                            servicePort: "",
+                            servicePortUrl: null
+                        })}>del</span>
+                    </div>
+                }
+
+                {redirect}
+            </div>
+        );
+    }
+
+}
+
+export default withRouter(ServicePortFilter);
diff --git a/frontend/src/components/ServicePortFilter.scss b/frontend/src/components/ServicePortFilter.scss
new file mode 100644
index 0000000..2b23444
--- /dev/null
+++ b/frontend/src/components/ServicePortFilter.scss
@@ -0,0 +1,61 @@
+@import '../colors.scss';
+
+.filter {
+  margin: 0 10px;
+  position: relative;
+
+  .filter-name-wrapper {
+    background-color: $color-primary-2;
+    padding: 3px 7px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .filter-name {
+    font-size: 13px;
+  }
+
+  .filter-value {
+    font-size: 13px;
+    padding-left: 0;
+    border-radius: 5px;
+
+    &:focus {
+      background-color: $color-primary-2;
+    }
+  }
+
+  &.filter-active {
+    .filter-name-wrapper {
+      background-color: $color-primary-4;
+      color: $color-primary-3;
+    }
+
+    .filter-value {
+      font-size: 13px;
+      background-color: $color-primary-4;
+      color: $color-primary-3;
+
+      &:focus {
+        background-color: $color-primary-4;
+      }
+    }
+  }
+
+  .filter-delete {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+
+    z-index: 10;
+    font-size: 11px;
+    letter-spacing: -0.5px;
+
+    color: $color-primary-2;
+    cursor: pointer;
+
+    .filter-delete-icon {
+      font-weight: 800;
+    }
+  }
+}
\ No newline at end of file