From 1317044508a9b7adf0d4d9faf4b9f75f5834a0c9 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Sat, 18 Jul 2020 13:09:18 +0200 Subject: Add service_port filter --- frontend/src/components/Connection.js | 31 +++++---- frontend/src/components/Connection.scss | 4 ++ frontend/src/components/ConnectionContent.js | 31 +++------ frontend/src/components/ServicePortFilter.js | 91 ++++++++++++++++++++++++++ frontend/src/components/ServicePortFilter.scss | 61 +++++++++++++++++ 5 files changed, 181 insertions(+), 37 deletions(-) create mode 100644 frontend/src/components/ServicePortFilter.js create mode 100644 frontend/src/components/ServicePortFilter.scss (limited to 'frontend/src/components') 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 @@ -93,27 +96,27 @@ class Connection extends Component { + }} onClick={() => this.props.addServicePortFilter(conn.port_dst)}>{serviceName} - this.props.onSelected()}>{conn.ip_src} - this.props.onSelected()}>{conn.port_src} - this.props.onSelected()}>{conn.ip_dst} - this.props.onSelected()}>{conn.port_dst} - this.props.onSelected()}> + {conn.ip_src} + {conn.port_src} + {conn.ip_dst} + {conn.port_dst} + {duration}s - this.props.onSelected()}>{conn.client_bytes} - this.props.onSelected()}>{conn.server_bytes} - - Hide this connection from the list)}> - this.handleAction("hide")}>% - + {conn.client_bytes} + {conn.server_bytes} + + {/*Hide this connection from the list)}>*/} + {/* this.handleAction("hide")}>%*/} + {/**/} Mark this connection)}> nope; } - const format = this.state.format !== "default" ? `/${this.state.format}` : ""; - const redirect = ; - let payload = content.map((c, i) => - + {c.content} ); @@ -63,11 +52,11 @@ class ConnectionContent extends Component { return (
- - - ciao - - + {/**/} + {/* */} + {/* ciao*/} + {/* */} + {/**/} @@ -92,10 +81,6 @@ class ConnectionContent extends Component { 
{payload}
- - {/*{redirect}*/} - -
); } @@ -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 = ; + } + let active = this.state.servicePort !== ""; + + return ( +
+
+
+ service_port: +
+
+ + { active && +
+ this.setState({ + servicePort: "", + servicePortUrl: null + })}>del +
+ } + + {redirect} +
+ ); + } + +} + +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 -- cgit v1.2.3-70-g09d2