this.setState({filterWindowOpen: true})} /> +

this.setState({filterWindowOpen: true})}/>

- {this.state.configured ? : - this.setState({configured: true})} />} + {this.state.configured ? : + this.setState({configured: true})}/>} {modal}

diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index 73979c4..fe655b3 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -6,26 +6,31 @@ import {Redirect} from 'react-router'; import {withRouter} from "react-router-dom"; import backend from "../backend"; import ConnectionMatchedRules from "../components/ConnectionMatchedRules"; +import dispatcher from "../globals"; +import log from "../log"; +import ButtonField from "../components/fields/ButtonField"; class Connections extends Component { + state = { + loading: false, + connections: [], + firstConnection: null, + lastConnection: null, + flagRule: null, + rules: null, + queryString: null + }; + constructor(props) { super(props); - this.state = { - loading: false, - connections: [], - firstConnection: null, - lastConnection: null, - prevParams: null, - flagRule: null, - rules: null, - queryString: null - }; this.scrollTopThreashold = 0.00001; this.scrollBottomThreashold = 0.99999; - this.maxConnections = 500; + this.maxConnections = 200; this.queryLimit = 50; + this.connectionsListRef = React.createRef(); + this.lastScrollPosition = 0; } componentDidMount() { @@ -35,6 +40,17 @@ class Connections extends Component { this.setState({selected: this.props.initialConnection.id}); // TODO: scroll to initial connection } + + dispatcher.register((payload) => { + if (payload.actionType === "timeline-update") { + this.connectionsListRef.current.scrollTop = 0; + this.loadConnections({ + started_after: Math.round(payload.from.getTime() / 1000), + started_before: Math.round(payload.to.getTime() / 1000), + limit: this.maxConnections + }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); + } + }); } connectionSelected = (c) => { @@ -46,7 +62,7 @@ class Connections extends Component { if (this.state.loaded && prevProps.location.search !== this.props.location.search) { this.setState({queryString: this.props.location.search}); this.loadConnections({limit: this.queryLimit}) - .then(() => console.log("Connections reloaded after query string update")); + .then(() => log.info("Connections reloaded after query string update")); } } @@ -54,12 +70,26 @@ class Connections extends Component { let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight); if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) { this.loadConnections({from: this.state.lastConnection.id, limit: this.queryLimit,}) - .then(() => console.log("Following connections loaded")); + .then(() => log.info("Following connections loaded")); } if (!this.state.loading && relativeScroll < this.scrollTopThreashold) { this.loadConnections({to: this.state.firstConnection.id, limit: this.queryLimit,}) - .then(() => console.log("Previous connections loaded")); + .then(() => log.info("Previous connections loaded")); + if (this.state.showMoreRecentButton) { + this.setState({showMoreRecentButton: false}); + } + } else { + if (this.lastScrollPosition > e.currentTarget.scrollTop) { + if (!this.state.showMoreRecentButton) { + this.setState({showMoreRecentButton: true}); + } + } else { + if (this.state.showMoreRecentButton) { + this.setState({showMoreRecentButton: false}); + } + } } + this.lastScrollPosition = e.currentTarget.scrollTop; }; addServicePortFilter = (port) => { @@ -85,14 +115,14 @@ class Connections extends Component { urlParams.set(name, value); } - this.setState({loading: true, prevParams: params}); + this.setState({loading: true}); let res = (await backend.get(`${url}?${urlParams}`)).json; let connections = this.state.connections; let firstConnection = this.state.firstConnection; let lastConnection = this.state.lastConnection; - if (params !== undefined && params.from !== undefined) { + if (params !== undefined && params.from !== undefined && params.to === undefined) { if (res.length > 0) { connections = this.state.connections.concat(res); lastConnection = connections[connections.length - 1]; @@ -102,7 +132,7 @@ class Connections extends Component { firstConnection = connections[0]; } } - } else if (params !== undefined && params.to !== undefined) { + } else if (params !== undefined && params.to !== undefined && params.from === undefined) { if (res.length > 0) { connections = res.concat(this.state.connections); firstConnection = connections[0]; @@ -112,6 +142,7 @@ class Connections extends Component { } } } else { + this.connectionsListRef.current.scrollTop = 0; if (res.length > 0) { connections = res; firstConnection = connections[0]; @@ -124,7 +155,7 @@ class Connections extends Component { } let rules = this.state.rules; - if (rules === null) { + if (rules == null) { rules = (await backend.get("/api/rules")).json; } @@ -135,15 +166,21 @@ class Connections extends Component { firstConnection: firstConnection, lastConnection: lastConnection }); + + if (firstConnection != null && lastConnection != null) { + dispatcher.dispatch({ + actionType: "connections-update", + from: new Date(lastConnection["started_at"]), + to: new Date(firstConnection["started_at"]) + }); + } } render() { let redirect; let queryString = this.state.queryString !== null ? this.state.queryString : ""; if (this.state.selected) { - let format = this.props.match.params.format; - format = format !== undefined ? "/" + format : ""; - redirect = ; + redirect = ; } let loading = null; @@ -154,48 +191,55 @@ class Connections extends Component { } return ( -

- - - - - - - - - - - - - - - - - { - this.state.connections.flatMap(c => { - return [ this.connectionSelected(c)} - selected={this.state.selected === c.id} - onMarked={marked => c.marked = marked} - onEnabled={enabled => c.hidden = !enabled} - addServicePortFilter={this.addServicePortFilter} />, - c.matched_rules.length > 0 && +

+ {this.state.showMoreRecentButton &&

+ + this.loadConnections({limit: this.queryLimit}) + .then(() => log.info("Most recent connections loaded")) + }/> +

} + +

service	srcip	srcport	dstip	dstport	started_at	duration	up	down	actions

+ + + + + + + + + + + + + + + + { + this.state.connections.flatMap(c => { + return [ this.connectionSelected(c)} + selected={this.state.selected === c.id} + onMarked={marked => c.marked = marked} + onEnabled={enabled => c.hidden = !enabled} + addServicePortFilter={this.addServicePortFilter}/>, + c.matched_rules.length > 0 && - ]; - }) - } - {loading} - -

service	srcip	srcport	dstip	dstport	started_at	duration	up	down	actions

- - {redirect} + addMatchedRulesFilter={this.addMatchedRulesFilter}/> + ]; + }) + } + {loading} + + + + {redirect} +

); } } - export default withRouter(Connections); diff --git a/frontend/src/views/Connections.scss b/frontend/src/views/Connections.scss index c7bd1df..9e2b6ba 100644 --- a/frontend/src/views/Connections.scss +++ b/frontend/src/views/Connections.scss @@ -1,37 +1,39 @@ @import "../colors.scss"; -.connections { +.connections-container { position: relative; - overflow: auto; height: 100%; - padding: 0 10px; + padding: 10px; background-color: $color-primary-3; - .table { - margin-top: 10px; - } + .connections { + position: relative; + overflow-y: scroll; + height: 100%; - .connections-header-padding { - position: sticky; - top: 0; - right: 0; - left: 0; - height: 10px; - margin-bottom: -10px; - background-color: $color-primary-3; - } + .table { + margin-bottom: 0; + } + + th { + font-size: 13.5px; + position: sticky; + top: 0; + padding: 5px; + border: none; + background-color: $color-primary-2; + } - th { - font-size: 13.5px; - position: sticky; - top: 10px; - padding: 5px; - border-top: 3px solid $color-primary-3; - border-bottom: 3px solid $color-primary-3; - background-color: $color-primary-2; + &:hover::-webkit-scrollbar-thumb { + background: $color-secondary-2; + } } - &:hover::-webkit-scrollbar-thumb { - background: $color-secondary-2; + .most-recent-button { + position: absolute; + z-index: 20; + top: 45px; + left: calc(50% - 50px); + background-color: red; } } diff --git a/frontend/src/views/Footer.js b/frontend/src/views/Footer.js index 0a3c5a3..ad1e4f7 100644 --- a/frontend/src/views/Footer.js +++ b/frontend/src/views/Footer.js @@ -1,19 +1,180 @@ import React, {Component} from 'react'; import './Footer.scss'; +import { + ChartContainer, + ChartRow, + Charts, + LineChart, + MultiBrush, + Resizable, + styler, + YAxis +} from "react-timeseries-charts"; +import {TimeRange, TimeSeries} from "pondjs"; +import backend from "../backend"; +import ChoiceField from "../components/fields/ChoiceField"; +import dispatcher from "../globals"; +import {withRouter} from "react-router-dom"; +import log from "../log"; + class Footer extends Component { + state = { + metric: "connections_per_service" + }; + + constructor() { + super(); + + this.disableTimeSeriesChanges = false; + this.selectionTimeout = null; + } + + filteredPort = () => { + const urlParams = new URLSearchParams(this.props.location.search); + return urlParams.get("service_port"); + }; + + componentDidMount() { + const filteredPort = this.filteredPort(); + this.setState({filteredPort}); + this.loadStatistics(this.state.metric, filteredPort).then(() => + log.debug("Statistics loaded after mount")); + + dispatcher.register((payload) => { + if (payload.actionType === "connections-update") { + this.setState({ + selection: new TimeRange(payload.from, payload.to), + }); + } + }); + } + + componentDidUpdate(prevProps, prevState, snapshot) { + const filteredPort = this.filteredPort(); + if (this.state.filteredPort !== filteredPort) { + this.setState({filteredPort}); + this.loadStatistics(this.state.metric, filteredPort).then(() => + log.debug("Statistics reloaded after filtered port changes")); + } + } + + loadStatistics = async (metric, filteredPort) => { + const urlParams = new URLSearchParams(); + urlParams.set("metric", metric); + + let services = (await backend.get("/api/services")).json; + if (filteredPort && services[filteredPort]) { + const service = services[filteredPort]; + services = {}; + services[filteredPort] = service; + } + + const ports = Object.keys(services); + ports.forEach(s => urlParams.append("ports", s)); + + const metrics = (await backend.get("/api/statistics?" + urlParams)).json; + const series = new TimeSeries({ + name: "statistics", + columns: ["time"].concat(ports), + points: metrics.map(m => [new Date(m["range_start"])].concat(ports.map(p => m[metric][p] || 0))) + }); + this.setState({ + metric, + series, + services, + timeRange: series.range(), + }); + log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`); + }; + + createStyler = () => { + return styler(Object.keys(this.state.services).map(port => { + return {key: port, color: this.state.services[port].color, width: 2}; + })); + }; + + handleTimeRangeChange = (timeRange) => { + if (!this.disableTimeSeriesChanges) { + this.setState({timeRange}); + } + }; + + handleSelectionChange = (timeRange) => { + this.disableTimeSeriesChanges = true; + + this.setState({selection: timeRange}); + if (this.selectionTimeout) { + clearTimeout(this.selectionTimeout); + } + this.selectionTimeout = setTimeout(() => { + dispatcher.dispatch({ + actionType: "timeline-update", + from: timeRange.begin(), + to: timeRange.end() + }); + this.selectionTimeout = null; + this.disableTimeSeriesChanges = false; + }, 1000); + }; + + aggregateSeries = (func) => { + const values = this.state.series.columns().map(c => this.state.series[func](c)); + return Math[func](...values); + }; + render() { return ( -

timeline - to be implemented

+ ); } } -export default Footer; +export default withRouter(Footer); diff --git a/frontend/src/views/Footer.scss b/frontend/src/views/Footer.scss index 6ec4a62..14360d4 100644 --- a/frontend/src/views/Footer.scss +++ b/frontend/src/views/Footer.scss @@ -1,13 +1,22 @@ @import "../colors.scss"; .footer { - padding: 15px 30px; + padding: 15px; - > .row { + .time-line { + position: relative; background-color: $color-primary-0; + + .metric-selection { + font-size: 0.8em; + position: absolute; + top: 5px; + right: 10px; + } } - .footer-timeline { - height: 100px; + svg text { + font-family: "Fira Code", monospace !important; + fill: $color-primary-4 !important; } } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 84d6058..fa150ab 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -909,6 +909,14 @@ "@babel/helper-create-regexp-features-plugin" "^7.10.4" "@babel/helper-plugin-utils" "^7.10.4" +"@babel/polyfill@^7.7.0": + version "7.11.5" + resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.11.5.tgz#df550b2ec53abbc2ed599367ec59e64c7a707bb5" + integrity sha512-FunXnE0Sgpd61pKSj2OSOs1D44rKTD3pGOfGilZ6LGrrIH0QEtJlTjqOqdF8Bs98JmjfGhni2BBkTfv9KcKJ9g== + dependencies: + core-js "^2.6.5" + regenerator-runtime "^0.13.4" + "@babel/preset-env@7.9.0": version "7.9.0" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.0.tgz#a5fc42480e950ae8f5d9f8f2bbc03f52722df3a8" @@ -1725,9 +1733,9 @@ "@types/react" "*" "@types/react@*", "@types/react@^16.9.11", "@types/react@^16.9.35": - version "16.9.49" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.49.tgz#09db021cf8089aba0cdb12a49f8021a69cce4872" - integrity sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g== + version "16.9.50" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.50.tgz#cb5f2c22d42de33ca1f5efc6a0959feb784a3a2d" + integrity sha512-kPx5YsNnKDJejTk1P+lqThwxN2PczrocwsvqXnjvVvKpFescoY62ZiM3TV7dH1T8lFhlHZF+PE5xUyimUwqEGA== dependencies: "@types/prop-types" "*" csstype "^3.0.2" @@ -2268,6 +2276,11 @@ array-unique@^0.3.2: resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg= +array.prototype.fill@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/array.prototype.fill/-/array.prototype.fill-1.0.2.tgz#ab33207f21d57d1ab2f7f0d1cf122d3419c38ef5" + integrity sha1-qzMgfyHVfRqy9/DRzxItNBnDjvU= + array.prototype.flat@^1.2.1: version "1.2.3" resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b" @@ -2535,7 +2548,7 @@ babel-preset-react-app@^9.1.2: babel-plugin-macros "2.8.0" babel-plugin-transform-react-remove-prop-types "0.4.24" -babel-runtime@^6.26.0: +babel-runtime@^6.23.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= @@ -2981,9 +2994,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001135: - version "1.0.30001140" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001140.tgz#30dae27599f6ede2603a0962c82e468bca894232" - integrity sha512-xFtvBtfGrpjTOxTpjP5F2LmN04/ZGfYV8EQzUIC/RmKpdrmzJrjqlJ4ho7sGuAMPko2/Jl08h7x9uObCfBFaAA== + version "1.0.30001142" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001142.tgz#a8518fdb5fee03ad95ac9f32a9a1e5999469c250" + integrity sha512-pDPpn9ankEpBFZXyCv2I4lh1v/ju+bqb78QfKf+w9XgDAFWBwSYPswXqprRdrgQWK0wQnpIbfwRjNHO1HWqvoQ== capture-exit@^2.0.0: version "2.0.0" @@ -3251,6 +3264,11 @@ color@^3.0.0: color-convert "^1.9.1" color-string "^1.5.2" +colorbrewer@^1.0.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/colorbrewer/-/colorbrewer-1.3.0.tgz#1d7e92a6277e42dc56377911bbd867bdbcb2ff7d" + integrity sha512-AzVPpWa+fuO/qY8LxPQjej6F49Lb2Cl+7U9YhPn6y4/SOY6u/EZiXUc7qHzRb6i6fWPStCUdEaU2731QyQKWjg== + colorette@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" @@ -3429,7 +3447,7 @@ core-js@^1.0.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY= -core-js@^2.4.0: +core-js@^2.4.0, core-js@^2.6.5: version "2.6.11" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== @@ -3641,9 +3659,9 @@ css-what@2.1: integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg== css-what@^3.2.1: - version "3.3.0" - resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39" - integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg== + version "3.4.1" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.1.tgz#81cb70b609e4b1351b1e54cbc90fd9c54af86e2e" + integrity sha512-wHOppVDKl4vTAOWzJt5Ek37Sgd9qq1Bmj/T1OjvicWbU5W7ru7Pqbn0Jdqii3Drx/h+dixHKXNhZYx7blthL7g== css.escape@^1.5.1: version "1.5.1" @@ -3779,6 +3797,123 @@ cyclist@^1.0.1: resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk= +d3-array@^1.2.0: + version "1.2.4" + resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" + integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== + +d3-axis@^1.0.8: + version "1.0.12" + resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.12.tgz#cdf20ba210cfbb43795af33756886fb3638daac9" + integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ== + +d3-collection@1: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e" + integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A== + +d3-color@1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" + integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q== + +d3-dispatch@1: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58" + integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA== + +d3-ease@1, d3-ease@^1.0.3: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2" + integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ== + +d3-format@1, d3-format@^1.2.0: + version "1.4.5" + resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4" + integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ== + +d3-interpolate@1, d3-interpolate@^1.1.5: + version "1.4.0" + resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" + integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA== + dependencies: + d3-color "1" + +d3-path@1: + version "1.0.9" + resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf" + integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg== + +d3-scale-chromatic@^1.1.1: + version "1.5.0" + resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz#54e333fc78212f439b14641fb55801dd81135a98" + integrity sha512-ACcL46DYImpRFMBcpk9HhtIyC7bTBR4fNOPxwVSl0LfulDAwyiHyPOTqcDG1+t5d4P9W7t/2NAuWu59aKko/cg== + dependencies: + d3-color "1" + d3-interpolate "1" + +d3-scale@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d" + integrity sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw== + dependencies: + d3-array "^1.2.0" + d3-collection "1" + d3-color "1" + d3-format "1" + d3-interpolate "1" + d3-time "1" + d3-time-format "2" + +d3-selection-multi@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/d3-selection-multi/-/d3-selection-multi-1.0.1.tgz#cd6c25413d04a2cb97470e786f2cd877f3e34f58" + integrity sha1-zWwlQT0EosuXRw54byzYd/PjT1g= + dependencies: + d3-selection "1" + d3-transition "1" + +d3-selection@1, d3-selection@^1.1.0: + version "1.4.2" + resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c" + integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg== + +d3-shape@^1.2.0: + version "1.3.7" + resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7" + integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw== + dependencies: + d3-path "1" + +d3-time-format@2, d3-time-format@^2.0.5: + version "2.3.0" + resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850" + integrity sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ== + dependencies: + d3-time "1" + +d3-time@1, d3-time@^1.0.7: + version "1.1.0" + resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1" + integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA== + +d3-timer@1: + version "1.0.10" + resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5" + integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw== + +d3-transition@1, d3-transition@^1.1.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.3.2.tgz#a98ef2151be8d8600543434c1ca80140ae23b398" + integrity sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA== + dependencies: + d3-color "1" + d3-dispatch "1" + d3-ease "1" + d3-interpolate "1" + d3-selection "^1.1.0" + d3-timer "1" + d@1, d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" @@ -4041,6 +4176,11 @@ dom-helpers@^5.0.1, dom-helpers@^5.1.0, dom-helpers@^5.1.2: "@babel/runtime" "^7.8.7" csstype "^3.0.2" +dom-resize@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/dom-resize/-/dom-resize-1.0.3.tgz#df9d71e808171fdb66ee88517b0d1c02cdb98876" + integrity sha512-lohasnGy9LABj1Sq7ZPUGIWSYf+4LFUwL0Aev+dAzxSzUiovc+lKnFyrc6M2TycMIoH7674kwKaucRIPZPgJXw== + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -4049,6 +4189,11 @@ dom-serializer@0: domelementtype "^2.0.1" entities "^2.0.0" +dom-walk@^0.1.0: + version "0.1.2" + resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84" + integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w== + domain-browser@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda" @@ -4243,23 +4388,23 @@ error-ex@^1.2.0, error-ex@^1.3.1: is-arrayish "^0.2.1" es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: - version "1.17.6" - resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a" - integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw== + version "1.17.7" + resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c" + integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g== dependencies: es-to-primitive "^1.2.1" function-bind "^1.1.1" has "^1.0.3" has-symbols "^1.0.1" - is-callable "^1.2.0" - is-regex "^1.1.0" - object-inspect "^1.7.0" + is-callable "^1.2.2" + is-regex "^1.1.1" + object-inspect "^1.8.0" object-keys "^1.1.1" - object.assign "^4.1.0" + object.assign "^4.1.1" string.prototype.trimend "^1.0.1" string.prototype.trimstart "^1.0.1" -es-abstract@^1.18.0-next.0: +es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1: version "1.18.0-next.1" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68" integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA== @@ -4758,7 +4903,7 @@ fast-json-stable-stringify@^2.0.0: resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== -fast-levenshtein@~2.0.6: +fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= @@ -5238,6 +5383,14 @@ global-prefix@^3.0.0: kind-of "^6.0.2" which "^1.3.1" +global@^4.3.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" + integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== + dependencies: + min-document "^2.19.0" + process "^0.11.10" + globals@^11.1.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" @@ -5437,6 +5590,11 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^2.5.0: + version "2.5.5" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" + integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== + hoist-non-react-statics@^3.1.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -5656,6 +5814,16 @@ immer@1.10.0: resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d" integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg== +immutable-devtools@0.0.4: + version "0.0.4" + resolved "https://registry.yarnpkg.com/immutable-devtools/-/immutable-devtools-0.0.4.tgz#1e7e87f2c7a4f0533955bc4c2922d124bf9129dd" + integrity sha1-Hn6H8sek8FM5VbxMKSLRJL+RKd0= + +immutable@^3.6.4: + version "3.8.2" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" + integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM= + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -5809,7 +5977,7 @@ internal-slot@^1.0.2: has "^1.0.3" side-channel "^1.0.2" -invariant@^2.2.2, invariant@^2.2.4: +invariant@^2.1.1, invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== @@ -5894,7 +6062,7 @@ is-buffer@^1.0.2, is-buffer@^1.1.5: resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== -is-callable@^1.1.4, is-callable@^1.2.0, is-callable@^1.2.2: +is-callable@^1.1.4, is-callable@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9" integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA== @@ -6081,7 +6249,7 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" -is-regex@^1.0.4, is-regex@^1.1.0, is-regex@^1.1.1: +is-regex@^1.0.4, is-regex@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9" integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg== @@ -7232,6 +7400,11 @@ merge2@^1.2.3: resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== +merge@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145" + integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ== + methods@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" @@ -7301,6 +7474,13 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0: resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg== +min-document@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685" + integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU= + dependencies: + dom-walk "^0.1.0" + min-indent@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869" @@ -7413,6 +7593,16 @@ mixin-object@^2.0.1: dependencies: minimist "^1.2.5" +moment-duration-format@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/moment-duration-format/-/moment-duration-format-1.3.0.tgz#541771b5f87a049cc65540475d3ad966737d6908" + integrity sha1-VBdxtfh6BJzGVUBHXTrZZnN9aQg= + +moment@^2.18.1, moment@^2.24.0: + version "2.29.0" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425" + integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -7734,18 +7924,18 @@ object-hash@^2.0.1: resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea" integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg== -object-inspect@^1.7.0, object-inspect@^1.8.0: +object-inspect@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0" integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA== object-is@^1.0.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6" - integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ== + version "1.1.3" + resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81" + integrity sha512-teyqLvFWzLkq5B9ki8FVWA902UER2qkxmdA4nLf+wjOLAWgxzCWZNCxpDq9MvE8MmhWNr+I8w3BN49Vx36Y6Xg== dependencies: define-properties "^1.1.3" - es-abstract "^1.17.5" + es-abstract "^1.18.0-next.1" object-keys@^1.0.12, object-keys@^1.1.1: version "1.1.1" @@ -8301,6 +8491,17 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +pondjs@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/pondjs/-/pondjs-0.9.0.tgz#5c931233f8ef56852914eb669506eaac62b0f13b" + integrity sha512-fXgEYrWhgC/N3CVuXarG+/q54jar35Mqf7QPdl7z+mX5RkMyyjLfj9fMgY3oHv2hzMo9zkNx2kK62DrZuG3LXg== + dependencies: + "@babel/polyfill" "^7.7.0" + immutable "^3.6.4" + immutable-devtools "0.0.4" + moment "^2.24.0" + underscore "^1.9.1" + portfinder@^1.0.25: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -9080,7 +9281,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^4.0.0" -prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -9335,6 +9536,18 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== +react-hot-loader@4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.1.2.tgz#5e8025f5bc5605506586b46eb2c6cc4006fd54d7" + integrity sha512-7EFwgpJOx4AG4pwVifgr/ZNBPAxl2z424nGJPc/APB3F8YtCA3WdYuGlcerRK2C9vYAoqiiLw745IB3wjnzrRQ== + dependencies: + fast-levenshtein "^2.0.6" + global "^4.3.0" + hoist-non-react-statics "^2.5.0" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.2" + shallowequal "^1.0.2" + react-input-mask@^3.0.0-alpha.2: version "3.0.0-alpha.2" resolved "https://registry.yarnpkg.com/react-input-mask/-/react-input-mask-3.0.0-alpha.2.tgz#113102942a557edc7a192e66020b8ce1ba699a5c" @@ -9359,7 +9572,7 @@ react-json-view@^1.19.1: react-lifecycles-compat "^3.0.4" react-textarea-autosize "^6.1.0" -react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -9479,6 +9692,35 @@ react-textarea-autosize@^6.1.0: dependencies: prop-types "^15.6.0" +react-timeseries-charts@^0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/react-timeseries-charts/-/react-timeseries-charts-0.16.1.tgz#46675a41a7806155a0b5a1342e3b811172845a5c" + integrity sha512-WK2Pege5/FGrE5ifGX1XTVQOZkobRUV5YMwRQi4+TpYAALL5cBLp+XCuAX8x8agq4AmqChpClPIrANc8pRL5RA== + dependencies: + array.prototype.fill "^1.0.1" + babel-runtime "^6.23.0" + colorbrewer "^1.0.0" + d3-axis "^1.0.8" + d3-ease "^1.0.3" + d3-format "^1.2.0" + d3-interpolate "^1.1.5" + d3-scale "^1.0.6" + d3-scale-chromatic "^1.1.1" + d3-selection "^1.1.0" + d3-selection-multi "^1.0.1" + d3-shape "^1.2.0" + d3-time "^1.0.7" + d3-time-format "^2.0.5" + d3-transition "^1.1.0" + dom-resize "^1.0.3" + invariant "^2.1.1" + merge "^1.2.0" + moment "^2.18.1" + moment-duration-format "^1.3.0" + prop-types "^15.5.10" + react-hot-loader "4.1.2" + underscore "^1.8.3" + react-transition-group@^4.4.1: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" @@ -10205,6 +10447,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shallowequal@^1.0.2: + version "1.1.0" + resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" + integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ== + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -11108,6 +11355,11 @@ uncontrollable@^7.0.0: invariant "^2.2.4" react-lifecycles-compat "^3.0.4" +underscore@^1.8.3, underscore@^1.9.1: + version "1.11.0" + resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.11.0.tgz#dd7c23a195db34267186044649870ff1bab5929e" + integrity sha512-xY96SsN3NA461qIRKZ/+qox37YXPtSBswMGfiNptr+wrt6ds4HaMw23TP612fEyGekRE6LNRiLYr/aqbHXNedw== + unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818" diff --git a/statistics_controller.go b/statistics_controller.go new file mode 100644 index 0000000..65c7d58 --- /dev/null +++ b/statistics_controller.go @@ -0,0 +1,71 @@ +package main + +import ( + "context" + "fmt" + log "github.com/sirupsen/logrus" + "time" +) + +type StatisticRecord struct { + RangeStart time.Time `json:"range_start" bson:"_id"` + ConnectionsPerService map[uint16]int `json:"connections_per_service" bson:"connections_per_service"` + ClientBytesPerService map[uint16]int `json:"client_bytes_per_service" bson:"client_bytes_per_service"` + ServerBytesPerService map[uint16]int `json:"server_bytes_per_service" bson:"server_bytes_per_service"` + DurationPerService map[uint16]int64 `json:"duration_per_service" bson:"duration_per_service"` +} + +type StatisticsFilter struct { + RangeFrom time.Time `form:"range_from"` + RangeTo time.Time `form:"range_to"` + Ports []uint16 `form:"ports"` + Metric string `form:"metric"` +} + +type StatisticsController struct { + storage Storage + metrics []string +} + +func NewStatisticsController(storage Storage) StatisticsController { + return StatisticsController{ + storage: storage, + metrics: []string{"connections_per_service", "client_bytes_per_service", + "server_bytes_per_service", "duration_per_service"}, + } +} + +func (sc *StatisticsController) GetStatistics(context context.Context, filter StatisticsFilter) []StatisticRecord { + var statisticRecords []StatisticRecord + query := sc.storage.Find(Statistics).Context(context) + if !filter.RangeFrom.IsZero() { + query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$lt": filter.RangeFrom}}}) + } + if !filter.RangeTo.IsZero() { + query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$gt": filter.RangeTo}}}) + } + for _, port := range filter.Ports { + for _, metric := range sc.metrics { + if filter.Metric == "" || filter.Metric == metric { + query = query.Projection(OrderedDocument{{fmt.Sprintf("%s.%d", metric, port), 1}}) + } + } + } + if filter.Metric != "" && len(filter.Ports) == 0 { + for _, metric := range sc.metrics { + if filter.Metric == metric { + query = query.Projection(OrderedDocument{{metric, 1}}) + } + } + } + + if err := query.All(&statisticRecords); err != nil { + log.WithError(err).WithField("filter", filter).Error("failed to retrieve statistics") + return []StatisticRecord{} + } + if statisticRecords == nil { + return []StatisticRecord{} + } + + return statisticRecords +} diff --git a/storage.go b/storage.go index aced06b..0888ce0 100644 --- a/storage.go +++ b/storage.go @@ -17,6 +17,7 @@ const ImportingSessions = "importing_sessions" const Rules = "rules" const Settings = "settings" const Services = "services" +const Statistics = "statistics" var ZeroRowID [12]byte @@ -57,6 +58,7 @@ func NewMongoStorage(uri string, port int, database string) (*MongoStorage, erro Rules: db.Collection(Rules), Settings: db.Collection(Settings), Services: db.Collection(Services), + Statistics: db.Collection(Statistics), } if _, err := collections[Services].Indexes().CreateOne(ctx, mongo.IndexModel{ @@ -150,6 +152,7 @@ type UpdateOperation interface { Filter(filter OrderedDocument) UpdateOperation Upsert(upsertResults *interface{}) UpdateOperation One(update interface{}) (bool, error) + OneComplex(update interface{}) (bool, error) Many(update interface{}) (int64, error) } @@ -200,6 +203,22 @@ func (fo MongoUpdateOperation) One(update interface{}) (bool, error) { return result.ModifiedCount == 1, nil } +func (fo MongoUpdateOperation) OneComplex(update interface{}) (bool, error) { + if fo.err != nil { + return false, fo.err + } + + result, err := fo.collection.UpdateOne(fo.ctx, fo.filter, update, fo.opt) + if err != nil { + return false, err + } + + if fo.upsertResult != nil { + *(fo.upsertResult) = result.UpsertedID + } + return result.ModifiedCount == 1, nil +} + func (fo MongoUpdateOperation) Many(update interface{}) (int64, error) { if fo.err != nil { return 0, fo.err @@ -238,6 +257,7 @@ func (storage *MongoStorage) Update(collectionName string) UpdateOperation { type FindOperation interface { Context(ctx context.Context) FindOperation Filter(filter OrderedDocument) FindOperation + Projection(filter OrderedDocument) FindOperation Sort(field string, ascending bool) FindOperation Limit(n int64) FindOperation First(result interface{}) error @@ -247,6 +267,7 @@ type FindOperation interface { type MongoFindOperation struct { collection *mongo.Collection filter OrderedDocument + projection OrderedDocument ctx context.Context optFind *options.FindOptions optFindOne *options.FindOneOptions @@ -266,6 +287,15 @@ func (fo MongoFindOperation) Filter(filter OrderedDocument) FindOperation { return fo } +func (fo MongoFindOperation) Projection(projection OrderedDocument) FindOperation { + for _, elem := range projection { + fo.projection = append(fo.projection, primitive.E{Key: elem.Key, Value: elem.Value}) + } + fo.optFindOne.SetProjection(fo.projection) + fo.optFind.SetProjection(fo.projection) + return fo +} + func (fo MongoFindOperation) Limit(n int64) FindOperation { fo.optFind.SetLimit(n) return fo @@ -321,6 +351,7 @@ func (storage *MongoStorage) Find(collectionName string) FindOperation { op := MongoFindOperation{ collection: collection, filter: OrderedDocument{}, + projection: OrderedDocument{}, optFind: options.Find(), optFindOne: options.FindOne(), sorts: OrderedDocument{}, -- cgit v1.2.3-70-g09d2 From d5f94b76986615b255b77b2a7b7ed336e5ad4838 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Wed, 7 Oct 2020 14:58:48 +0200 Subject: Implement notifications --- VERSION | 1 + application_context.go | 10 +- application_context_test.go | 4 +- application_router.go | 27 +++- application_router_test.go | 6 +- caronte.go | 12 +- frontend/package.json | 5 +- frontend/src/backend.js | 3 +- frontend/src/components/Connection.js | 11 +- frontend/src/components/ConnectionContent.scss | 9 +- frontend/src/components/Notifications.js | 60 +++++++++ frontend/src/components/Notifications.scss | 48 +++++++ frontend/src/components/panels/PcapPane.js | 33 ++--- frontend/src/components/panels/RulePane.js | 116 ++++++++--------- frontend/src/components/panels/ServicePane.js | 35 +++--- frontend/src/components/panels/common.scss | 4 +- frontend/src/dispatcher.js | 35 ++++++ frontend/src/globals.js | 5 - frontend/src/index.js | 6 +- frontend/src/notifications.js | 40 ++++++ frontend/src/setupProxy.js | 7 ++ frontend/src/views/App.js | 43 ++++--- frontend/src/views/Connections.js | 57 ++++++--- frontend/src/views/Connections.scss | 3 +- frontend/src/views/Footer.js | 20 ++- frontend/yarn.lock | 32 ++++- go.mod | 1 + go.sum | 2 + notification_controller.go | 165 +++++++++++++++++++++++++ pcap_importer.go | 7 +- 30 files changed, 624 insertions(+), 183 deletions(-) create mode 100644 VERSION create mode 100644 frontend/src/components/Notifications.js create mode 100644 frontend/src/components/Notifications.scss create mode 100644 frontend/src/dispatcher.js delete mode 100644 frontend/src/globals.js create mode 100644 frontend/src/notifications.js create mode 100644 frontend/src/setupProxy.js create mode 100644 notification_controller.go (limited to 'frontend/src/components') diff --git a/VERSION b/VERSION new file mode 100644 index 0000000..ce609ca --- /dev/null +++ b/VERSION @@ -0,0 +1 @@ +0.8 \ No newline at end of file diff --git a/application_context.go b/application_context.go index 6ea449d..9a9c97a 100644 --- a/application_context.go +++ b/application_context.go @@ -22,9 +22,10 @@ type ApplicationContext struct { ConnectionStreamsController ConnectionStreamsController StatisticsController StatisticsController IsConfigured bool + Version string } -func CreateApplicationContext(storage Storage) (*ApplicationContext, error) { +func CreateApplicationContext(storage Storage, version string) (*ApplicationContext, error) { var configWrapper struct { Config Config } @@ -45,9 +46,10 @@ func CreateApplicationContext(storage Storage) (*ApplicationContext, error) { } applicationContext := &ApplicationContext{ - Storage: storage, - Config: configWrapper.Config, - Accounts: accountsWrapper.Accounts, + Storage: storage, + Config: configWrapper.Config, + Accounts: accountsWrapper.Accounts, + Version: version, } applicationContext.configure() diff --git a/application_context_test.go b/application_context_test.go index eed0fd6..28c81a5 100644 --- a/application_context_test.go +++ b/application_context_test.go @@ -10,7 +10,7 @@ func TestCreateApplicationContext(t *testing.T) { wrapper := NewTestStorageWrapper(t) wrapper.AddCollection(Settings) - appContext, err := CreateApplicationContext(wrapper.Storage) + appContext, err := CreateApplicationContext(wrapper.Storage, "test") assert.NoError(t, err) assert.False(t, appContext.IsConfigured) assert.Zero(t, appContext.Config) @@ -39,7 +39,7 @@ func TestCreateApplicationContext(t *testing.T) { appContext.SetConfig(config) appContext.SetAccounts(accounts) - checkAppContext, err := CreateApplicationContext(wrapper.Storage) + checkAppContext, err := CreateApplicationContext(wrapper.Storage, "test") assert.NoError(t, err) assert.True(t, checkAppContext.IsConfigured) assert.Equal(t, checkAppContext.Config, config) diff --git a/application_router.go b/application_router.go index 8b5e32f..6431e22 100644 --- a/application_router.go +++ b/application_router.go @@ -13,7 +13,8 @@ import ( "time" ) -func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine { +func CreateApplicationRouter(applicationContext *ApplicationContext, + notificationController *NotificationController) *gin.Engine { router := gin.New() router.Use(gin.Logger()) router.Use(gin.Recovery()) @@ -47,6 +48,13 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine applicationContext.SetAccounts(settings.Accounts) c.JSON(http.StatusAccepted, gin.H{}) + notificationController.Notify("setup", InsertNotification, gin.H{}) + }) + + router.GET("/ws", func(c *gin.Context) { + if err := notificationController.NotificationHandler(c.Writer, c.Request); err != nil { + serverError(c, err) + } }) api := router.Group("/api") @@ -68,7 +76,9 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine if id, err := applicationContext.RulesManager.AddRule(c, rule); err != nil { unprocessableEntity(c, err) } else { - success(c, UnorderedDocument{"id": id}) + response := UnorderedDocument{"id": id} + success(c, response) + notificationController.Notify("rules.new", InsertNotification, response) } }) @@ -107,6 +117,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine notFound(c, UnorderedDocument{"id": id}) } else { success(c, rule) + notificationController.Notify("rules.edit", UpdateNotification, rule) } }) @@ -126,7 +137,9 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine if sessionID, err := applicationContext.PcapImporter.ImportPcap(fileName, flushAll); err != nil { unprocessableEntity(c, err) } else { - c.JSON(http.StatusAccepted, gin.H{"session": sessionID}) + response := gin.H{"session": sessionID} + c.JSON(http.StatusAccepted, response) + notificationController.Notify("pcap.upload", InsertNotification, response) } }) @@ -158,7 +171,9 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine } unprocessableEntity(c, err) } else { - c.JSON(http.StatusAccepted, gin.H{"session": sessionID}) + response := gin.H{"session": sessionID} + c.JSON(http.StatusAccepted, response) + notificationController.Notify("pcap.file", InsertNotification, response) } }) @@ -195,6 +210,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine session := gin.H{"session": sessionID} if cancelled := applicationContext.PcapImporter.CancelSession(sessionID); cancelled { c.JSON(http.StatusAccepted, session) + notificationController.Notify("sessions.delete", DeleteNotification, session) } else { notFound(c, session) } @@ -254,6 +270,8 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine if result { c.Status(http.StatusAccepted) + notificationController.Notify("connections.action", UpdateNotification, + gin.H{"connection_id": c.Param("id"), "action": c.Param("action")}) } else { notFound(c, gin.H{"connection": id}) } @@ -285,6 +303,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext) *gin.Engine } if err := applicationContext.ServicesController.SetService(c, service); err == nil { success(c, service) + notificationController.Notify("services.edit", UpdateNotification, service) } else { unprocessableEntity(c, err) } diff --git a/application_router_test.go b/application_router_test.go index 4225ab9..f4804e3 100644 --- a/application_router_test.go +++ b/application_router_test.go @@ -148,10 +148,12 @@ func NewRouterTestToolkit(t *testing.T, withSetup bool) *RouterTestToolkit { wrapper := NewTestStorageWrapper(t) wrapper.AddCollection(Settings) - appContext, err := CreateApplicationContext(wrapper.Storage) + appContext, err := CreateApplicationContext(wrapper.Storage, "test") require.NoError(t, err) gin.SetMode(gin.ReleaseMode) - router := CreateApplicationRouter(appContext) + notificationController := NewNotificationController(appContext) + go notificationController.Run() + router := CreateApplicationRouter(appContext, notificationController) toolkit := RouterTestToolkit{ appContext: appContext, diff --git a/caronte.go b/caronte.go index 098642c..288563c 100644 --- a/caronte.go +++ b/caronte.go @@ -4,6 +4,7 @@ import ( "flag" "fmt" log "github.com/sirupsen/logrus" + "io/ioutil" ) func main() { @@ -22,12 +23,19 @@ func main() { log.WithError(err).WithFields(logFields).Fatal("failed to connect to MongoDB") } - applicationContext, err := CreateApplicationContext(storage) + versionBytes, err := ioutil.ReadFile("VERSION") + if err != nil { + log.WithError(err).Fatal("failed to load version file") + } + + applicationContext, err := CreateApplicationContext(storage, string(versionBytes)) if err != nil { log.WithError(err).WithFields(logFields).Fatal("failed to create application context") } - applicationRouter := CreateApplicationRouter(applicationContext) + notificationController := NewNotificationController(applicationContext) + go notificationController.Run() + applicationRouter := CreateApplicationRouter(applicationContext, notificationController) if applicationRouter.Run(fmt.Sprintf("%s:%v", *bindAddress, *bindPort)) != nil { log.WithError(err).WithFields(logFields).Fatal("failed to create the server") } diff --git a/frontend/package.json b/frontend/package.json index 5bc13f1..b3ad03a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,7 +14,7 @@ "classnames": "^2.2.6", "dompurify": "^2.1.1", "eslint-config-react-app": "^5.2.1", - "flux": "^3.1.3", + "http-proxy-middleware": "^1.0.5", "lodash": "^4.17.20", "node-sass": "^4.14.0", "pondjs": "^0.9.0", @@ -50,6 +50,5 @@ "last 1 firefox version", "last 1 safari version" ] - }, - "proxy": "http://localhost:3333" + } } diff --git a/frontend/src/backend.js b/frontend/src/backend.js index 72ee9dd..c7abd80 100644 --- a/frontend/src/backend.js +++ b/frontend/src/backend.js @@ -1,4 +1,3 @@ - async function json(method, url, data, json, headers) { const options = { method: method, @@ -28,7 +27,7 @@ async function json(method, url, data, json, headers) { const backend = { get: (url = "", headers = null) => - json("GET", url, null,null, headers), + json("GET", url, null, null, headers), post: (url = "", data = null, headers = null) => json("POST", url, null, data, headers), put: (url = "", data = null, headers = null) => diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js index 44f9f18..46a0cab 100644 --- a/frontend/src/components/Connection.js +++ b/frontend/src/components/Connection.js @@ -48,10 +48,11 @@ class Connection extends Component { render() { let conn = this.props.data; let serviceName = "/dev/null"; - let serviceColor = "#0F192E"; - if (conn.service.port !== 0) { - serviceName = conn.service.name; - serviceColor = conn.service.color; + let serviceColor = "#0f192e"; + if (this.props.services[conn["port_dst"]]) { + const service = this.props.services[conn["port_dst"]]; + serviceName = service.name; + serviceColor = service.color; } let startedAt = new Date(conn.started_at); let closedAt = new Date(conn.closed_at); @@ -87,7 +88,7 @@ class Connection extends Component { this.props.addServicePortFilter(conn.port_dst)} /> + onClick={() => this.props.addServicePortFilter(conn.port_dst)}/> {conn.ip_src} diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss index de4d699..f4edec9 100644 --- a/frontend/src/components/ConnectionContent.scss +++ b/frontend/src/components/ConnectionContent.scss @@ -2,7 +2,6 @@ .connection-content { height: 100%; - padding: 10px 10px 0; background-color: $color-primary-0; pre { @@ -91,12 +90,12 @@ .connection-content-header { height: 33px; padding: 0; - background-color: $color-primary-2; + background-color: $color-primary-3; .header-info { font-size: 12px; padding-top: 7px; - padding-left: 20px; + padding-left: 25px; } .header-actions { @@ -104,6 +103,10 @@ .choice-field { margin-top: -5px; + + .field-value { + background-color: $color-primary-3; + } } } } diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js new file mode 100644 index 0000000..4d6dcd4 --- /dev/null +++ b/frontend/src/components/Notifications.js @@ -0,0 +1,60 @@ +import React, {Component} from 'react'; +import './Notifications.scss'; +import dispatcher from "../dispatcher"; + +const _ = require('lodash'); +const classNames = require('classnames'); + +class Notifications extends Component { + + state = { + notifications: [], + closedNotifications: [], + }; + + componentDidMount() { + dispatcher.register("notifications", notification => { + 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 notifications = _.without(this.state.notifications, notification); + const closedNotifications = this.state.closedNotifications.concat([notification]); + notification.closed = true; + this.setState({notifications, closedNotifications}); + }, 5000); + + setTimeout(() => { + const closedNotifications = _.without(this.state.closedNotifications, notification); + this.setState({closedNotifications}); + }, 6000); + }); + } + + render() { + return ( +

+ { + this.state.closedNotifications.concat(this.state.notifications).map(n => +

{n.event}

+ {JSON.stringify(n.message)} +

+ ) + } +

+ ); + } +} + +export default Notifications; diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss new file mode 100644 index 0000000..b0c334b --- /dev/null +++ b/frontend/src/components/Notifications.scss @@ -0,0 +1,48 @@ +@import "../colors.scss"; + +.notifications { + position: absolute; + + left: 30px; + bottom: 50px; + z-index: 50; + + .notifications-list { + + } + + .notification { + background-color: $color-green; + border-left: 5px solid $color-green-dark; + padding: 10px; + margin: 10px 0; + width: 250px; + color: $color-green-light; + transform: translateX(-300px); + transition: all 1s ease; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + .notification-title { + font-size: 0.9em; + margin: 0; + } + + .notification-description { + font-size: 0.8em; + } + + &.notification-open { + transform: translateX(0px); + } + + &.notification-closed { + transform: translateY(-50px); + opacity: 0; + } + + } + + +} \ No newline at end of file diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js index 31d8815..13f7cb3 100644 --- a/frontend/src/components/panels/PcapPane.js +++ b/frontend/src/components/panels/PcapPane.js @@ -9,28 +9,31 @@ import CheckField from "../fields/CheckField"; import TextField from "../fields/TextField"; import ButtonField from "../fields/ButtonField"; import LinkPopover from "../objects/LinkPopover"; +import dispatcher from "../../dispatcher"; class PcapPane extends Component { - constructor(props) { - super(props); - - this.state = { - sessions: [], - isUploadFileValid: true, - isUploadFileFocused: false, - uploadFlushAll: false, - isFileValid: true, - isFileFocused: false, - fileValue: "", - processFlushAll: false, - deleteOriginalFile: false - }; - } + state = { + sessions: [], + isUploadFileValid: true, + isUploadFileFocused: false, + uploadFlushAll: false, + isFileValid: true, + isFileFocused: false, + fileValue: "", + processFlushAll: false, + deleteOriginalFile: false + }; componentDidMount() { this.loadSessions(); + dispatcher.register("notifications", payload => { + if (payload.event === "pcap.upload" || payload.event === "pcap.file") { + this.loadSessions(); + } + }); + document.title = "caronte:~/pcaps$"; } diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js index 4641378..76f3ac0 100644 --- a/frontend/src/components/panels/RulePane.js +++ b/frontend/src/components/panels/RulePane.js @@ -14,35 +14,13 @@ import ButtonField from "../fields/ButtonField"; import validation from "../../validation"; import LinkPopover from "../objects/LinkPopover"; import {randomClassName} from "../../utils"; +import dispatcher from "../../dispatcher"; const classNames = require('classnames'); const _ = require('lodash'); class RulePane extends Component { - constructor(props) { - super(props); - - this.state = { - rules: [], - newRule: this.emptyRule, - newPattern: this.emptyPattern - }; - - this.directions = { - 0: "both", - 1: "c->s", - 2: "s->c" - }; - } - - componentDidMount() { - this.reset(); - this.loadRules(); - - document.title = "caronte:~/rules$"; - } - emptyRule = { "name": "", "color": "", @@ -60,7 +38,6 @@ class RulePane extends Component { }, "version": 0 }; - emptyPattern = { "regex": "", "flags": { @@ -74,6 +51,34 @@ class RulePane extends Component { "max_occurrences": 0, "direction": 0 }; + state = { + rules: [], + newRule: this.emptyRule, + newPattern: this.emptyPattern + }; + + constructor(props) { + super(props); + + this.directions = { + 0: "both", + 1: "c->s", + 2: "s->c" + }; + } + + componentDidMount() { + this.reset(); + this.loadRules(); + + dispatcher.register("notifications", payload => { + if (payload.event === "rules.new" || payload.event === "rules.edit") { + this.loadRules(); + } + }); + + document.title = "caronte:~/rules$"; + } loadRules = () => { backend.get("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status})) @@ -226,17 +231,17 @@ class RulePane extends Component { { this.reset(); this.setState({selectedRule: _.cloneDeep(r)}); - }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id })}> + }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}> {r["id"].substring(0, 8)} {r["name"]} - + {r["notes"]} ); let patterns = (this.state.selectedPattern == null && !isUpdate ? - rule.patterns.concat(this.state.newPattern) : - rule.patterns + rule.patterns.concat(this.state.newPattern) : + rule.patterns ).map(p => p === pattern ? @@ -244,7 +249,7 @@ class RulePane extends Component { onChange={(v) => { this.updateParam(() => pattern.regex = v); this.setState({patternRegexFocused: pattern.regex === ""}); - }} /> + }}/> this.updateParam(() => pattern.flags.caseless = v)}/> @@ -259,34 +264,35 @@ class RulePane extends Component { this.updateParam(() => pattern.min_occurrences = v)} /> + onChange={(v) => this.updateParam(() => pattern.min_occurrences = v)}/> this.updateParam(() => pattern.max_occurrences = v)} /> + onChange={(v) => this.updateParam(() => pattern.max_occurrences = v)}/> s", "s->c"]} value={this.directions[pattern.direction]} - onChange={(v) => this.updateParam(() => pattern.direction = v)} /> + onChange={(v) => this.updateParam(() => pattern.direction = v)}/> {this.state.selectedPattern == null ? this.addPattern(p)}/> : - this.updatePattern(p)}/>} + this.updatePattern(p)}/>} : {p.regex} - {p.flags.caseless ? "yes": "no"} - {p.flags.dot_all ? "yes": "no"} - {p.flags.multi_line ? "yes": "no"} - {p.flags.utf_8_mode ? "yes": "no"} - {p.flags.unicode_property ? "yes": "no"} + {p.flags.caseless ? "yes" : "no"} + {p.flags.dot_all ? "yes" : "no"} + {p.flags.multi_line ? "yes" : "no"} + {p.flags.utf_8_mode ? "yes" : "no"} + {p.flags.unicode_property ? "yes" : "no"} {p.min_occurrences} {p.max_occurrences} {this.directions[p.direction]} {!isUpdate && this.editPattern(p) }/>} + onClick={() => this.editPattern(p)}/>} ); @@ -296,9 +302,9 @@ class RulePane extends Component {

GET /api/rules {this.state.rulesStatusCode && - } + }

@@ -327,7 +333,7 @@ class RulePane extends Component { + placement="left"/>

@@ -336,11 +342,11 @@ class RulePane extends Component { this.updateParam((r) => r.name = v)} - error={this.state.ruleNameError} /> + error={this.state.ruleNameError}/> this.updateParam((r) => r.color = v)} /> + onChange={(v) => this.updateParam((r) => r.color = v)}/> this.updateParam((r) => r.notes = v)} /> + onChange={(v) => this.updateParam((r) => r.notes = v)}/> @@ -348,29 +354,29 @@ class RulePane extends Component { this.updateParam((r) => r.filter.service_port = v)} min={0} max={65565} error={this.state.ruleServicePortError} - readonly={isUpdate} /> + readonly={isUpdate}/> this.updateParam((r) => r.filter.client_port = v)} min={0} max={65565} error={this.state.ruleClientPortError} - readonly={isUpdate} /> + readonly={isUpdate}/> this.updateParam((r) => r.filter.client_address = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.client_address = v)}/> this.updateParam((r) => r.filter.min_duration = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.min_duration = v)}/> this.updateParam((r) => r.filter.max_duration = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.max_duration = v)}/> this.updateParam((r) => r.filter.min_bytes = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.min_bytes = v)}/> this.updateParam((r) => r.filter.max_bytes = v)} /> + onChange={(v) => this.updateParam((r) => r.filter.max_bytes = v)}/> @@ -388,7 +394,7 @@ class RulePane extends Component { min max direction - {!isUpdate && actions } + {!isUpdate && actions} @@ -403,7 +409,7 @@ class RulePane extends Component {

{} + bordered onClick={isUpdate ? this.updateRule : this.addRule}/>

diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js index 0e99652..22c6655 100644 --- a/frontend/src/components/panels/ServicePane.js +++ b/frontend/src/components/panels/ServicePane.js @@ -12,28 +12,13 @@ import ButtonField from "../fields/ButtonField"; import validation from "../../validation"; import LinkPopover from "../objects/LinkPopover"; import {createCurlCommand} from "../../utils"; +import dispatcher from "../../dispatcher"; const classNames = require('classnames'); const _ = require('lodash'); class ServicePane extends Component { - constructor(props) { - super(props); - - this.state = { - services: [], - currentService: this.emptyService, - }; - - document.title = "caronte:~/services$"; - } - - componentDidMount() { - this.reset(); - this.loadServices(); - } - emptyService = { "port": 0, "name": "", @@ -41,6 +26,24 @@ class ServicePane extends Component { "notes": "" }; + state = { + services: [], + currentService: this.emptyService, + }; + + componentDidMount() { + this.reset(); + this.loadServices(); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices(); + } + }); + + document.title = "caronte:~/services$"; + } + loadServices = () => { backend.get("/api/services") .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status})) diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss index 121a917..1468f35 100644 --- a/frontend/src/components/panels/common.scss +++ b/frontend/src/components/panels/common.scss @@ -2,11 +2,9 @@ .pane-container { height: 100%; - padding: 10px 10px 0; background-color: $color-primary-3; .pane-section { - margin-bottom: 10px; background-color: $color-primary-0; .section-header { @@ -14,7 +12,7 @@ font-weight: 500; display: flex; padding: 5px 10px; - background-color: $color-primary-2; + background-color: $color-primary-3; .api-request { flex: 1; diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js new file mode 100644 index 0000000..4b8b5a4 --- /dev/null +++ b/frontend/src/dispatcher.js @@ -0,0 +1,35 @@ + +class Dispatcher { + + constructor() { + this.listeners = []; + } + + dispatch = (topic, payload) => { + this.listeners.filter(l => l.topic === topic).forEach(l => l.callback(payload)); + }; + + register = (topic, callback) => { + if (typeof callback !== "function") { + throw new Error("dispatcher callback must be a function"); + } + if (typeof topic === "string") { + this.listeners.push({topic, callback}); + } else if (typeof topic === "object" && Array.isArray(topic)) { + topic.forEach(e => { + if (typeof e !== "string") { + throw new Error("all topics must be strings"); + } + }); + + topic.forEach(e => this.listeners.push({e, callback})); + } else { + throw new Error("topic must be a string or an array of strings"); + } + }; + +} + +const dispatcher = new Dispatcher(); + +export default dispatcher; diff --git a/frontend/src/globals.js b/frontend/src/globals.js deleted file mode 100644 index cd4dc64..0000000 --- a/frontend/src/globals.js +++ /dev/null @@ -1,5 +0,0 @@ -import {Dispatcher} from "flux"; - -const dispatcher = new Dispatcher(); - -export default dispatcher; diff --git a/frontend/src/index.js b/frontend/src/index.js index 2e90371..beb52ae 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -4,6 +4,9 @@ import 'bootstrap/dist/css/bootstrap.css'; import './index.scss'; import App from './views/App'; import * as serviceWorker from './serviceWorker'; +import notifications from "./notifications"; + +notifications.createWebsocket(); ReactDOM.render( @@ -12,7 +15,4 @@ ReactDOM.render( document.getElementById('root') ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); diff --git a/frontend/src/notifications.js b/frontend/src/notifications.js new file mode 100644 index 0000000..2a77ffb --- /dev/null +++ b/frontend/src/notifications.js @@ -0,0 +1,40 @@ +import log from "./log"; +import dispatcher from "./dispatcher"; + +class Notifications { + + constructor() { + const location = document.location; + this.wsUrl = `ws://${location.hostname}${location.port ? ":" + location.port : ""}/ws`; + } + + createWebsocket = () => { + this.ws = new WebSocket(this.wsUrl); + this.ws.onopen = this.onWebsocketOpen; + this.ws.onerror = this.onWebsocketError; + this.ws.onclose = this.onWebsocketClose; + this.ws.onmessage = this.onWebsocketMessage; + }; + + onWebsocketOpen = () => { + log.debug("Connected to backend with websocket"); + }; + + onWebsocketError = (err) => { + this.ws.close(); + log.error("Websocket error", err); + setTimeout(() => this.createWebsocket(), 3000); + }; + + onWebsocketClose = () => { + log.debug("Closed websocket connection with backend"); + }; + + onWebsocketMessage = (message) => { + dispatcher.dispatch("notifications", JSON.parse(message.data)); + }; +} + +const notifications = new Notifications(); + +export default notifications; diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js new file mode 100644 index 0000000..6f082c8 --- /dev/null +++ b/frontend/src/setupProxy.js @@ -0,0 +1,7 @@ +const { createProxyMiddleware } = require('http-proxy-middleware'); + +module.exports = function(app) { + app.use(createProxyMiddleware("/api", { target: "http://localhost:3333" })); + app.use(createProxyMiddleware("/setup", { target: "http://localhost:3333" })); + app.use(createProxyMiddleware("/ws", { target: "http://localhost:3333", ws: true })); +}; diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 00d9110..c14b7f5 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -5,18 +5,22 @@ import MainPane from "../components/panels/MainPane"; import Footer from "./Footer"; import {BrowserRouter as Router} from "react-router-dom"; import Filters from "./Filters"; -import backend from "../backend"; import ConfigurationPane from "../components/panels/ConfigurationPane"; -import log from "../log"; +import Notifications from "../components/Notifications"; +import dispatcher from "../dispatcher"; class App extends Component { state = {}; componentDidMount() { - backend.get("/api/services").then(_ => { - log.debug("Caronte is already configured. Loading main.."); - this.setState({configured: true}); + dispatcher.register("notifications", payload => { + if (payload.event === "connected") { + this.setState({ + connected: true, + configured: payload.message["is_configured"] + }); + } }); setInterval(() => { @@ -36,19 +40,22 @@ class App extends Component { return (

- -

this.setState({filterWindowOpen: true})}/> -

- {this.state.configured ? : - this.setState({configured: true})}/>} - {modal} -

- {this.state.configured &&

- + + {this.state.connected && + +

this.setState({filterWindowOpen: true})}/> +

+ {this.state.configured ? : + this.setState({configured: true})}/>} + {modal} +

+ {this.state.configured &&

+ + }

); } diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index fe655b3..bd631a2 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -6,9 +6,9 @@ import {Redirect} from 'react-router'; import {withRouter} from "react-router-dom"; import backend from "../backend"; import ConnectionMatchedRules from "../components/ConnectionMatchedRules"; -import dispatcher from "../globals"; import log from "../log"; import ButtonField from "../components/fields/ButtonField"; +import dispatcher from "../dispatcher"; class Connections extends Component { @@ -17,8 +17,6 @@ class Connections extends Component { connections: [], firstConnection: null, lastConnection: null, - flagRule: null, - rules: null, queryString: null }; @@ -41,14 +39,24 @@ class Connections extends Component { // TODO: scroll to initial connection } - dispatcher.register((payload) => { - if (payload.actionType === "timeline-update") { - this.connectionsListRef.current.scrollTop = 0; - this.loadConnections({ - started_after: Math.round(payload.from.getTime() / 1000), - started_before: Math.round(payload.to.getTime() / 1000), - limit: this.maxConnections - }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); + dispatcher.register("timeline_updates", payload => { + this.connectionsListRef.current.scrollTop = 0; + this.loadConnections({ + started_after: Math.round(payload.from.getTime() / 1000), + started_before: Math.round(payload.to.getTime() / 1000), + limit: this.maxConnections + }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "rules.new" || payload.event === "rules.edit") { + this.loadRules().then(() => log.debug("Loaded connection rules after notification update")); + } + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices().then(() => log.debug("Services reloaded after notification update")); } }); } @@ -116,6 +124,13 @@ class Connections extends Component { } this.setState({loading: true}); + if (!this.state.rules) { + await this.loadRules(); + } + if (!this.state.services) { + await this.loadServices(); + } + let res = (await backend.get(`${url}?${urlParams}`)).json; let connections = this.state.connections; @@ -154,28 +169,29 @@ class Connections extends Component { } } - let rules = this.state.rules; - if (rules == null) { - rules = (await backend.get("/api/rules")).json; - } - this.setState({ loading: false, connections: connections, - rules: rules, firstConnection: firstConnection, lastConnection: lastConnection }); if (firstConnection != null && lastConnection != null) { - dispatcher.dispatch({ - actionType: "connections-update", + dispatcher.dispatch("connection_updates", { from: new Date(lastConnection["started_at"]), to: new Date(firstConnection["started_at"]) }); } } + loadRules = async () => { + return backend.get("/api/rules").then(res => this.setState({rules: res.json})); + }; + + loadServices = async () => { + return backend.get("/api/services").then(res => this.setState({services: res.json})); + }; + render() { let redirect; let queryString = this.state.queryString !== null ? this.state.queryString : ""; @@ -222,7 +238,8 @@ class Connections extends Component { selected={this.state.selected === c.id} onMarked={marked => c.marked = marked} onEnabled={enabled => c.hidden = !enabled} - addServicePortFilter={this.addServicePortFilter}/>, + addServicePortFilter={this.addServicePortFilter} + services={this.state.services}/>, c.matched_rules.length > 0 && - log.debug("Statistics loaded after mount")); - - dispatcher.register((payload) => { - if (payload.actionType === "connections-update") { - this.setState({ - selection: new TimeRange(payload.from, payload.to), - }); - } + this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); + + dispatcher.register("connection_updates", payload => { + this.setState({ + selection: new TimeRange(payload.from, payload.to), + }); }); } @@ -109,8 +106,7 @@ class Footer extends Component { clearTimeout(this.selectionTimeout); } this.selectionTimeout = setTimeout(() => { - dispatcher.dispatch({ - actionType: "timeline-update", + dispatcher.dispatch("timeline_updates", { from: timeRange.begin(), to: timeRange.end() }); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index fa150ab..e3cade9 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1656,6 +1656,13 @@ "@types/minimatch" "*" "@types/node" "*" +"@types/http-proxy@^1.17.4": + version "1.17.4" + resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.4.tgz#e7c92e3dbe3e13aa799440ff42e6d3a17a9d045b" + integrity sha512-IrSHl2u6AWXduUaDLqYpt45tLVCtYv7o4Z0s1KghBCDgIIS9oW5K1H8mZG/A2CfeLdEa7rTd1ACOiHBc1EMT2Q== + dependencies: + "@types/node" "*" + "@types/invariant@^2.2.33": version "2.2.34" resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.34.tgz#05e4f79f465c2007884374d4795452f995720bbe" @@ -2707,7 +2714,7 @@ braces@^2.3.1, braces@^2.3.2: split-string "^3.0.2" to-regex "^3.0.1" -braces@~3.0.2: +braces@^3.0.1, braces@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -5738,7 +5745,18 @@ http-proxy-middleware@0.19.1: lodash "^4.17.11" micromatch "^3.1.10" -http-proxy@^1.17.0: +http-proxy-middleware@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-1.0.5.tgz#4c6e25d95a411e3d750bc79ccf66290675176dc2" + integrity sha512-CKzML7u4RdGob8wuKI//H8Ein6wNTEQR7yjVEzPbhBLGdOfkfvgTnp2HLnniKBDP9QW4eG10/724iTWLBeER3g== + dependencies: + "@types/http-proxy" "^1.17.4" + http-proxy "^1.18.1" + is-glob "^4.0.1" + lodash "^4.17.19" + micromatch "^4.0.2" + +http-proxy@^1.17.0, http-proxy@^1.18.1: version "1.18.1" resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549" integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ== @@ -7434,6 +7452,14 @@ micromatch@^3.1.10, micromatch@^3.1.4: snapdragon "^0.8.1" to-regex "^3.0.2" +micromatch@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259" + integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q== + dependencies: + braces "^3.0.1" + picomatch "^2.0.5" + miller-rabin@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d" @@ -8405,7 +8431,7 @@ performance-now@^2.1.0: resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= -picomatch@^2.0.4, picomatch@^2.2.1: +picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad" integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg== diff --git a/go.mod b/go.mod index 308b16b..404f64c 100644 --- a/go.mod +++ b/go.mod @@ -9,6 +9,7 @@ require ( github.com/go-playground/validator/v10 v10.2.0 github.com/golang/protobuf v1.3.5 // indirect github.com/google/gopacket v1.1.17 + github.com/gorilla/websocket v1.4.2 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect github.com/modern-go/reflect2 v1.0.1 // indirect github.com/sirupsen/logrus v1.4.2 diff --git a/go.sum b/go.sum index fd63c39..d29e0cb 100644 --- a/go.sum +++ b/go.sum @@ -58,6 +58,8 @@ github.com/google/gopacket v1.1.17 h1:rMrlX2ZY2UbvT+sdz3+6J+pp2z+msCq9MxTU6ymxbB github.com/google/gopacket v1.1.17/go.mod h1:UdDNZ1OO62aGYVnPhxT1U6aI7ukYtA/kB8vaU0diBUM= github.com/gopherjs/gopherjs v0.0.0-20180825215210-0210a2f0f73c h1:16eHWuMGvCjSfgRJKqIzapE78onvvTbdi1rMkU00lZw= github.com/gopherjs/gopherjs v0.0.0-20180825215210-0210a2f0f73c/go.mod h1:wJfORRmW1u3UXTncJ5qlYoELFm8eSnnEO6hX4iZ3EWY= +github.com/gorilla/websocket v1.4.2 h1:+/TMaTYc4QFitKJxsQ7Yye35DkWvkdLcvGKqM+x0Ufc= +github.com/gorilla/websocket v1.4.2/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE= github.com/hashicorp/errwrap v1.0.0 h1:hLrqtEDnRye3+sgx6z4qVLNuviH3MR5aQ0ykNJa/UYA= github.com/hashicorp/errwrap v1.0.0/go.mod h1:YH+1FKiLXxHSkmPseP+kNlulaMuP3n2brvKWEqk/Jc4= github.com/hashicorp/go-multierror v1.0.0 h1:iVjPR7a6H0tWELX5NxNe7bYopibicUzc7uPribsnS6o= diff --git a/notification_controller.go b/notification_controller.go new file mode 100644 index 0000000..88c9e8c --- /dev/null +++ b/notification_controller.go @@ -0,0 +1,165 @@ +package main + +import ( + "github.com/gin-gonic/gin" + "github.com/gorilla/websocket" + log "github.com/sirupsen/logrus" + "net" + "net/http" + "time" +) + +const ( + InsertNotification = "insert" + UpdateNotification = "update" + DeleteNotification = "delete" + + writeWait = 10 * time.Second + pongWait = 60 * time.Second + pingPeriod = (pongWait * 9) / 10 + maxMessageSize = 512 +) + +type NotificationController struct { + upgrader websocket.Upgrader + clients map[net.Addr]*client + broadcast chan interface{} + register chan *client + unregister chan *client + applicationContext *ApplicationContext +} + +func NewNotificationController(applicationContext *ApplicationContext) *NotificationController { + return &NotificationController{ + upgrader: websocket.Upgrader{ + ReadBufferSize: 1024, + WriteBufferSize: 1024, + }, + clients: make(map[net.Addr]*client), + broadcast: make(chan interface{}), + register: make(chan *client), + unregister: make(chan *client), + applicationContext: applicationContext, + } +} + +type client struct { + conn *websocket.Conn + send chan interface{} + notificationController *NotificationController +} + +func (wc *NotificationController) NotificationHandler(w http.ResponseWriter, r *http.Request) error { + conn, err := wc.upgrader.Upgrade(w, r, nil) + if err != nil { + log.WithError(err).Error("failed to set websocket upgrade") + return err + } + + client := &client{ + conn: conn, + send: make(chan interface{}), + notificationController: wc, + } + wc.register <- client + go client.readPump() + go client.writePump() + + return nil +} + +func (wc *NotificationController) Run() { + for { + select { + case client := <-wc.register: + wc.clients[client.conn.RemoteAddr()] = client + payload := gin.H{"event": "connected", "message": gin.H{ + "version": wc.applicationContext.Version, + "is_configured": wc.applicationContext.IsConfigured, + "connected_clients": len(wc.clients), + }} + client.send <- payload + log.WithField("connected_clients", len(wc.clients)). + WithField("remote_address", client.conn.RemoteAddr()). + Info("[+] a websocket client connected") + case client := <-wc.unregister: + if _, ok := wc.clients[client.conn.RemoteAddr()]; ok { + close(client.send) + _ = client.conn.WriteMessage(websocket.CloseMessage, nil) + _ = client.conn.Close() + delete(wc.clients, client.conn.RemoteAddr()) + log.WithField("connected_clients", len(wc.clients)). + WithField("remote_address", client.conn.RemoteAddr()). + Info("[-] a websocket client disconnected") + } + case payload := <-wc.broadcast: + for _, client := range wc.clients { + select { + case client.send <- payload: + default: + close(client.send) + delete(wc.clients, client.conn.RemoteAddr()) + } + } + } + } +} + +func (wc *NotificationController) Notify(event string, eventType string, message interface{}) { + wc.broadcast <- gin.H{"event": event, "event_type": eventType, "message": message} +} + +func (c *client) readPump() { + c.conn.SetReadLimit(maxMessageSize) + if err := c.conn.SetReadDeadline(time.Now().Add(pongWait)); err != nil { + c.close() + return + } + c.conn.SetPongHandler(func(string) error { return c.conn.SetReadDeadline(time.Now().Add(pongWait)) }) + for { + if _, _, err := c.conn.ReadMessage(); err != nil { + if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway) { + log.WithError(err).WithField("remote_address", c.conn.RemoteAddr()). + Warn("unexpected websocket disconnection") + } + break + } + } + + c.close() +} + +func (c *client) writePump() { + ticker := time.NewTicker(pingPeriod) + defer ticker.Stop() + + for { + select { + case payload, ok := <-c.send: + if !ok { + return + } + if err := c.conn.SetWriteDeadline(time.Now().Add(writeWait)); err != nil { + c.close() + return + } + if err := c.conn.WriteJSON(payload); err != nil { + c.close() + return + } + case <-ticker.C: + if err := c.conn.SetWriteDeadline(time.Now().Add(writeWait)); err != nil { + c.close() + return + } + if err := c.conn.WriteMessage(websocket.PingMessage, nil); err != nil { + c.close() + return + } + } + } +} + +func (c *client) close() { + c.notificationController.unregister <- c +} diff --git a/pcap_importer.go b/pcap_importer.go index 1739b3f..78a5e6c 100644 --- a/pcap_importer.go +++ b/pcap_importer.go @@ -19,7 +19,6 @@ import ( const PcapsBasePath = "pcaps/" const ProcessingPcapsBasePath = PcapsBasePath + "processing/" const initialAssemblerPoolSize = 16 -const flushOlderThan = 5 * time.Minute const importUpdateProgressInterval = 100 * time.Millisecond type PcapImporter struct { @@ -201,8 +200,8 @@ func (pi *PcapImporter) parsePcap(session ImportingSession, fileName string, flu var servicePort uint16 var index int - isDstServer := pi.serverNet.Contains(packet.NetworkLayer().NetworkFlow().Dst().Raw()) - isSrcServer := pi.serverNet.Contains(packet.NetworkLayer().NetworkFlow().Src().Raw()) + isDstServer := pi.serverNet.Contains(packet.NetworkLayer().NetworkFlow().Dst().Raw()) + isSrcServer := pi.serverNet.Contains(packet.NetworkLayer().NetworkFlow().Src().Raw()) if isDstServer && !isSrcServer { servicePort = uint16(tcp.DstPort) index = 0 @@ -284,7 +283,7 @@ func deleteProcessingFile(fileName string) { } func moveProcessingFile(sessionID string, fileName string) { - if err := os.Rename(ProcessingPcapsBasePath + fileName, PcapsBasePath + sessionID + path.Ext(fileName)); err != nil { + if err := os.Rename(ProcessingPcapsBasePath+fileName, PcapsBasePath+sessionID+path.Ext(fileName)); err != nil { log.WithError(err).Error("failed to move processed file") } } -- cgit v1.2.3-70-g09d2 From 659833be506e86de277d23f4b48ecce422cfaa5d Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Wed, 7 Oct 2020 15:48:27 +0200 Subject: Fix style issues --- README.md | 42 ++++++++++++------------- frontend/src/components/Notifications.scss | 28 ++++++----------- frontend/src/components/fields/ChoiceField.scss | 4 +-- frontend/src/components/fields/InputField.scss | 15 +++++---- frontend/src/components/fields/common.scss | 3 +- frontend/src/index.scss | 2 ++ frontend/src/views/App.scss | 3 +- 7 files changed, 48 insertions(+), 49 deletions(-) (limited to 'frontend/src/components') diff --git a/README.md b/README.md index 0251be1..75158e2 100644 --- a/README.md +++ b/README.md @@ -13,23 +13,23 @@ The patterns can be defined as regex or using protocol specific rules. The connection flows are saved into a database and can be visualized with the web application. REST API are also provided. ## Features -- immediate installation with docker-compose -- no configuration file, settings can be changed via GUI or API -- the pcaps to be analyzed can be loaded via `curl`, either locally or remotely, or via the GUI - - it is also possible to download the pcaps from the GUI and see all the analysis statistics for each pcap -- rules can be created to identify connections that contain certain strings - - pattern matching is done through regular expressions (regex) - - regex in UTF-8 and Unicode format are also supported - - it is possible to add an additional filter to the connections identified through pattern matching by type of connection -- the connections can be labeled by type of service, identified by the port number - - each service can be assigned a different color -- it is possible to filter connections by addresses, ports, dimensions, time, duration, matched rules -- supports both IPv4 and IPv6 addresses - - if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used -- the detected HTTP connections are automatically reconstructed - - HTTP requests can be replicated through `curl`, `fetch` and `python requests` - - compressed HTTP responses (gzip/deflate) are automatically decompressed -- it is possible to export and view the content of connections in various formats, including hex and base64 +- immediate installation with docker-compose +- no configuration file, settings can be changed via GUI or API +- the pcaps to be analyzed can be loaded via `curl`, either locally or remotely, or via the GUI + - it is also possible to download the pcaps from the GUI and see all the analysis statistics for each pcap +- rules can be created to identify connections that contain certain strings + - pattern matching is done through regular expressions (regex) + - regex in UTF-8 and Unicode format are also supported + - it is possible to add an additional filter to the connections identified through pattern matching by type of connection +- the connections can be labeled by type of service, identified by the port number + - each service can be assigned a different color +- it is possible to filter connections by addresses, ports, dimensions, time, duration, matched rules +- supports both IPv4 and IPv6 addresses + - if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used +- the detected HTTP connections are automatically reconstructed + - HTTP requests can be replicated through `curl`, `fetch` and `python requests` + - compressed HTTP responses (gzip/deflate) are automatically decompressed +- it is possible to export and view the content of connections in various formats, including hex and base64 ## Installation There are two ways to install Caronte: @@ -77,16 +77,16 @@ The backend, written in Go language, it is designed as a service. It exposes RES ## Screenshots Below there are some screenshots showing the main features of the tool. -#### Viewing the contents of a connection +### Viewing the contents of a connection ![Connection Content](frontend/screenshots/connection_content.png) -#### Loading pcaps and analysis details +### Loading pcaps and analysis details ![Connection Content](frontend/screenshots/pcaps.png) -#### Creating new pattern matching rules +### Creating new pattern matching rules ![Connection Content](frontend/screenshots/rules.png) -#### Creating or editing services +### Creating or editing services ![Connection Content](frontend/screenshots/services.png) ## License diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss index b0c334b..bec7734 100644 --- a/frontend/src/components/Notifications.scss +++ b/frontend/src/components/Notifications.scss @@ -2,27 +2,22 @@ .notifications { position: absolute; - - left: 30px; - bottom: 50px; z-index: 50; - - .notifications-list { - - } + bottom: 50px; + left: 30px; .notification { - background-color: $color-green; - border-left: 5px solid $color-green-dark; - padding: 10px; - margin: 10px 0; + overflow: hidden; width: 250px; - color: $color-green-light; - transform: translateX(-300px); + margin: 10px 0; + padding: 10px; transition: all 1s ease; + transform: translateX(-300px); white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; + color: $color-green-light; + border-left: 5px solid $color-green-dark; + background-color: $color-green; .notification-title { font-size: 0.9em; @@ -41,8 +36,5 @@ transform: translateY(-50px); opacity: 0; } - } - - -} \ No newline at end of file +} diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss index 0b5e510..c8c7ff1 100644 --- a/frontend/src/components/fields/ChoiceField.scss +++ b/frontend/src/components/fields/ChoiceField.scss @@ -19,7 +19,7 @@ border-radius: 5px; background-color: $color-primary-2; - &:after { + &::after { position: absolute; right: 10px; content: "⋎"; @@ -58,7 +58,7 @@ display: block; } - .field-value:after { + .field-value::after { content: "⋏"; } } diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss index 7cc34d9..e8ef46a 100644 --- a/frontend/src/components/fields/InputField.scss +++ b/frontend/src/components/fields/InputField.scss @@ -28,7 +28,7 @@ display: none; } - .file-label:after { + .file-label::after { position: absolute; top: 0; right: 0; @@ -47,12 +47,13 @@ background-color: $color-primary-4 !important; } - .field-value input, .field-value .file-label { + .field-value input, + .field-value .file-label { color: $color-primary-3 !important; background-color: $color-primary-4 !important; } - .file-label:after { + .file-label::after { background-color: $color-secondary-4 !important; } } @@ -63,12 +64,13 @@ background-color: $color-secondary-2 !important; } - .field-value input, .field-value .file-label { + .field-value input, + .field-value .file-label { color: $color-primary-4 !important; background-color: $color-secondary-2 !important; } - .file-label:after { + .file-label::after { background-color: $color-secondary-1 !important; } } @@ -90,7 +92,8 @@ .field-input { width: 100%; - input, .file-label { + input, + .file-label { padding-left: 3px; border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss index f37369e..8fbef0d 100644 --- a/frontend/src/components/fields/common.scss +++ b/frontend/src/components/fields/common.scss @@ -1,7 +1,8 @@ @import "../../colors.scss"; .field { - input, textarea { + input, + textarea { width: 100%; padding: 7px 10px; color: $color-primary-4; diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 2e5b6b9..9d6afc4 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -1,7 +1,9 @@ @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap"); @import-normalize ; + @import "colors.scss"; + body { font-family: "Fira Code", monospace; font-size: 100%; diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss index 5c5bd99..87661c3 100644 --- a/frontend/src/views/App.scss +++ b/frontend/src/views/App.scss @@ -9,7 +9,8 @@ flex: 1 1; } - .main-header, .main-footer { + .main-header, + .main-footer { flex: 0 0; } } -- cgit v1.2.3-70-g09d2 From 2b2b8e66e7244592672c283fe7bb5d9a1fd9da99 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 8 Oct 2020 11:16:38 +0200 Subject: Minor changes --- application_router.go | 6 +- connections_controller.go | 4 +- frontend/src/components/Connection.js | 33 ++--- frontend/src/components/Connection.scss | 4 + frontend/src/components/Notifications.js | 14 +- frontend/src/components/Notifications.scss | 1 + frontend/src/views/App.js | 4 +- frontend/src/views/Connections.js | 44 ++++-- frontend/src/views/Footer.js | 176 ----------------------- frontend/src/views/Footer.scss | 22 --- frontend/src/views/Header.js | 24 ++-- frontend/src/views/Timeline.js | 215 +++++++++++++++++++++++++++++ frontend/src/views/Timeline.scss | 22 +++ 13 files changed, 313 insertions(+), 256 deletions(-) delete mode 100644 frontend/src/views/Footer.js delete mode 100644 frontend/src/views/Footer.scss create mode 100644 frontend/src/views/Timeline.js create mode 100644 frontend/src/views/Timeline.scss (limited to 'frontend/src/components') diff --git a/application_router.go b/application_router.go index 6431e22..30ec7c6 100644 --- a/application_router.go +++ b/application_router.go @@ -269,9 +269,9 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, } if result { - c.Status(http.StatusAccepted) - notificationController.Notify("connections.action", UpdateNotification, - gin.H{"connection_id": c.Param("id"), "action": c.Param("action")}) + response := gin.H{"connection_id": c.Param("id"), "action": c.Param("action")} + success(c, response) + notificationController.Notify("connections.action", UpdateNotification, response) } else { notFound(c, gin.H{"connection": id}) } diff --git a/connections_controller.go b/connections_controller.go index 2894193..e872c9f 100644 --- a/connections_controller.go +++ b/connections_controller.go @@ -68,11 +68,11 @@ func (cc ConnectionsController) GetConnections(c context.Context, filter Connect from, _ := RowIDFromHex(filter.From) if !from.IsZero() { - query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$lt": from}}}) + query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$lte": from}}}) } to, _ := RowIDFromHex(filter.To) if !to.IsZero() { - query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$gt": to}}}) + query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$gte": to}}}) } else { query = query.Sort("_id", false) } 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 =

Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}
@@ -88,28 +89,20 @@ class Connection extends Component { this.props.addServicePortFilter(conn.port_dst)}/> + onClick={() => this.props.addServicePortFilter(conn["port_dst"])}/> - {conn.ip_src} - {conn.port_src} - {conn.ip_dst} - {conn.port_dst} - {dateTimeToTime(conn.started_at)} + {conn["ip_src"]} + {conn["port_src"]} + {conn["ip_dst"]} + {conn["port_dst"]} - - {durationBetween(startedAt, closedAt)} - + - {formatSize(conn.client_bytes)} - {formatSize(conn.server_bytes)} + {durationBetween(startedAt, closedAt)} + {formatSize(conn["client_bytes"])} + {formatSize(conn["server_bytes"])} - {/*Hide this connection from the list)}>*/} - {/* this.handleAction("hide")}>%*/} - {/**/} Mark this connection)}> { 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 =>

+ {"notification-open": n.open})} onClick={n.onClick}>

{n.event}

{JSON.stringify(n.message)}

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; diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index c14b7f5..4bb9f57 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import './App.scss'; import Header from "./Header"; import MainPane from "../components/panels/MainPane"; -import Footer from "./Footer"; +import Timeline from "./Timeline"; import {BrowserRouter as Router} from "react-router-dom"; import Filters from "./Filters"; import ConfigurationPane from "../components/panels/ConfigurationPane"; @@ -52,7 +52,7 @@ class App extends Component { {modal}

- {this.state.configured &&

} diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index bd631a2..e835dcb 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -17,7 +17,6 @@ class Connections extends Component { connections: [], firstConnection: null, lastConnection: null, - queryString: null }; constructor(props) { @@ -29,14 +28,15 @@ class Connections extends Component { this.queryLimit = 50; this.connectionsListRef = React.createRef(); this.lastScrollPosition = 0; + this.doQueryStringRedirect = false; + this.doSelectedConnectionRedirect = false; } componentDidMount() { this.loadConnections({limit: this.queryLimit}) .then(() => this.setState({loaded: true})); - if (this.props.initialConnection != null) { + if (this.props.initialConnection) { this.setState({selected: this.props.initialConnection.id}); - // TODO: scroll to initial connection } dispatcher.register("timeline_updates", payload => { @@ -62,19 +62,24 @@ class Connections extends Component { } connectionSelected = (c) => { + this.doSelectedConnectionRedirect = true; this.setState({selected: c.id}); this.props.onSelected(c); }; componentDidUpdate(prevProps, prevState, snapshot) { if (this.state.loaded && prevProps.location.search !== this.props.location.search) { - this.setState({queryString: this.props.location.search}); this.loadConnections({limit: this.queryLimit}) .then(() => log.info("Connections reloaded after query string update")); } } handleScroll = (e) => { + if (this.disableScrollHandler) { + this.lastScrollPosition = e.currentTarget.scrollTop; + return; + } + let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight); if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) { this.loadConnections({from: this.state.lastConnection.id, limit: this.queryLimit,}) @@ -103,7 +108,8 @@ class Connections extends Component { addServicePortFilter = (port) => { const urlParams = new URLSearchParams(this.props.location.search); urlParams.set("service_port", port); - this.setState({queryString: "?" + urlParams}); + this.doQueryStringRedirect = true; + this.setState({queryString: urlParams}); }; addMatchedRulesFilter = (matchedRule) => { @@ -112,7 +118,8 @@ class Connections extends Component { if (!oldMatchedRules.includes(matchedRule)) { urlParams.append("matched_rules", matchedRule); - this.setState({queryString: "?" + urlParams}); + this.doQueryStringRedirect = true; + this.setState({queryString: urlParams}); } }; @@ -139,7 +146,7 @@ class Connections extends Component { if (params !== undefined && params.from !== undefined && params.to === undefined) { if (res.length > 0) { - connections = this.state.connections.concat(res); + connections = this.state.connections.concat(res.slice(1)); lastConnection = connections[connections.length - 1]; if (connections.length > this.maxConnections) { connections = connections.slice(connections.length - this.maxConnections, @@ -149,7 +156,7 @@ class Connections extends Component { } } else if (params !== undefined && params.to !== undefined && params.from === undefined) { if (res.length > 0) { - connections = res.concat(this.state.connections); + connections = res.slice(0, res.length - 1).concat(this.state.connections); firstConnection = connections[0]; if (connections.length > this.maxConnections) { connections = connections.slice(0, this.maxConnections); @@ -157,7 +164,6 @@ class Connections extends Component { } } } else { - this.connectionsListRef.current.scrollTop = 0; if (res.length > 0) { connections = res; firstConnection = connections[0]; @@ -194,9 +200,12 @@ class Connections extends Component { render() { let redirect; - let queryString = this.state.queryString !== null ? this.state.queryString : ""; - if (this.state.selected) { - redirect = ; + if (this.doSelectedConnectionRedirect) { + redirect = ; + this.doSelectedConnectionRedirect = false; + } else if (this.doQueryStringRedirect) { + redirect = ; + this.doQueryStringRedirect = false; } let loading = null; @@ -209,10 +218,15 @@ class Connections extends Component { return (

{this.state.showMoreRecentButton &&

- + { + this.disableScrollHandler = true; + this.connectionsListRef.current.scrollTop = 0; this.loadConnections({limit: this.queryLimit}) - .then(() => log.info("Most recent connections loaded")) - }/> + .then(() => { + this.disableScrollHandler = false; + log.info("Most recent connections loaded"); + }); + }}/>

}

diff --git a/frontend/src/views/Footer.js b/frontend/src/views/Footer.js deleted file mode 100644 index dcf9cf8..0000000 --- a/frontend/src/views/Footer.js +++ /dev/null @@ -1,176 +0,0 @@ -import React, {Component} from 'react'; -import './Footer.scss'; -import { - ChartContainer, - ChartRow, - Charts, - LineChart, - MultiBrush, - Resizable, - styler, - YAxis -} from "react-timeseries-charts"; -import {TimeRange, TimeSeries} from "pondjs"; -import backend from "../backend"; -import ChoiceField from "../components/fields/ChoiceField"; -import {withRouter} from "react-router-dom"; -import log from "../log"; -import dispatcher from "../dispatcher"; - - -class Footer extends Component { - - state = { - metric: "connections_per_service" - }; - - constructor() { - super(); - - this.disableTimeSeriesChanges = false; - this.selectionTimeout = null; - } - - filteredPort = () => { - const urlParams = new URLSearchParams(this.props.location.search); - return urlParams.get("service_port"); - }; - - componentDidMount() { - const filteredPort = this.filteredPort(); - this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); - - dispatcher.register("connection_updates", payload => { - this.setState({ - selection: new TimeRange(payload.from, payload.to), - }); - }); - } - - componentDidUpdate(prevProps, prevState, snapshot) { - const filteredPort = this.filteredPort(); - if (this.state.filteredPort !== filteredPort) { - this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => - log.debug("Statistics reloaded after filtered port changes")); - } - } - - loadStatistics = async (metric, filteredPort) => { - const urlParams = new URLSearchParams(); - urlParams.set("metric", metric); - - let services = (await backend.get("/api/services")).json; - if (filteredPort && services[filteredPort]) { - const service = services[filteredPort]; - services = {}; - services[filteredPort] = service; - } - - const ports = Object.keys(services); - ports.forEach(s => urlParams.append("ports", s)); - - const metrics = (await backend.get("/api/statistics?" + urlParams)).json; - const series = new TimeSeries({ - name: "statistics", - columns: ["time"].concat(ports), - points: metrics.map(m => [new Date(m["range_start"])].concat(ports.map(p => m[metric][p] || 0))) - }); - this.setState({ - metric, - series, - services, - timeRange: series.range(), - }); - log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`); - }; - - createStyler = () => { - return styler(Object.keys(this.state.services).map(port => { - return {key: port, color: this.state.services[port].color, width: 2}; - })); - }; - - handleTimeRangeChange = (timeRange) => { - if (!this.disableTimeSeriesChanges) { - this.setState({timeRange}); - } - }; - - handleSelectionChange = (timeRange) => { - this.disableTimeSeriesChanges = true; - - this.setState({selection: timeRange}); - if (this.selectionTimeout) { - clearTimeout(this.selectionTimeout); - } - this.selectionTimeout = setTimeout(() => { - dispatcher.dispatch("timeline_updates", { - from: timeRange.begin(), - to: timeRange.end() - }); - this.selectionTimeout = null; - this.disableTimeSeriesChanges = false; - }, 1000); - }; - - aggregateSeries = (func) => { - const values = this.state.series.columns().map(c => this.state.series[func](c)); - return Math[func](...values); - }; - - render() { - return ( - - ); - } -} - -export default withRouter(Footer); diff --git a/frontend/src/views/Footer.scss b/frontend/src/views/Footer.scss deleted file mode 100644 index 14360d4..0000000 --- a/frontend/src/views/Footer.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "../colors.scss"; - -.footer { - padding: 15px; - - .time-line { - position: relative; - background-color: $color-primary-0; - - .metric-selection { - font-size: 0.8em; - position: absolute; - top: 5px; - right: 10px; - } - } - - svg text { - font-family: "Fira Code", monospace !important; - fill: $color-primary-4 !important; - } -} diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js index 944f1d5..f5eff17 100644 --- a/frontend/src/views/Header.js +++ b/frontend/src/views/Header.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import Typed from 'typed.js'; import './Header.scss'; import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions"; -import {Link} from "react-router-dom"; +import {Link, withRouter} from "react-router-dom"; import ButtonField from "../components/fields/ButtonField"; class Header extends Component { @@ -46,7 +46,7 @@ class Header extends Component { render() { let quickFilters = filtersNames.filter(name => this.state[`${name}_active`]) - .map(name => {filtersDefinitions[name]}) + .map(name => {filtersDefinitions[name]}) .slice(0, 5); return ( @@ -68,18 +68,18 @@ class Header extends Component {

- - - + + + - - + + - - + + - - + +

@@ -89,4 +89,4 @@ class Header extends Component { } } -export default Header; +export default withRouter(Header); diff --git a/frontend/src/views/Timeline.js b/frontend/src/views/Timeline.js new file mode 100644 index 0000000..3adbf88 --- /dev/null +++ b/frontend/src/views/Timeline.js @@ -0,0 +1,215 @@ +import React, {Component} from 'react'; +import './Timeline.scss'; +import { + ChartContainer, + ChartRow, + Charts, + LineChart, + MultiBrush, + Resizable, + styler, + YAxis +} from "react-timeseries-charts"; +import {TimeRange, TimeSeries} from "pondjs"; +import backend from "../backend"; +import ChoiceField from "../components/fields/ChoiceField"; +import {withRouter} from "react-router-dom"; +import log from "../log"; +import dispatcher from "../dispatcher"; + +const minutes = 60 * 1000; + +class Timeline extends Component { + + state = { + metric: "connections_per_service" + }; + + constructor() { + super(); + + this.disableTimeSeriesChanges = false; + this.selectionTimeout = null; + } + + filteredPort = () => { + const urlParams = new URLSearchParams(this.props.location.search); + return urlParams.get("service_port"); + }; + + componentDidMount() { + const filteredPort = this.filteredPort(); + this.setState({filteredPort}); + this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); + + dispatcher.register("connection_updates", payload => { + this.setState({ + selection: new TimeRange(payload.from, payload.to), + }); + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices().then(() => log.debug("Services reloaded after notification update")); + } + }); + } + + componentDidUpdate(prevProps, prevState, snapshot) { + const filteredPort = this.filteredPort(); + if (this.state.filteredPort !== filteredPort) { + this.setState({filteredPort}); + this.loadStatistics(this.state.metric, filteredPort).then(() => + log.debug("Statistics reloaded after filtered port changes")); + } + } + + loadStatistics = async (metric, filteredPort) => { + const urlParams = new URLSearchParams(); + urlParams.set("metric", metric); + + let services = await this.loadServices(); + if (filteredPort && services[filteredPort]) { + const service = services[filteredPort]; + services = {}; + services[filteredPort] = service; + } + + const ports = Object.keys(services); + ports.forEach(s => urlParams.append("ports", s)); + + const metrics = (await backend.get("/api/statistics?" + urlParams)).json; + const zeroFilledMetrics = []; + const toTime = m => new Date(m["range_start"]).getTime(); + + if (metrics.length > 0) { + let i = 0; + for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) { + if (interval === toTime(metrics[i])) { + const m = metrics[i++]; + m["range_start"] = new Date(m["range_start"]); + zeroFilledMetrics.push(m); + } else { + const m = {}; + m["range_start"] = new Date(interval); + m[metric] = {}; + ports.forEach(p => m[metric][p] = 0); + zeroFilledMetrics.push(m); + } + } + } + + const series = new TimeSeries({ + name: "statistics", + columns: ["time"].concat(ports), + points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0))) + }); + const start = series.range().begin(); + const end = series.range().end(); + start.setTime(start.getTime() - minutes); + end.setTime(end.getTime() + minutes); + + this.setState({ + metric, + series, + timeRange: new TimeRange(start, end), + start, + end + }); + log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`); + }; + + loadServices = async () => { + const services = (await backend.get("/api/services")).json; + this.setState({services}); + return services; + }; + + createStyler = () => { + return styler(Object.keys(this.state.services).map(port => { + return {key: port, color: this.state.services[port].color, width: 2}; + })); + }; + + handleTimeRangeChange = (timeRange) => { + if (!this.disableTimeSeriesChanges) { + this.setState({timeRange}); + } + }; + + handleSelectionChange = (timeRange) => { + this.disableTimeSeriesChanges = true; + + this.setState({selection: timeRange}); + if (this.selectionTimeout) { + clearTimeout(this.selectionTimeout); + } + this.selectionTimeout = setTimeout(() => { + dispatcher.dispatch("timeline_updates", { + from: timeRange.begin(), + to: timeRange.end() + }); + this.selectionTimeout = null; + this.disableTimeSeriesChanges = false; + }, 1000); + }; + + aggregateSeries = (func) => { + const values = this.state.series.columns().map(c => this.state.series[func](c)); + return Math[func](...values); + }; + + render() { + if (!this.state.series) { + return null; + } + + return ( + + ); + } +} + +export default withRouter(Timeline); diff --git a/frontend/src/views/Timeline.scss b/frontend/src/views/Timeline.scss new file mode 100644 index 0000000..14360d4 --- /dev/null +++ b/frontend/src/views/Timeline.scss @@ -0,0 +1,22 @@ +@import "../colors.scss"; + +.footer { + padding: 15px; + + .time-line { + position: relative; + background-color: $color-primary-0; + + .metric-selection { + font-size: 0.8em; + position: absolute; + top: 5px; + right: 10px; + } + } + + svg text { + font-family: "Fira Code", monospace !important; + fill: $color-primary-4 !important; + } +} -- cgit v1.2.3-70-g09d2 From 584e25f7940954a51e260a21ca5a819ff4b834d3 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 8 Oct 2020 14:59:50 +0200 Subject: Implement download_as and export as pwntools --- application_router.go | 28 ++++- connection_streams_controller.go | 178 ++++++++++++++++++++++++--- frontend/src/backend.js | 28 ++++- frontend/src/components/ConnectionContent.js | 38 +++--- frontend/src/utils.js | 11 ++ 5 files changed, 249 insertions(+), 34 deletions(-) (limited to 'frontend/src/components') diff --git a/application_router.go b/application_router.go index 30ec7c6..334e9f3 100644 --- a/application_router.go +++ b/application_router.go @@ -283,12 +283,36 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, badRequest(c, err) return } - var format QueryFormat + var format GetMessageFormat if err := c.ShouldBindQuery(&format); err != nil { badRequest(c, err) return } - success(c, applicationContext.ConnectionStreamsController.GetConnectionPayload(c, id, format)) + + if messages, found := applicationContext.ConnectionStreamsController.GetConnectionMessages(c, id, format); !found { + notFound(c, gin.H{"connection": id}) + } else { + success(c, messages) + } + }) + + api.GET("/streams/:id/download", func(c *gin.Context) { + id, err := RowIDFromHex(c.Param("id")) + if err != nil { + badRequest(c, err) + return + } + var format DownloadMessageFormat + if err := c.ShouldBindQuery(&format); err != nil { + badRequest(c, err) + return + } + + if blob, found := applicationContext.ConnectionStreamsController.DownloadConnectionMessages(c, id, format); !found { + notFound(c, gin.H{"connection": id}) + } else { + c.String(http.StatusOK, blob) + } }) api.GET("/services", func(c *gin.Context) { diff --git a/connection_streams_controller.go b/connection_streams_controller.go index 9d73b0e..98f2aca 100644 --- a/connection_streams_controller.go +++ b/connection_streams_controller.go @@ -3,14 +3,19 @@ package main import ( "bytes" "context" + "fmt" "github.com/eciavatta/caronte/parsers" log "github.com/sirupsen/logrus" + "strings" "time" ) -const InitialPayloadsSize = 1024 -const DefaultQueryFormatLimit = 8024 -const InitialRegexSlicesCount = 8 +const ( + initialPayloadsSize = 1024 + defaultQueryFormatLimit = 8024 + initialRegexSlicesCount = 8 + pwntoolsMaxServerBytes = 20 +) type ConnectionStream struct { ID RowID `bson:"_id"` @@ -26,7 +31,7 @@ type ConnectionStream struct { type PatternSlice [2]uint64 -type Payload struct { +type Message struct { FromClient bool `json:"from_client"` Content string `json:"content"` Metadata parsers.Metadata `json:"metadata"` @@ -42,12 +47,17 @@ type RegexSlice struct { To uint64 `json:"to"` } -type QueryFormat struct { +type GetMessageFormat struct { Format string `form:"format"` Skip uint64 `form:"skip"` Limit uint64 `form:"limit"` } +type DownloadMessageFormat struct { + Format string `form:"format"` + Type string `form:"type"` +} + type ConnectionStreamsController struct { storage Storage } @@ -58,13 +68,18 @@ func NewConnectionStreamsController(storage Storage) ConnectionStreamsController } } -func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, connectionID RowID, - format QueryFormat) []*Payload { - payloads := make([]*Payload, 0, InitialPayloadsSize) +func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, connectionID RowID, + format GetMessageFormat) ([]*Message, bool) { + connection := csc.getConnection(c, connectionID) + if connection.ID.IsZero() { + return nil, false + } + + payloads := make([]*Message, 0, initialPayloadsSize) var clientIndex, serverIndex, globalIndex uint64 if format.Limit <= 0 { - format.Limit = DefaultQueryFormatLimit + format.Limit = defaultQueryFormatLimit } var clientBlocksIndex, serverBlocksIndex int @@ -79,8 +94,8 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c return serverBlocksIndex < len(serverStream.BlocksIndexes) } - var payload *Payload - payloadsBuffer := make([]*Payload, 0, 16) + var payload *Message + payloadsBuffer := make([]*Message, 0, 16) contentChunkBuffer := new(bytes.Buffer) var lastContentSlice []byte var sideChanged, lastClient, lastServer bool @@ -97,7 +112,7 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c } size := uint64(end - start) - payload = &Payload{ + payload = &Message{ FromClient: true, Content: DecodeBytes(clientStream.Payload[start:end], format.Format), Index: start, @@ -121,7 +136,7 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c } size := uint64(end - start) - payload = &Payload{ + payload = &Message{ FromClient: false, Content: DecodeBytes(serverStream.Payload[start:end], format.Format), Index: start, @@ -178,11 +193,118 @@ func (csc ConnectionStreamsController) GetConnectionPayload(c context.Context, c if globalIndex > format.Skip+format.Limit { // problem: the last chunk is not parsed, but can be ok because it is not finished updateMetadata() - return payloads + return payloads, true } } - return payloads + return payloads, true +} + +func (csc ConnectionStreamsController) DownloadConnectionMessages(c context.Context, connectionID RowID, + format DownloadMessageFormat) (string, bool) { + connection := csc.getConnection(c, connectionID) + if connection.ID.IsZero() { + return "", false + } + + var sb strings.Builder + includeClient, includeServer := format.Type != "only_server", format.Type != "only_client" + isPwntools := format.Type == "pwntools" + + var clientBlocksIndex, serverBlocksIndex int + var clientDocumentIndex, serverDocumentIndex int + var clientStream ConnectionStream + if includeClient { + clientStream = csc.getConnectionStream(c, connectionID, true, clientDocumentIndex) + } + var serverStream ConnectionStream + if includeServer { + serverStream = csc.getConnectionStream(c, connectionID, false, serverDocumentIndex) + } + + hasClientBlocks := func() bool { + return clientBlocksIndex < len(clientStream.BlocksIndexes) + } + hasServerBlocks := func() bool { + return serverBlocksIndex < len(serverStream.BlocksIndexes) + } + + if isPwntools { + if format.Format == "base32" || format.Format == "base64" { + sb.WriteString("import base64\n") + } + sb.WriteString("from pwn import *\n\n") + sb.WriteString(fmt.Sprintf("p = remote('%s', %d)\n", connection.DestinationIP, connection.DestinationPort)) + } + + lastIsClient, lastIsServer := true, true + for !clientStream.ID.IsZero() || !serverStream.ID.IsZero() { + if hasClientBlocks() && (!hasServerBlocks() || // next payload is from client + clientStream.BlocksTimestamps[clientBlocksIndex].UnixNano() <= + serverStream.BlocksTimestamps[serverBlocksIndex].UnixNano()) { + start := clientStream.BlocksIndexes[clientBlocksIndex] + end := 0 + if clientBlocksIndex < len(clientStream.BlocksIndexes)-1 { + end = clientStream.BlocksIndexes[clientBlocksIndex+1] + } else { + end = len(clientStream.Payload) + } + + if !lastIsClient { + sb.WriteString("\n") + } + lastIsClient = true + lastIsServer = false + if isPwntools { + sb.WriteString(decodePwntools(clientStream.Payload[start:end], true, format.Format)) + } else { + sb.WriteString(DecodeBytes(clientStream.Payload[start:end], format.Format)) + } + clientBlocksIndex++ + } else { // next payload is from server + start := serverStream.BlocksIndexes[serverBlocksIndex] + end := 0 + if serverBlocksIndex < len(serverStream.BlocksIndexes)-1 { + end = serverStream.BlocksIndexes[serverBlocksIndex+1] + } else { + end = len(serverStream.Payload) + } + + if !lastIsServer { + sb.WriteString("\n") + } + lastIsClient = false + lastIsServer = true + if isPwntools { + sb.WriteString(decodePwntools(serverStream.Payload[start:end], false, format.Format)) + } else { + sb.WriteString(DecodeBytes(serverStream.Payload[start:end], format.Format)) + } + serverBlocksIndex++ + } + + if includeClient && !hasClientBlocks() { + clientDocumentIndex++ + clientBlocksIndex = 0 + clientStream = csc.getConnectionStream(c, connectionID, true, clientDocumentIndex) + } + if includeServer && !hasServerBlocks() { + serverDocumentIndex++ + serverBlocksIndex = 0 + serverStream = csc.getConnectionStream(c, connectionID, false, serverDocumentIndex) + } + } + + return sb.String(), true +} + +func (csc ConnectionStreamsController) getConnection(c context.Context, connectionID RowID) Connection { + var connection Connection + if err := csc.storage.Find(Connections).Context(c).Filter(OrderedDocument{{"_id", connectionID}}). + First(&connection); err != nil { + log.WithError(err).WithField("id", connectionID).Panic("failed to get connection") + } + return connection } func (csc ConnectionStreamsController) getConnectionStream(c context.Context, connectionID RowID, fromClient bool, @@ -199,7 +321,7 @@ func (csc ConnectionStreamsController) getConnectionStream(c context.Context, co } func findMatchesBetween(patternMatches map[uint][]PatternSlice, from, to uint64) []RegexSlice { - regexSlices := make([]RegexSlice, 0, InitialRegexSlicesCount) + regexSlices := make([]RegexSlice, 0, initialRegexSlicesCount) for _, slices := range patternMatches { for _, slice := range slices { if from > slice[1] || to <= slice[0] { @@ -225,3 +347,27 @@ func findMatchesBetween(patternMatches map[uint][]PatternSlice, from, to uint64) } return regexSlices } + +func decodePwntools(payload []byte, isClient bool, format string) string { + if !isClient && len(payload) > pwntoolsMaxServerBytes { + payload = payload[len(payload)-pwntoolsMaxServerBytes:] + } + + var content string + switch format { + case "hex": + content = fmt.Sprintf("bytes.fromhex('%s')", DecodeBytes(payload, format)) + case "base32": + content = fmt.Sprintf("base64.b32decode('%s')", DecodeBytes(payload, format)) + case "base64": + content = fmt.Sprintf("base64.b64decode('%s')", DecodeBytes(payload, format)) + default: + content = fmt.Sprintf("'%s'", strings.Replace(DecodeBytes(payload, "ascii"), "'", "\\'", -1)) + } + + if isClient { + return fmt.Sprintf("p.send(%s)\n", content) + } else { + return fmt.Sprintf("p.recvuntil(%s)\n", content) + } +} diff --git a/frontend/src/backend.js b/frontend/src/backend.js index c7abd80..1b2d8d2 100644 --- a/frontend/src/backend.js +++ b/frontend/src/backend.js @@ -25,6 +25,30 @@ async function json(method, url, data, json, headers) { } } +async function download(url, headers) { + + const options = { + mode: "cors", + cache: "no-cache", + credentials: "same-origin", + headers: headers || {}, + redirect: "follow", + referrerPolicy: "no-referrer", + }; + const response = await fetch(url, options); + const result = { + statusCode: response.status, + status: `${response.status} ${response.statusText}`, + blob: await response.blob() + }; + + if (response.status >= 200 && response.status < 300) { + return result; + } else { + return Promise.reject(result); + } +} + const backend = { get: (url = "", headers = null) => json("GET", url, null, null, headers), @@ -35,7 +59,9 @@ const backend = { delete: (url = "", data = null, headers = null) => json("DELETE", url, null, data, headers), postFile: (url = "", data = null, headers = {}) => - json("POST", url, data, null, headers) + json("POST", url, data, null, headers), + download: (url = "", headers = null) => + download(url, headers) }; export default backend; diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js index 2e4f2fd..b09dcf3 100644 --- a/frontend/src/components/ConnectionContent.js +++ b/frontend/src/components/ConnectionContent.js @@ -7,7 +7,8 @@ import ButtonField from "./fields/ButtonField"; import ChoiceField from "./fields/ChoiceField"; import DOMPurify from 'dompurify'; import ReactJson from 'react-json-view' -import {getHeaderValue} from "../utils"; +import {downloadBlob, getHeaderValue} from "../utils"; +import log from "../log"; const classNames = require('classnames'); @@ -92,7 +93,7 @@ class ConnectionContent extends Component { if (contentType && contentType.includes("application/json")) { try { const json = JSON.parse(m.body); - body = ; + body = ; } catch (e) { console.log(e); } @@ -126,7 +127,7 @@ class ConnectionContent extends Component { messageActionDialog: this.setState({messageActionDialog: null})}/> }); - }} /> + }}/> ); case "http-response": const contentType = getHeaderValue(m, "Content-Type"); @@ -142,7 +143,7 @@ class ConnectionContent extends Component { } w.document.body.innerHTML = DOMPurify.sanitize(m.body); w.focus(); - }} />; + }}/>; } break; default: @@ -150,6 +151,12 @@ class ConnectionContent extends Component { } }; + downloadStreamRaw = (value) => { + backend.download(`/api/streams/${this.props.connection.id}/download?format=${this.state.format}&type=${value}`) + .then(res => downloadBlob(res.blob, `${this.props.connection.id}-${value}-${this.state.format}.txt`)) + .catch(_ => log.error("Failed to download stream messages")); + }; + closeRenderWindow = () => { if (this.state.renderWindow) { this.state.renderWindow.close(); @@ -157,7 +164,8 @@ class ConnectionContent extends Component { }; render() { - let content = this.state.connectionContent; + const conn = this.props.connection; + const content = this.state.connectionContent; if (content == null) { return

select a connection to view

; @@ -165,7 +173,7 @@ class ConnectionContent extends Component { let payload = content.map((c, i) =>

+ className={classNames("connection-message", c["from_client"] ? "from-client" : "from-server")}>

@@ -175,9 +183,9 @@ class ConnectionContent extends Component {

{this.connectionsActions(c)}

{c.from_client ? "client" : "server"}

{c["from_client"] ? "client" : "server"}

+ className="message-content"> {this.state.tryParse && this.state.format === "default" ? this.tryParseConnectionMessage(c) : c.content}

@@ -188,20 +196,20 @@ class ConnectionContent extends Component {

- flow: {this.props.connection.ip_src}:{this.props.connection.port_src} -> {this.props.connection.ip_dst}:{this.props.connection.port_dst} - | timestamp: {this.props.connection.started_at} + flow: {conn["ip_src"]}:{conn["port_src"]} -> {conn["ip_dst"]}:{conn["port_dst"]} + | timestamp: {conn["started_at"]}

+ onChange={this.setFormat} value={this.state.value}/> - + - +

diff --git a/frontend/src/utils.js b/frontend/src/utils.js index fb0e5d9..aacc625 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -118,3 +118,14 @@ export function getHeaderValue(request, key) { } return undefined; } + +export function downloadBlob(blob, fileName) { + const url = window.URL.createObjectURL(blob); + const a = document.createElement("a"); + a.style.display = "none"; + a.href = url; + a.download = fileName; + document.body.appendChild(a); + a.click(); + window.URL.revokeObjectURL(url); +} -- cgit v1.2.3-70-g09d2 From a30815021e61023f996b1450ddcd9164a6e18bef Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 8 Oct 2020 17:07:07 +0200 Subject: Add header license to all files --- application_context.go | 17 +++++++++++++++++ application_context_test.go | 17 +++++++++++++++++ application_router.go | 17 +++++++++++++++++ application_router_test.go | 17 +++++++++++++++++ caronte.go | 17 +++++++++++++++++ caronte_test.go | 17 +++++++++++++++++ connection_handler.go | 17 +++++++++++++++++ connection_handler_test.go | 17 +++++++++++++++++ connection_streams_controller.go | 17 +++++++++++++++++ connections_controller.go | 17 +++++++++++++++++ frontend/src/backend.js | 17 +++++++++++++++++ frontend/src/components/Connection.js | 17 +++++++++++++++++ frontend/src/components/ConnectionContent.js | 17 +++++++++++++++++ frontend/src/components/ConnectionMatchedRules.js | 17 +++++++++++++++++ frontend/src/components/MessageAction.js | 17 +++++++++++++++++ frontend/src/components/Notifications.js | 17 +++++++++++++++++ frontend/src/components/fields/ButtonField.js | 17 +++++++++++++++++ frontend/src/components/fields/CheckField.js | 17 +++++++++++++++++ frontend/src/components/fields/ChoiceField.js | 17 +++++++++++++++++ frontend/src/components/fields/InputField.js | 17 +++++++++++++++++ frontend/src/components/fields/TextField.js | 17 +++++++++++++++++ .../src/components/fields/extensions/ColorField.js | 17 +++++++++++++++++ .../components/fields/extensions/NumericField.js | 17 +++++++++++++++++ .../components/filters/BooleanConnectionsFilter.js | 17 +++++++++++++++++ .../src/components/filters/FiltersDefinitions.js | 17 +++++++++++++++++ .../components/filters/RulesConnectionsFilter.js | 17 +++++++++++++++++ .../components/filters/StringConnectionsFilter.js | 17 +++++++++++++++++ frontend/src/components/objects/LinkPopover.js | 17 +++++++++++++++++ frontend/src/components/panels/ConfigurationPane.js | 17 +++++++++++++++++ frontend/src/components/panels/MainPane.js | 17 +++++++++++++++++ frontend/src/components/panels/PcapPane.js | 17 +++++++++++++++++ frontend/src/components/panels/RulePane.js | 17 +++++++++++++++++ frontend/src/components/panels/ServicePane.js | 17 +++++++++++++++++ frontend/src/dispatcher.js | 16 ++++++++++++++++ frontend/src/index.js | 17 +++++++++++++++++ frontend/src/log.js | 17 +++++++++++++++++ frontend/src/notifications.js | 17 +++++++++++++++++ frontend/src/setupProxy.js | 17 +++++++++++++++++ frontend/src/utils.js | 17 +++++++++++++++++ frontend/src/validation.js | 16 ++++++++++++++++ frontend/src/views/App.js | 17 +++++++++++++++++ frontend/src/views/Connections.js | 17 +++++++++++++++++ frontend/src/views/Filters.js | 21 +++++++++++++++++++-- frontend/src/views/Header.js | 17 +++++++++++++++++ frontend/src/views/Timeline.js | 17 +++++++++++++++++ notification_controller.go | 17 +++++++++++++++++ parsers/http_request_parser.go | 17 +++++++++++++++++ parsers/http_response_parser.go | 17 +++++++++++++++++ parsers/parser.go | 17 +++++++++++++++++ parsers/parser_utils.go | 17 +++++++++++++++++ pcap_importer.go | 17 +++++++++++++++++ pcap_importer_test.go | 17 +++++++++++++++++ resources_controller.go | 17 +++++++++++++++++ rules_manager.go | 17 +++++++++++++++++ rules_manager_test.go | 17 +++++++++++++++++ services_controller.go | 17 +++++++++++++++++ statistics_controller.go | 17 +++++++++++++++++ storage.go | 17 +++++++++++++++++ storage_test.go | 17 +++++++++++++++++ stream_handler.go | 17 +++++++++++++++++ stream_handler_test.go | 17 +++++++++++++++++ utils.go | 17 +++++++++++++++++ 62 files changed, 1054 insertions(+), 2 deletions(-) (limited to 'frontend/src/components') diff --git a/application_context.go b/application_context.go index 9a9c97a..9897bb6 100644 --- a/application_context.go +++ b/application_context.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/application_context_test.go b/application_context_test.go index 28c81a5..a7f1a49 100644 --- a/application_context_test.go +++ b/application_context_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/application_router.go b/application_router.go index da71538..9fd7e3d 100644 --- a/application_router.go +++ b/application_router.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/application_router_test.go b/application_router_test.go index f4804e3..9741eed 100644 --- a/application_router_test.go +++ b/application_router_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/caronte.go b/caronte.go index d999724..d4265bc 100644 --- a/caronte.go +++ b/caronte.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/caronte_test.go b/caronte_test.go index 12ec50f..8935ea3 100644 --- a/caronte_test.go +++ b/caronte_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/connection_handler.go b/connection_handler.go index 3d38531..6b2b411 100644 --- a/connection_handler.go +++ b/connection_handler.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/connection_handler_test.go b/connection_handler_test.go index 0bee0ac..d980041 100644 --- a/connection_handler_test.go +++ b/connection_handler_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/connection_streams_controller.go b/connection_streams_controller.go index 98f2aca..9251a3a 100644 --- a/connection_streams_controller.go +++ b/connection_streams_controller.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/connections_controller.go b/connections_controller.go index e872c9f..30a5ee5 100644 --- a/connections_controller.go +++ b/connections_controller.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/frontend/src/backend.js b/frontend/src/backend.js index 1b2d8d2..cc8604a 100644 --- a/frontend/src/backend.js +++ b/frontend/src/backend.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + async function json(method, url, data, json, headers) { const options = { method: method, diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js index b7e2531..c7b0010 100644 --- a/frontend/src/components/Connection.js +++ b/frontend/src/components/Connection.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './Connection.scss'; import {Form, OverlayTrigger, Popover} from "react-bootstrap"; diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js index b09dcf3..b468277 100644 --- a/frontend/src/components/ConnectionContent.js +++ b/frontend/src/components/ConnectionContent.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './ConnectionContent.scss'; import {Row} from 'react-bootstrap'; diff --git a/frontend/src/components/ConnectionMatchedRules.js b/frontend/src/components/ConnectionMatchedRules.js index 21f2a92..35643c5 100644 --- a/frontend/src/components/ConnectionMatchedRules.js +++ b/frontend/src/components/ConnectionMatchedRules.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './ConnectionMatchedRules.scss'; import ButtonField from "./fields/ButtonField"; diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js index 8f4b031..b94cbb9 100644 --- a/frontend/src/components/MessageAction.js +++ b/frontend/src/components/MessageAction.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './MessageAction.scss'; import {Modal} from "react-bootstrap"; diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js index 9ce2b58..1017a42 100644 --- a/frontend/src/components/Notifications.js +++ b/frontend/src/components/Notifications.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './Notifications.scss'; import dispatcher from "../dispatcher"; diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index cc32b0f..ffcceae 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './ButtonField.scss'; import './common.scss'; diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js index 33f4f83..dd44970 100644 --- a/frontend/src/components/fields/CheckField.js +++ b/frontend/src/components/fields/CheckField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './CheckField.scss'; import './common.scss'; diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js index 73e950d..14071c3 100644 --- a/frontend/src/components/fields/ChoiceField.js +++ b/frontend/src/components/fields/ChoiceField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './ChoiceField.scss'; import './common.scss'; diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js index 84c981b..80cce3b 100644 --- a/frontend/src/components/fields/InputField.js +++ b/frontend/src/components/fields/InputField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './InputField.scss'; import './common.scss'; diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js index de68c21..9237c0c 100644 --- a/frontend/src/components/fields/TextField.js +++ b/frontend/src/components/fields/TextField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './TextField.scss'; import './common.scss'; diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js index 96ebc49..f1c0caf 100644 --- a/frontend/src/components/fields/extensions/ColorField.js +++ b/frontend/src/components/fields/extensions/ColorField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import {OverlayTrigger, Popover} from "react-bootstrap"; import './ColorField.scss'; diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js index 19a9e46..d4d027d 100644 --- a/frontend/src/components/fields/extensions/NumericField.js +++ b/frontend/src/components/fields/extensions/NumericField.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import InputField from "../InputField"; diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js index 4c5a78a..a9a420e 100644 --- a/frontend/src/components/filters/BooleanConnectionsFilter.js +++ b/frontend/src/components/filters/BooleanConnectionsFilter.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; import {Redirect} from "react-router"; diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js index d4f2912..cde3cfb 100644 --- a/frontend/src/components/filters/FiltersDefinitions.js +++ b/frontend/src/components/filters/FiltersDefinitions.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; import StringConnectionsFilter from "./StringConnectionsFilter"; import React from "react"; diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js index 8366189..48affb0 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.js +++ b/frontend/src/components/filters/RulesConnectionsFilter.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; import {Redirect} from "react-router"; diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js index f463593..a3b45dc 100644 --- a/frontend/src/components/filters/StringConnectionsFilter.js +++ b/frontend/src/components/filters/StringConnectionsFilter.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; import {Redirect} from "react-router"; diff --git a/frontend/src/components/objects/LinkPopover.js b/frontend/src/components/objects/LinkPopover.js index 8768caa..3c5bf67 100644 --- a/frontend/src/components/objects/LinkPopover.js +++ b/frontend/src/components/objects/LinkPopover.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import {randomClassName} from "../../utils"; import {OverlayTrigger, Popover} from "react-bootstrap"; diff --git a/frontend/src/components/panels/ConfigurationPane.js b/frontend/src/components/panels/ConfigurationPane.js index 10309f6..9ae2cfb 100644 --- a/frontend/src/components/panels/ConfigurationPane.js +++ b/frontend/src/components/panels/ConfigurationPane.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './common.scss'; import './ConfigurationPane.scss'; diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js index bd25e0c..d34d58a 100644 --- a/frontend/src/components/panels/MainPane.js +++ b/frontend/src/components/panels/MainPane.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './common.scss'; import './MainPane.scss'; diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js index 13f7cb3..d5c2225 100644 --- a/frontend/src/components/panels/PcapPane.js +++ b/frontend/src/components/panels/PcapPane.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './PcapPane.scss'; import './common.scss'; diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js index 76f3ac0..9913962 100644 --- a/frontend/src/components/panels/RulePane.js +++ b/frontend/src/components/panels/RulePane.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './common.scss'; import './RulePane.scss'; diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js index 22c6655..fc7004b 100644 --- a/frontend/src/components/panels/ServicePane.js +++ b/frontend/src/components/panels/ServicePane.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './common.scss'; import './ServicePane.scss'; diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js index 4b8b5a4..943f7ec 100644 --- a/frontend/src/dispatcher.js +++ b/frontend/src/dispatcher.js @@ -1,3 +1,19 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ class Dispatcher { diff --git a/frontend/src/index.js b/frontend/src/index.js index beb52ae..e3e48de 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.css'; diff --git a/frontend/src/log.js b/frontend/src/log.js index 0883962..424e1b4 100644 --- a/frontend/src/log.js +++ b/frontend/src/log.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + const log = { debug: (...obj) => console.info(...obj), info: (...obj) => console.info(...obj), diff --git a/frontend/src/notifications.js b/frontend/src/notifications.js index 2a77ffb..f04036d 100644 --- a/frontend/src/notifications.js +++ b/frontend/src/notifications.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import log from "./log"; import dispatcher from "./dispatcher"; diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js index 6f082c8..f2e1c39 100644 --- a/frontend/src/setupProxy.js +++ b/frontend/src/setupProxy.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { diff --git a/frontend/src/utils.js b/frontend/src/utils.js index aacc625..f333f0d 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + const timeRegex = /^(0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/; export function createCurlCommand(subCommand, method = null, json = null, data = null) { diff --git a/frontend/src/validation.js b/frontend/src/validation.js index 7089d7f..87b08de 100644 --- a/frontend/src/validation.js +++ b/frontend/src/validation.js @@ -1,3 +1,19 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ const validation = { isValidColor: (color) => /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(color), diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 4bb9f57..8105117 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './App.scss'; import Header from "./Header"; diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js index e835dcb..b2edd3f 100644 --- a/frontend/src/views/Connections.js +++ b/frontend/src/views/Connections.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './Connections.scss'; import Connection from "../components/Connection"; diff --git a/frontend/src/views/Filters.js b/frontend/src/views/Filters.js index ba7d467..3dd8280 100644 --- a/frontend/src/views/Filters.js +++ b/frontend/src/views/Filters.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import {Col, Container, Modal, Row, Table} from "react-bootstrap"; import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions"; @@ -31,7 +48,7 @@ class Filters extends Component { this.checkboxChangesHandler(name, event)} /> + onChange={event => this.checkboxChangesHandler(name, event)}/> {filtersDefinitions[name]} ); @@ -89,7 +106,7 @@ class Filters extends Component { - + ); diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js index f5eff17..2cfe9fb 100644 --- a/frontend/src/views/Header.js +++ b/frontend/src/views/Header.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import Typed from 'typed.js'; import './Header.scss'; diff --git a/frontend/src/views/Timeline.js b/frontend/src/views/Timeline.js index 3adbf88..ebe3eb9 100644 --- a/frontend/src/views/Timeline.js +++ b/frontend/src/views/Timeline.js @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + import React, {Component} from 'react'; import './Timeline.scss'; import { diff --git a/notification_controller.go b/notification_controller.go index 88c9e8c..3fa3c5b 100644 --- a/notification_controller.go +++ b/notification_controller.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/parsers/http_request_parser.go b/parsers/http_request_parser.go index e2224b8..bc98f8f 100644 --- a/parsers/http_request_parser.go +++ b/parsers/http_request_parser.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package parsers import ( diff --git a/parsers/http_response_parser.go b/parsers/http_response_parser.go index 1770116..e5ef1ac 100644 --- a/parsers/http_response_parser.go +++ b/parsers/http_response_parser.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package parsers import ( diff --git a/parsers/parser.go b/parsers/parser.go index 06cc0dc..a29b1ab 100644 --- a/parsers/parser.go +++ b/parsers/parser.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package parsers type Parser interface { diff --git a/parsers/parser_utils.go b/parsers/parser_utils.go index b688262..575b666 100644 --- a/parsers/parser_utils.go +++ b/parsers/parser_utils.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package parsers import ( diff --git a/pcap_importer.go b/pcap_importer.go index 78a5e6c..41ed082 100644 --- a/pcap_importer.go +++ b/pcap_importer.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/pcap_importer_test.go b/pcap_importer_test.go index be09ea9..8940060 100644 --- a/pcap_importer_test.go +++ b/pcap_importer_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/resources_controller.go b/resources_controller.go index 050157a..10b31e3 100644 --- a/resources_controller.go +++ b/resources_controller.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/rules_manager.go b/rules_manager.go index a5dc7ce..636fc74 100644 --- a/rules_manager.go +++ b/rules_manager.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/rules_manager_test.go b/rules_manager_test.go index a2ec501..dded096 100644 --- a/rules_manager_test.go +++ b/rules_manager_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/services_controller.go b/services_controller.go index 9907b5e..e5fa200 100644 --- a/services_controller.go +++ b/services_controller.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/statistics_controller.go b/statistics_controller.go index 65c7d58..006b230 100644 --- a/statistics_controller.go +++ b/statistics_controller.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/storage.go b/storage.go index 0888ce0..f8b7f9c 100644 --- a/storage.go +++ b/storage.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/storage_test.go b/storage_test.go index 4caa30d..dd91e97 100644 --- a/storage_test.go +++ b/storage_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/stream_handler.go b/stream_handler.go index bccdeee..48dba34 100644 --- a/stream_handler.go +++ b/stream_handler.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/stream_handler_test.go b/stream_handler_test.go index 199ae5b..127aa82 100644 --- a/stream_handler_test.go +++ b/stream_handler_test.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( diff --git a/utils.go b/utils.go index ec5a807..639fd94 100644 --- a/utils.go +++ b/utils.go @@ -1,3 +1,20 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + package main import ( -- cgit v1.2.3-70-g09d2 From d203f3c7e3bcaa20895c0f32f348cd1513ae9876 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 8 Oct 2020 22:17:04 +0200 Subject: Frontend folder structure refactor --- connection_streams_controller.go | 44 +-- frontend/src/components/App.js | 62 +++ frontend/src/components/Connection.js | 145 ------- frontend/src/components/Connection.scss | 68 ---- frontend/src/components/ConnectionContent.js | 243 ------------ frontend/src/components/ConnectionContent.scss | 113 ------ frontend/src/components/ConnectionMatchedRules.js | 46 --- .../src/components/ConnectionMatchedRules.scss | 23 -- frontend/src/components/Header.js | 111 ++++++ frontend/src/components/Header.scss | 34 ++ frontend/src/components/MessageAction.js | 68 ---- frontend/src/components/MessageAction.scss | 8 - frontend/src/components/Timeline.js | 232 +++++++++++ frontend/src/components/Timeline.scss | 22 ++ frontend/src/components/dialogs/Filters.js | 116 ++++++ frontend/src/components/objects/Connection.js | 145 +++++++ frontend/src/components/objects/Connection.scss | 68 ++++ .../components/objects/ConnectionMatchedRules.js | 46 +++ .../components/objects/ConnectionMatchedRules.scss | 23 ++ frontend/src/components/objects/MessageAction.js | 68 ++++ frontend/src/components/objects/MessageAction.scss | 8 + frontend/src/components/pages/ConfigurationPage.js | 179 +++++++++ .../src/components/pages/ConfigurationPage.scss | 18 + frontend/src/components/pages/MainPage.js | 76 ++++ frontend/src/components/pages/MainPage.scss | 24 ++ .../src/components/pages/ServiceUnavailablePage.js | 34 ++ frontend/src/components/pages/common.scss | 16 + .../src/components/panels/ConfigurationPane.js | 179 --------- .../src/components/panels/ConfigurationPane.scss | 18 - frontend/src/components/panels/ConnectionsPane.js | 304 ++++++++++++++ .../src/components/panels/ConnectionsPane.scss | 38 ++ frontend/src/components/panels/MainPane.js | 47 +-- frontend/src/components/panels/MainPane.scss | 17 - frontend/src/components/panels/PcapPane.js | 273 ------------- frontend/src/components/panels/PcapPane.scss | 38 -- frontend/src/components/panels/PcapsPane.js | 273 +++++++++++++ frontend/src/components/panels/PcapsPane.scss | 38 ++ frontend/src/components/panels/RulePane.js | 438 --------------------- frontend/src/components/panels/RulePane.scss | 32 -- frontend/src/components/panels/RulesPane.js | 438 +++++++++++++++++++++ frontend/src/components/panels/RulesPane.scss | 32 ++ frontend/src/components/panels/ServicePane.js | 212 ---------- frontend/src/components/panels/ServicePane.scss | 22 -- frontend/src/components/panels/ServicesPane.js | 212 ++++++++++ frontend/src/components/panels/ServicesPane.scss | 22 ++ frontend/src/components/panels/StreamsPane.js | 242 ++++++++++++ frontend/src/components/panels/StreamsPane.scss | 113 ++++++ frontend/src/index.js | 2 +- frontend/src/views/App.js | 81 ---- frontend/src/views/App.scss | 16 - frontend/src/views/Connections.js | 293 -------------- frontend/src/views/Connections.scss | 38 -- frontend/src/views/Filters.js | 116 ------ frontend/src/views/Header.js | 109 ----- frontend/src/views/Header.scss | 34 -- frontend/src/views/Timeline.js | 232 ----------- frontend/src/views/Timeline.scss | 22 -- 57 files changed, 3015 insertions(+), 2956 deletions(-) create mode 100644 frontend/src/components/App.js delete mode 100644 frontend/src/components/Connection.js delete mode 100644 frontend/src/components/Connection.scss delete mode 100644 frontend/src/components/ConnectionContent.js delete mode 100644 frontend/src/components/ConnectionContent.scss delete mode 100644 frontend/src/components/ConnectionMatchedRules.js delete mode 100644 frontend/src/components/ConnectionMatchedRules.scss create mode 100644 frontend/src/components/Header.js create mode 100644 frontend/src/components/Header.scss delete mode 100644 frontend/src/components/MessageAction.js delete mode 100644 frontend/src/components/MessageAction.scss create mode 100644 frontend/src/components/Timeline.js create mode 100644 frontend/src/components/Timeline.scss create mode 100644 frontend/src/components/dialogs/Filters.js create mode 100644 frontend/src/components/objects/Connection.js create mode 100644 frontend/src/components/objects/Connection.scss create mode 100644 frontend/src/components/objects/ConnectionMatchedRules.js create mode 100644 frontend/src/components/objects/ConnectionMatchedRules.scss create mode 100644 frontend/src/components/objects/MessageAction.js create mode 100644 frontend/src/components/objects/MessageAction.scss create mode 100644 frontend/src/components/pages/ConfigurationPage.js create mode 100644 frontend/src/components/pages/ConfigurationPage.scss create mode 100644 frontend/src/components/pages/MainPage.js create mode 100644 frontend/src/components/pages/MainPage.scss create mode 100644 frontend/src/components/pages/ServiceUnavailablePage.js create mode 100644 frontend/src/components/pages/common.scss delete mode 100644 frontend/src/components/panels/ConfigurationPane.js delete mode 100644 frontend/src/components/panels/ConfigurationPane.scss create mode 100644 frontend/src/components/panels/ConnectionsPane.js create mode 100644 frontend/src/components/panels/ConnectionsPane.scss delete mode 100644 frontend/src/components/panels/PcapPane.js delete mode 100644 frontend/src/components/panels/PcapPane.scss create mode 100644 frontend/src/components/panels/PcapsPane.js create mode 100644 frontend/src/components/panels/PcapsPane.scss delete mode 100644 frontend/src/components/panels/RulePane.js delete mode 100644 frontend/src/components/panels/RulePane.scss create mode 100644 frontend/src/components/panels/RulesPane.js create mode 100644 frontend/src/components/panels/RulesPane.scss delete mode 100644 frontend/src/components/panels/ServicePane.js delete mode 100644 frontend/src/components/panels/ServicePane.scss create mode 100644 frontend/src/components/panels/ServicesPane.js create mode 100644 frontend/src/components/panels/ServicesPane.scss create mode 100644 frontend/src/components/panels/StreamsPane.js create mode 100644 frontend/src/components/panels/StreamsPane.scss delete mode 100644 frontend/src/views/App.js delete mode 100644 frontend/src/views/App.scss delete mode 100644 frontend/src/views/Connections.js delete mode 100644 frontend/src/views/Connections.scss delete mode 100644 frontend/src/views/Filters.js delete mode 100644 frontend/src/views/Header.js delete mode 100644 frontend/src/views/Header.scss delete mode 100644 frontend/src/views/Timeline.js delete mode 100644 frontend/src/views/Timeline.scss (limited to 'frontend/src/components') diff --git a/connection_streams_controller.go b/connection_streams_controller.go index 9251a3a..89e484d 100644 --- a/connection_streams_controller.go +++ b/connection_streams_controller.go @@ -28,8 +28,7 @@ import ( ) const ( - initialPayloadsSize = 1024 - defaultQueryFormatLimit = 8024 + initialMessagesSize = 1024 initialRegexSlicesCount = 8 pwntoolsMaxServerBytes = 20 ) @@ -66,8 +65,6 @@ type RegexSlice struct { type GetMessageFormat struct { Format string `form:"format"` - Skip uint64 `form:"skip"` - Limit uint64 `form:"limit"` } type DownloadMessageFormat struct { @@ -92,12 +89,8 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, return nil, false } - payloads := make([]*Message, 0, initialPayloadsSize) - var clientIndex, serverIndex, globalIndex uint64 - - if format.Limit <= 0 { - format.Limit = defaultQueryFormatLimit - } + messages := make([]*Message, 0, initialMessagesSize) + var clientIndex, serverIndex uint64 var clientBlocksIndex, serverBlocksIndex int var clientDocumentIndex, serverDocumentIndex int @@ -111,8 +104,8 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, return serverBlocksIndex < len(serverStream.BlocksIndexes) } - var payload *Message - payloadsBuffer := make([]*Message, 0, 16) + var message *Message + messagesBuffer := make([]*Message, 0, 16) contentChunkBuffer := new(bytes.Buffer) var lastContentSlice []byte var sideChanged, lastClient, lastServer bool @@ -129,7 +122,7 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, } size := uint64(end - start) - payload = &Message{ + message = &Message{ FromClient: true, Content: DecodeBytes(clientStream.Payload[start:end], format.Format), Index: start, @@ -138,7 +131,6 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, RegexMatches: findMatchesBetween(clientStream.PatternMatches, clientIndex, clientIndex+size), } clientIndex += size - globalIndex += size clientBlocksIndex++ lastContentSlice = clientStream.Payload[start:end] @@ -153,7 +145,7 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, } size := uint64(end - start) - payload = &Message{ + message = &Message{ FromClient: false, Content: DecodeBytes(serverStream.Payload[start:end], format.Format), Index: start, @@ -162,7 +154,6 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, RegexMatches: findMatchesBetween(serverStream.PatternMatches, serverIndex, serverIndex+size), } serverIndex += size - globalIndex += size serverBlocksIndex++ lastContentSlice = serverStream.Payload[start:end] @@ -172,49 +163,43 @@ func (csc ConnectionStreamsController) GetConnectionMessages(c context.Context, if !hasClientBlocks() { clientDocumentIndex++ clientBlocksIndex = 0 + clientIndex = 0 clientStream = csc.getConnectionStream(c, connectionID, true, clientDocumentIndex) } if !hasServerBlocks() { serverDocumentIndex++ serverBlocksIndex = 0 + serverIndex = 0 serverStream = csc.getConnectionStream(c, connectionID, false, serverDocumentIndex) } updateMetadata := func() { metadata := parsers.Parse(contentChunkBuffer.Bytes()) var isMetadataContinuation bool - for _, elem := range payloadsBuffer { + for _, elem := range messagesBuffer { elem.Metadata = metadata elem.IsMetadataContinuation = isMetadataContinuation isMetadataContinuation = true } - payloadsBuffer = payloadsBuffer[:0] + messagesBuffer = messagesBuffer[:0] contentChunkBuffer.Reset() } if sideChanged { updateMetadata() } - payloadsBuffer = append(payloadsBuffer, payload) + messagesBuffer = append(messagesBuffer, message) contentChunkBuffer.Write(lastContentSlice) if clientStream.ID.IsZero() && serverStream.ID.IsZero() { updateMetadata() } - if globalIndex > format.Skip { - // problem: waste of time if the payload is discarded - payloads = append(payloads, payload) - } - if globalIndex > format.Skip+format.Limit { - // problem: the last chunk is not parsed, but can be ok because it is not finished - updateMetadata() - return payloads, true - } + messages = append(messages, message) } - return payloads, true + return messages, true } func (csc ConnectionStreamsController) DownloadConnectionMessages(c context.Context, connectionID RowID, @@ -345,7 +330,6 @@ func findMatchesBetween(patternMatches map[uint][]PatternSlice, from, to uint64) continue } - log.Info(slice[0], slice[1], from, to) var start, end uint64 if from > slice[0] { start = 0 diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js new file mode 100644 index 0000000..bf959c5 --- /dev/null +++ b/frontend/src/components/App.js @@ -0,0 +1,62 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import ConfigurationPage from "./pages/ConfigurationPage"; +import Notifications from "./Notifications"; +import dispatcher from "../dispatcher"; +import MainPage from "./pages/MainPage"; +import ServiceUnavailablePage from "./pages/ServiceUnavailablePage"; + +class App extends Component { + + state = {}; + + componentDidMount() { + dispatcher.register("notifications", payload => { + if (payload.event === "connected") { + this.setState({ + connected: true, + configured: payload.message["is_configured"] + }); + } + }); + + setInterval(() => { + if (document.title.endsWith("❚")) { + document.title = document.title.slice(0, -1); + } else { + document.title += "❚"; + } + }, 500); + } + + render() { + return ( + <> + + {this.state.connected ? + (this.state.configured ? : + this.setState({configured: true})}/>) : + + } + + ); + } +} + +export default App; diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js deleted file mode 100644 index c7b0010..0000000 --- a/frontend/src/components/Connection.js +++ /dev/null @@ -1,145 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './Connection.scss'; -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'); - -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; - backend.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`) - .then(_ => { - this.props.onEnabled(!enabled); - this.setState({update: true}); - }); - } - if (name === "mark") { - const marked = this.props.data.marked; - backend.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`) - .then(_ => { - 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"; - let serviceColor = "#0f192e"; - if (this.props.services[conn["port_dst"]]) { - const service = this.props.services[conn["port_dst"]]; - 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 timeInfo =

- Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
- Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}
- Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()} -

; - - const popoverFor = function (name, content) { - return - - {content} - - ; - }; - - const commentPopoverContent =

- Click to {conn.comment.length > 0 ? "edit" : "add"} comment - {conn.comment && } -

; - - const copyPopoverContent =

- {this.state.copiedMessage ? Copied! : - Click to copy the connection id} - -

; - - return ( - 0})}> - - - this.props.addServicePortFilter(conn["port_dst"])}/> - - - {conn["ip_src"]} - {conn["port_src"]} - {conn["ip_dst"]} - {conn["port_dst"]} - - - - {durationBetween(startedAt, closedAt)} - {formatSize(conn["client_bytes"])} - {formatSize(conn["server_bytes"])} - - Mark this connection)}> - this.handleAction("mark")}>!! - - - this.handleAction("comment")}>@ - - - this.handleAction("copy")}># - - - - ); - } - -} - -export default Connection; diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss deleted file mode 100644 index cc1ea96..0000000 --- a/frontend/src/components/Connection.scss +++ /dev/null @@ -1,68 +0,0 @@ -@import "../colors.scss"; - -.connection { - border-top: 3px solid $color-primary-3; - border-bottom: 3px solid $color-primary-3; - background-color: $color-primary-0; - - td { - vertical-align: middle; - } - - .connection-service { - .btn { - width: 100%; - } - - .btn:hover { - color: $color-primary-4; - background-color: $color-primary-1 !important; - } - } - - .connection-icon { - font-size: 18px; - font-weight: 600; - margin-right: 6px; - cursor: pointer; - } - - .connection-icon.icon-enabled { - color: $color-secondary-2; - } - - &:hover { - background-color: $color-primary-2; - } - - &.connection-selected { - background-color: $color-primary-2; - } - - &.has-matched-rules { - border-bottom: 0; - } - - .link-popover { - font-weight: 400; - } -} - -.connection-popover { - border: none; - background-color: $color-primary-4; - - .popover-body { - color: $color-primary-1; - - textarea { - font-size: 12px; - width: 200px; - background-color: $color-primary-3; - } - } - - .arrow::after { - border-right-color: $color-primary-4; - } -} diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js deleted file mode 100644 index b468277..0000000 --- a/frontend/src/components/ConnectionContent.js +++ /dev/null @@ -1,243 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './ConnectionContent.scss'; -import {Row} from 'react-bootstrap'; -import MessageAction from "./MessageAction"; -import backend from "../backend"; -import ButtonField from "./fields/ButtonField"; -import ChoiceField from "./fields/ChoiceField"; -import DOMPurify from 'dompurify'; -import ReactJson from 'react-json-view' -import {downloadBlob, getHeaderValue} from "../utils"; -import log from "../log"; - -const classNames = require('classnames'); - -class ConnectionContent extends Component { - - constructor(props) { - super(props); - this.state = { - loading: false, - connectionContent: null, - format: "default", - tryParse: true, - messageActionDialog: null - }; - - this.validFormats = ["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]; - } - - componentDidMount() { - if (this.props.connection != null) { - this.loadStream(); - } - - document.title = "caronte:~/$"; - } - - componentDidUpdate(prevProps, prevState, snapshot) { - if (this.props.connection != null && ( - this.props.connection !== prevProps.connection || this.state.format !== prevState.format)) { - this.closeRenderWindow(); - this.loadStream(); - } - } - - componentWillUnmount() { - this.closeRenderWindow(); - } - - loadStream = () => { - this.setState({loading: true}); - // TODO: limit workaround. - backend.get(`/api/streams/${this.props.connection.id}?format=${this.state.format}&limit=999999`).then(res => { - this.setState({ - connectionContent: res.json, - loading: false - }); - }); - }; - - setFormat = (format) => { - if (this.validFormats.includes(format)) { - this.setState({format: format}); - } - }; - - tryParseConnectionMessage = (connectionMessage) => { - if (connectionMessage.metadata == null) { - return connectionMessage.content; - } - if (connectionMessage["is_metadata_continuation"]) { - return **already parsed in previous messages**; - } - - let unrollMap = (obj) => obj == null ? null : Object.entries(obj).map(([key, value]) => -

{key}: {value}

- ); - - let m = connectionMessage.metadata; - switch (m.type) { - case "http-request": - let url = {m.host}{m.url}; - return -

{m.method} {url} {m.protocol}

- {unrollMap(m.headers)} -

{m.body}

- {unrollMap(m.trailers)} - ; - case "http-response": - const contentType = getHeaderValue(m, "Content-Type"); - let body = m.body; - if (contentType && contentType.includes("application/json")) { - try { - const json = JSON.parse(m.body); - body = ; - } catch (e) { - console.log(e); - } - } - - return -

{m.protocol} {m.status}

- {unrollMap(m.headers)} -

{body}

- {unrollMap(m.trailers)} - ; - default: - return connectionMessage.content; - } - }; - - connectionsActions = (connectionMessage) => { - if (connectionMessage.metadata == null) { //} || !connectionMessage.metadata["reproducers"]) { - return null; - } - - const m = connectionMessage.metadata; - switch (m.type) { - case "http-request" : - if (!connectionMessage.metadata["reproducers"]) { - return; - } - return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) => - { - this.setState({ - messageActionDialog: this.setState({messageActionDialog: null})}/> - }); - }}/> - ); - case "http-response": - const contentType = getHeaderValue(m, "Content-Type"); - - if (contentType && contentType.includes("text/html")) { - return { - let w; - if (this.state.renderWindow && !this.state.renderWindow.closed) { - w = this.state.renderWindow; - } else { - w = window.open("", "", "width=900, height=600, scrollbars=yes"); - this.setState({renderWindow: w}); - } - w.document.body.innerHTML = DOMPurify.sanitize(m.body); - w.focus(); - }}/>; - } - break; - default: - return null; - } - }; - - downloadStreamRaw = (value) => { - backend.download(`/api/streams/${this.props.connection.id}/download?format=${this.state.format}&type=${value}`) - .then(res => downloadBlob(res.blob, `${this.props.connection.id}-${value}-${this.state.format}.txt`)) - .catch(_ => log.error("Failed to download stream messages")); - }; - - closeRenderWindow = () => { - if (this.state.renderWindow) { - this.state.renderWindow.close(); - } - }; - - render() { - const conn = this.props.connection; - const content = this.state.connectionContent; - - if (content == null) { - return

select a connection to view

; - } - - let payload = content.map((c, i) => -

- offset: {c.index} | timestamp: {c.timestamp} - | retransmitted: {c["is_retransmitted"] ? "yes" : "no"} -

{this.connectionsActions(c)}

{c["from_client"] ? "client" : "server"}

- {this.state.tryParse && this.state.format === "default" ? this.tryParseConnectionMessage(c) : c.content} -

- ); - - return ( -

- -

- flow: {conn["ip_src"]}:{conn["port_src"]} -> {conn["ip_dst"]}:{conn["port_dst"]} - | timestamp: {conn["started_at"]} -

- - - - - -

- -

{payload}

- {this.state.messageActionDialog} -

- ); - } - -} - - -export default ConnectionContent; diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss deleted file mode 100644 index f4edec9..0000000 --- a/frontend/src/components/ConnectionContent.scss +++ /dev/null @@ -1,113 +0,0 @@ -@import "../colors.scss"; - -.connection-content { - height: 100%; - background-color: $color-primary-0; - - pre { - overflow-x: hidden; - height: calc(100% - 31px); - padding: 0 10px; - white-space: pre-wrap; - word-break: break-word; - - p { - margin: 0; - padding: 0; - } - } - - .connection-message { - position: relative; - margin: 10px 0; - border: 4px solid $color-primary-3; - border-top: 0; - - .connection-message-header { - height: 25px; - background-color: $color-primary-3; - - .connection-message-info { - font-size: 11px; - margin-top: 6px; - margin-left: -10px; - } - - .connection-message-actions { - display: none; - margin-right: -18px; - - button { - font-size: 11px; - margin: 0 3px; - padding: 5px; - } - } - } - - .message-content { - padding: 10px; - - .react-json-view { - background-color: inherit !important; - } - } - - &:hover .connection-message-actions { - display: flex; - } - - .connection-message-label { - font-size: 12px; - position: absolute; - top: 0; - padding: 10px 0; - background-color: $color-primary-3; - writing-mode: vertical-rl; - text-orientation: mixed; - } - - &.from-client { - margin-right: 100px; - color: $color-primary-4; - - .connection-message-label { - right: -22px; - } - } - - &.from-server { - margin-left: 100px; - color: $color-primary-4; - - .connection-message-label { - left: -22px; - transform: rotate(-180deg); - } - } - } - - .connection-content-header { - height: 33px; - padding: 0; - background-color: $color-primary-3; - - .header-info { - font-size: 12px; - padding-top: 7px; - padding-left: 25px; - } - - .header-actions { - display: flex; - - .choice-field { - margin-top: -5px; - - .field-value { - background-color: $color-primary-3; - } - } - } - } -} diff --git a/frontend/src/components/ConnectionMatchedRules.js b/frontend/src/components/ConnectionMatchedRules.js deleted file mode 100644 index 35643c5..0000000 --- a/frontend/src/components/ConnectionMatchedRules.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './ConnectionMatchedRules.scss'; -import ButtonField from "./fields/ButtonField"; - -class ConnectionMatchedRules extends Component { - - constructor(props) { - super(props); - this.state = { - }; - } - - render() { - const matchedRules = this.props.matchedRules.map(mr => { - const rule = this.props.rules.find(r => r.id === mr); - return this.props.addMatchedRulesFilter(rule.id)} name={rule.name} - color={rule.color} small />; - }); - - return ( - - matched_rules: - {matchedRules} - - ); - } -} - -export default ConnectionMatchedRules; diff --git a/frontend/src/components/ConnectionMatchedRules.scss b/frontend/src/components/ConnectionMatchedRules.scss deleted file mode 100644 index 65d9ac8..0000000 --- a/frontend/src/components/ConnectionMatchedRules.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import "../colors.scss"; - -.connection-matches { - background-color: $color-primary-0; - - .rule-buttons { - padding: 0; - } - - .button-field { - display: inline-block; - margin-right: 5px; - - button { - font-size: 0.8em; - padding: 2px 10px; - } - } - - .row-label { - font-size: 0.8em; - } -} diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js new file mode 100644 index 0000000..4d29364 --- /dev/null +++ b/frontend/src/components/Header.js @@ -0,0 +1,111 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import Typed from 'typed.js'; +import './Header.scss'; +import {filtersDefinitions, filtersNames} from "./filters/FiltersDefinitions"; +import {Link, withRouter} from "react-router-dom"; +import ButtonField from "./fields/ButtonField"; + +class Header extends Component { + + constructor(props) { + super(props); + let newState = {}; + filtersNames.forEach(elem => newState[`${elem}_active`] = false); + this.state = newState; + this.fetchStateFromLocalStorage = this.fetchStateFromLocalStorage.bind(this); + } + + componentDidMount() { + const options = { + strings: ["caronte$ "], + typeSpeed: 50, + cursorChar: "❚" + }; + this.typed = new Typed(this.el, options); + + this.fetchStateFromLocalStorage(); + + if (typeof window !== "undefined") { + window.addEventListener("quick-filters", this.fetchStateFromLocalStorage); + } + } + + componentWillUnmount() { + this.typed.destroy(); + + if (typeof window !== "undefined") { + window.removeEventListener("quick-filters", this.fetchStateFromLocalStorage); + } + } + + fetchStateFromLocalStorage() { + let newState = {}; + filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); + this.setState(newState); + } + + render() { + let quickFilters = filtersNames.filter(name => this.state[`${name}_active`]) + .map(name => {filtersDefinitions[name]}) + .slice(0, 5); + + return ( +

+ + { + this.el = el; + }}/> + +

+ +

+ {quickFilters} +

+ +

+ + + + + + + + + + + + + +

+ ); + } +} + +export default withRouter(Header); diff --git a/frontend/src/components/Header.scss b/frontend/src/components/Header.scss new file mode 100644 index 0000000..e2e8e1c --- /dev/null +++ b/frontend/src/components/Header.scss @@ -0,0 +1,34 @@ +@import "../colors"; + +.header { + height: 80px; + padding: 15px 30px; + + > .row { + background-color: $color-primary-0; + } + + .header-title { + width: 200px; + margin: 5px 0 5px -5px; + } + + .header-buttons { + display: flex; + justify-content: flex-end; + margin: 7px 0; + + .button-field { + margin-left: 7px; + } + } + + .filters-bar { + padding: 3px 0; + + .filter { + display: inline-block; + margin-right: 10px; + } + } +} diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js deleted file mode 100644 index b94cbb9..0000000 --- a/frontend/src/components/MessageAction.js +++ /dev/null @@ -1,68 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './MessageAction.scss'; -import {Modal} from "react-bootstrap"; -import TextField from "./fields/TextField"; -import ButtonField from "./fields/ButtonField"; - -class MessageAction extends Component { - - constructor(props) { - super(props); - this.state = { - copyButtonText: "copy" - }; - this.actionValue = React.createRef(); - this.copyActionValue = this.copyActionValue.bind(this); - } - - copyActionValue() { - this.actionValue.current.select(); - document.execCommand('copy'); - this.setState({copyButtonText: "copied!"}); - setTimeout(() => this.setState({copyButtonText: "copy"}), 3000); - } - - render() { - return ( - - - - {this.props.actionName} - - - - - - - - - - - ); - } -} - -export default MessageAction; diff --git a/frontend/src/components/MessageAction.scss b/frontend/src/components/MessageAction.scss deleted file mode 100644 index faa23d3..0000000 --- a/frontend/src/components/MessageAction.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "../colors.scss"; - -.message-action-value { - font-size: 13px; - padding: 15px; - color: $color-primary-4; - background-color: $color-primary-2; -} diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js new file mode 100644 index 0000000..7be42e0 --- /dev/null +++ b/frontend/src/components/Timeline.js @@ -0,0 +1,232 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './Timeline.scss'; +import { + ChartContainer, + ChartRow, + Charts, + LineChart, + MultiBrush, + Resizable, + styler, + YAxis +} from "react-timeseries-charts"; +import {TimeRange, TimeSeries} from "pondjs"; +import backend from "../backend"; +import ChoiceField from "./fields/ChoiceField"; +import {withRouter} from "react-router-dom"; +import log from "../log"; +import dispatcher from "../dispatcher"; + +const minutes = 60 * 1000; + +class Timeline extends Component { + + state = { + metric: "connections_per_service" + }; + + constructor() { + super(); + + this.disableTimeSeriesChanges = false; + this.selectionTimeout = null; + } + + filteredPort = () => { + const urlParams = new URLSearchParams(this.props.location.search); + return urlParams.get("service_port"); + }; + + componentDidMount() { + const filteredPort = this.filteredPort(); + this.setState({filteredPort}); + this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); + + dispatcher.register("connection_updates", payload => { + this.setState({ + selection: new TimeRange(payload.from, payload.to), + }); + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices().then(() => log.debug("Services reloaded after notification update")); + } + }); + } + + componentDidUpdate(prevProps, prevState, snapshot) { + const filteredPort = this.filteredPort(); + if (this.state.filteredPort !== filteredPort) { + this.setState({filteredPort}); + this.loadStatistics(this.state.metric, filteredPort).then(() => + log.debug("Statistics reloaded after filtered port changes")); + } + } + + loadStatistics = async (metric, filteredPort) => { + const urlParams = new URLSearchParams(); + urlParams.set("metric", metric); + + let services = await this.loadServices(); + if (filteredPort && services[filteredPort]) { + const service = services[filteredPort]; + services = {}; + services[filteredPort] = service; + } + + const ports = Object.keys(services); + ports.forEach(s => urlParams.append("ports", s)); + + const metrics = (await backend.get("/api/statistics?" + urlParams)).json; + const zeroFilledMetrics = []; + const toTime = m => new Date(m["range_start"]).getTime(); + + if (metrics.length > 0) { + let i = 0; + for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) { + if (interval === toTime(metrics[i])) { + const m = metrics[i++]; + m["range_start"] = new Date(m["range_start"]); + zeroFilledMetrics.push(m); + } else { + const m = {}; + m["range_start"] = new Date(interval); + m[metric] = {}; + ports.forEach(p => m[metric][p] = 0); + zeroFilledMetrics.push(m); + } + } + } + + const series = new TimeSeries({ + name: "statistics", + columns: ["time"].concat(ports), + points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0))) + }); + const start = series.range().begin(); + const end = series.range().end(); + start.setTime(start.getTime() - minutes); + end.setTime(end.getTime() + minutes); + + this.setState({ + metric, + series, + timeRange: new TimeRange(start, end), + start, + end + }); + log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`); + }; + + loadServices = async () => { + const services = (await backend.get("/api/services")).json; + this.setState({services}); + return services; + }; + + createStyler = () => { + return styler(Object.keys(this.state.services).map(port => { + return {key: port, color: this.state.services[port].color, width: 2}; + })); + }; + + handleTimeRangeChange = (timeRange) => { + if (!this.disableTimeSeriesChanges) { + this.setState({timeRange}); + } + }; + + handleSelectionChange = (timeRange) => { + this.disableTimeSeriesChanges = true; + + this.setState({selection: timeRange}); + if (this.selectionTimeout) { + clearTimeout(this.selectionTimeout); + } + this.selectionTimeout = setTimeout(() => { + dispatcher.dispatch("timeline_updates", { + from: timeRange.begin(), + to: timeRange.end() + }); + this.selectionTimeout = null; + this.disableTimeSeriesChanges = false; + }, 1000); + }; + + aggregateSeries = (func) => { + const values = this.state.series.columns().map(c => this.state.series[func](c)); + return Math[func](...values); + }; + + render() { + if (!this.state.series) { + return null; + } + + return ( + + ); + } +} + +export default withRouter(Timeline); diff --git a/frontend/src/components/Timeline.scss b/frontend/src/components/Timeline.scss new file mode 100644 index 0000000..eeb9d50 --- /dev/null +++ b/frontend/src/components/Timeline.scss @@ -0,0 +1,22 @@ +@import "../colors"; + +.footer { + padding: 15px; + + .time-line { + position: relative; + background-color: $color-primary-0; + + .metric-selection { + font-size: 0.8em; + position: absolute; + top: 5px; + right: 10px; + } + } + + svg text { + font-family: "Fira Code", monospace !important; + fill: $color-primary-4 !important; + } +} diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js new file mode 100644 index 0000000..35c11df --- /dev/null +++ b/frontend/src/components/dialogs/Filters.js @@ -0,0 +1,116 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import {Col, Container, Modal, Row, Table} from "react-bootstrap"; +import {filtersDefinitions, filtersNames} from "../filters/FiltersDefinitions"; +import ButtonField from "../fields/ButtonField"; + +class Filters extends Component { + + constructor(props) { + super(props); + let newState = {}; + filtersNames.forEach(elem => newState[`${elem}_active`] = false); + this.state = newState; + } + + componentDidMount() { + let newState = {}; + filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); + this.setState(newState); + } + + checkboxChangesHandler(filterName, event) { + this.setState({[`${filterName}_active`]: event.target.checked}); + localStorage.setItem(`filters.${filterName}`, event.target.checked); + if (typeof window !== "undefined") { + window.dispatchEvent(new Event("quick-filters")); + } + } + + generateRows(filtersNames) { + return filtersNames.map(name => + + this.checkboxChangesHandler(name, event)}/> + {filtersDefinitions[name]} + + ); + } + + render() { + return ( + + + + ~/filters + + + + + + + + + + + + + + + {this.generateRows(["service_port", "client_address", "min_duration", + "min_bytes", "started_after", "closed_after", "marked"])} + +

show	filter

+ + + + + + + + + + + {this.generateRows(["matched_rules", "client_port", "max_duration", + "max_bytes", "started_before", "closed_before", "hidden"])} + +

show	filter

+ + + + + + + + + + + + ); + } +} + +export default Filters; diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js new file mode 100644 index 0000000..5e2beba --- /dev/null +++ b/frontend/src/components/objects/Connection.js @@ -0,0 +1,145 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './Connection.scss'; +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 "./LinkPopover"; + +const classNames = require('classnames'); + +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; + backend.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`) + .then(_ => { + this.props.onEnabled(!enabled); + this.setState({update: true}); + }); + } + if (name === "mark") { + const marked = this.props.data.marked; + backend.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`) + .then(_ => { + 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"; + let serviceColor = "#0f192e"; + if (this.props.services[conn["port_dst"]]) { + const service = this.props.services[conn["port_dst"]]; + 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 timeInfo =

+ Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
+ Processed at {processedAt.toLocaleDateString() + " " + processedAt.toLocaleTimeString()}
+ Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()} +

; + + const popoverFor = function (name, content) { + return + + {content} + + ; + }; + + const commentPopoverContent =

+ Click to {conn.comment.length > 0 ? "edit" : "add"} comment + {conn.comment && } +

; + + const copyPopoverContent =

+ {this.state.copiedMessage ? Copied! : + Click to copy the connection id} + +

; + + return ( + 0})}> + + + this.props.addServicePortFilter(conn["port_dst"])}/> + + + {conn["ip_src"]} + {conn["port_src"]} + {conn["ip_dst"]} + {conn["port_dst"]} + + + + {durationBetween(startedAt, closedAt)} + {formatSize(conn["client_bytes"])} + {formatSize(conn["server_bytes"])} + + Mark this connection)}> + this.handleAction("mark")}>!! + + + this.handleAction("comment")}>@ + + + this.handleAction("copy")}># + + + + ); + } + +} + +export default Connection; diff --git a/frontend/src/components/objects/Connection.scss b/frontend/src/components/objects/Connection.scss new file mode 100644 index 0000000..3b9f479 --- /dev/null +++ b/frontend/src/components/objects/Connection.scss @@ -0,0 +1,68 @@ +@import "../../colors"; + +.connection { + border-top: 3px solid $color-primary-3; + border-bottom: 3px solid $color-primary-3; + background-color: $color-primary-0; + + td { + vertical-align: middle; + } + + .connection-service { + .btn { + width: 100%; + } + + .btn:hover { + color: $color-primary-4; + background-color: $color-primary-1 !important; + } + } + + .connection-icon { + font-size: 18px; + font-weight: 600; + margin-right: 6px; + cursor: pointer; + } + + .connection-icon.icon-enabled { + color: $color-secondary-2; + } + + &:hover { + background-color: $color-primary-2; + } + + &.connection-selected { + background-color: $color-primary-2; + } + + &.has-matched-rules { + border-bottom: 0; + } + + .link-popover { + font-weight: 400; + } +} + +.connection-popover { + border: none; + background-color: $color-primary-4; + + .popover-body { + color: $color-primary-1; + + textarea { + font-size: 12px; + width: 200px; + background-color: $color-primary-3; + } + } + + .arrow::after { + border-right-color: $color-primary-4; + } +} diff --git a/frontend/src/components/objects/ConnectionMatchedRules.js b/frontend/src/components/objects/ConnectionMatchedRules.js new file mode 100644 index 0000000..73d5c5d --- /dev/null +++ b/frontend/src/components/objects/ConnectionMatchedRules.js @@ -0,0 +1,46 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './ConnectionMatchedRules.scss'; +import ButtonField from "../fields/ButtonField"; + +class ConnectionMatchedRules extends Component { + + constructor(props) { + super(props); + this.state = { + }; + } + + render() { + const matchedRules = this.props.matchedRules.map(mr => { + const rule = this.props.rules.find(r => r.id === mr); + return this.props.addMatchedRulesFilter(rule.id)} name={rule.name} + color={rule.color} small />; + }); + + return ( + + matched_rules: + {matchedRules} + + ); + } +} + +export default ConnectionMatchedRules; diff --git a/frontend/src/components/objects/ConnectionMatchedRules.scss b/frontend/src/components/objects/ConnectionMatchedRules.scss new file mode 100644 index 0000000..f46a914 --- /dev/null +++ b/frontend/src/components/objects/ConnectionMatchedRules.scss @@ -0,0 +1,23 @@ +@import "../../colors"; + +.connection-matches { + background-color: $color-primary-0; + + .rule-buttons { + padding: 0; + } + + .button-field { + display: inline-block; + margin-right: 5px; + + button { + font-size: 0.8em; + padding: 2px 10px; + } + } + + .row-label { + font-size: 0.8em; + } +} diff --git a/frontend/src/components/objects/MessageAction.js b/frontend/src/components/objects/MessageAction.js new file mode 100644 index 0000000..9f199b7 --- /dev/null +++ b/frontend/src/components/objects/MessageAction.js @@ -0,0 +1,68 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './MessageAction.scss'; +import {Modal} from "react-bootstrap"; +import TextField from "../fields/TextField"; +import ButtonField from "../fields/ButtonField"; + +class MessageAction extends Component { + + constructor(props) { + super(props); + this.state = { + copyButtonText: "copy" + }; + this.actionValue = React.createRef(); + this.copyActionValue = this.copyActionValue.bind(this); + } + + copyActionValue() { + this.actionValue.current.select(); + document.execCommand('copy'); + this.setState({copyButtonText: "copied!"}); + setTimeout(() => this.setState({copyButtonText: "copy"}), 3000); + } + + render() { + return ( + + + + {this.props.actionName} + + + + + + + + + + + ); + } +} + +export default MessageAction; diff --git a/frontend/src/components/objects/MessageAction.scss b/frontend/src/components/objects/MessageAction.scss new file mode 100644 index 0000000..996007b --- /dev/null +++ b/frontend/src/components/objects/MessageAction.scss @@ -0,0 +1,8 @@ +@import "../../colors"; + +.message-action-value { + font-size: 13px; + padding: 15px; + color: $color-primary-4; + background-color: $color-primary-2; +} diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js new file mode 100644 index 0000000..6ab8ae3 --- /dev/null +++ b/frontend/src/components/pages/ConfigurationPage.js @@ -0,0 +1,179 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import '../panels/common.scss'; +import './ConfigurationPage.scss'; +import LinkPopover from "../objects/LinkPopover"; +import {Col, Container, Row} from "react-bootstrap"; +import InputField from "../fields/InputField"; +import TextField from "../fields/TextField"; +import ButtonField from "../fields/ButtonField"; +import CheckField from "../fields/CheckField"; +import {createCurlCommand} from "../../utils"; +import Table from "react-bootstrap/Table"; +import validation from "../../validation"; +import backend from "../../backend"; + +class ConfigurationPage extends Component { + + constructor(props) { + super(props); + this.state = { + settings: { + "config": { + "server_address": "", + "flag_regex": "", + "auth_required": false + }, + "accounts": { + } + }, + newUsername: "", + newPassword: "" + }; + } + + saveSettings = () => { + if (this.validateSettings(this.state.settings)) { + backend.post("/setup", this.state.settings).then(_ => { + this.props.onConfigured(); + }).catch(res => { + this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)}); + }); + } + }; + + validateSettings = (settings) => { + let valid = true; + if (!validation.isValidAddress(settings.config.server_address, true)) { + this.setState({serverAddressError: "invalid ip_address"}); + valid = false; + } + if (settings.config.flag_regex.length < 8) { + this.setState({flagRegexError: "flag_regex.length < 8"}); + valid = false; + } + + return valid; + }; + + updateParam = (callback) => { + callback(this.state.settings); + this.setState({settings: this.state.settings}); + }; + + addAccount = () => { + if (this.state.newUsername.length !== 0 && this.state.newPassword.length !== 0) { + const settings = this.state.settings; + settings.accounts[this.state.newUsername] = this.state.newPassword; + + this.setState({ + newUsername: "", + newPassword: "", + settings: settings + }); + } else { + this.setState({ + newUsernameActive: this.state.newUsername.length === 0, + newPasswordActive: this.state.newPassword.length === 0 + }); + } + }; + + render() { + const settings = this.state.settings; + const curlCommand = createCurlCommand("/setup", "POST", settings); + + const accounts = Object.entries(settings.accounts).map(([username, password]) => + + {username} + + this.updateParam((s) => delete s.accounts[username]) }/> + ).concat( + this.setState({newUsername: v})} /> + this.setState({newPassword: v})} /> + + ); + + return ( +

+ POST /setup + +

+ +

+ + + + this.updateParam((s) => s.config.server_address = v)} /> + this.updateParam((s) => s.config.flag_regex = v)} + error={this.state.flagRegexError} /> +

+ this.updateParam((s) => s.config.auth_required = v)}/> +

+ + + + + accounts: +

+ + + + + + + + + + {accounts} + +

username	password	actions

+ + + + + +

+ +

+ ); + } +} + +export default ConfigurationPage; diff --git a/frontend/src/components/pages/ConfigurationPage.scss b/frontend/src/components/pages/ConfigurationPage.scss new file mode 100644 index 0000000..4509865 --- /dev/null +++ b/frontend/src/components/pages/ConfigurationPage.scss @@ -0,0 +1,18 @@ +@import "../../colors"; + +.configuration-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + background-color: $color-primary-0; + + .pane { + flex-basis: 900px; + margin-bottom: 200px; + } + + .pane-container { + padding-bottom: 1px; + } +} diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js new file mode 100644 index 0000000..7376091 --- /dev/null +++ b/frontend/src/components/pages/MainPage.js @@ -0,0 +1,76 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './MainPage.scss'; +import './common.scss'; +import Connections from "../panels/ConnectionsPane"; +import StreamsPane from "../panels/StreamsPane"; +import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; +import Timeline from "../Timeline"; +import PcapsPane from "../panels/PcapsPane"; +import RulesPane from "../panels/RulesPane"; +import ServicesPane from "../panels/ServicesPane"; +import Header from "../Header"; +import Filters from "../dialogs/Filters"; +import MainPane from "../panels/MainPane"; + +class MainPage extends Component { + + state = {}; + + render() { + let modal; + if (this.state.filterWindowOpen) { + modal = this.setState({filterWindowOpen: false})}/>; + } + + return ( +

+ +

this.setState({filterWindowOpen: true})}/> +

+ +

+ this.setState({selectedConnection: c})}/> +

+ + }/> + }/> + }/> + }/> + }/> + +

+ + {modal} +

+ +

+ ); + } +} + +export default MainPage; diff --git a/frontend/src/components/pages/MainPage.scss b/frontend/src/components/pages/MainPage.scss new file mode 100644 index 0000000..3b1a689 --- /dev/null +++ b/frontend/src/components/pages/MainPage.scss @@ -0,0 +1,24 @@ +@import "../../colors"; + +.main-page { + .page-content { + display: flex; + flex: 1; + padding: 0 15px; + background-color: $color-primary-2; + + .connections-pane { + flex: 1 0; + margin-right: 7.5px; + } + + .details-pane { + flex: 1 1; + margin-left: 7.5px; + } + } + + .page-footer { + flex: 0; + } +} diff --git a/frontend/src/components/pages/ServiceUnavailablePage.js b/frontend/src/components/pages/ServiceUnavailablePage.js new file mode 100644 index 0000000..f27d84d --- /dev/null +++ b/frontend/src/components/pages/ServiceUnavailablePage.js @@ -0,0 +1,34 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './MainPage.scss'; + +class ServiceUnavailablePage extends Component { + + state = {}; + + render() { + return ( +

+ +

+ ); + } +} + +export default ServiceUnavailablePage; diff --git a/frontend/src/components/pages/common.scss b/frontend/src/components/pages/common.scss new file mode 100644 index 0000000..fcf5c20 --- /dev/null +++ b/frontend/src/components/pages/common.scss @@ -0,0 +1,16 @@ +.page { + position: relative; + display: flex; + flex-direction: column; + height: 100vh; + + .page-header, + .page-footer { + flex: 0; + } + + .page-content { + overflow: hidden; + flex: 1; + } +} diff --git a/frontend/src/components/panels/ConfigurationPane.js b/frontend/src/components/panels/ConfigurationPane.js deleted file mode 100644 index 9ae2cfb..0000000 --- a/frontend/src/components/panels/ConfigurationPane.js +++ /dev/null @@ -1,179 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './common.scss'; -import './ConfigurationPane.scss'; -import LinkPopover from "../objects/LinkPopover"; -import {Col, Container, Row} from "react-bootstrap"; -import InputField from "../fields/InputField"; -import TextField from "../fields/TextField"; -import ButtonField from "../fields/ButtonField"; -import CheckField from "../fields/CheckField"; -import {createCurlCommand} from "../../utils"; -import Table from "react-bootstrap/Table"; -import validation from "../../validation"; -import backend from "../../backend"; - -class ConfigurationPane extends Component { - - constructor(props) { - super(props); - this.state = { - settings: { - "config": { - "server_address": "", - "flag_regex": "", - "auth_required": false - }, - "accounts": { - } - }, - newUsername: "", - newPassword: "" - }; - } - - saveSettings = () => { - if (this.validateSettings(this.state.settings)) { - backend.post("/setup", this.state.settings).then(_ => { - this.props.onConfigured(); - }).catch(res => { - this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)}); - }); - } - }; - - validateSettings = (settings) => { - let valid = true; - if (!validation.isValidAddress(settings.config.server_address, true)) { - this.setState({serverAddressError: "invalid ip_address"}); - valid = false; - } - if (settings.config.flag_regex.length < 8) { - this.setState({flagRegexError: "flag_regex.length < 8"}); - valid = false; - } - - return valid; - }; - - updateParam = (callback) => { - callback(this.state.settings); - this.setState({settings: this.state.settings}); - }; - - addAccount = () => { - if (this.state.newUsername.length !== 0 && this.state.newPassword.length !== 0) { - const settings = this.state.settings; - settings.accounts[this.state.newUsername] = this.state.newPassword; - - this.setState({ - newUsername: "", - newPassword: "", - settings: settings - }); - } else { - this.setState({ - newUsernameActive: this.state.newUsername.length === 0, - newPasswordActive: this.state.newPassword.length === 0 - }); - } - }; - - render() { - const settings = this.state.settings; - const curlCommand = createCurlCommand("/setup", "POST", settings); - - const accounts = Object.entries(settings.accounts).map(([username, password]) => - - {username} - - this.updateParam((s) => delete s.accounts[username]) }/> - ).concat( - this.setState({newUsername: v})} /> - this.setState({newPassword: v})} /> - - ); - - return ( -

- POST /setup - -

- -

- - - - this.updateParam((s) => s.config.server_address = v)} /> - this.updateParam((s) => s.config.flag_regex = v)} - error={this.state.flagRegexError} /> -

- this.updateParam((s) => s.config.auth_required = v)}/> -

- - - - - accounts: -

- - - - - - - - - - {accounts} - -

username	password	actions

- - - - - -

- -

- ); - } -} - -export default ConfigurationPane; diff --git a/frontend/src/components/panels/ConfigurationPane.scss b/frontend/src/components/panels/ConfigurationPane.scss deleted file mode 100644 index ef48b34..0000000 --- a/frontend/src/components/panels/ConfigurationPane.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "../../colors"; - -.configuration-pane { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - background-color: $color-primary-0; - - .pane { - flex-basis: 900px; - margin-bottom: 200px; - } - - .pane-container { - padding-bottom: 1px; - } -} diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js new file mode 100644 index 0000000..038ef8f --- /dev/null +++ b/frontend/src/components/panels/ConnectionsPane.js @@ -0,0 +1,304 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './ConnectionsPane.scss'; +import Connection from "../objects/Connection"; +import Table from 'react-bootstrap/Table'; +import {Redirect} from 'react-router'; +import {withRouter} from "react-router-dom"; +import backend from "../../backend"; +import ConnectionMatchedRules from "../objects/ConnectionMatchedRules"; +import log from "../../log"; +import ButtonField from "../fields/ButtonField"; +import dispatcher from "../../dispatcher"; + +class ConnectionsPane extends Component { + + state = { + loading: false, + connections: [], + firstConnection: null, + lastConnection: null, + }; + + constructor(props) { + super(props); + + this.scrollTopThreashold = 0.00001; + this.scrollBottomThreashold = 0.99999; + this.maxConnections = 200; + this.queryLimit = 50; + this.connectionsListRef = React.createRef(); + this.lastScrollPosition = 0; + } + + componentDidMount() { + const initialParams = {limit: this.queryLimit}; + + const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/); + if (match != null) { + const id = match[1]; + initialParams.from = id; + backend.get(`/api/connections/${id}`) + .then(res => this.connectionSelected(res.json, false)) + .catch(error => log.error("Error loading initial connection", error)); + } + + this.loadConnections(initialParams, true).then(() => log.debug("Connections loaded")); + + dispatcher.register("timeline_updates", payload => { + this.connectionsListRef.current.scrollTop = 0; + this.loadConnections({ + started_after: Math.round(payload.from.getTime() / 1000), + started_before: Math.round(payload.to.getTime() / 1000), + limit: this.maxConnections + }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "rules.new" || payload.event === "rules.edit") { + this.loadRules().then(() => log.debug("Loaded connection rules after notification update")); + } + }); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices().then(() => log.debug("Services reloaded after notification update")); + } + }); + } + + connectionSelected = (c, doRedirect = true) => { + this.doSelectedConnectionRedirect = doRedirect; + this.setState({selected: c.id}); + this.props.onSelected(c); + log.debug(`Connection ${c.id} selected`); + }; + + componentDidUpdate(prevProps, prevState, snapshot) { + if (prevProps.location.search !== this.props.location.search) { + this.loadConnections({limit: this.queryLimit}) + .then(() => log.info("ConnectionsPane reloaded after query string update")); + } + } + + handleScroll = (e) => { + if (this.disableScrollHandler) { + this.lastScrollPosition = e.currentTarget.scrollTop; + return; + } + + let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight); + if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) { + this.loadConnections({from: this.state.lastConnection.id, limit: this.queryLimit,}) + .then(() => log.info("Following connections loaded")); + } + if (!this.state.loading && relativeScroll < this.scrollTopThreashold) { + this.loadConnections({to: this.state.firstConnection.id, limit: this.queryLimit,}) + .then(() => log.info("Previous connections loaded")); + if (this.state.showMoreRecentButton) { + this.setState({showMoreRecentButton: false}); + } + } else { + if (this.lastScrollPosition > e.currentTarget.scrollTop) { + if (!this.state.showMoreRecentButton) { + this.setState({showMoreRecentButton: true}); + } + } else { + if (this.state.showMoreRecentButton) { + this.setState({showMoreRecentButton: false}); + } + } + } + this.lastScrollPosition = e.currentTarget.scrollTop; + }; + + addServicePortFilter = (port) => { + const urlParams = new URLSearchParams(this.props.location.search); + urlParams.set("service_port", port); + this.doQueryStringRedirect = true; + this.setState({queryString: urlParams}); + }; + + addMatchedRulesFilter = (matchedRule) => { + const urlParams = new URLSearchParams(this.props.location.search); + const oldMatchedRules = urlParams.getAll("matched_rules") || []; + + if (!oldMatchedRules.includes(matchedRule)) { + urlParams.append("matched_rules", matchedRule); + this.doQueryStringRedirect = true; + this.setState({queryString: urlParams}); + } + }; + + async loadConnections(params, isInitial = false) { + const urlParams = new URLSearchParams(this.props.location.search); + for (const [name, value] of Object.entries(params)) { + urlParams.set(name, value); + } + + this.setState({loading: true}); + if (!this.state.rules) { + await this.loadRules(); + } + if (!this.state.services) { + await this.loadServices(); + } + + let res = (await backend.get(`/api/connections?${urlParams}`)).json; + + let connections = this.state.connections; + let firstConnection = this.state.firstConnection; + let lastConnection = this.state.lastConnection; + + if (params !== undefined && params.from !== undefined && params.to === undefined) { + if (res.length > 0) { + if (!isInitial) { + res = res.slice(1); + } + connections = this.state.connections.concat(res); + lastConnection = connections[connections.length - 1]; + if (isInitial) { + firstConnection = connections[0]; + } + if (connections.length > this.maxConnections) { + connections = connections.slice(connections.length - this.maxConnections, + connections.length - 1); + firstConnection = connections[0]; + } + } + } else if (params !== undefined && params.to !== undefined && params.from === undefined) { + if (res.length > 0) { + connections = res.slice(0, res.length - 1).concat(this.state.connections); + firstConnection = connections[0]; + if (connections.length > this.maxConnections) { + connections = connections.slice(0, this.maxConnections); + lastConnection = connections[this.maxConnections - 1]; + } + } + } else { + if (res.length > 0) { + connections = res; + firstConnection = connections[0]; + lastConnection = connections[connections.length - 1]; + } else { + connections = []; + firstConnection = null; + lastConnection = null; + } + } + + this.setState({ + loading: false, + connections: connections, + firstConnection: firstConnection, + lastConnection: lastConnection + }); + + if (firstConnection != null && lastConnection != null) { + dispatcher.dispatch("connection_updates", { + from: new Date(lastConnection["started_at"]), + to: new Date(firstConnection["started_at"]) + }); + } + } + + loadRules = async () => { + return backend.get("/api/rules").then(res => this.setState({rules: res.json})); + }; + + loadServices = async () => { + return backend.get("/api/services").then(res => this.setState({services: res.json})); + }; + + render() { + let redirect; + if (this.doSelectedConnectionRedirect) { + redirect = ; + this.doSelectedConnectionRedirect = false; + } else if (this.doQueryStringRedirect) { + redirect = ; + this.doQueryStringRedirect = false; + } + + let loading = null; + if (this.state.loading) { + loading = + Loading... + ; + } + + return ( +

+ {this.state.showMoreRecentButton &&

+ { + this.disableScrollHandler = true; + this.connectionsListRef.current.scrollTop = 0; + this.loadConnections({limit: this.queryLimit}) + .then(() => { + this.disableScrollHandler = false; + log.info("Most recent connections loaded"); + }); + }}/> +

} + +

+ + + + + + + + + + + + + + + + + { + this.state.connections.flatMap(c => { + return [ this.connectionSelected(c)} + selected={this.state.selected === c.id} + onMarked={marked => c.marked = marked} + onEnabled={enabled => c.hidden = !enabled} + addServicePortFilter={this.addServicePortFilter} + services={this.state.services}/>, + c.matched_rules.length > 0 && + + ]; + }) + } + {loading} + +

service	srcip	srcport	dstip	dstport	started_at	duration	up	down	actions

+ + {redirect} +

+ ); + } + +} + +export default withRouter(ConnectionsPane); diff --git a/frontend/src/components/panels/ConnectionsPane.scss b/frontend/src/components/panels/ConnectionsPane.scss new file mode 100644 index 0000000..06f5827 --- /dev/null +++ b/frontend/src/components/panels/ConnectionsPane.scss @@ -0,0 +1,38 @@ +@import "../../colors"; + +.connections-container { + position: relative; + height: 100%; + background-color: $color-primary-3; + + .connections { + position: relative; + overflow-y: scroll; + height: 100%; + + .table { + margin-bottom: 0; + } + + th { + font-size: 13.5px; + position: sticky; + top: 0; + padding: 5px; + border: none; + background-color: $color-primary-3; + } + + &:hover::-webkit-scrollbar-thumb { + background: $color-secondary-2; + } + } + + .most-recent-button { + position: absolute; + z-index: 20; + top: 45px; + left: calc(50% - 50px); + background-color: red; + } +} diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js index d34d58a..74c859c 100644 --- a/frontend/src/components/panels/MainPane.js +++ b/frontend/src/components/panels/MainPane.js @@ -17,57 +17,22 @@ import React, {Component} from 'react'; import './common.scss'; -import './MainPane.scss'; -import Connections from "../../views/Connections"; -import ConnectionContent from "../ConnectionContent"; -import {Route, Switch, withRouter} from "react-router-dom"; -import PcapPane from "./PcapPane"; -import backend from "../../backend"; -import RulePane from "./RulePane"; -import ServicePane from "./ServicePane"; -import log from "../../log"; +import './ServicesPane.scss'; class MainPane extends Component { state = {}; - componentDidMount() { - const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/); - if (match != null) { - this.loading = true; - backend.get(`/api/connections/${match[1]}`) - .then(res => { - this.loading = false; - this.setState({selectedConnection: res.json}); - log.debug(`Initial connection ${match[1]} loaded`); - }) - .catch(error => log.error("Error loading initial connection", error)); - } - } - render() { return ( -

- { - !this.loading && - this.setState({selectedConnection: c})} - initialConnection={this.state.selectedConnection}/> - } -

- - }/> - }/> - }/> - }/> - }/> - +

+ MainPane

); } + } -export default withRouter(MainPane); +export default MainPane; diff --git a/frontend/src/components/panels/MainPane.scss b/frontend/src/components/panels/MainPane.scss index 2973c00..c8460f2 100644 --- a/frontend/src/components/panels/MainPane.scss +++ b/frontend/src/components/panels/MainPane.scss @@ -1,22 +1,5 @@ @import "../../colors"; .main-pane { - display: flex; - height: 100%; - padding: 0 15px; - background-color: $color-primary-2; - .pane { - flex: 1; - } - - .connections-pane { - flex: 1 0; - margin-right: 7.5px; - } - - .details-pane { - flex: 1 1; - margin-left: 7.5px; - } } diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js deleted file mode 100644 index d5c2225..0000000 --- a/frontend/src/components/panels/PcapPane.js +++ /dev/null @@ -1,273 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './PcapPane.scss'; -import './common.scss'; -import Table from "react-bootstrap/Table"; -import backend from "../../backend"; -import {createCurlCommand, dateTimeToTime, durationBetween, formatSize} from "../../utils"; -import InputField from "../fields/InputField"; -import CheckField from "../fields/CheckField"; -import TextField from "../fields/TextField"; -import ButtonField from "../fields/ButtonField"; -import LinkPopover from "../objects/LinkPopover"; -import dispatcher from "../../dispatcher"; - -class PcapPane extends Component { - - state = { - sessions: [], - isUploadFileValid: true, - isUploadFileFocused: false, - uploadFlushAll: false, - isFileValid: true, - isFileFocused: false, - fileValue: "", - processFlushAll: false, - deleteOriginalFile: false - }; - - componentDidMount() { - this.loadSessions(); - - dispatcher.register("notifications", payload => { - if (payload.event === "pcap.upload" || payload.event === "pcap.file") { - this.loadSessions(); - } - }); - - document.title = "caronte:~/pcaps$"; - } - - loadSessions = () => { - backend.get("/api/pcap/sessions") - .then(res => this.setState({sessions: res.json, sessionsStatusCode: res.status})) - .catch(res => this.setState({ - sessions: res.json, sessionsStatusCode: res.status, - sessionsResponse: JSON.stringify(res.json) - })); - }; - - uploadPcap = () => { - if (this.state.uploadSelectedFile == null || !this.state.isUploadFileValid) { - this.setState({isUploadFileFocused: true}); - return; - } - - const formData = new FormData(); - formData.append("file", this.state.uploadSelectedFile); - formData.append("flush_all", this.state.uploadFlushAll); - backend.postFile("/api/pcap/upload", formData).then(res => { - this.setState({ - uploadStatusCode: res.status, - uploadResponse: JSON.stringify(res.json) - }); - this.resetUpload(); - this.loadSessions(); - }).catch(res => this.setState({ - uploadStatusCode: res.status, - uploadResponse: JSON.stringify(res.json) - }) - ); - }; - - processPcap = () => { - if (this.state.fileValue === "" || !this.state.isFileValid) { - this.setState({isFileFocused: true}); - return; - } - - backend.post("/api/pcap/file", { - file: this.state.fileValue, - flush_all: this.state.processFlushAll, - delete_original_file: this.state.deleteOriginalFile - }).then(res => { - this.setState({ - processStatusCode: res.status, - processResponse: JSON.stringify(res.json) - }); - this.resetProcess(); - this.loadSessions(); - }).catch(res => this.setState({ - processStatusCode: res.status, - processResponse: JSON.stringify(res.json) - }) - ); - }; - - resetUpload = () => { - this.setState({ - isUploadFileValid: true, - isUploadFileFocused: false, - uploadFlushAll: false, - uploadSelectedFile: null - }); - }; - - resetProcess = () => { - this.setState({ - isFileValid: true, - isFileFocused: false, - fileValue: "", - processFlushAll: false, - deleteOriginalFile: false, - }); - }; - - render() { - let sessions = this.state.sessions.map(s => - - {s["id"].substring(0, 8)} - {dateTimeToTime(s["started_at"])} - {durationBetween(s["started_at"], s["completed_at"])} - {formatSize(s["size"])} - {s["processed_packets"]} - {s["invalid_packets"]} - - download - - - ); - - const handleUploadFileChange = (file) => { - this.setState({ - isUploadFileValid: file == null || (file.type.endsWith("pcap") || file.type.endsWith("pcapng")), - isUploadFileFocused: false, - uploadSelectedFile: file, - uploadStatusCode: null, - uploadResponse: null - }); - }; - - const handleFileChange = (file) => { - this.setState({ - isFileValid: (file.endsWith("pcap") || file.endsWith("pcapng")), - isFileFocused: false, - fileValue: file, - processStatusCode: null, - processResponse: null - }); - }; - - const uploadCurlCommand = createCurlCommand("pcap/upload", "POST", null, { - file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ? - this.state.uploadSelectedFile.name : "invalid.pcap"), - flush_all: this.state.uploadFlushAll - }); - - const fileCurlCommand = createCurlCommand("pcap/file", "POST", { - file: this.state.fileValue, - flush_all: this.state.processFlushAll, - delete_original_file: this.state.deleteOriginalFile - }); - - return ( -

- GET /api/pcap/sessions - -

- -

- - - - - - - - - - - - - - - {sessions} - -

id	started_at	duration	size	processed_packets	invalid_packets	packets_per_service	actions

- -

- POST /api/pcap/upload - -

- -

- options: - this.setState({uploadFlushAll: v})}/> -

- -

- - -

- -

- POST /api/pcap/file - -

- -

- - -

- this.setState({processFlushAll: v})}/> - this.setState({deleteOriginalFile: v})}/> -

- -

- - -

- ); - } -} - -export default PcapPane; diff --git a/frontend/src/components/panels/PcapPane.scss b/frontend/src/components/panels/PcapPane.scss deleted file mode 100644 index 4dbc2b2..0000000 --- a/frontend/src/components/panels/PcapPane.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "../../colors.scss"; - -.pcap-pane { - display: flex; - flex-direction: column; - - .pcap-list { - overflow: hidden; - flex: 1; - - .section-content { - height: 100%; - } - - .section-table { - height: calc(100% - 30px); - } - - .table-cell-action { - font-size: 13px; - font-weight: 600; - } - } - - .upload-actions { - display: flex; - align-items: flex-end; - margin-bottom: 20px; - } - - .upload-options { - flex: 1; - - span { - font-size: 0.9em; - } - } -} diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js new file mode 100644 index 0000000..8722230 --- /dev/null +++ b/frontend/src/components/panels/PcapsPane.js @@ -0,0 +1,273 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './PcapsPane.scss'; +import './common.scss'; +import Table from "react-bootstrap/Table"; +import backend from "../../backend"; +import {createCurlCommand, dateTimeToTime, durationBetween, formatSize} from "../../utils"; +import InputField from "../fields/InputField"; +import CheckField from "../fields/CheckField"; +import TextField from "../fields/TextField"; +import ButtonField from "../fields/ButtonField"; +import LinkPopover from "../objects/LinkPopover"; +import dispatcher from "../../dispatcher"; + +class PcapsPane extends Component { + + state = { + sessions: [], + isUploadFileValid: true, + isUploadFileFocused: false, + uploadFlushAll: false, + isFileValid: true, + isFileFocused: false, + fileValue: "", + processFlushAll: false, + deleteOriginalFile: false + }; + + componentDidMount() { + this.loadSessions(); + + dispatcher.register("notifications", payload => { + if (payload.event === "pcap.upload" || payload.event === "pcap.file") { + this.loadSessions(); + } + }); + + document.title = "caronte:~/pcaps$"; + } + + loadSessions = () => { + backend.get("/api/pcap/sessions") + .then(res => this.setState({sessions: res.json, sessionsStatusCode: res.status})) + .catch(res => this.setState({ + sessions: res.json, sessionsStatusCode: res.status, + sessionsResponse: JSON.stringify(res.json) + })); + }; + + uploadPcap = () => { + if (this.state.uploadSelectedFile == null || !this.state.isUploadFileValid) { + this.setState({isUploadFileFocused: true}); + return; + } + + const formData = new FormData(); + formData.append("file", this.state.uploadSelectedFile); + formData.append("flush_all", this.state.uploadFlushAll); + backend.postFile("/api/pcap/upload", formData).then(res => { + this.setState({ + uploadStatusCode: res.status, + uploadResponse: JSON.stringify(res.json) + }); + this.resetUpload(); + this.loadSessions(); + }).catch(res => this.setState({ + uploadStatusCode: res.status, + uploadResponse: JSON.stringify(res.json) + }) + ); + }; + + processPcap = () => { + if (this.state.fileValue === "" || !this.state.isFileValid) { + this.setState({isFileFocused: true}); + return; + } + + backend.post("/api/pcap/file", { + file: this.state.fileValue, + flush_all: this.state.processFlushAll, + delete_original_file: this.state.deleteOriginalFile + }).then(res => { + this.setState({ + processStatusCode: res.status, + processResponse: JSON.stringify(res.json) + }); + this.resetProcess(); + this.loadSessions(); + }).catch(res => this.setState({ + processStatusCode: res.status, + processResponse: JSON.stringify(res.json) + }) + ); + }; + + resetUpload = () => { + this.setState({ + isUploadFileValid: true, + isUploadFileFocused: false, + uploadFlushAll: false, + uploadSelectedFile: null + }); + }; + + resetProcess = () => { + this.setState({ + isFileValid: true, + isFileFocused: false, + fileValue: "", + processFlushAll: false, + deleteOriginalFile: false, + }); + }; + + render() { + let sessions = this.state.sessions.map(s => + + {s["id"].substring(0, 8)} + {dateTimeToTime(s["started_at"])} + {durationBetween(s["started_at"], s["completed_at"])} + {formatSize(s["size"])} + {s["processed_packets"]} + {s["invalid_packets"]} + + download + + + ); + + const handleUploadFileChange = (file) => { + this.setState({ + isUploadFileValid: file == null || (file.type.endsWith("pcap") || file.type.endsWith("pcapng")), + isUploadFileFocused: false, + uploadSelectedFile: file, + uploadStatusCode: null, + uploadResponse: null + }); + }; + + const handleFileChange = (file) => { + this.setState({ + isFileValid: (file.endsWith("pcap") || file.endsWith("pcapng")), + isFileFocused: false, + fileValue: file, + processStatusCode: null, + processResponse: null + }); + }; + + const uploadCurlCommand = createCurlCommand("pcap/upload", "POST", null, { + file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ? + this.state.uploadSelectedFile.name : "invalid.pcap"), + flush_all: this.state.uploadFlushAll + }); + + const fileCurlCommand = createCurlCommand("pcap/file", "POST", { + file: this.state.fileValue, + flush_all: this.state.processFlushAll, + delete_original_file: this.state.deleteOriginalFile + }); + + return ( +

+ GET /api/pcap/sessions + +

+ +

+ + + + + + + + + + + + + + + {sessions} + +

id	started_at	duration	size	processed_packets	invalid_packets	packets_per_service	actions

+ +

+ POST /api/pcap/upload + +

+ +

+ options: + this.setState({uploadFlushAll: v})}/> +

+ +

+ + +

+ +

+ POST /api/pcap/file + +

+ +

+ + +

+ this.setState({processFlushAll: v})}/> + this.setState({deleteOriginalFile: v})}/> +

+ +

+ + +

+ ); + } +} + +export default PcapsPane; diff --git a/frontend/src/components/panels/PcapsPane.scss b/frontend/src/components/panels/PcapsPane.scss new file mode 100644 index 0000000..4dbc2b2 --- /dev/null +++ b/frontend/src/components/panels/PcapsPane.scss @@ -0,0 +1,38 @@ +@import "../../colors.scss"; + +.pcap-pane { + display: flex; + flex-direction: column; + + .pcap-list { + overflow: hidden; + flex: 1; + + .section-content { + height: 100%; + } + + .section-table { + height: calc(100% - 30px); + } + + .table-cell-action { + font-size: 13px; + font-weight: 600; + } + } + + .upload-actions { + display: flex; + align-items: flex-end; + margin-bottom: 20px; + } + + .upload-options { + flex: 1; + + span { + font-size: 0.9em; + } + } +} diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js deleted file mode 100644 index 9913962..0000000 --- a/frontend/src/components/panels/RulePane.js +++ /dev/null @@ -1,438 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './common.scss'; -import './RulePane.scss'; -import Table from "react-bootstrap/Table"; -import {Col, Container, Row} from "react-bootstrap"; -import InputField from "../fields/InputField"; -import CheckField from "../fields/CheckField"; -import TextField from "../fields/TextField"; -import backend from "../../backend"; -import NumericField from "../fields/extensions/NumericField"; -import ColorField from "../fields/extensions/ColorField"; -import ChoiceField from "../fields/ChoiceField"; -import ButtonField from "../fields/ButtonField"; -import validation from "../../validation"; -import LinkPopover from "../objects/LinkPopover"; -import {randomClassName} from "../../utils"; -import dispatcher from "../../dispatcher"; - -const classNames = require('classnames'); -const _ = require('lodash'); - -class RulePane extends Component { - - emptyRule = { - "name": "", - "color": "", - "notes": "", - "enabled": true, - "patterns": [], - "filter": { - "service_port": 0, - "client_address": "", - "client_port": 0, - "min_duration": 0, - "max_duration": 0, - "min_bytes": 0, - "max_bytes": 0 - }, - "version": 0 - }; - emptyPattern = { - "regex": "", - "flags": { - "caseless": false, - "dot_all": false, - "multi_line": false, - "utf_8_mode": false, - "unicode_property": false - }, - "min_occurrences": 0, - "max_occurrences": 0, - "direction": 0 - }; - state = { - rules: [], - newRule: this.emptyRule, - newPattern: this.emptyPattern - }; - - constructor(props) { - super(props); - - this.directions = { - 0: "both", - 1: "c->s", - 2: "s->c" - }; - } - - componentDidMount() { - this.reset(); - this.loadRules(); - - dispatcher.register("notifications", payload => { - if (payload.event === "rules.new" || payload.event === "rules.edit") { - this.loadRules(); - } - }); - - document.title = "caronte:~/rules$"; - } - - loadRules = () => { - backend.get("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status})) - .catch(res => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)})); - }; - - addRule = () => { - if (this.validateRule(this.state.newRule)) { - backend.post("/api/rules", this.state.newRule).then(res => { - this.reset(); - this.setState({ruleStatusCode: res.status}); - this.loadRules(); - }).catch(res => { - this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); - }); - } - }; - - updateRule = () => { - const rule = this.state.selectedRule; - if (this.validateRule(rule)) { - backend.put(`/api/rules/${rule.id}`, rule).then(res => { - this.reset(); - this.setState({ruleStatusCode: res.status}); - this.loadRules(); - }).catch(res => { - this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); - }); - } - }; - - validateRule = (rule) => { - let valid = true; - if (rule.name.length < 3) { - this.setState({ruleNameError: "name.length < 3"}); - valid = false; - } - if (!validation.isValidColor(rule.color)) { - this.setState({ruleColorError: "color is not hexcolor"}); - valid = false; - } - if (!validation.isValidPort(rule.filter.service_port)) { - this.setState({ruleServicePortError: "service_port > 65565"}); - valid = false; - } - if (!validation.isValidPort(rule.filter.client_port)) { - this.setState({ruleClientPortError: "client_port > 65565"}); - valid = false; - } - if (!validation.isValidAddress(rule.filter.client_address)) { - this.setState({ruleClientAddressError: "client_address is not ip_address"}); - valid = false; - } - if (rule.filter.min_duration > rule.filter.max_duration) { - this.setState({ruleDurationError: "min_duration > max_dur."}); - valid = false; - } - if (rule.filter.min_bytes > rule.filter.max_bytes) { - this.setState({ruleBytesError: "min_bytes > max_bytes"}); - valid = false; - } - if (rule.patterns.length < 1) { - this.setState({rulePatternsError: "patterns.length < 1"}); - valid = false; - } - - return valid; - }; - - reset = () => { - const newRule = _.cloneDeep(this.emptyRule); - const newPattern = _.cloneDeep(this.emptyPattern); - this.setState({ - selectedRule: null, - newRule: newRule, - selectedPattern: null, - newPattern: newPattern, - patternRegexFocused: false, - patternOccurrencesFocused: false, - ruleNameError: null, - ruleColorError: null, - ruleServicePortError: null, - ruleClientPortError: null, - ruleClientAddressError: null, - ruleDurationError: null, - ruleBytesError: null, - rulePatternsError: null, - ruleStatusCode: null, - rulesStatusCode: null, - ruleResponse: null, - rulesResponse: null - }); - }; - - updateParam = (callback) => { - const updatedRule = this.currentRule(); - callback(updatedRule); - this.setState({newRule: updatedRule}); - }; - - currentRule = () => this.state.selectedRule != null ? this.state.selectedRule : this.state.newRule; - - addPattern = (pattern) => { - if (!this.validatePattern(pattern)) { - return; - } - - const newPattern = _.cloneDeep(this.emptyPattern); - this.currentRule().patterns.push(pattern); - this.setState({ - newPattern: newPattern - }); - }; - - editPattern = (pattern) => { - this.setState({ - selectedPattern: pattern - }); - }; - - updatePattern = (pattern) => { - if (!this.validatePattern(pattern)) { - return; - } - - this.setState({ - selectedPattern: null - }); - }; - - validatePattern = (pattern) => { - let valid = true; - if (pattern.regex === "") { - valid = false; - this.setState({patternRegexFocused: true}); - } - if (pattern.min_occurrences > pattern.max_occurrences) { - valid = false; - this.setState({patternOccurrencesFocused: true}); - } - return valid; - }; - - render() { - const isUpdate = this.state.selectedRule != null; - const rule = this.currentRule(); - const pattern = this.state.selectedPattern || this.state.newPattern; - - let rules = this.state.rules.map(r => - { - this.reset(); - this.setState({selectedRule: _.cloneDeep(r)}); - }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}> - {r["id"].substring(0, 8)} - {r["name"]} - - {r["notes"]} - - ); - - let patterns = (this.state.selectedPattern == null && !isUpdate ? - rule.patterns.concat(this.state.newPattern) : - rule.patterns - ).map(p => p === pattern ? - - - { - this.updateParam(() => pattern.regex = v); - this.setState({patternRegexFocused: pattern.regex === ""}); - }}/> - - this.updateParam(() => pattern.flags.caseless = v)}/> - this.updateParam(() => pattern.flags.dot_all = v)}/> - this.updateParam(() => pattern.flags.multi_line = v)}/> - this.updateParam(() => pattern.flags.utf_8_mode = v)}/> - this.updateParam(() => pattern.flags.unicode_property = v)}/> - - this.updateParam(() => pattern.min_occurrences = v)}/> - - - this.updateParam(() => pattern.max_occurrences = v)}/> - - s", "s->c"]} - value={this.directions[pattern.direction]} - onChange={(v) => this.updateParam(() => pattern.direction = v)}/> - {this.state.selectedPattern == null ? - this.addPattern(p)}/> : - this.updatePattern(p)}/>} - - - : - - {p.regex} - {p.flags.caseless ? "yes" : "no"} - {p.flags.dot_all ? "yes" : "no"} - {p.flags.multi_line ? "yes" : "no"} - {p.flags.utf_8_mode ? "yes" : "no"} - {p.flags.unicode_property ? "yes" : "no"} - {p.min_occurrences} - {p.max_occurrences} - {this.directions[p.direction]} - {!isUpdate && this.editPattern(p)}/>} - - ); - - return ( -

- GET /api/rules - {this.state.rulesStatusCode && - } -

- -

- - - - - - - - - - - {rules} - -

id	name	color	notes

- -

- - {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"} - - -

- -

- - - - this.updateParam((r) => r.name = v)} - error={this.state.ruleNameError}/> - this.updateParam((r) => r.color = v)}/> - this.updateParam((r) => r.notes = v)}/> - - - - filters: - this.updateParam((r) => r.filter.service_port = v)} - min={0} max={65565} error={this.state.ruleServicePortError} - readonly={isUpdate}/> - this.updateParam((r) => r.filter.client_port = v)} - min={0} max={65565} error={this.state.ruleClientPortError} - readonly={isUpdate}/> - this.updateParam((r) => r.filter.client_address = v)}/> - - - - this.updateParam((r) => r.filter.min_duration = v)}/> - this.updateParam((r) => r.filter.max_duration = v)}/> - this.updateParam((r) => r.filter.min_bytes = v)}/> - this.updateParam((r) => r.filter.max_bytes = v)}/> - - - - -

- - - - - - - - - - - - - {!isUpdate && } - - - - {patterns} - -

regex	!Aa	.*	\n+	UTF8	Uni_	min	max	direction	actions

- {this.state.rulePatternsError != null && - error: {this.state.rulePatternsError}} -

- -

- {} - -

- ); - } - -} - -export default RulePane; diff --git a/frontend/src/components/panels/RulePane.scss b/frontend/src/components/panels/RulePane.scss deleted file mode 100644 index 992445a..0000000 --- a/frontend/src/components/panels/RulePane.scss +++ /dev/null @@ -1,32 +0,0 @@ - -.rule-pane { - display: flex; - flex-direction: column; - - .rules-list { - overflow: hidden; - flex: 2 1; - - .section-content { - height: 100%; - } - - .section-table { - height: calc(100% - 30px); - } - } - - .rule-edit { - display: flex; - flex: 3 0; - flex-direction: column; - - .section-content { - flex: 1; - } - - .section-table { - max-height: 150px; - } - } -} diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js new file mode 100644 index 0000000..a66cde7 --- /dev/null +++ b/frontend/src/components/panels/RulesPane.js @@ -0,0 +1,438 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './common.scss'; +import './RulesPane.scss'; +import Table from "react-bootstrap/Table"; +import {Col, Container, Row} from "react-bootstrap"; +import InputField from "../fields/InputField"; +import CheckField from "../fields/CheckField"; +import TextField from "../fields/TextField"; +import backend from "../../backend"; +import NumericField from "../fields/extensions/NumericField"; +import ColorField from "../fields/extensions/ColorField"; +import ChoiceField from "../fields/ChoiceField"; +import ButtonField from "../fields/ButtonField"; +import validation from "../../validation"; +import LinkPopover from "../objects/LinkPopover"; +import {randomClassName} from "../../utils"; +import dispatcher from "../../dispatcher"; + +const classNames = require('classnames'); +const _ = require('lodash'); + +class RulesPane extends Component { + + emptyRule = { + "name": "", + "color": "", + "notes": "", + "enabled": true, + "patterns": [], + "filter": { + "service_port": 0, + "client_address": "", + "client_port": 0, + "min_duration": 0, + "max_duration": 0, + "min_bytes": 0, + "max_bytes": 0 + }, + "version": 0 + }; + emptyPattern = { + "regex": "", + "flags": { + "caseless": false, + "dot_all": false, + "multi_line": false, + "utf_8_mode": false, + "unicode_property": false + }, + "min_occurrences": 0, + "max_occurrences": 0, + "direction": 0 + }; + state = { + rules: [], + newRule: this.emptyRule, + newPattern: this.emptyPattern + }; + + constructor(props) { + super(props); + + this.directions = { + 0: "both", + 1: "c->s", + 2: "s->c" + }; + } + + componentDidMount() { + this.reset(); + this.loadRules(); + + dispatcher.register("notifications", payload => { + if (payload.event === "rules.new" || payload.event === "rules.edit") { + this.loadRules(); + } + }); + + document.title = "caronte:~/rules$"; + } + + loadRules = () => { + backend.get("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status})) + .catch(res => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)})); + }; + + addRule = () => { + if (this.validateRule(this.state.newRule)) { + backend.post("/api/rules", this.state.newRule).then(res => { + this.reset(); + this.setState({ruleStatusCode: res.status}); + this.loadRules(); + }).catch(res => { + this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); + }); + } + }; + + updateRule = () => { + const rule = this.state.selectedRule; + if (this.validateRule(rule)) { + backend.put(`/api/rules/${rule.id}`, rule).then(res => { + this.reset(); + this.setState({ruleStatusCode: res.status}); + this.loadRules(); + }).catch(res => { + this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); + }); + } + }; + + validateRule = (rule) => { + let valid = true; + if (rule.name.length < 3) { + this.setState({ruleNameError: "name.length < 3"}); + valid = false; + } + if (!validation.isValidColor(rule.color)) { + this.setState({ruleColorError: "color is not hexcolor"}); + valid = false; + } + if (!validation.isValidPort(rule.filter.service_port)) { + this.setState({ruleServicePortError: "service_port > 65565"}); + valid = false; + } + if (!validation.isValidPort(rule.filter.client_port)) { + this.setState({ruleClientPortError: "client_port > 65565"}); + valid = false; + } + if (!validation.isValidAddress(rule.filter.client_address)) { + this.setState({ruleClientAddressError: "client_address is not ip_address"}); + valid = false; + } + if (rule.filter.min_duration > rule.filter.max_duration) { + this.setState({ruleDurationError: "min_duration > max_dur."}); + valid = false; + } + if (rule.filter.min_bytes > rule.filter.max_bytes) { + this.setState({ruleBytesError: "min_bytes > max_bytes"}); + valid = false; + } + if (rule.patterns.length < 1) { + this.setState({rulePatternsError: "patterns.length < 1"}); + valid = false; + } + + return valid; + }; + + reset = () => { + const newRule = _.cloneDeep(this.emptyRule); + const newPattern = _.cloneDeep(this.emptyPattern); + this.setState({ + selectedRule: null, + newRule: newRule, + selectedPattern: null, + newPattern: newPattern, + patternRegexFocused: false, + patternOccurrencesFocused: false, + ruleNameError: null, + ruleColorError: null, + ruleServicePortError: null, + ruleClientPortError: null, + ruleClientAddressError: null, + ruleDurationError: null, + ruleBytesError: null, + rulePatternsError: null, + ruleStatusCode: null, + rulesStatusCode: null, + ruleResponse: null, + rulesResponse: null + }); + }; + + updateParam = (callback) => { + const updatedRule = this.currentRule(); + callback(updatedRule); + this.setState({newRule: updatedRule}); + }; + + currentRule = () => this.state.selectedRule != null ? this.state.selectedRule : this.state.newRule; + + addPattern = (pattern) => { + if (!this.validatePattern(pattern)) { + return; + } + + const newPattern = _.cloneDeep(this.emptyPattern); + this.currentRule().patterns.push(pattern); + this.setState({ + newPattern: newPattern + }); + }; + + editPattern = (pattern) => { + this.setState({ + selectedPattern: pattern + }); + }; + + updatePattern = (pattern) => { + if (!this.validatePattern(pattern)) { + return; + } + + this.setState({ + selectedPattern: null + }); + }; + + validatePattern = (pattern) => { + let valid = true; + if (pattern.regex === "") { + valid = false; + this.setState({patternRegexFocused: true}); + } + if (pattern.min_occurrences > pattern.max_occurrences) { + valid = false; + this.setState({patternOccurrencesFocused: true}); + } + return valid; + }; + + render() { + const isUpdate = this.state.selectedRule != null; + const rule = this.currentRule(); + const pattern = this.state.selectedPattern || this.state.newPattern; + + let rules = this.state.rules.map(r => + { + this.reset(); + this.setState({selectedRule: _.cloneDeep(r)}); + }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}> + {r["id"].substring(0, 8)} + {r["name"]} + + {r["notes"]} + + ); + + let patterns = (this.state.selectedPattern == null && !isUpdate ? + rule.patterns.concat(this.state.newPattern) : + rule.patterns + ).map(p => p === pattern ? + + + { + this.updateParam(() => pattern.regex = v); + this.setState({patternRegexFocused: pattern.regex === ""}); + }}/> + + this.updateParam(() => pattern.flags.caseless = v)}/> + this.updateParam(() => pattern.flags.dot_all = v)}/> + this.updateParam(() => pattern.flags.multi_line = v)}/> + this.updateParam(() => pattern.flags.utf_8_mode = v)}/> + this.updateParam(() => pattern.flags.unicode_property = v)}/> + + this.updateParam(() => pattern.min_occurrences = v)}/> + + + this.updateParam(() => pattern.max_occurrences = v)}/> + + s", "s->c"]} + value={this.directions[pattern.direction]} + onChange={(v) => this.updateParam(() => pattern.direction = v)}/> + {this.state.selectedPattern == null ? + this.addPattern(p)}/> : + this.updatePattern(p)}/>} + + + : + + {p.regex} + {p.flags.caseless ? "yes" : "no"} + {p.flags.dot_all ? "yes" : "no"} + {p.flags.multi_line ? "yes" : "no"} + {p.flags.utf_8_mode ? "yes" : "no"} + {p.flags.unicode_property ? "yes" : "no"} + {p.min_occurrences} + {p.max_occurrences} + {this.directions[p.direction]} + {!isUpdate && this.editPattern(p)}/>} + + ); + + return ( +

+ GET /api/rules + {this.state.rulesStatusCode && + } +

+ +

+ + + + + + + + + + + {rules} + +

id	name	color	notes

+ +

+ + {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"} + + +

+ +

+ + + + this.updateParam((r) => r.name = v)} + error={this.state.ruleNameError}/> + this.updateParam((r) => r.color = v)}/> + this.updateParam((r) => r.notes = v)}/> + + + + filters: + this.updateParam((r) => r.filter.service_port = v)} + min={0} max={65565} error={this.state.ruleServicePortError} + readonly={isUpdate}/> + this.updateParam((r) => r.filter.client_port = v)} + min={0} max={65565} error={this.state.ruleClientPortError} + readonly={isUpdate}/> + this.updateParam((r) => r.filter.client_address = v)}/> + + + + this.updateParam((r) => r.filter.min_duration = v)}/> + this.updateParam((r) => r.filter.max_duration = v)}/> + this.updateParam((r) => r.filter.min_bytes = v)}/> + this.updateParam((r) => r.filter.max_bytes = v)}/> + + + + +

+ + + + + + + + + + + + + {!isUpdate && } + + + + {patterns} + +

regex	!Aa	.*	\n+	UTF8	Uni_	min	max	direction	actions

+ {this.state.rulePatternsError != null && + error: {this.state.rulePatternsError}} +

+ +

+ {} + +

+ ); + } + +} + +export default RulesPane; diff --git a/frontend/src/components/panels/RulesPane.scss b/frontend/src/components/panels/RulesPane.scss new file mode 100644 index 0000000..992445a --- /dev/null +++ b/frontend/src/components/panels/RulesPane.scss @@ -0,0 +1,32 @@ + +.rule-pane { + display: flex; + flex-direction: column; + + .rules-list { + overflow: hidden; + flex: 2 1; + + .section-content { + height: 100%; + } + + .section-table { + height: calc(100% - 30px); + } + } + + .rule-edit { + display: flex; + flex: 3 0; + flex-direction: column; + + .section-content { + flex: 1; + } + + .section-table { + max-height: 150px; + } + } +} diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js deleted file mode 100644 index fc7004b..0000000 --- a/frontend/src/components/panels/ServicePane.js +++ /dev/null @@ -1,212 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './common.scss'; -import './ServicePane.scss'; -import Table from "react-bootstrap/Table"; -import {Col, Container, Row} from "react-bootstrap"; -import InputField from "../fields/InputField"; -import TextField from "../fields/TextField"; -import backend from "../../backend"; -import NumericField from "../fields/extensions/NumericField"; -import ColorField from "../fields/extensions/ColorField"; -import ButtonField from "../fields/ButtonField"; -import validation from "../../validation"; -import LinkPopover from "../objects/LinkPopover"; -import {createCurlCommand} from "../../utils"; -import dispatcher from "../../dispatcher"; - -const classNames = require('classnames'); -const _ = require('lodash'); - -class ServicePane extends Component { - - emptyService = { - "port": 0, - "name": "", - "color": "", - "notes": "" - }; - - state = { - services: [], - currentService: this.emptyService, - }; - - componentDidMount() { - this.reset(); - this.loadServices(); - - dispatcher.register("notifications", payload => { - if (payload.event === "services.edit") { - this.loadServices(); - } - }); - - document.title = "caronte:~/services$"; - } - - loadServices = () => { - backend.get("/api/services") - .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status})) - .catch(res => this.setState({servicesStatusCode: res.status, servicesResponse: JSON.stringify(res.json)})); - }; - - updateService = () => { - const service = this.state.currentService; - if (this.validateService(service)) { - backend.put("/api/services", service).then(res => { - this.reset(); - this.setState({serviceStatusCode: res.status}); - this.loadServices(); - }).catch(res => { - this.setState({serviceStatusCode: res.status, serviceResponse: JSON.stringify(res.json)}); - }); - } - }; - - validateService = (service) => { - let valid = true; - if (!validation.isValidPort(service.port, true)) { - this.setState({servicePortError: "port < 0 || port > 65565"}); - valid = false; - } - if (service.name.length < 3) { - this.setState({serviceNameError: "name.length < 3"}); - valid = false; - } - if (!validation.isValidColor(service.color)) { - this.setState({serviceColorError: "color is not hexcolor"}); - valid = false; - } - - return valid; - }; - - reset = () => { - this.setState({ - isUpdate: false, - currentService: _.cloneDeep(this.emptyService), - servicePortError: null, - serviceNameError: null, - serviceColorError: null, - serviceStatusCode: null, - servicesStatusCode: null, - serviceResponse: null, - servicesResponse: null - }); - }; - - updateParam = (callback) => { - callback(this.state.currentService); - this.setState({currentService: this.state.currentService}); - }; - - render() { - const isUpdate = this.state.isUpdate; - const service = this.state.currentService; - - let services = this.state.services.map(s => - { - this.reset(); - this.setState({isUpdate: true, currentService: _.cloneDeep(s)}); - }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port })}> - {s["port"]} - {s["name"]} - - {s["notes"]} - - ); - - const curlCommand = createCurlCommand("/services", "PUT", service); - - return ( -

- GET /api/services - {this.state.servicesStatusCode && - } -

- -

- - - - - - - - - - - {services} - -

port	name	color	notes

- -

- PUT /api/services - -

- -

- - - - this.updateParam((s) => s.port = v)} - min={0} max={65565} error={this.state.servicePortError} /> - this.updateParam((s) => s.name = v)} - error={this.state.serviceNameError} /> - this.updateParam((s) => s.color = v)} /> - - - - this.updateParam((s) => s.notes = v)} /> - - - - - -

- -

- {} - -

- ); - } - -} - -export default ServicePane; diff --git a/frontend/src/components/panels/ServicePane.scss b/frontend/src/components/panels/ServicePane.scss deleted file mode 100644 index daf7e79..0000000 --- a/frontend/src/components/panels/ServicePane.scss +++ /dev/null @@ -1,22 +0,0 @@ - -.service-pane { - display: flex; - flex-direction: column; - - .services-list { - overflow: hidden; - flex: 1; - - .section-content { - height: 100%; - } - - .section-table { - height: calc(100% - 30px); - } - } - - .service-edit { - flex: 0; - } -} diff --git a/frontend/src/components/panels/ServicesPane.js b/frontend/src/components/panels/ServicesPane.js new file mode 100644 index 0000000..bc82356 --- /dev/null +++ b/frontend/src/components/panels/ServicesPane.js @@ -0,0 +1,212 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './common.scss'; +import './ServicesPane.scss'; +import Table from "react-bootstrap/Table"; +import {Col, Container, Row} from "react-bootstrap"; +import InputField from "../fields/InputField"; +import TextField from "../fields/TextField"; +import backend from "../../backend"; +import NumericField from "../fields/extensions/NumericField"; +import ColorField from "../fields/extensions/ColorField"; +import ButtonField from "../fields/ButtonField"; +import validation from "../../validation"; +import LinkPopover from "../objects/LinkPopover"; +import {createCurlCommand} from "../../utils"; +import dispatcher from "../../dispatcher"; + +const classNames = require('classnames'); +const _ = require('lodash'); + +class ServicesPane extends Component { + + emptyService = { + "port": 0, + "name": "", + "color": "", + "notes": "" + }; + + state = { + services: [], + currentService: this.emptyService, + }; + + componentDidMount() { + this.reset(); + this.loadServices(); + + dispatcher.register("notifications", payload => { + if (payload.event === "services.edit") { + this.loadServices(); + } + }); + + document.title = "caronte:~/services$"; + } + + loadServices = () => { + backend.get("/api/services") + .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status})) + .catch(res => this.setState({servicesStatusCode: res.status, servicesResponse: JSON.stringify(res.json)})); + }; + + updateService = () => { + const service = this.state.currentService; + if (this.validateService(service)) { + backend.put("/api/services", service).then(res => { + this.reset(); + this.setState({serviceStatusCode: res.status}); + this.loadServices(); + }).catch(res => { + this.setState({serviceStatusCode: res.status, serviceResponse: JSON.stringify(res.json)}); + }); + } + }; + + validateService = (service) => { + let valid = true; + if (!validation.isValidPort(service.port, true)) { + this.setState({servicePortError: "port < 0 || port > 65565"}); + valid = false; + } + if (service.name.length < 3) { + this.setState({serviceNameError: "name.length < 3"}); + valid = false; + } + if (!validation.isValidColor(service.color)) { + this.setState({serviceColorError: "color is not hexcolor"}); + valid = false; + } + + return valid; + }; + + reset = () => { + this.setState({ + isUpdate: false, + currentService: _.cloneDeep(this.emptyService), + servicePortError: null, + serviceNameError: null, + serviceColorError: null, + serviceStatusCode: null, + servicesStatusCode: null, + serviceResponse: null, + servicesResponse: null + }); + }; + + updateParam = (callback) => { + callback(this.state.currentService); + this.setState({currentService: this.state.currentService}); + }; + + render() { + const isUpdate = this.state.isUpdate; + const service = this.state.currentService; + + let services = this.state.services.map(s => + { + this.reset(); + this.setState({isUpdate: true, currentService: _.cloneDeep(s)}); + }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port })}> + {s["port"]} + {s["name"]} + + {s["notes"]} + + ); + + const curlCommand = createCurlCommand("/services", "PUT", service); + + return ( +

+ GET /api/services + {this.state.servicesStatusCode && + } +

+ +

+ + + + + + + + + + + {services} + +

port	name	color	notes

+ +

+ PUT /api/services + +

+ +

+ + + + this.updateParam((s) => s.port = v)} + min={0} max={65565} error={this.state.servicePortError} /> + this.updateParam((s) => s.name = v)} + error={this.state.serviceNameError} /> + this.updateParam((s) => s.color = v)} /> + + + + this.updateParam((s) => s.notes = v)} /> + + + + + +

+ +

+ {} + +

+ ); + } + +} + +export default ServicesPane; diff --git a/frontend/src/components/panels/ServicesPane.scss b/frontend/src/components/panels/ServicesPane.scss new file mode 100644 index 0000000..daf7e79 --- /dev/null +++ b/frontend/src/components/panels/ServicesPane.scss @@ -0,0 +1,22 @@ + +.service-pane { + display: flex; + flex-direction: column; + + .services-list { + overflow: hidden; + flex: 1; + + .section-content { + height: 100%; + } + + .section-table { + height: calc(100% - 30px); + } + } + + .service-edit { + flex: 0; + } +} diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js new file mode 100644 index 0000000..c8bd121 --- /dev/null +++ b/frontend/src/components/panels/StreamsPane.js @@ -0,0 +1,242 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './StreamsPane.scss'; +import {Row} from 'react-bootstrap'; +import MessageAction from "../objects/MessageAction"; +import backend from "../../backend"; +import ButtonField from "../fields/ButtonField"; +import ChoiceField from "../fields/ChoiceField"; +import DOMPurify from 'dompurify'; +import ReactJson from 'react-json-view' +import {downloadBlob, getHeaderValue} from "../../utils"; +import log from "../../log"; + +const classNames = require('classnames'); + +class StreamsPane extends Component { + + state = { + messages: [], + format: "default", + tryParse: true + }; + + constructor(props) { + super(props); + + this.validFormats = ["default", "hex", "hexdump", "base32", "base64", "ascii", "binary", "decimal", "octal"]; + } + + componentDidMount() { + if (this.props.connection && this.state.currentId !== this.props.connection.id) { + this.setState({currentId: this.props.connection.id}); + this.loadStream(this.props.connection.id); + } + + document.title = "caronte:~/$"; + } + + componentDidUpdate(prevProps, prevState, snapshot) { + if (this.props.connection && ( + this.props.connection !== prevProps.connection || this.state.format !== prevState.format)) { + this.closeRenderWindow(); + this.loadStream(this.props.connection.id); + } + } + + componentWillUnmount() { + this.closeRenderWindow(); + } + + loadStream = (connectionId) => { + this.setState({messages: []}); + backend.get(`/api/streams/${connectionId}?format=${this.state.format}`) + .then(res => this.setState({messages: res.json})); + }; + + setFormat = (format) => { + if (this.validFormats.includes(format)) { + this.setState({format: format}); + } + }; + + tryParseConnectionMessage = (connectionMessage) => { + if (connectionMessage.metadata == null) { + return connectionMessage.content; + } + if (connectionMessage["is_metadata_continuation"]) { + return **already parsed in previous messages**; + } + + let unrollMap = (obj) => obj == null ? null : Object.entries(obj).map(([key, value]) => +

{key}: {value}

+ ); + + let m = connectionMessage.metadata; + switch (m.type) { + case "http-request": + let url = {m.host}{m.url}; + return +

{m.method} {url} {m.protocol}

+ {unrollMap(m.headers)} +

{m.body}

+ {unrollMap(m.trailers)} + ; + case "http-response": + const contentType = getHeaderValue(m, "Content-Type"); + let body = m.body; + if (contentType && contentType.includes("application/json")) { + try { + const json = JSON.parse(m.body); + body = ; + } catch (e) { + console.log(e); + } + } + + return +

{m.protocol} {m.status}

+ {unrollMap(m.headers)} +

{body}

+ {unrollMap(m.trailers)} + ; + default: + return connectionMessage.content; + } + }; + + connectionsActions = (connectionMessage) => { + if (!connectionMessage.metadata) { + return null; + } + + const m = connectionMessage.metadata; + switch (m.type) { + case "http-request" : + if (!connectionMessage.metadata["reproducers"]) { + return; + } + return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) => + { + this.setState({ + messageActionDialog: this.setState({messageActionDialog: null})}/> + }); + }}/> + ); + case "http-response": + const contentType = getHeaderValue(m, "Content-Type"); + + if (contentType && contentType.includes("text/html")) { + return { + let w; + if (this.state.renderWindow && !this.state.renderWindow.closed) { + w = this.state.renderWindow; + } else { + w = window.open("", "", "width=900, height=600, scrollbars=yes"); + this.setState({renderWindow: w}); + } + w.document.body.innerHTML = DOMPurify.sanitize(m.body); + w.focus(); + }}/>; + } + break; + default: + return null; + } + }; + + downloadStreamRaw = (value) => { + if (this.state.currentId) { + backend.download(`/api/streams/${this.props.connection.id}/download?format=${this.state.format}&type=${value}`) + .then(res => downloadBlob(res.blob, `${this.state.currentId}-${value}-${this.state.format}.txt`)) + .catch(_ => log.error("Failed to download stream messages")); + } + }; + + closeRenderWindow = () => { + if (this.state.renderWindow) { + this.state.renderWindow.close(); + } + }; + + render() { + const conn = this.props.connection || { + "ip_src": "0.0.0.0", + "ip_dst": "0.0.0.0", + "port_src": "0", + "port_dst": "0", + "started_at": new Date().toISOString(), + }; + const content = this.state.messages || []; + + let payload = content.map((c, i) => +

+ offset: {c.index} | timestamp: {c.timestamp} + | retransmitted: {c["is_retransmitted"] ? "yes" : "no"} +

{this.connectionsActions(c)}

{c["from_client"] ? "client" : "server"}

+ {this.state.tryParse && this.state.format === "default" ? this.tryParseConnectionMessage(c) : c.content} +

+ ); + + return ( +

+ +

+ flow: {conn["ip_src"]}:{conn["port_src"]} -> {conn["ip_dst"]}:{conn["port_dst"]} + | timestamp: {conn["started_at"]} +

+ + + + + +

+ +

{payload}

+ {this.state.messageActionDialog} +

+ ); + } + +} + + +export default StreamsPane; diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss new file mode 100644 index 0000000..d5510cf --- /dev/null +++ b/frontend/src/components/panels/StreamsPane.scss @@ -0,0 +1,113 @@ +@import "../../colors"; + +.connection-content { + height: 100%; + background-color: $color-primary-0; + + pre { + overflow-x: hidden; + height: calc(100% - 31px); + padding: 0 10px; + white-space: pre-wrap; + word-break: break-word; + + p { + margin: 0; + padding: 0; + } + } + + .connection-message { + position: relative; + margin: 10px 0; + border: 4px solid $color-primary-3; + border-top: 0; + + .connection-message-header { + height: 25px; + background-color: $color-primary-3; + + .connection-message-info { + font-size: 11px; + margin-top: 6px; + margin-left: -10px; + } + + .connection-message-actions { + display: none; + margin-right: -18px; + + button { + font-size: 11px; + margin: 0 3px; + padding: 5px; + } + } + } + + .message-content { + padding: 10px; + + .react-json-view { + background-color: inherit !important; + } + } + + &:hover .connection-message-actions { + display: flex; + } + + .connection-message-label { + font-size: 12px; + position: absolute; + top: 0; + padding: 10px 0; + background-color: $color-primary-3; + writing-mode: vertical-rl; + text-orientation: mixed; + } + + &.from-client { + margin-right: 100px; + color: $color-primary-4; + + .connection-message-label { + right: -22px; + } + } + + &.from-server { + margin-left: 100px; + color: $color-primary-4; + + .connection-message-label { + left: -22px; + transform: rotate(-180deg); + } + } + } + + .connection-content-header { + height: 33px; + padding: 0; + background-color: $color-primary-3; + + .header-info { + font-size: 12px; + padding-top: 7px; + padding-left: 25px; + } + + .header-actions { + display: flex; + + .choice-field { + margin-top: -5px; + + .field-value { + background-color: $color-primary-3; + } + } + } + } +} diff --git a/frontend/src/index.js b/frontend/src/index.js index e3e48de..ca1273a 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -19,7 +19,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.css'; import './index.scss'; -import App from './views/App'; +import App from './components/App'; import * as serviceWorker from './serviceWorker'; import notifications from "./notifications"; diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js deleted file mode 100644 index 8105117..0000000 --- a/frontend/src/views/App.js +++ /dev/null @@ -1,81 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './App.scss'; -import Header from "./Header"; -import MainPane from "../components/panels/MainPane"; -import Timeline from "./Timeline"; -import {BrowserRouter as Router} from "react-router-dom"; -import Filters from "./Filters"; -import ConfigurationPane from "../components/panels/ConfigurationPane"; -import Notifications from "../components/Notifications"; -import dispatcher from "../dispatcher"; - -class App extends Component { - - state = {}; - - componentDidMount() { - dispatcher.register("notifications", payload => { - if (payload.event === "connected") { - this.setState({ - connected: true, - configured: payload.message["is_configured"] - }); - } - }); - - setInterval(() => { - if (document.title.endsWith("❚")) { - document.title = document.title.slice(0, -1); - } else { - document.title += "❚"; - } - }, 500); - } - - render() { - let modal; - if (this.state.filterWindowOpen && this.state.configured) { - modal = this.setState({filterWindowOpen: false})}/>; - } - - return ( -

- - {this.state.connected && - -

this.setState({filterWindowOpen: true})}/> -

- {this.state.configured ? : - this.setState({configured: true})}/>} - {modal} -

- {this.state.configured && } -

- - } -

- ); - } -} - -export default App; diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss deleted file mode 100644 index 87661c3..0000000 --- a/frontend/src/views/App.scss +++ /dev/null @@ -1,16 +0,0 @@ - -.main { - display: flex; - flex-direction: column; - height: 100vh; - - .main-content { - overflow: hidden; - flex: 1 1; - } - - .main-header, - .main-footer { - flex: 0 0; - } -} diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js deleted file mode 100644 index b2edd3f..0000000 --- a/frontend/src/views/Connections.js +++ /dev/null @@ -1,293 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './Connections.scss'; -import Connection from "../components/Connection"; -import Table from 'react-bootstrap/Table'; -import {Redirect} from 'react-router'; -import {withRouter} from "react-router-dom"; -import backend from "../backend"; -import ConnectionMatchedRules from "../components/ConnectionMatchedRules"; -import log from "../log"; -import ButtonField from "../components/fields/ButtonField"; -import dispatcher from "../dispatcher"; - -class Connections extends Component { - - state = { - loading: false, - connections: [], - firstConnection: null, - lastConnection: null, - }; - - constructor(props) { - super(props); - - this.scrollTopThreashold = 0.00001; - this.scrollBottomThreashold = 0.99999; - this.maxConnections = 200; - this.queryLimit = 50; - this.connectionsListRef = React.createRef(); - this.lastScrollPosition = 0; - this.doQueryStringRedirect = false; - this.doSelectedConnectionRedirect = false; - } - - componentDidMount() { - this.loadConnections({limit: this.queryLimit}) - .then(() => this.setState({loaded: true})); - if (this.props.initialConnection) { - this.setState({selected: this.props.initialConnection.id}); - } - - dispatcher.register("timeline_updates", payload => { - this.connectionsListRef.current.scrollTop = 0; - this.loadConnections({ - started_after: Math.round(payload.from.getTime() / 1000), - started_before: Math.round(payload.to.getTime() / 1000), - limit: this.maxConnections - }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); - }); - - dispatcher.register("notifications", payload => { - if (payload.event === "rules.new" || payload.event === "rules.edit") { - this.loadRules().then(() => log.debug("Loaded connection rules after notification update")); - } - }); - - dispatcher.register("notifications", payload => { - if (payload.event === "services.edit") { - this.loadServices().then(() => log.debug("Services reloaded after notification update")); - } - }); - } - - connectionSelected = (c) => { - this.doSelectedConnectionRedirect = true; - this.setState({selected: c.id}); - this.props.onSelected(c); - }; - - componentDidUpdate(prevProps, prevState, snapshot) { - if (this.state.loaded && prevProps.location.search !== this.props.location.search) { - this.loadConnections({limit: this.queryLimit}) - .then(() => log.info("Connections reloaded after query string update")); - } - } - - handleScroll = (e) => { - if (this.disableScrollHandler) { - this.lastScrollPosition = e.currentTarget.scrollTop; - return; - } - - let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight); - if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) { - this.loadConnections({from: this.state.lastConnection.id, limit: this.queryLimit,}) - .then(() => log.info("Following connections loaded")); - } - if (!this.state.loading && relativeScroll < this.scrollTopThreashold) { - this.loadConnections({to: this.state.firstConnection.id, limit: this.queryLimit,}) - .then(() => log.info("Previous connections loaded")); - if (this.state.showMoreRecentButton) { - this.setState({showMoreRecentButton: false}); - } - } else { - if (this.lastScrollPosition > e.currentTarget.scrollTop) { - if (!this.state.showMoreRecentButton) { - this.setState({showMoreRecentButton: true}); - } - } else { - if (this.state.showMoreRecentButton) { - this.setState({showMoreRecentButton: false}); - } - } - } - this.lastScrollPosition = e.currentTarget.scrollTop; - }; - - addServicePortFilter = (port) => { - const urlParams = new URLSearchParams(this.props.location.search); - urlParams.set("service_port", port); - this.doQueryStringRedirect = true; - this.setState({queryString: urlParams}); - }; - - addMatchedRulesFilter = (matchedRule) => { - const urlParams = new URLSearchParams(this.props.location.search); - const oldMatchedRules = urlParams.getAll("matched_rules") || []; - - if (!oldMatchedRules.includes(matchedRule)) { - urlParams.append("matched_rules", matchedRule); - this.doQueryStringRedirect = true; - this.setState({queryString: urlParams}); - } - }; - - async loadConnections(params) { - let url = "/api/connections"; - const urlParams = new URLSearchParams(this.props.location.search); - for (const [name, value] of Object.entries(params)) { - urlParams.set(name, value); - } - - this.setState({loading: true}); - if (!this.state.rules) { - await this.loadRules(); - } - if (!this.state.services) { - await this.loadServices(); - } - - let res = (await backend.get(`${url}?${urlParams}`)).json; - - let connections = this.state.connections; - let firstConnection = this.state.firstConnection; - let lastConnection = this.state.lastConnection; - - if (params !== undefined && params.from !== undefined && params.to === undefined) { - if (res.length > 0) { - connections = this.state.connections.concat(res.slice(1)); - lastConnection = connections[connections.length - 1]; - if (connections.length > this.maxConnections) { - connections = connections.slice(connections.length - this.maxConnections, - connections.length - 1); - firstConnection = connections[0]; - } - } - } else if (params !== undefined && params.to !== undefined && params.from === undefined) { - if (res.length > 0) { - connections = res.slice(0, res.length - 1).concat(this.state.connections); - firstConnection = connections[0]; - if (connections.length > this.maxConnections) { - connections = connections.slice(0, this.maxConnections); - lastConnection = connections[this.maxConnections - 1]; - } - } - } else { - if (res.length > 0) { - connections = res; - firstConnection = connections[0]; - lastConnection = connections[connections.length - 1]; - } else { - connections = []; - firstConnection = null; - lastConnection = null; - } - } - - this.setState({ - loading: false, - connections: connections, - firstConnection: firstConnection, - lastConnection: lastConnection - }); - - if (firstConnection != null && lastConnection != null) { - dispatcher.dispatch("connection_updates", { - from: new Date(lastConnection["started_at"]), - to: new Date(firstConnection["started_at"]) - }); - } - } - - loadRules = async () => { - return backend.get("/api/rules").then(res => this.setState({rules: res.json})); - }; - - loadServices = async () => { - return backend.get("/api/services").then(res => this.setState({services: res.json})); - }; - - render() { - let redirect; - if (this.doSelectedConnectionRedirect) { - redirect = ; - this.doSelectedConnectionRedirect = false; - } else if (this.doQueryStringRedirect) { - redirect = ; - this.doQueryStringRedirect = false; - } - - let loading = null; - if (this.state.loading) { - loading = - Loading... - ; - } - - return ( -

- {this.state.showMoreRecentButton &&

- { - this.disableScrollHandler = true; - this.connectionsListRef.current.scrollTop = 0; - this.loadConnections({limit: this.queryLimit}) - .then(() => { - this.disableScrollHandler = false; - log.info("Most recent connections loaded"); - }); - }}/> -

} - -

service	srcip	srcport	dstip	dstport	started_at	duration	up	down	actions

- - {redirect} -

- ); - } - -} - -export default withRouter(Connections); diff --git a/frontend/src/views/Connections.scss b/frontend/src/views/Connections.scss deleted file mode 100644 index de06096..0000000 --- a/frontend/src/views/Connections.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import "../colors.scss"; - -.connections-container { - position: relative; - height: 100%; - background-color: $color-primary-3; - - .connections { - position: relative; - overflow-y: scroll; - height: 100%; - - .table { - margin-bottom: 0; - } - - th { - font-size: 13.5px; - position: sticky; - top: 0; - padding: 5px; - border: none; - background-color: $color-primary-3; - } - - &:hover::-webkit-scrollbar-thumb { - background: $color-secondary-2; - } - } - - .most-recent-button { - position: absolute; - z-index: 20; - top: 45px; - left: calc(50% - 50px); - background-color: red; - } -} diff --git a/frontend/src/views/Filters.js b/frontend/src/views/Filters.js deleted file mode 100644 index 3dd8280..0000000 --- a/frontend/src/views/Filters.js +++ /dev/null @@ -1,116 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import {Col, Container, Modal, Row, Table} from "react-bootstrap"; -import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions"; -import ButtonField from "../components/fields/ButtonField"; - -class Filters extends Component { - - constructor(props) { - super(props); - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = false); - this.state = newState; - } - - componentDidMount() { - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); - this.setState(newState); - } - - checkboxChangesHandler(filterName, event) { - this.setState({[`${filterName}_active`]: event.target.checked}); - localStorage.setItem(`filters.${filterName}`, event.target.checked); - if (typeof window !== "undefined") { - window.dispatchEvent(new Event("quick-filters")); - } - } - - generateRows(filtersNames) { - return filtersNames.map(name => - - this.checkboxChangesHandler(name, event)}/> - {filtersDefinitions[name]} - - ); - } - - render() { - return ( - - - - ~/filters - - - - - - - - - - - - - - - {this.generateRows(["service_port", "client_address", "min_duration", - "min_bytes", "started_after", "closed_after", "marked"])} - -

show	filter

- - - - - - - - - - - {this.generateRows(["matched_rules", "client_port", "max_duration", - "max_bytes", "started_before", "closed_before", "hidden"])} - -

show	filter

- - - - - - - - - - - - ); - } -} - -export default Filters; diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js deleted file mode 100644 index 2cfe9fb..0000000 --- a/frontend/src/views/Header.js +++ /dev/null @@ -1,109 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import Typed from 'typed.js'; -import './Header.scss'; -import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions"; -import {Link, withRouter} from "react-router-dom"; -import ButtonField from "../components/fields/ButtonField"; - -class Header extends Component { - - constructor(props) { - super(props); - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = false); - this.state = newState; - this.fetchStateFromLocalStorage = this.fetchStateFromLocalStorage.bind(this); - } - - componentDidMount() { - const options = { - strings: ["caronte$ "], - typeSpeed: 50, - cursorChar: "❚" - }; - this.typed = new Typed(this.el, options); - - this.fetchStateFromLocalStorage(); - - if (typeof window !== "undefined") { - window.addEventListener("quick-filters", this.fetchStateFromLocalStorage); - } - } - - componentWillUnmount() { - this.typed.destroy(); - - if (typeof window !== "undefined") { - window.removeEventListener("quick-filters", this.fetchStateFromLocalStorage); - } - } - - fetchStateFromLocalStorage() { - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); - this.setState(newState); - } - - render() { - let quickFilters = filtersNames.filter(name => this.state[`${name}_active`]) - .map(name => {filtersDefinitions[name]}) - .slice(0, 5); - - return ( -

- { - this.el = el; - }}/> -

- -

- {quickFilters} -

- -

- - - - - - - - - - - - - -

- ); - } -} - -export default withRouter(Header); diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss deleted file mode 100644 index 0711159..0000000 --- a/frontend/src/views/Header.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import "../colors.scss"; - -.header { - height: 80px; - padding: 15px 30px; - - > .row { - background-color: $color-primary-0; - } - - .header-title { - width: 200px; - margin: 5px 0 5px -5px; - } - - .header-buttons { - display: flex; - justify-content: flex-end; - margin: 7px 0; - - .button-field { - margin-left: 7px; - } - } - - .filters-bar { - padding: 3px 0; - - .filter { - display: inline-block; - margin-right: 10px; - } - } -} diff --git a/frontend/src/views/Timeline.js b/frontend/src/views/Timeline.js deleted file mode 100644 index ebe3eb9..0000000 --- a/frontend/src/views/Timeline.js +++ /dev/null @@ -1,232 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import './Timeline.scss'; -import { - ChartContainer, - ChartRow, - Charts, - LineChart, - MultiBrush, - Resizable, - styler, - YAxis -} from "react-timeseries-charts"; -import {TimeRange, TimeSeries} from "pondjs"; -import backend from "../backend"; -import ChoiceField from "../components/fields/ChoiceField"; -import {withRouter} from "react-router-dom"; -import log from "../log"; -import dispatcher from "../dispatcher"; - -const minutes = 60 * 1000; - -class Timeline extends Component { - - state = { - metric: "connections_per_service" - }; - - constructor() { - super(); - - this.disableTimeSeriesChanges = false; - this.selectionTimeout = null; - } - - filteredPort = () => { - const urlParams = new URLSearchParams(this.props.location.search); - return urlParams.get("service_port"); - }; - - componentDidMount() { - const filteredPort = this.filteredPort(); - this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); - - dispatcher.register("connection_updates", payload => { - this.setState({ - selection: new TimeRange(payload.from, payload.to), - }); - }); - - dispatcher.register("notifications", payload => { - if (payload.event === "services.edit") { - this.loadServices().then(() => log.debug("Services reloaded after notification update")); - } - }); - } - - componentDidUpdate(prevProps, prevState, snapshot) { - const filteredPort = this.filteredPort(); - if (this.state.filteredPort !== filteredPort) { - this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => - log.debug("Statistics reloaded after filtered port changes")); - } - } - - loadStatistics = async (metric, filteredPort) => { - const urlParams = new URLSearchParams(); - urlParams.set("metric", metric); - - let services = await this.loadServices(); - if (filteredPort && services[filteredPort]) { - const service = services[filteredPort]; - services = {}; - services[filteredPort] = service; - } - - const ports = Object.keys(services); - ports.forEach(s => urlParams.append("ports", s)); - - const metrics = (await backend.get("/api/statistics?" + urlParams)).json; - const zeroFilledMetrics = []; - const toTime = m => new Date(m["range_start"]).getTime(); - - if (metrics.length > 0) { - let i = 0; - for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) { - if (interval === toTime(metrics[i])) { - const m = metrics[i++]; - m["range_start"] = new Date(m["range_start"]); - zeroFilledMetrics.push(m); - } else { - const m = {}; - m["range_start"] = new Date(interval); - m[metric] = {}; - ports.forEach(p => m[metric][p] = 0); - zeroFilledMetrics.push(m); - } - } - } - - const series = new TimeSeries({ - name: "statistics", - columns: ["time"].concat(ports), - points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0))) - }); - const start = series.range().begin(); - const end = series.range().end(); - start.setTime(start.getTime() - minutes); - end.setTime(end.getTime() + minutes); - - this.setState({ - metric, - series, - timeRange: new TimeRange(start, end), - start, - end - }); - log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`); - }; - - loadServices = async () => { - const services = (await backend.get("/api/services")).json; - this.setState({services}); - return services; - }; - - createStyler = () => { - return styler(Object.keys(this.state.services).map(port => { - return {key: port, color: this.state.services[port].color, width: 2}; - })); - }; - - handleTimeRangeChange = (timeRange) => { - if (!this.disableTimeSeriesChanges) { - this.setState({timeRange}); - } - }; - - handleSelectionChange = (timeRange) => { - this.disableTimeSeriesChanges = true; - - this.setState({selection: timeRange}); - if (this.selectionTimeout) { - clearTimeout(this.selectionTimeout); - } - this.selectionTimeout = setTimeout(() => { - dispatcher.dispatch("timeline_updates", { - from: timeRange.begin(), - to: timeRange.end() - }); - this.selectionTimeout = null; - this.disableTimeSeriesChanges = false; - }, 1000); - }; - - aggregateSeries = (func) => { - const values = this.state.series.columns().map(c => this.state.series[func](c)); - return Math[func](...values); - }; - - render() { - if (!this.state.series) { - return null; - } - - return ( - - ); - } -} - -export default withRouter(Timeline); diff --git a/frontend/src/views/Timeline.scss b/frontend/src/views/Timeline.scss deleted file mode 100644 index 14360d4..0000000 --- a/frontend/src/views/Timeline.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import "../colors.scss"; - -.footer { - padding: 15px; - - .time-line { - position: relative; - background-color: $color-primary-0; - - .metric-selection { - font-size: 0.8em; - position: absolute; - top: 5px; - right: 10px; - } - } - - svg text { - font-family: "Fira Code", monospace !important; - fill: $color-primary-4 !important; - } -} -- cgit v1.2.3-70-g09d2 From c21541a31fe45ba3a0bafca46415247f3837713e Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Fri, 9 Oct 2020 17:07:24 +0200 Subject: Add MainPane --- Dockerfile | 5 +- VERSION | 1 - application_router.go | 16 ++-- caronte.go | 11 ++- frontend/public/favicon.ico | Bin 34239 -> 12163 bytes frontend/public/logo192.png | Bin 34239 -> 6498 bytes frontend/public/logo512.png | Bin 34239 -> 26806 bytes frontend/src/components/App.js | 5 +- frontend/src/components/Notifications.js | 99 ++++++++++++++------- frontend/src/components/Notifications.scss | 16 +++- frontend/src/components/Timeline.js | 8 +- frontend/src/components/Timeline.scss | 4 + frontend/src/components/dialogs/Filters.js | 7 +- frontend/src/components/fields/ButtonField.js | 4 +- frontend/src/components/fields/TextField.scss | 4 + .../src/components/filters/FiltersDefinitions.js | 38 ++------ frontend/src/components/objects/Connection.js | 39 +++----- frontend/src/components/objects/Connection.scss | 4 + frontend/src/components/objects/LinkPopover.scss | 5 ++ frontend/src/components/pages/MainPage.js | 2 +- frontend/src/components/pages/MainPage.scss | 1 + frontend/src/components/panels/ConnectionsPane.js | 12 ++- .../src/components/panels/ConnectionsPane.scss | 5 +- frontend/src/components/panels/MainPane.js | 82 ++++++++++++++++- frontend/src/components/panels/MainPane.scss | 27 +++++- frontend/src/components/panels/StreamsPane.js | 5 +- frontend/src/components/panels/StreamsPane.scss | 9 +- frontend/src/components/panels/common.scss | 8 ++ frontend/src/index.scss | 12 +++ frontend/src/logo.svg | 8 +- notification_controller.go | 8 +- resources_controller.go | 2 +- 32 files changed, 297 insertions(+), 150 deletions(-) delete mode 100644 VERSION (limited to 'frontend/src/components') diff --git a/Dockerfile b/Dockerfile index cf7730b..a9c8134 100644 --- a/Dockerfile +++ b/Dockerfile @@ -3,15 +3,16 @@ FROM ubuntu:20.04 AS BUILDSTAGE # Install tools and libraries RUN apt-get update && \ - DEBIAN_FRONTEND=noninteractive apt-get install -qq golang-1.14 pkg-config libpcap-dev libhyperscan-dev yarnpkg + DEBIAN_FRONTEND=noninteractive apt-get install -qq git golang-1.14 pkg-config libpcap-dev libhyperscan-dev yarnpkg COPY . /caronte WORKDIR /caronte RUN ln -sf ../lib/go-1.14/bin/go /usr/bin/go && \ + export VERSION=$(git describe --tags) && \ go mod download && \ - go build && \ + go build -ldflags "-X main.Version=$VERSION" && \ cd frontend && \ yarnpkg install && \ yarnpkg build --production=true && \ diff --git a/VERSION b/VERSION deleted file mode 100644 index bc1f22f..0000000 --- a/VERSION +++ /dev/null @@ -1 +0,0 @@ -v0.20.10 \ No newline at end of file diff --git a/application_router.go b/application_router.go index 9fd7e3d..89b471b 100644 --- a/application_router.go +++ b/application_router.go @@ -65,7 +65,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, applicationContext.SetAccounts(settings.Accounts) c.JSON(http.StatusAccepted, gin.H{}) - notificationController.Notify("setup", InsertNotification, gin.H{}) + notificationController.Notify("setup", gin.H{}) }) router.GET("/ws", func(c *gin.Context) { @@ -95,7 +95,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, } else { response := UnorderedDocument{"id": id} success(c, response) - notificationController.Notify("rules.new", InsertNotification, response) + notificationController.Notify("rules.new", response) } }) @@ -134,7 +134,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, notFound(c, UnorderedDocument{"id": id}) } else { success(c, rule) - notificationController.Notify("rules.edit", UpdateNotification, rule) + notificationController.Notify("rules.edit", rule) } }) @@ -156,7 +156,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, } else { response := gin.H{"session": sessionID} c.JSON(http.StatusAccepted, response) - notificationController.Notify("pcap.upload", InsertNotification, response) + notificationController.Notify("pcap.upload", response) } }) @@ -190,7 +190,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, } else { response := gin.H{"session": sessionID} c.JSON(http.StatusAccepted, response) - notificationController.Notify("pcap.file", InsertNotification, response) + notificationController.Notify("pcap.file", response) } }) @@ -227,7 +227,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, session := gin.H{"session": sessionID} if cancelled := applicationContext.PcapImporter.CancelSession(sessionID); cancelled { c.JSON(http.StatusAccepted, session) - notificationController.Notify("sessions.delete", DeleteNotification, session) + notificationController.Notify("sessions.delete", session) } else { notFound(c, session) } @@ -288,7 +288,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, if result { response := gin.H{"connection_id": c.Param("id"), "action": c.Param("action")} success(c, response) - notificationController.Notify("connections.action", UpdateNotification, response) + notificationController.Notify("connections.action", response) } else { notFound(c, gin.H{"connection": id}) } @@ -344,7 +344,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext, } if err := applicationContext.ServicesController.SetService(c, service); err == nil { success(c, service) - notificationController.Notify("services.edit", UpdateNotification, service) + notificationController.Notify("services.edit", service) } else { unprocessableEntity(c, err) } diff --git a/caronte.go b/caronte.go index d4265bc..2d24af6 100644 --- a/caronte.go +++ b/caronte.go @@ -21,9 +21,10 @@ import ( "flag" "fmt" log "github.com/sirupsen/logrus" - "io/ioutil" ) +var Version string + func main() { mongoHost := flag.String("mongo-host", "localhost", "address of MongoDB") mongoPort := flag.Int("mongo-port", 27017, "port of MongoDB") @@ -40,12 +41,10 @@ func main() { log.WithError(err).WithFields(logFields).Fatal("failed to connect to MongoDB") } - versionBytes, err := ioutil.ReadFile("VERSION") - if err != nil { - log.WithError(err).Fatal("failed to load version file") + if Version == "" { + Version = "undefined" } - - applicationContext, err := CreateApplicationContext(storage, string(versionBytes)) + applicationContext, err := CreateApplicationContext(storage, Version) if err != nil { log.WithError(err).WithFields(logFields).Fatal("failed to create application context") } diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index 1dc499d..be9cec8 100644 Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png index 1dc499d..1969e1d 100644 Binary files a/frontend/public/logo192.png and b/frontend/public/logo192.png differ diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png index 1dc499d..3afb127 100644 Binary files a/frontend/public/logo512.png and b/frontend/public/logo512.png differ diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index bf959c5..0f700db 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -31,7 +31,8 @@ class App extends Component { if (payload.event === "connected") { this.setState({ connected: true, - configured: payload.message["is_configured"] + configured: payload.message["is_configured"], + version: payload.message["version"] }); } }); @@ -50,7 +51,7 @@ class App extends Component { <> {this.state.connected ? - (this.state.configured ? : + (this.state.configured ? : this.setState({configured: true})}/>) : } diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js index 1017a42..ad681a2 100644 --- a/frontend/src/components/Notifications.js +++ b/frontend/src/components/Notifications.js @@ -30,49 +30,84 @@ class Notifications extends Component { }; componentDidMount() { - dispatcher.register("notifications", notification => { + dispatcher.register("notifications", n => this.notificationHandler(n)); + } + + notificationHandler = (n) => { + switch (n.event) { + case "connected": + n.title = "connected"; + n.description = `number of active clients: ${n.message["connected_clients"]}`; + return this.pushNotification(n); + case "services.edit": + n.title = "services updated"; + n.description = `updated "${n.message["name"]}" on port ${n.message["port"]}`; + n.variant = "blue"; + return this.pushNotification(n); + case "rules.new": + n.title = "rules updated"; + n.description = `new rule added: ${n.message["name"]}`; + n.variant = "green"; + return this.pushNotification(n); + case "rules.edit": + n.title = "rules updated"; + n.description = `existing rule updated: ${n.message["name"]}`; + n.variant = "blue"; + return this.pushNotification(n); + default: + return; + } + }; + + pushNotification = (notification) => { + const notifications = this.state.notifications; + notifications.push(notification); + this.setState({notifications}); + setTimeout(() => { const notifications = this.state.notifications; - notifications.push(notification); + notification.open = true; this.setState({notifications}); - setTimeout(() => { - const notifications = this.state.notifications; - notification.open = true; - this.setState({notifications}); - }, 100); + }, 100); - 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); + 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); - const removeHandle = setTimeout(() => { - const closedNotifications = _.without(this.state.closedNotifications, notification); - this.setState({closedNotifications}); - }, 6000); + 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}); - }; - }); - } + notification.onClick = () => { + clearTimeout(hideHandle); + clearTimeout(removeHandle); + const notifications = _.without(this.state.notifications, notification); + this.setState({notifications}); + }; + }; render() { return (

{ - this.state.closedNotifications.concat(this.state.notifications).map(n => -

{n.event}

- {JSON.stringify(n.message)} -

- ) + this.state.closedNotifications.concat(this.state.notifications).map(n => { + const notificationClassnames = { + "notification": true, + "notification-closed": n.closed, + "notification-open": n.open + }; + if (n.variant) { + notificationClassnames[`notification-${n.variant}`] = true; + } + return

{n.title}

{n.description}

; + }) }

diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss index 324d0bb..98d228e 100644 --- a/frontend/src/components/Notifications.scss +++ b/frontend/src/components/Notifications.scss @@ -7,18 +7,15 @@ left: 30px; .notification { - overflow: hidden; width: 250px; margin: 10px 0; padding: 10px; + cursor: pointer; transition: all 1s ease; transform: translateX(-300px); - white-space: nowrap; - text-overflow: ellipsis; color: $color-green-light; border-left: 5px solid $color-green-dark; background-color: $color-green; - cursor: pointer; .notification-title { font-size: 0.9em; @@ -27,6 +24,11 @@ .notification-description { font-size: 0.8em; + overflow: hidden; + margin: 10px 0; + white-space: nowrap; + text-overflow: ellipsis; + color: $color-primary-4; } &.notification-open { @@ -37,5 +39,11 @@ transform: translateY(-50px); opacity: 0; } + + &.notification-blue { + color: $color-blue-light; + border-left: 5px solid $color-blue-dark; + background-color: $color-blue; + } } } diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index 7be42e0..615203f 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -35,6 +35,7 @@ import log from "../log"; import dispatcher from "../dispatcher"; const minutes = 60 * 1000; +const classNames = require('classnames'); class Timeline extends Component { @@ -70,6 +71,11 @@ class Timeline extends Component { this.loadServices().then(() => log.debug("Services reloaded after notification update")); } }); + + dispatcher.register("pulse_timeline", payload => { + this.setState({pulseTimeline: true}); + setTimeout(() => this.setState({pulseTimeline: false}), payload.duration); + }); } componentDidUpdate(prevProps, prevState, snapshot) { @@ -183,7 +189,7 @@ class Timeline extends Component { return (

{this.generateRows(["service_port", "client_address", "min_duration", - "min_bytes", "started_after", "closed_after", "marked"])} + "min_bytes"])} @@ -95,14 +95,11 @@ class Filters extends Component { {this.generateRows(["matched_rules", "client_port", "max_duration", - "max_bytes", "started_before", "closed_before", "hidden"])} + "max_bytes", "marked"])} - - - diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index ffcceae..193339c 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -55,8 +55,8 @@ class ButtonField extends Component { } return ( -

); diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss index c2d6ef5..5fde9e6 100644 --- a/frontend/src/components/fields/TextField.scss +++ b/frontend/src/components/fields/TextField.scss @@ -51,4 +51,8 @@ padding: 5px 10px; color: $color-secondary-0; } + + &:hover::-webkit-scrollbar-thumb { + background: $color-secondary-2 !important; + } } diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js index cde3cfb..9fb3b18 100644 --- a/frontend/src/components/filters/FiltersDefinitions.js +++ b/frontend/src/components/filters/FiltersDefinitions.js @@ -22,8 +22,7 @@ import RulesConnectionsFilter from "./RulesConnectionsFilter"; import BooleanConnectionsFilter from "./BooleanConnectionsFilter"; export const filtersNames = ["service_port", "matched_rules", "client_address", "client_port", - "min_duration", "max_duration", "min_bytes", "max_bytes", "started_after", - "started_before", "closed_after", "closed_before", "marked", "hidden"]; + "min_duration", "max_duration", "min_bytes", "max_bytes", "marked"]; export const filtersDefinitions = { service_port: , - // started_after: , - // started_before: , - // closed_after: , - // closed_before: , - marked: , - // hidden: + contains_string: , + marked: }; diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js index 5e2beba..e0e942a 100644 --- a/frontend/src/components/objects/Connection.js +++ b/frontend/src/components/objects/Connection.js @@ -17,11 +17,12 @@ import React, {Component} from 'react'; import './Connection.scss'; -import {Form, OverlayTrigger, Popover} from "react-bootstrap"; +import {Form} from "react-bootstrap"; import backend from "../../backend"; import {dateTimeToTime, durationBetween, formatSize} from "../../utils"; import ButtonField from "../fields/ButtonField"; import LinkPopover from "./LinkPopover"; +import TextField from "../fields/TextField"; const classNames = require('classnames'); @@ -81,14 +82,6 @@ class Connection extends Component { Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()}

; - const popoverFor = function (name, content) { - return - - {content} - - ; - }; - const commentPopoverContent =

Click to {conn.comment.length > 0 ? "edit" : "add"} comment {conn.comment && } @@ -97,7 +90,7 @@ class Connection extends Component { const copyPopoverContent =

{this.state.copiedMessage ? Copied! : Click to copy the connection id} - +

; return ( @@ -119,22 +112,16 @@ class Connection extends Component { {durationBetween(startedAt, closedAt)} {formatSize(conn["client_bytes"])} {formatSize(conn["server_bytes"])} - - Mark this connection)}> - this.handleAction("mark")}>!! - - - this.handleAction("comment")}>@ - - - this.handleAction("copy")}># - + + this.handleAction("mark")}>!!} + content={Mark this connection} placement="right"/> + this.handleAction("comment")}>@} + content={commentPopoverContent} placement="right"/> + this.handleAction("copy")}>#} + content={copyPopoverContent} placement="right"/> ); diff --git a/frontend/src/components/objects/Connection.scss b/frontend/src/components/objects/Connection.scss index 3b9f479..bf66272 100644 --- a/frontend/src/components/objects/Connection.scss +++ b/frontend/src/components/objects/Connection.scss @@ -46,6 +46,10 @@ .link-popover { font-weight: 400; } + + .connection-actions .link-popover { + text-decoration: none; + } } .connection-popover { diff --git a/frontend/src/components/objects/LinkPopover.scss b/frontend/src/components/objects/LinkPopover.scss index 725224c..c81f8bb 100644 --- a/frontend/src/components/objects/LinkPopover.scss +++ b/frontend/src/components/objects/LinkPopover.scss @@ -5,3 +5,8 @@ cursor: pointer; text-decoration: underline; } + +.popover { + font-family: "Fira Code", monospace; + font-size: 0.75em; +} diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js index 7376091..4632bbd 100644 --- a/frontend/src/components/pages/MainPage.js +++ b/frontend/src/components/pages/MainPage.js @@ -57,7 +57,7 @@ class MainPage extends Component { }/> }/> - }/> + }/>

diff --git a/frontend/src/components/pages/MainPage.scss b/frontend/src/components/pages/MainPage.scss index 3b1a689..4ca54c0 100644 --- a/frontend/src/components/pages/MainPage.scss +++ b/frontend/src/components/pages/MainPage.scss @@ -13,6 +13,7 @@ } .details-pane { + position: relative; flex: 1 1; margin-left: 7.5px; } diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js index 038ef8f..1f79ab8 100644 --- a/frontend/src/components/panels/ConnectionsPane.js +++ b/frontend/src/components/panels/ConnectionsPane.js @@ -27,6 +27,8 @@ import log from "../../log"; import ButtonField from "../fields/ButtonField"; import dispatcher from "../../dispatcher"; +const classNames = require('classnames'); + class ConnectionsPane extends Component { state = { @@ -81,6 +83,11 @@ class ConnectionsPane extends Component { this.loadServices().then(() => log.debug("Services reloaded after notification update")); } }); + + dispatcher.register("pulse_connections_view", payload => { + this.setState({pulseConnectionsView: true}); + setTimeout(() => this.setState({pulseConnectionsView: false}), payload.duration); + }); } connectionSelected = (c, doRedirect = true) => { @@ -246,7 +253,7 @@ class ConnectionsPane extends Component { return (

{this.state.showMoreRecentButton &&

- { + { this.disableScrollHandler = true; this.connectionsListRef.current.scrollTop = 0; this.loadConnections({limit: this.queryLimit}) @@ -257,7 +264,8 @@ class ConnectionsPane extends Component { }}/>

} -

diff --git a/frontend/src/components/panels/ConnectionsPane.scss b/frontend/src/components/panels/ConnectionsPane.scss index 06f5827..59fe372 100644 --- a/frontend/src/components/panels/ConnectionsPane.scss +++ b/frontend/src/components/panels/ConnectionsPane.scss @@ -33,6 +33,9 @@ z-index: 20; top: 45px; left: calc(50% - 50px); - background-color: red; + } + + .connections-pulse { + animation: pulse 2s infinite; } } diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js index 74c859c..8aa8ad8 100644 --- a/frontend/src/components/panels/MainPane.js +++ b/frontend/src/components/panels/MainPane.js @@ -17,17 +17,91 @@ import React, {Component} from 'react'; import './common.scss'; -import './ServicesPane.scss'; +import './MainPane.scss'; +import Typed from "typed.js"; +import dispatcher from "../../dispatcher"; +import RulesPane from "./RulesPane"; +import StreamsPane from "./StreamsPane"; +import PcapsPane from "./PcapsPane"; +import ServicesPane from "./ServicesPane"; class MainPane extends Component { state = {}; + componentDidMount() { + const nl = "^600\n^400"; + const options = { + strings: [ + `welcome to caronte!^1000 the current version is ${this.props.version}` + nl + + "caronte is a network analyzer,^300 it is able to read pcaps and extract connections", // 0 + "the left panel lists all connections that have already been closed" + nl + + "scrolling up the list will load the most recent connections,^300 downward the oldest ones", // 1 + "by selecting a connection you can view its content,^300 which will be shown in the right panel" + nl + + "you can choose the display format,^300 or decide to download the connection content", // 2 + "below there is the timeline,^300 which shows the number of connections per minute per service" + nl + + "you can use the sliding window to move the time range of the connections to be displayed", // 3 + "there are also additional metrics,^300 selectable from the drop-down menu", // 4 + "at the top are the filters,^300 which can be used to select only certain types of connections" + nl + + "you can choose which filters to display in the top bar from the filters window", // 5 + "in the pcaps panel it is possible to analyze new pcaps,^300 or to see the pcaps already analyzed" + nl + + "you can load pcaps from your browser,^300 or process pcaps already present on the filesystem", // 6 + "in the rules panel you can see the rules already created,^300 or create new ones" + nl + + "the rules inserted will be used only to label new connections, not those already analyzed" + nl + + "a connection is tagged if it meets all the requirements specified by the rule", // 7 + "in the services panel you can assign new services or edit existing ones" + nl + + "each service is associated with a port number,^300 and will be shown in the connection list", // 8 + "from the configuration panel you can change the settings of the frontend application", // 9 + "that's all! and have fun!" + nl + "created by @eciavatta" // 10 + ], + typeSpeed: 40, + cursorChar: "_", + backSpeed: 5, + smartBackspace: false, + backDelay: 1500, + preStringTyped: (arrayPos) => { + switch (arrayPos) { + case 1: + return dispatcher.dispatch("pulse_connections_view", {duration: 12000}); + case 2: + return this.setState({backgroundPane: }); + case 3: + this.setState({backgroundPane: null}); + return dispatcher.dispatch("pulse_timeline", {duration: 12000}); + case 6: + return this.setState({backgroundPane: }); + case 7: + return this.setState({backgroundPane: }); + case 8: + return this.setState({backgroundPane: }); + case 10: + return this.setState({backgroundPane: null}); + default: + return; + } + }, + }; + this.typed = new Typed(this.el, options); + } + + componentWillUnmount() { + this.typed.destroy(); + } + render() { return ( -

- MainPane +

+ { + this.el = el; + }}/> +

+ {this.state.backgroundPane}

); diff --git a/frontend/src/components/panels/MainPane.scss b/frontend/src/components/panels/MainPane.scss index c8460f2..8f99b3c 100644 --- a/frontend/src/components/panels/MainPane.scss +++ b/frontend/src/components/panels/MainPane.scss @@ -1,5 +1,30 @@ @import "../../colors"; -.main-pane { +.pane-container { + background-color: $color-primary-0; + .main-pane { + position: absolute; + z-index: 50; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background-color: transparent; + + .tutorial { + flex-basis: 100%; + padding: 5px 10px; + text-align: center; + background-color: $color-primary-2; + } + } + + .background-pane { + height: 100%; + opacity: 0.4; + } } diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js index c8bd121..bd1964e 100644 --- a/frontend/src/components/panels/StreamsPane.js +++ b/frontend/src/components/panels/StreamsPane.js @@ -208,8 +208,8 @@ class StreamsPane extends Component { ); return ( -

flow: {conn["ip_src"]}:{conn["port_src"]} -> {conn["ip_dst"]}:{conn["port_dst"]} @@ -235,7 +235,6 @@ class StreamsPane extends Component {

); } - } diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss index d5510cf..1f641f3 100644 --- a/frontend/src/components/panels/StreamsPane.scss +++ b/frontend/src/components/panels/StreamsPane.scss @@ -1,7 +1,6 @@ @import "../../colors"; -.connection-content { - height: 100%; +.stream-pane { background-color: $color-primary-0; pre { @@ -15,6 +14,10 @@ margin: 0; padding: 0; } + + &:hover::-webkit-scrollbar-thumb { + background: $color-secondary-2; + } } .connection-message { @@ -87,7 +90,7 @@ } } - .connection-content-header { + .stream-pane-header { height: 33px; padding: 0; background-color: $color-primary-3; diff --git a/frontend/src/components/panels/common.scss b/frontend/src/components/panels/common.scss index 1468f35..335e65b 100644 --- a/frontend/src/components/panels/common.scss +++ b/frontend/src/components/panels/common.scss @@ -32,6 +32,10 @@ margin-left: 10px; color: $color-secondary-0; } + + &:hover::-webkit-scrollbar-thumb { + background: $color-secondary-2; + } } table { @@ -96,4 +100,8 @@ margin-left: 5px; } } + + &:hover::-webkit-scrollbar-thumb { + background: $color-secondary-2; + } } diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 9d6afc4..ea360be 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -77,3 +77,15 @@ a { .popover-header { color: $color-primary-1; } + +@keyframes pulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 1; + } +} diff --git a/frontend/src/logo.svg b/frontend/src/logo.svg index 6b60c10..cb825f3 100644 --- a/frontend/src/logo.svg +++ b/frontend/src/logo.svg @@ -1,7 +1 @@ - + \ No newline at end of file diff --git a/notification_controller.go b/notification_controller.go index 3fa3c5b..b9b3b1c 100644 --- a/notification_controller.go +++ b/notification_controller.go @@ -27,10 +27,6 @@ import ( ) const ( - InsertNotification = "insert" - UpdateNotification = "update" - DeleteNotification = "delete" - writeWait = 10 * time.Second pongWait = 60 * time.Second pingPeriod = (pongWait * 9) / 10 @@ -122,8 +118,8 @@ func (wc *NotificationController) Run() { } } -func (wc *NotificationController) Notify(event string, eventType string, message interface{}) { - wc.broadcast <- gin.H{"event": event, "event_type": eventType, "message": message} +func (wc *NotificationController) Notify(event string, message interface{}) { + wc.broadcast <- gin.H{"event": event, "message": message} } func (c *client) readPump() { diff --git a/resources_controller.go b/resources_controller.go index 10b31e3..0576e0f 100644 --- a/resources_controller.go +++ b/resources_controller.go @@ -98,7 +98,7 @@ func (csc *ResourcesController) Run() { avg := Average(cpuPercent) if avg > averageCPUPercentAlertThreshold && time.Now().Sub(lastAlertTime).Seconds() > averageCPUPercentAlertMinInterval { - csc.notificationController.Notify("resources.cpu_alert", "alert", gin.H{ + csc.notificationController.Notify("resources.cpu_alert", gin.H{ "cpu_percent": cpuPercent, }) log.WithField("cpu_percent", cpuPercent).Warn("cpu percent usage has exceeded the limit threshold") -- cgit v1.2.3-70-g09d2 From a44b70943ea4fce61261fc5fadf84a2a98fd2435 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Mon, 12 Oct 2020 20:08:45 +0200 Subject: Add search pane on frontend --- connections_controller.go | 2 +- frontend/src/components/Header.js | 9 +- frontend/src/components/fields/CheckField.js | 2 +- frontend/src/components/fields/TagField.js | 78 ++++++ frontend/src/components/fields/TagField.scss | 120 +++++++++ .../src/components/filters/ExitSearchFilter.js | 52 ++++ .../src/components/filters/FiltersDispatcher.js | 57 ++++ .../components/filters/RulesConnectionsFilter.js | 2 +- .../components/filters/RulesConnectionsFilter.scss | 193 +++++++------- frontend/src/components/pages/MainPage.js | 5 + frontend/src/components/panels/SearchPane.js | 293 +++++++++++++++++++++ frontend/src/components/panels/SearchPane.scss | 51 ++++ 12 files changed, 764 insertions(+), 100 deletions(-) create mode 100644 frontend/src/components/fields/TagField.js create mode 100644 frontend/src/components/fields/TagField.scss create mode 100644 frontend/src/components/filters/ExitSearchFilter.js create mode 100644 frontend/src/components/filters/FiltersDispatcher.js create mode 100644 frontend/src/components/panels/SearchPane.js create mode 100644 frontend/src/components/panels/SearchPane.scss (limited to 'frontend/src/components') diff --git a/connections_controller.go b/connections_controller.go index a293a80..924cb53 100644 --- a/connections_controller.go +++ b/connections_controller.go @@ -151,7 +151,7 @@ func (cc ConnectionsController) GetConnections(c context.Context, filter Connect performedSearchID, _ := RowIDFromHex(filter.PerformedSearch) if !performedSearchID.IsZero() { performedSearch := cc.searchController.GetPerformedSearch(performedSearchID) - if !performedSearch.ID.IsZero() { + if !performedSearch.ID.IsZero() && len(performedSearch.AffectedConnections) > 0 { query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$in": performedSearch.AffectedConnections}}}) } } diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index 4d29364..b72b532 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -21,6 +21,7 @@ import './Header.scss'; import {filtersDefinitions, filtersNames} from "./filters/FiltersDefinitions"; import {Link, withRouter} from "react-router-dom"; import ButtonField from "./fields/ButtonField"; +import ExitSearchFilter from "./filters/ExitSearchFilter"; class Header extends Component { @@ -50,7 +51,7 @@ class Header extends Component { componentWillUnmount() { this.typed.destroy(); - if (typeof window !== "undefined") { + if (typeof window) { window.removeEventListener("quick-filters", this.fetchStateFromLocalStorage); } } @@ -82,12 +83,16 @@ class Header extends Component {

{quickFilters} +

- + {/**/} + + + diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js index dd44970..a0e2706 100644 --- a/frontend/src/components/fields/CheckField.js +++ b/frontend/src/components/fields/CheckField.js @@ -35,7 +35,7 @@ class CheckField extends Component { const small = this.props.small || false; const name = this.props.name || null; const handler = () => { - if (this.props.onChange) { + if (!this.props.readonly && this.props.onChange) { this.props.onChange(!checked); } }; diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js new file mode 100644 index 0000000..f1a48bd --- /dev/null +++ b/frontend/src/components/fields/TagField.js @@ -0,0 +1,78 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './TagField.scss'; +import './common.scss'; +import {randomClassName} from "../../utils"; +import ReactTags from "react-tag-autocomplete"; + +const classNames = require('classnames'); +const _ = require('lodash'); + +class TagField extends Component { + + constructor(props) { + super(props); + + this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; + } + + state = { + + }; + + onAddition = (tag) => { + if (typeof this.props.onChange === "function") { + const tags = [].concat(this.wrappedTags(), tag); + this.props.onChange(tags.map(t => t.name), true, tag); // true == addition + } + }; + + onDelete = (i) => { + if (typeof this.props.onChange === "function") { + const tags = this.wrappedTags(); + const tag = tags[i]; + tags.splice(i, 1); + this.props.onChange(tags.map(t => t.name), true, tag); // false == delete + } + }; + + wrappedTags = () => this.props.tags.map(t => new Object({"name": t})); + + render() { + const small = this.props.small || false; + const name = this.props.name || null; + + return ( +

+ { name && +

+ {name}: +

+ } + +

+ ); + } +} + +export default TagField; diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss new file mode 100644 index 0000000..e77db97 --- /dev/null +++ b/frontend/src/components/fields/TagField.scss @@ -0,0 +1,120 @@ +@import "../../colors.scss"; + +.tag-field { + .react-tags { + font-size: 12px; + position: relative; + z-index: 10; + padding: 0 6px; + cursor: text; + border-radius: 4px; + background-color: $color-primary-2; + } + + .react-tags.is-focused { + border-color: #b1b1b1; + } + + .react-tags__selected { + display: inline; + } + + .react-tags__selected-tag { + font-size: 11px; + display: inline-block; + margin: 0 6px 6px 0; + padding: 2px 4px; + color: $color-primary-3; + border: none; + border-radius: 2px; + background: $color-primary-4; + } + + .react-tags__selected-tag::after { + margin-left: 8px; + content: "\2715"; + color: $color-primary-3; + } + + .react-tags__selected-tag:hover, + .react-tags__selected-tag:focus { + border-color: #b1b1b1; + } + + .react-tags__search { + display: inline-block; + max-width: 100%; + padding: 7px 10px; + } + + @media screen and (min-width: 30em) { + .react-tags__search { + position: relative; + } + } + + .react-tags__search-input { + font-size: inherit; + line-height: inherit; + max-width: 100%; + margin: 0; + padding: 0; + color: $color-primary-4; + border: 0; + outline: none; + background-color: $color-primary-2; + } + + .react-tags__search-input::-ms-clear { + display: none; + } + + .react-tags__suggestions { + position: absolute; + top: 100%; + left: 0; + width: 100%; + } + + @media screen and (min-width: 30em) { + .react-tags__suggestions { + width: 240px; + } + } + + .react-tags__suggestions ul { + font-size: 12px; + margin: 4px -1px; + padding: 0; + list-style: none; + color: $color-primary-1; + border-radius: 2px; + background: $color-primary-4; + } + + .react-tags__suggestions li { + padding: 3px 5px; + border-bottom: 1px solid #ddd; + } + + .react-tags__suggestions li mark { + font-weight: 600; + text-decoration: underline; + background: none; + } + + .react-tags__suggestions li:hover { + cursor: pointer; + color: $color-primary-4; + background: $color-primary-0; + } + + .react-tags__suggestions li.is-active { + background: #b7cfe0; + } + + .react-tags__suggestions li.is-disabled { + cursor: auto; + opacity: 0.5; + } +} \ No newline at end of file diff --git a/frontend/src/components/filters/ExitSearchFilter.js b/frontend/src/components/filters/ExitSearchFilter.js new file mode 100644 index 0000000..cfee298 --- /dev/null +++ b/frontend/src/components/filters/ExitSearchFilter.js @@ -0,0 +1,52 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import {withRouter} from "react-router-dom"; +import CheckField from "../fields/CheckField"; +import dispatcher from "../../dispatcher"; + +class ExitSearchFilter extends Component { + + state = {}; + + componentDidMount() { + let params = new URLSearchParams(this.props.location.search); + this.setState({performedSearch: params.get("performed_search")}); + + dispatcher.register("connections_filters", payload => { + if (this.state.performedSearch !== payload["performed_search"]) { + this.setState({performedSearch: payload["performed_search"]}); + } + }); + } + + render() { + return ( + <> + {this.state.performedSearch && +

+ + dispatcher.dispatch("connections_filters", {"performed_search": null})} small/> +

} + + ); + } + +} + +export default withRouter(ExitSearchFilter); diff --git a/frontend/src/components/filters/FiltersDispatcher.js b/frontend/src/components/filters/FiltersDispatcher.js new file mode 100644 index 0000000..3769055 --- /dev/null +++ b/frontend/src/components/filters/FiltersDispatcher.js @@ -0,0 +1,57 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import {withRouter} from "react-router-dom"; +import {Redirect} from "react-router"; +import dispatcher from "../../dispatcher"; + +class FiltersDispatcher extends Component { + + state = {}; + + componentDidMount() { + let params = new URLSearchParams(this.props.location.search); + this.setState({params}); + + dispatcher.register("connections_filters", payload => { + const params = this.state.params; + + Object.entries(payload).forEach(([key, value]) => { + if (value == null) { + params.delete(key); + } else { + params.set(key, value); + } + }); + + this.needRedirect = true; + this.setState({params}); + }); + } + + render() { + if (this.needRedirect) { + this.needRedirect = false; + return ; + } + + return null; + } +} + +export default withRouter(FiltersDispatcher); diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js index 48affb0..fc0ad4d 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.js +++ b/frontend/src/components/filters/RulesConnectionsFilter.js @@ -89,7 +89,7 @@ class RulesConnectionsFilter extends Component { return (

+ }/> }/> }/> }/> @@ -67,6 +70,8 @@ class MainPage extends Component {

+ +

); diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js new file mode 100644 index 0000000..21ba139 --- /dev/null +++ b/frontend/src/components/panels/SearchPane.js @@ -0,0 +1,293 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import './common.scss'; +import './SearchPane.scss'; +import Table from "react-bootstrap/Table"; +import InputField from "../fields/InputField"; +import TextField from "../fields/TextField"; +import backend from "../../backend"; +import ButtonField from "../fields/ButtonField"; +import LinkPopover from "../objects/LinkPopover"; +import {createCurlCommand, dateTimeToTime, durationBetween} from "../../utils"; +import dispatcher from "../../dispatcher"; +import TagField from "../fields/TagField"; +import CheckField from "../fields/CheckField"; + +const classNames = require('classnames'); +const _ = require('lodash'); + +class SearchPane extends Component { + + searchOptions = { + "text_search": { + "terms": null, + "excluded_terms": null, + "exact_phrase": "", + "case_sensitive": false + }, + "regex_search": { + "pattern": "", + "not_pattern": "", + "case_insensitive": false, + "multi_line": false, + "ignore_whitespaces": false, + "dot_character": false + }, + "timeout": 10 + }; + + state = { + searches: [], + currentSearchOptions: this.searchOptions, + }; + + componentDidMount() { + this.reset(); + this.loadSearches(); + + dispatcher.register("notifications", payload => { + if (payload.event === "searches.new") { + this.loadSearches(); + } + }); + + document.title = "caronte:~/searches$"; + } + + loadSearches = () => { + backend.get("/api/searches") + .then(res => this.setState({searches: res.json, searchesStatusCode: res.status})) + .catch(res => this.setState({searchesStatusCode: res.status, searchesResponse: JSON.stringify(res.json)})); + }; + + performSearch = () => { + const options = this.state.currentSearchOptions; + if (this.validateSearch(options)) { + backend.post("/api/searches/perform", options).then(res => { + this.reset(); + this.setState({searchStatusCode: res.status}); + this.loadSearches(); + this.viewSearch(res.json.id); + }).catch(res => { + this.setState({searchStatusCode: res.status, searchResponse: JSON.stringify(res.json)}); + }); + } + }; + + reset = () => { + this.setState({ + currentSearchOptions: _.cloneDeep(this.searchOptions), + exactPhraseError: null, + patternError: null, + notPatternError: null, + searchStatusCode: null, + searchesStatusCode: null, + searchResponse: null, + searchesResponse: null + }); + }; + + validateSearch = (options) => { + let valid = true; + if (options.text_search.exact_phrase && options.text_search.exact_phrase.length < 3) { + this.setState({exactPhraseError: "text_search.exact_phrase.length < 3"}); + valid = false; + } + if (options.regex_search.pattern && options.regex_search.pattern.length < 3) { + this.setState({patternError: "regex_search.pattern.length < 3"}); + valid = false; + } + if (options.regex_search.not_pattern && options.regex_search.not_pattern.length < 3) { + this.setState({exactPhraseError: "regex_search.not_pattern.length < 3"}); + valid = false; + } + + return valid; + }; + + updateParam = (callback) => { + callback(this.state.currentSearchOptions); + this.setState({currentSearchOptions: this.state.currentSearchOptions}); + }; + + extractPattern = (options) => { + let pattern = ""; + if (_.isEqual(options.regex_search, this.searchOptions.regex_search)) { // is text search + if (options.text_search.exact_phrase) { + pattern += `"${options.text_search.exact_phrase}"`; + } else { + pattern += options.text_search.terms.join(" "); + if (options.text_search.excluded_terms) { + pattern += " -" + options.text_search.excluded_terms.join(" -"); + } + } + options.text_search.case_sensitive && (pattern += "/s"); + } else { // is regex search + if (options.regex_search.pattern) { + pattern += "/" + options.regex_search.pattern + "/"; + } else { + pattern += "!/" + options.regex_search.not_pattern + "/"; + } + options.regex_search.case_insensitive && (pattern += "i"); + options.regex_search.multi_line && (pattern += "m"); + options.regex_search.ignore_whitespaces && (pattern += "x"); + options.regex_search.dot_character && (pattern += "s"); + } + + return pattern; + }; + + viewSearch = (searchId) => { + dispatcher.dispatch("connections_filters", {"performed_search": searchId}); + }; + + render() { + const options = this.state.currentSearchOptions; + + let searches = this.state.searches.map(s => +

+ + + + + + + + ); + + const textOptionsModified = !_.isEqual(this.searchOptions.text_search, options.text_search); + const regexOptionsModified = !_.isEqual(this.searchOptions.regex_search, options.regex_search); + + const curlCommand = createCurlCommand("/searches/perform", "POST", options); + + return ( +

+ GET /api/searches + {this.state.searchesStatusCode && + } +

+ +

{s.id.substring(0, 8)}	{this.extractPattern(s["search_options"])}	{s["affected_connections_count"]}	{dateTimeToTime(s["started_at"])}	{durationBetween(s["started_at"], s["finished_at"])}	this.viewSearch(s.id)}/>

+ + + + + + + + + + + + {searches} + +

id	pattern	occurrences	started_at	duration	actions

+ +

+ POST /api/searches/perform + +

+ +

+ + NOTE: it is recommended to use the rules for recurring themes. Give preference to textual search over that with regex. + + +

+ this.updateParam(s => s.text_search.terms = tags)}/> + this.updateParam(s => s.text_search.excluded_terms = tags)}/> + + or + + this.updateParam(s => s.text_search.exact_phrase = v)} + readonly={regexOptionsModified || (Array.isArray(options.text_search.terms) && options.text_search.terms.length > 0)}/> + + this.updateParam(s => s.text_search.case_sensitive = v)}/> +

+ +

+ or +

+ +

+ this.updateParam(s => s.regex_search.pattern = v)}/> + or + this.updateParam(s => s.regex_search.not_pattern = v)}/> + +

+ this.updateParam(s => s.regex_search.case_insensitive = v)}/> + this.updateParam(s => s.regex_search.multi_line = v)}/> + this.updateParam(s => s.regex_search.ignore_whitespaces = v)}/> + this.updateParam(s => s.regex_search.dot_character = v)}/> +

+ + +

+ +

+ + +

+ ); + } + +} + +export default SearchPane; diff --git a/frontend/src/components/panels/SearchPane.scss b/frontend/src/components/panels/SearchPane.scss new file mode 100644 index 0000000..15fc7da --- /dev/null +++ b/frontend/src/components/panels/SearchPane.scss @@ -0,0 +1,51 @@ +.search-pane { + display: flex; + flex-direction: column; + + .searches-list { + overflow: hidden; + + .section-content { + height: 100%; + } + + .section-table { + height: calc(100% - 30px); + } + } + + .search-new { + .content-row { + display: flex; + + .text-search, + .regex-search { + flex: 1; + } + + .exclusive-separator { + font-size: 0.8em; + display: block; + text-align: center; + } + + .separator { + font-size: 0.9em; + flex: 0; + margin: auto 10px; + } + } + + .notes { + font-size: 0.8em; + } + + .checkbox-line { + .check-field { + display: inline-block; + margin-top: 0; + margin-right: 10px; + } + } + } +} -- cgit v1.2.3-70-g09d2 From 09cb0a1518feb2221ccd8c10dced859c010e9991 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Mon, 12 Oct 2020 21:33:40 +0200 Subject: Add rules statistics --- connection_handler.go | 22 ++++++++++++++-------- frontend/src/components/Timeline.js | 32 +++++++++++++++++--------------- rules_manager.go | 28 ++++++++++++++++++---------- statistics_controller.go | 27 +++++++++++++++++++++------ 4 files changed, 70 insertions(+), 39 deletions(-) (limited to 'frontend/src/components') diff --git a/connection_handler.go b/connection_handler.go index 6b2b411..4e92ccf 100644 --- a/connection_handler.go +++ b/connection_handler.go @@ -256,16 +256,22 @@ func (ch *connectionHandlerImpl) UpdateStatistics(connection Connection) { } servicePort := connection.DestinationPort + updateDocument := UnorderedDocument{ + fmt.Sprintf("connections_per_service.%d", servicePort): 1, + fmt.Sprintf("client_bytes_per_service.%d", servicePort): connection.ClientBytes, + fmt.Sprintf("server_bytes_per_service.%d", servicePort): connection.ServerBytes, + fmt.Sprintf("total_bytes_per_service.%d", servicePort): connection.ClientBytes + connection.ServerBytes, + fmt.Sprintf("duration_per_service.%d", servicePort): duration.Milliseconds(), + } + + for _, ruleID := range connection.MatchedRules { + updateDocument[fmt.Sprintf("matched_rules.%s", ruleID.Hex())] = 1 + } + var results interface{} if _, err := ch.Storage().Update(Statistics).Upsert(&results). - Filter(OrderedDocument{{"_id", time.Unix(rangeStart*60, 0)}}).OneComplex(UnorderedDocument{ - "$inc": UnorderedDocument{ - fmt.Sprintf("connections_per_service.%d", servicePort): 1, - fmt.Sprintf("client_bytes_per_service.%d", servicePort): connection.ClientBytes, - fmt.Sprintf("server_bytes_per_service.%d", servicePort): connection.ServerBytes, - fmt.Sprintf("duration_per_service.%d", servicePort): duration.Milliseconds(), - }, - }); err != nil { + Filter(OrderedDocument{{"_id", time.Unix(rangeStart*60, 0)}}). + OneComplex(UnorderedDocument{"$inc": updateDocument}); err != nil { log.WithError(err).WithField("connection", connection).Error("failed to update connection statistics") } } diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index 615203f..6b8806f 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -102,23 +102,24 @@ class Timeline extends Component { ports.forEach(s => urlParams.append("ports", s)); const metrics = (await backend.get("/api/statistics?" + urlParams)).json; + if (metrics.length === 0) { + return; + } + const zeroFilledMetrics = []; const toTime = m => new Date(m["range_start"]).getTime(); - - if (metrics.length > 0) { - let i = 0; - for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) { - if (interval === toTime(metrics[i])) { - const m = metrics[i++]; - m["range_start"] = new Date(m["range_start"]); - zeroFilledMetrics.push(m); - } else { - const m = {}; - m["range_start"] = new Date(interval); - m[metric] = {}; - ports.forEach(p => m[metric][p] = 0); - zeroFilledMetrics.push(m); - } + let i = 0; + for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) { + if (interval === toTime(metrics[i])) { + const m = metrics[i++]; + m["range_start"] = new Date(m["range_start"]); + zeroFilledMetrics.push(m); + } else { + const m = {}; + m["range_start"] = new Date(interval); + m[metric] = {}; + ports.forEach(p => m[metric][p] = 0); + zeroFilledMetrics.push(m); } } @@ -127,6 +128,7 @@ class Timeline extends Component { columns: ["time"].concat(ports), points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0))) }); + const start = series.range().begin(); const end = series.range().end(); start.setTime(start.getTime() - minutes); diff --git a/rules_manager.go b/rules_manager.go index 636fc74..0e6c3d1 100644 --- a/rules_manager.go +++ b/rules_manager.go @@ -121,16 +121,24 @@ func LoadRulesManager(storage Storage, flagRegex string) (RulesManager, error) { // if there are no rules in database (e.g. first run), set flagRegex as first rule if len(rulesManager.rules) == 0 { - if _, err := rulesManager.AddRule(context.Background(), Rule{ - Name: "flag", - Color: "#E53935", - Notes: "Mark connections where the flag is stolen", - Patterns: []Pattern{ - {Regex: flagRegex, Direction: DirectionToClient}, - }, - }); err != nil { - return nil, err - } + go func() { + _, _ = rulesManager.AddRule(context.Background(), Rule{ + Name: "flag_out", + Color: "#e53935", + Notes: "Mark connections where the flags are stolen", + Patterns: []Pattern{ + {Regex: flagRegex, Direction: DirectionToClient, Flags: RegexFlags{Utf8Mode: true}}, + }, + }) + _, _ = rulesManager.AddRule(context.Background(), Rule{ + Name: "flag_in", + Color: "#43A047", + Notes: "Mark connections where the flags are placed", + Patterns: []Pattern{ + {Regex: flagRegex, Direction: DirectionToServer, Flags: RegexFlags{Utf8Mode: true}}, + }, + }) + }() } else { if err := rulesManager.generateDatabase(rules[len(rules)-1].ID); err != nil { return nil, err diff --git a/statistics_controller.go b/statistics_controller.go index 1714c0b..57c7d95 100644 --- a/statistics_controller.go +++ b/statistics_controller.go @@ -29,26 +29,29 @@ type StatisticRecord struct { ConnectionsPerService map[uint16]int `json:"connections_per_service,omitempty" bson:"connections_per_service"` ClientBytesPerService map[uint16]int `json:"client_bytes_per_service,omitempty" bson:"client_bytes_per_service"` ServerBytesPerService map[uint16]int `json:"server_bytes_per_service,omitempty" bson:"server_bytes_per_service"` + TotalBytesPerService map[uint16]int `json:"total_bytes_per_service,omitempty" bson:"total_bytes_per_service"` DurationPerService map[uint16]int64 `json:"duration_per_service,omitempty" bson:"duration_per_service"` + MatchedRules map[RowID]int64 `json:"matched_rules,omitempty" bson:"matched_rules"` } type StatisticsFilter struct { RangeFrom time.Time `form:"range_from"` RangeTo time.Time `form:"range_to"` Ports []uint16 `form:"ports"` + RulesIDs []RowID `form:"rules_ids"` Metric string `form:"metric"` } type StatisticsController struct { - storage Storage - metrics []string + storage Storage + servicesMetrics []string } func NewStatisticsController(storage Storage) StatisticsController { return StatisticsController{ storage: storage, - metrics: []string{"connections_per_service", "client_bytes_per_service", - "server_bytes_per_service", "duration_per_service"}, + servicesMetrics: []string{"connections_per_service", "client_bytes_per_service", + "server_bytes_per_service", "total_bytes_per_service", "duration_per_service"}, } } @@ -62,19 +65,31 @@ func (sc *StatisticsController) GetStatistics(context context.Context, filter St query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$gt": filter.RangeTo}}}) } for _, port := range filter.Ports { - for _, metric := range sc.metrics { + for _, metric := range sc.servicesMetrics { if filter.Metric == "" || filter.Metric == metric { query = query.Projection(OrderedDocument{{fmt.Sprintf("%s.%d", metric, port), 1}}) } } + } if filter.Metric != "" && len(filter.Ports) == 0 { - for _, metric := range sc.metrics { + for _, metric := range sc.servicesMetrics { if filter.Metric == metric { query = query.Projection(OrderedDocument{{metric, 1}}) } } } + for _, ruleID := range filter.RulesIDs { + if filter.Metric == "" || filter.Metric == "matched_rules" { + query = query.Projection(OrderedDocument{{fmt.Sprintf("matched_rules.%s", ruleID.Hex()), 1}}) + } + + } + if filter.Metric != "" && len(filter.RulesIDs) == 0 { + if filter.Metric == "matched_rules" { + query = query.Projection(OrderedDocument{{"matched_rules", 1}}) + } + } if err := query.All(&statisticRecords); err != nil { log.WithError(err).WithField("filter", filter).Error("failed to retrieve statistics") -- cgit v1.2.3-70-g09d2 From 08456e7f2e1c1af6fc8fdbf580c0178a25b93f8b Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 15 Oct 2020 08:53:09 +0200 Subject: General improvements --- frontend/public/logo128.png | Bin 0 -> 6498 bytes frontend/public/logo192.png | Bin 6498 -> 0 bytes frontend/public/manifest.json | 8 +- frontend/src/components/Header.js | 2 +- frontend/src/components/Timeline.js | 122 +++++++++++++++------ frontend/src/components/Timeline.scss | 1 + .../components/filters/BooleanConnectionsFilter.js | 64 ++++------- .../src/components/filters/ExitSearchFilter.js | 9 +- .../src/components/filters/FiltersDispatcher.js | 57 ---------- .../components/filters/RulesConnectionsFilter.js | 81 ++++++-------- .../components/filters/StringConnectionsFilter.js | 77 ++++++------- frontend/src/components/objects/Connection.js | 4 +- .../components/objects/ConnectionMatchedRules.js | 21 ++-- frontend/src/components/pages/MainPage.js | 3 - frontend/src/components/panels/ConnectionsPane.js | 122 ++++++++++++--------- frontend/src/components/panels/SearchPane.scss | 1 + frontend/src/components/panels/StreamsPane.js | 2 +- frontend/src/dispatcher.js | 6 + search_controller.go | 4 + statistics_controller.go | 19 ++-- 20 files changed, 299 insertions(+), 304 deletions(-) create mode 100644 frontend/public/logo128.png delete mode 100644 frontend/public/logo192.png delete mode 100644 frontend/src/components/filters/FiltersDispatcher.js (limited to 'frontend/src/components') diff --git a/frontend/public/logo128.png b/frontend/public/logo128.png new file mode 100644 index 0000000..1969e1d Binary files /dev/null and b/frontend/public/logo128.png differ diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png deleted file mode 100644 index 1969e1d..0000000 Binary files a/frontend/public/logo192.png and /dev/null differ diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json index 0409a59..32674ce 100644 --- a/frontend/public/manifest.json +++ b/frontend/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Caronte", - "name": "Caronte", + "short_name": "caronte", + "name": "caronte", "icons": [ { "src": "favicon.ico", @@ -8,9 +8,9 @@ "type": "image/x-icon" }, { - "src": "logo192.png", + "src": "logo128.png", "type": "image/png", - "sizes": "192x192" + "sizes": "128x128" }, { "src": "logo512.png", diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index b72b532..b4a2177 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -89,7 +89,7 @@ class Header extends Component {

- {/**/} + diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index 6b8806f..bc42a01 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -35,8 +35,12 @@ import log from "../log"; import dispatcher from "../dispatcher"; const minutes = 60 * 1000; +const _ = require('lodash'); const classNames = require('classnames'); +const leftSelectionPaddingMultiplier = 24; +const rightSelectionPaddingMultiplier = 8; + class Timeline extends Component { state = { @@ -50,25 +54,30 @@ class Timeline extends Component { this.selectionTimeout = null; } - filteredPort = () => { + additionalFilters = () => { const urlParams = new URLSearchParams(this.props.location.search); - return urlParams.get("service_port"); + if (this.state.metric === "matched_rules") { + return urlParams.getAll("matched_rules") || []; + } else { + return urlParams.get("service_port"); + } }; componentDidMount() { - const filteredPort = this.filteredPort(); - this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount")); + const additionalFilters = this.additionalFilters(); + this.setState({filters: additionalFilters}); + this.loadStatistics(this.state.metric, additionalFilters).then(() => log.debug("Statistics loaded after mount")); dispatcher.register("connection_updates", payload => { this.setState({ selection: new TimeRange(payload.from, payload.to), }); + this.adjustSelection(); }); dispatcher.register("notifications", payload => { if (payload.event === "services.edit") { - this.loadServices().then(() => log.debug("Services reloaded after notification update")); + this.loadServices().then(() => this.adjustSelection()); } }); @@ -79,27 +88,48 @@ class Timeline extends Component { } componentDidUpdate(prevProps, prevState, snapshot) { - const filteredPort = this.filteredPort(); - if (this.state.filteredPort !== filteredPort) { - this.setState({filteredPort}); - this.loadStatistics(this.state.metric, filteredPort).then(() => - log.debug("Statistics reloaded after filtered port changes")); + const additionalFilters = this.additionalFilters(); + const updateStatistics = () => { + this.setState({filters: additionalFilters}); + this.loadStatistics(this.state.metric, additionalFilters).then(() => + log.debug("Statistics reloaded after filters changes")); + }; + + if (this.state.metric === "matched_rules") { + if (!Array.isArray(this.state.filters) || + !_.isEqual(_.sortBy(additionalFilters), _.sortBy(this.state.filters))) { + updateStatistics(); + } + } else { + if (this.state.filters !== additionalFilters) { + updateStatistics(); + } } } - loadStatistics = async (metric, filteredPort) => { + loadStatistics = async (metric, filters) => { const urlParams = new URLSearchParams(); urlParams.set("metric", metric); - let services = await this.loadServices(); - if (filteredPort && services[filteredPort]) { - const service = services[filteredPort]; - services = {}; - services[filteredPort] = service; - } + let columns = []; + if (metric === "matched_rules") { + let rules = await this.loadRules(); + filters.forEach(id => { + urlParams.append("matched_rules", id); + }); + columns = rules.map(r => r.id); + } else { + let services = await this.loadServices(); + const filteredPort = filters; + if (filteredPort && services[filters]) { + const service = services[filteredPort]; + services = {}; + services[filteredPort] = service; + } - const ports = Object.keys(services); - ports.forEach(s => urlParams.append("ports", s)); + columns = Object.keys(services); + columns.forEach(port => urlParams.append("ports", port)); + } const metrics = (await backend.get("/api/statistics?" + urlParams)).json; if (metrics.length === 0) { @@ -109,8 +139,8 @@ class Timeline extends Component { const zeroFilledMetrics = []; const toTime = m => new Date(m["range_start"]).getTime(); let i = 0; - for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) { - if (interval === toTime(metrics[i])) { + for (let interval = toTime(metrics[0]) - minutes; interval <= toTime(metrics[metrics.length - 1]) + minutes; interval += minutes) { + if (i < metrics.length && interval === toTime(metrics[i])) { const m = metrics[i++]; m["range_start"] = new Date(m["range_start"]); zeroFilledMetrics.push(m); @@ -118,30 +148,31 @@ class Timeline extends Component { const m = {}; m["range_start"] = new Date(interval); m[metric] = {}; - ports.forEach(p => m[metric][p] = 0); + columns.forEach(c => m[metric][c] = 0); zeroFilledMetrics.push(m); } } const series = new TimeSeries({ name: "statistics", - columns: ["time"].concat(ports), - points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0))) + columns: ["time"].concat(columns), + points: zeroFilledMetrics.map(m => [m["range_start"]].concat(columns.map(c => + ((metric in m) && (m[metric] != null)) ? (m[metric][c] || 0) : 0 + ))) }); const start = series.range().begin(); const end = series.range().end(); - start.setTime(start.getTime() - minutes); - end.setTime(end.getTime() + minutes); this.setState({ metric, series, timeRange: new TimeRange(start, end), + columns, start, end }); - log.debug(`Loaded statistics for metric "${metric}" for services [${ports}]`); + log.debug(`Loaded statistics for metric "${metric}"`); }; loadServices = async () => { @@ -150,10 +181,22 @@ class Timeline extends Component { return services; }; + loadRules = async () => { + const rules = (await backend.get("/api/rules")).json; + this.setState({rules}); + return rules; + }; + createStyler = () => { - return styler(Object.keys(this.state.services).map(port => { - return {key: port, color: this.state.services[port].color, width: 2}; - })); + if (this.state.metric === "matched_rules") { + return styler(this.state.rules.map(rule => { + return {key: rule.id, color: rule.color, width: 2}; + })); + } else { + return styler(Object.keys(this.state.services).map(port => { + return {key: port, color: this.state.services[port].color, width: 2}; + })); + } }; handleTimeRangeChange = (timeRange) => { @@ -179,6 +222,15 @@ class Timeline extends Component { }, 1000); }; + adjustSelection = () => { + const seriesRange = this.state.series.range(); + const selection = this.state.selection; + const delta = selection.end() - selection.begin(); + const start = Math.max(selection.begin().getTime() - delta * leftSelectionPaddingMultiplier, seriesRange.begin().getTime()); + const end = Math.min(selection.end().getTime() + delta * rightSelectionPaddingMultiplier, seriesRange.end().getTime()); + this.setState({timeRange: new TimeRange(start, end)}); + }; + aggregateSeries = (func) => { const values = this.state.series.columns().map(c => this.state.series[func](c)); return Math[func](...values); @@ -207,7 +259,7 @@ class Timeline extends Component { max={this.aggregateSeries("max")} width="35" type="linear" transition={300}/> this.loadStatistics(metric, this.state.filteredPort) + "server_bytes_per_service", "duration_per_service", "matched_rules"]} + onChange={(metric) => this.loadStatistics(metric, this.state.filters) .then(() => log.debug("Statistics loaded after metric changes"))} value={this.state.metric}/>

diff --git a/frontend/src/components/Timeline.scss b/frontend/src/components/Timeline.scss index db8d9c8..262da1e 100644 --- a/frontend/src/components/Timeline.scss +++ b/frontend/src/components/Timeline.scss @@ -12,6 +12,7 @@ position: absolute; top: 5px; right: 10px; + width: 180px; } &.pulse-timeline { diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js index a9a420e..c611a0d 100644 --- a/frontend/src/components/filters/BooleanConnectionsFilter.js +++ b/frontend/src/components/filters/BooleanConnectionsFilter.js @@ -17,65 +17,49 @@ import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; -import {Redirect} from "react-router"; import CheckField from "../fields/CheckField"; +import dispatcher from "../../dispatcher"; class BooleanConnectionsFilter extends Component { - constructor(props) { - super(props); - this.state = { - filterActive: "false" - }; - - this.filterChanged = this.filterChanged.bind(this); - this.needRedirect = false; - } + state = { + filterActive: "false" + }; componentDidMount() { let params = new URLSearchParams(this.props.location.search); this.setState({filterActive: this.toBoolean(params.get(this.props.filterName)).toString()}); + + this.connectionsFiltersCallback = payload => { + const name = this.props.filterName; + if (name in payload && this.state.filterActive !== payload[name]) { + this.setState({filterActive: payload[name]}); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); } - componentDidUpdate(prevProps, prevState, snapshot) { - let urlParams = new URLSearchParams(this.props.location.search); - let externalActive = this.toBoolean(urlParams.get(this.props.filterName)); - let filterActive = this.toBoolean(this.state.filterActive); - // if the filterActive state is changed by another component (and not by filterChanged func) and - // the query string is not equals at the filterActive state, update the state of the component - if (this.toBoolean(prevState.filterActive) === filterActive && filterActive !== externalActive) { - this.setState({filterActive: externalActive.toString()}); - } + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); } - toBoolean(value) { + toBoolean = (value) => { return value !== null && value.toLowerCase() === "true"; - } + }; - filterChanged() { - this.needRedirect = true; - this.setState({filterActive: (!this.toBoolean(this.state.filterActive)).toString()}); - } + filterChanged = () => { + const newValue = (!this.toBoolean(this.state.filterActive)).toString(); + const urlParams = {}; + urlParams[this.props.filterName] = newValue === "true" ? "true" : null; + dispatcher.dispatch("connections_filters", urlParams); + this.setState({filterActive: newValue}); + }; render() { - let redirect = null; - if (this.needRedirect) { - let urlParams = new URLSearchParams(this.props.location.search); - if (this.toBoolean(this.state.filterActive)) { - urlParams.set(this.props.filterName, "true"); - } else { - urlParams.delete(this.props.filterName); - } - redirect = ; - - this.needRedirect = false; - } - return (

- {redirect} + onChange={this.filterChanged}/>

); } diff --git a/frontend/src/components/filters/ExitSearchFilter.js b/frontend/src/components/filters/ExitSearchFilter.js index cfee298..68ca686 100644 --- a/frontend/src/components/filters/ExitSearchFilter.js +++ b/frontend/src/components/filters/ExitSearchFilter.js @@ -28,11 +28,16 @@ class ExitSearchFilter extends Component { let params = new URLSearchParams(this.props.location.search); this.setState({performedSearch: params.get("performed_search")}); - dispatcher.register("connections_filters", payload => { + this.connectionsFiltersCallback = payload => { if (this.state.performedSearch !== payload["performed_search"]) { this.setState({performedSearch: payload["performed_search"]}); } - }); + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); + } + + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); } render() { diff --git a/frontend/src/components/filters/FiltersDispatcher.js b/frontend/src/components/filters/FiltersDispatcher.js deleted file mode 100644 index 3769055..0000000 --- a/frontend/src/components/filters/FiltersDispatcher.js +++ /dev/null @@ -1,57 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import React, {Component} from 'react'; -import {withRouter} from "react-router-dom"; -import {Redirect} from "react-router"; -import dispatcher from "../../dispatcher"; - -class FiltersDispatcher extends Component { - - state = {}; - - componentDidMount() { - let params = new URLSearchParams(this.props.location.search); - this.setState({params}); - - dispatcher.register("connections_filters", payload => { - const params = this.state.params; - - Object.entries(payload).forEach(([key, value]) => { - if (value == null) { - params.delete(key); - } else { - params.set(key, value); - } - }); - - this.needRedirect = true; - this.setState({params}); - }); - } - - render() { - if (this.needRedirect) { - this.needRedirect = false; - return ; - } - - return null; - } -} - -export default withRouter(FiltersDispatcher); diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js index fc0ad4d..4c993dc 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.js +++ b/frontend/src/components/filters/RulesConnectionsFilter.js @@ -17,87 +17,74 @@ import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; -import {Redirect} from "react-router"; import './RulesConnectionsFilter.scss'; import ReactTags from 'react-tag-autocomplete'; import backend from "../../backend"; +import dispatcher from "../../dispatcher"; const classNames = require('classnames'); +const _ = require('lodash'); class RulesConnectionsFilter extends Component { - constructor(props) { - super(props); - this.state = { - mounted: false, - rules: [], - activeRules: [] - }; - - this.needRedirect = false; - } + state = { + rules: [], + activeRules: [] + }; componentDidMount() { - let params = new URLSearchParams(this.props.location.search); + const params = new URLSearchParams(this.props.location.search); let activeRules = params.getAll("matched_rules") || []; backend.get("/api/rules").then(res => { let rules = res.json.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []); activeRules = rules.filter(rule => activeRules.some(id => rule.id === id)); - this.setState({rules, activeRules, mounted: true}); + this.setState({rules, activeRules}); }); + + this.connectionsFiltersCallback = payload => { + if ("matched_rules" in payload && !_.isEqual(payload["matched_rules"].sort(), this.state.activeRules.sort())) { + const newRules = this.state.rules.filter(r => payload["matched_rules"].includes(r.id)); + this.setState({ + activeRules: newRules.map(r => { + return {id: r.id, name: r.name}; + }) + }); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); } - componentDidUpdate(prevProps, prevState, snapshot) { - let urlParams = new URLSearchParams(this.props.location.search); - let externalRules = urlParams.getAll("matched_rules") || []; - let activeRules = this.state.activeRules.map(r => r.id); - let compareRules = (first, second) => first.sort().join(",") === second.sort().join(","); - if (this.state.mounted && - compareRules(prevState.activeRules.map(r => r.id), activeRules) && - !compareRules(externalRules, activeRules)) { - this.setState({activeRules: externalRules.map(id => this.state.rules.find(r => r.id === id))}); - } + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); } - onDelete(i) { - const activeRules = this.state.activeRules.slice(0); + onDelete = (i) => { + const activeRules = _.clone(this.state.activeRules); activeRules.splice(i, 1); - this.needRedirect = true; - this.setState({ activeRules }); - } + this.setState({activeRules}); + dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)}); + }; - onAddition(rule) { + onAddition = (rule) => { if (!this.state.activeRules.includes(rule)) { const activeRules = [].concat(this.state.activeRules, rule); - this.needRedirect = true; this.setState({activeRules}); + dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)}); } - } + }; render() { - let redirect = null; - - if (this.needRedirect) { - let urlParams = new URLSearchParams(this.props.location.search); - urlParams.delete("matched_rules"); - this.state.activeRules.forEach(rule => urlParams.append("matched_rules", rule.id)); - redirect = ; - - this.needRedirect = false; - } - return ( -

- suggestion.name.startsWith(query) && !this.state.activeRules.includes(suggestion)} /> + suggestion.name.startsWith(query) && !this.state.activeRules.includes(suggestion)}/>

- - {redirect}

); } diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js index a3b45dc..c833220 100644 --- a/frontend/src/components/filters/StringConnectionsFilter.js +++ b/frontend/src/components/filters/StringConnectionsFilter.js @@ -17,37 +17,36 @@ import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; -import {Redirect} from "react-router"; import InputField from "../fields/InputField"; +import dispatcher from "../../dispatcher"; class StringConnectionsFilter extends Component { - constructor(props) { - super(props); - this.state = { - fieldValue: "", - filterValue: null, - timeoutHandle: null, - invalidValue: false - }; - this.needRedirect = false; - this.filterChanged = this.filterChanged.bind(this); - } + state = { + fieldValue: "", + filterValue: null, + timeoutHandle: null, + invalidValue: false + }; componentDidMount() { let params = new URLSearchParams(this.props.location.search); this.updateStateFromFilterValue(params.get(this.props.filterName)); + + this.connectionsFiltersCallback = payload => { + const name = this.props.filterName; + if (name in payload && this.state.filterValue !== payload[name]) { + this.updateStateFromFilterValue(payload[name]); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); } - componentDidUpdate(prevProps, prevState, snapshot) { - let urlParams = new URLSearchParams(this.props.location.search); - let filterValue = urlParams.get(this.props.filterName); - if (prevState.filterValue === this.state.filterValue && this.state.filterValue !== filterValue) { - this.updateStateFromFilterValue(filterValue); - } + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); } - updateStateFromFilterValue(filterValue) { + updateStateFromFilterValue = (filterValue) => { if (filterValue !== null) { let fieldValue = filterValue; if (typeof this.props.decodeFunc === "function") { @@ -70,15 +69,21 @@ class StringConnectionsFilter extends Component { } else { this.setState({fieldValue: "", filterValue: null}); } - } + }; - isValueValid(value) { + isValueValid = (value) => { return typeof this.props.validateFunc !== "function" || (typeof this.props.validateFunc === "function" && this.props.validateFunc(value)); - } + }; - filterChanged(fieldValue) { - if (this.state.timeoutHandle !== null) { + changeFilterValue = (value) => { + const urlParams = {}; + urlParams[this.props.filterName] = value; + dispatcher.dispatch("connections_filters", urlParams); + }; + + filterChanged = (fieldValue) => { + if (this.state.timeoutHandle) { clearTimeout(this.state.timeoutHandle); } @@ -87,11 +92,12 @@ class StringConnectionsFilter extends Component { } if (fieldValue === "") { - this.needRedirect = true; this.setState({fieldValue: "", filterValue: null, invalidValue: false}); - return; + return this.changeFilterValue(null); } + + if (this.isValueValid(fieldValue)) { let filterValue = fieldValue; if (filterValue !== "" && typeof this.props.encodeFunc === "function") { @@ -101,40 +107,27 @@ class StringConnectionsFilter extends Component { this.setState({ fieldValue: fieldValue, timeoutHandle: setTimeout(() => { - this.needRedirect = true; this.setState({filterValue: filterValue}); + this.changeFilterValue(filterValue); }, 500), invalidValue: false }); } else { - this.needRedirect = true; this.setState({ fieldValue: fieldValue, invalidValue: true }); } - } + }; render() { - let redirect = null; - if (this.needRedirect) { - let urlParams = new URLSearchParams(this.props.location.search); - if (this.state.filterValue !== null) { - urlParams.set(this.props.filterName, this.state.filterValue); - } else { - urlParams.delete(this.props.filterName); - } - redirect = ; - this.needRedirect = false; - } let active = this.state.filterValue !== null; return (

- {redirect} + value={this.state.fieldValue} inline={true} small={true}/>

); } diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js index e0e942a..96f2235 100644 --- a/frontend/src/components/objects/Connection.js +++ b/frontend/src/components/objects/Connection.js @@ -23,6 +23,7 @@ import {dateTimeToTime, durationBetween, formatSize} from "../../utils"; import ButtonField from "../fields/ButtonField"; import LinkPopover from "./LinkPopover"; import TextField from "../fields/TextField"; +import dispatcher from "../../dispatcher"; const classNames = require('classnames'); @@ -99,7 +100,8 @@ class Connection extends Component { this.props.addServicePortFilter(conn["port_dst"])}/> + onClick={() => dispatcher.dispatch("connections_filters", + {"service_port": conn["port_dst"].toString()})}/> {conn["ip_src"]} diff --git a/frontend/src/components/objects/ConnectionMatchedRules.js b/frontend/src/components/objects/ConnectionMatchedRules.js index 73d5c5d..92bde49 100644 --- a/frontend/src/components/objects/ConnectionMatchedRules.js +++ b/frontend/src/components/objects/ConnectionMatchedRules.js @@ -18,20 +18,25 @@ import React, {Component} from 'react'; import './ConnectionMatchedRules.scss'; import ButtonField from "../fields/ButtonField"; +import dispatcher from "../../dispatcher"; +import {withRouter} from "react-router-dom"; class ConnectionMatchedRules extends Component { - constructor(props) { - super(props); - this.state = { - }; - } + onMatchedRulesSelected = (id) => { + const params = new URLSearchParams(this.props.location.search); + const rules = params.getAll("matched_rules"); + if (!rules.includes(id)) { + rules.push(id); + dispatcher.dispatch("connections_filters",{"matched_rules": rules}); + } + }; render() { const matchedRules = this.props.matchedRules.map(mr => { const rule = this.props.rules.find(r => r.id === mr); - return this.props.addMatchedRulesFilter(rule.id)} name={rule.name} - color={rule.color} small />; + return this.onMatchedRulesSelected(rule.id)} name={rule.name} + color={rule.color} small/>; }); return ( @@ -43,4 +48,4 @@ class ConnectionMatchedRules extends Component { } } -export default ConnectionMatchedRules; +export default withRouter(ConnectionMatchedRules); diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js index da57e1a..0b06f55 100644 --- a/frontend/src/components/pages/MainPage.js +++ b/frontend/src/components/pages/MainPage.js @@ -29,7 +29,6 @@ import Header from "../Header"; import Filters from "../dialogs/Filters"; import MainPane from "../panels/MainPane"; import SearchPane from "../panels/SearchPane"; -import FiltersDispatcher from "../filters/FiltersDispatcher"; class MainPage extends Component { @@ -70,8 +69,6 @@ class MainPage extends Component {

- -

); diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js index 1f79ab8..33dd7c1 100644 --- a/frontend/src/components/panels/ConnectionsPane.js +++ b/frontend/src/components/panels/ConnectionsPane.js @@ -19,13 +19,13 @@ import React, {Component} from 'react'; import './ConnectionsPane.scss'; import Connection from "../objects/Connection"; import Table from 'react-bootstrap/Table'; -import {Redirect} from 'react-router'; import {withRouter} from "react-router-dom"; import backend from "../../backend"; import ConnectionMatchedRules from "../objects/ConnectionMatchedRules"; import log from "../../log"; import ButtonField from "../fields/ButtonField"; import dispatcher from "../../dispatcher"; +import {Redirect} from "react-router"; const classNames = require('classnames'); @@ -50,60 +50,91 @@ class ConnectionsPane extends Component { } componentDidMount() { - const initialParams = {limit: this.queryLimit}; + let urlParams = new URLSearchParams(this.props.location.search); + this.setState({urlParams}); + + const additionalParams = {limit: this.queryLimit}; const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/); if (match != null) { const id = match[1]; - initialParams.from = id; + additionalParams.from = id; backend.get(`/api/connections/${id}`) - .then(res => this.connectionSelected(res.json, false)) + .then(res => this.connectionSelected(res.json)) .catch(error => log.error("Error loading initial connection", error)); } - this.loadConnections(initialParams, true).then(() => log.debug("Connections loaded")); + this.loadConnections(additionalParams, urlParams, true).then(() => log.debug("Connections loaded")); + + this.connectionsFiltersCallback = payload => { + const params = this.state.urlParams; + const initialParams = params.toString(); + + Object.entries(payload).forEach(([key, value]) => { + if (value == null) { + params.delete(key); + } else if (Array.isArray(value)) { + params.delete(key); + value.forEach(v => params.append(key, v)); + } else { + params.set(key, value); + } + }); + + if (initialParams === params.toString()) { + return; + } - dispatcher.register("timeline_updates", payload => { + log.debug("Update following url params:", payload); + this.queryStringRedirect = true; + this.setState({urlParams}); + + this.loadConnections({limit: this.queryLimit}, urlParams) + .then(() => log.info("ConnectionsPane reloaded after query string update")); + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); + + this.timelineUpdatesCallback = payload => { this.connectionsListRef.current.scrollTop = 0; this.loadConnections({ started_after: Math.round(payload.from.getTime() / 1000), started_before: Math.round(payload.to.getTime() / 1000), limit: this.maxConnections }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`)); - }); + }; + dispatcher.register("timeline_updates", this.timelineUpdatesCallback); - dispatcher.register("notifications", payload => { + this.notificationsCallback = payload => { if (payload.event === "rules.new" || payload.event === "rules.edit") { this.loadRules().then(() => log.debug("Loaded connection rules after notification update")); } - }); - - dispatcher.register("notifications", payload => { if (payload.event === "services.edit") { this.loadServices().then(() => log.debug("Services reloaded after notification update")); } - }); + }; + dispatcher.register("notifications", this.notificationsCallback); - dispatcher.register("pulse_connections_view", payload => { + this.pulseConnectionsViewCallback = payload => { this.setState({pulseConnectionsView: true}); setTimeout(() => this.setState({pulseConnectionsView: false}), payload.duration); - }); + }; + dispatcher.register("pulse_connections_view", this.pulseConnectionsViewCallback); + } + + componentWillUnmount() { + dispatcher.unregister(this.timelineUpdatesCallback); + dispatcher.unregister(this.notificationsCallback); + dispatcher.unregister(this.pulseConnectionsViewCallback); + dispatcher.unregister(this.connectionsFiltersCallback); } - connectionSelected = (c, doRedirect = true) => { - this.doSelectedConnectionRedirect = doRedirect; + connectionSelected = (c) => { + this.connectionSelectedRedirect = true; this.setState({selected: c.id}); this.props.onSelected(c); log.debug(`Connection ${c.id} selected`); }; - componentDidUpdate(prevProps, prevState, snapshot) { - if (prevProps.location.search !== this.props.location.search) { - this.loadConnections({limit: this.queryLimit}) - .then(() => log.info("ConnectionsPane reloaded after query string update")); - } - } - handleScroll = (e) => { if (this.disableScrollHandler) { this.lastScrollPosition = e.currentTarget.scrollTop; @@ -135,27 +166,12 @@ class ConnectionsPane extends Component { this.lastScrollPosition = e.currentTarget.scrollTop; }; - addServicePortFilter = (port) => { - const urlParams = new URLSearchParams(this.props.location.search); - urlParams.set("service_port", port); - this.doQueryStringRedirect = true; - this.setState({queryString: urlParams}); - }; - - addMatchedRulesFilter = (matchedRule) => { - const urlParams = new URLSearchParams(this.props.location.search); - const oldMatchedRules = urlParams.getAll("matched_rules") || []; - - if (!oldMatchedRules.includes(matchedRule)) { - urlParams.append("matched_rules", matchedRule); - this.doQueryStringRedirect = true; - this.setState({queryString: urlParams}); + async loadConnections(additionalParams, initialParams = null, isInitial = false) { + if (!initialParams) { + initialParams = this.state.urlParams; } - }; - - async loadConnections(params, isInitial = false) { - const urlParams = new URLSearchParams(this.props.location.search); - for (const [name, value] of Object.entries(params)) { + const urlParams = new URLSearchParams(initialParams.toString()); + for (const [name, value] of Object.entries(additionalParams)) { urlParams.set(name, value); } @@ -173,7 +189,7 @@ class ConnectionsPane extends Component { let firstConnection = this.state.firstConnection; let lastConnection = this.state.lastConnection; - if (params !== undefined && params.from !== undefined && params.to === undefined) { + if (additionalParams !== undefined && additionalParams.from !== undefined && additionalParams.to === undefined) { if (res.length > 0) { if (!isInitial) { res = res.slice(1); @@ -189,7 +205,7 @@ class ConnectionsPane extends Component { firstConnection = connections[0]; } } - } else if (params !== undefined && params.to !== undefined && params.from === undefined) { + } else if (additionalParams !== undefined && additionalParams.to !== undefined && additionalParams.from === undefined) { if (res.length > 0) { connections = res.slice(0, res.length - 1).concat(this.state.connections); firstConnection = connections[0]; @@ -235,12 +251,12 @@ class ConnectionsPane extends Component { render() { let redirect; - if (this.doSelectedConnectionRedirect) { - redirect = ; - this.doSelectedConnectionRedirect = false; - } else if (this.doQueryStringRedirect) { - redirect = ; - this.doQueryStringRedirect = false; + if (this.connectionSelectedRedirect) { + redirect = ; + this.connectionSelectedRedirect = false; + } else if (this.queryStringRedirect) { + redirect = ; + this.queryStringRedirect = false; } let loading = null; @@ -288,12 +304,10 @@ class ConnectionsPane extends Component { selected={this.state.selected === c.id} onMarked={marked => c.marked = marked} onEnabled={enabled => c.hidden = !enabled} - addServicePortFilter={this.addServicePortFilter} services={this.state.services}/>, c.matched_rules.length > 0 && + rules={this.state.rules}/> ]; }) } diff --git a/frontend/src/components/panels/SearchPane.scss b/frontend/src/components/panels/SearchPane.scss index 15fc7da..63e11fb 100644 --- a/frontend/src/components/panels/SearchPane.scss +++ b/frontend/src/components/panels/SearchPane.scss @@ -4,6 +4,7 @@ .searches-list { overflow: hidden; + flex: 2 1; .section-content { height: 100%; diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js index bd1964e..1aa5c53 100644 --- a/frontend/src/components/panels/StreamsPane.js +++ b/frontend/src/components/panels/StreamsPane.js @@ -107,7 +107,7 @@ class StreamsPane extends Component { const json = JSON.parse(m.body); body = ; } catch (e) { - console.log(e); + log.error(e); } } diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js index 943f7ec..fa08d48 100644 --- a/frontend/src/dispatcher.js +++ b/frontend/src/dispatcher.js @@ -15,6 +15,8 @@ * along with this program. If not, see . */ +const _ = require('lodash'); + class Dispatcher { constructor() { @@ -44,6 +46,10 @@ class Dispatcher { } }; + unregister = (callback) => { + this.listeners = _.without(callback); + }; + } const dispatcher = new Dispatcher(); diff --git a/search_controller.go b/search_controller.go index 723cd93..5ed762a 100644 --- a/search_controller.go +++ b/search_controller.go @@ -76,6 +76,10 @@ func NewSearchController(storage Storage) *SearchController { log.WithError(err).Panic("failed to retrieve performed searches") } + if searches == nil { + searches = []PerformedSearch{} + } + return &SearchController{ storage: storage, performedSearches: searches, diff --git a/statistics_controller.go b/statistics_controller.go index 57c7d95..fda7494 100644 --- a/statistics_controller.go +++ b/statistics_controller.go @@ -26,19 +26,19 @@ import ( type StatisticRecord struct { RangeStart time.Time `json:"range_start" bson:"_id"` - ConnectionsPerService map[uint16]int `json:"connections_per_service,omitempty" bson:"connections_per_service"` - ClientBytesPerService map[uint16]int `json:"client_bytes_per_service,omitempty" bson:"client_bytes_per_service"` - ServerBytesPerService map[uint16]int `json:"server_bytes_per_service,omitempty" bson:"server_bytes_per_service"` - TotalBytesPerService map[uint16]int `json:"total_bytes_per_service,omitempty" bson:"total_bytes_per_service"` - DurationPerService map[uint16]int64 `json:"duration_per_service,omitempty" bson:"duration_per_service"` - MatchedRules map[RowID]int64 `json:"matched_rules,omitempty" bson:"matched_rules"` + ConnectionsPerService map[uint16]int `json:"connections_per_service" bson:"connections_per_service"` + ClientBytesPerService map[uint16]int `json:"client_bytes_per_service" bson:"client_bytes_per_service"` + ServerBytesPerService map[uint16]int `json:"server_bytes_per_service" bson:"server_bytes_per_service"` + TotalBytesPerService map[uint16]int `json:"total_bytes_per_service" bson:"total_bytes_per_service"` + DurationPerService map[uint16]int64 `json:"duration_per_service" bson:"duration_per_service"` + MatchedRules map[string]int64 `json:"matched_rules" bson:"matched_rules"` } type StatisticsFilter struct { RangeFrom time.Time `form:"range_from"` RangeTo time.Time `form:"range_to"` Ports []uint16 `form:"ports"` - RulesIDs []RowID `form:"rules_ids"` + RulesIDs []string `form:"rules_ids"` Metric string `form:"metric"` } @@ -57,7 +57,7 @@ func NewStatisticsController(storage Storage) StatisticsController { func (sc *StatisticsController) GetStatistics(context context.Context, filter StatisticsFilter) []StatisticRecord { var statisticRecords []StatisticRecord - query := sc.storage.Find(Statistics).Context(context) + query := sc.storage.Find(Statistics).Context(context).Sort("_id", true) if !filter.RangeFrom.IsZero() { query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$lt": filter.RangeFrom}}}) } @@ -81,7 +81,7 @@ func (sc *StatisticsController) GetStatistics(context context.Context, filter St } for _, ruleID := range filter.RulesIDs { if filter.Metric == "" || filter.Metric == "matched_rules" { - query = query.Projection(OrderedDocument{{fmt.Sprintf("matched_rules.%s", ruleID.Hex()), 1}}) + query = query.Projection(OrderedDocument{{fmt.Sprintf("matched_rules.%s", ruleID), 1}}) } } @@ -91,6 +91,7 @@ func (sc *StatisticsController) GetStatistics(context context.Context, filter St } } + log.Println(query) if err := query.All(&statisticRecords); err != nil { log.WithError(err).WithField("filter", filter).Error("failed to retrieve statistics") return []StatisticRecord{} -- cgit v1.2.3-70-g09d2 From 97b0ee38fcf1e78e66dfe2a2816c95c3c3b10705 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 15 Oct 2020 09:54:25 +0200 Subject: Update filters --- frontend/.eslintrc.js | 216 --------------------- frontend/src/components/Header.js | 47 ++--- frontend/src/components/Header.scss | 9 +- frontend/src/components/dialogs/Filters.js | 108 ++++------- frontend/src/components/dialogs/Filters.scss | 5 + frontend/src/components/fields/ButtonField.js | 3 +- frontend/src/components/fields/ButtonField.scss | 7 + frontend/src/components/filters/AdvancedFilters.js | 54 ++++++ .../components/filters/BooleanConnectionsFilter.js | 2 +- .../src/components/filters/FiltersDefinitions.js | 73 ------- .../components/filters/StringConnectionsFilter.js | 2 +- frontend/src/components/panels/ConnectionsPane.js | 22 +-- frontend/src/dispatcher.js | 2 +- frontend/src/index.js | 6 +- frontend/src/utils.js | 16 ++ 15 files changed, 158 insertions(+), 414 deletions(-) delete mode 100644 frontend/.eslintrc.js create mode 100644 frontend/src/components/dialogs/Filters.scss create mode 100644 frontend/src/components/filters/AdvancedFilters.js delete mode 100644 frontend/src/components/filters/FiltersDefinitions.js (limited to 'frontend/src/components') diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index 16ff228..0000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,216 +0,0 @@ -const OFF = 0, WARN = 1, ERROR = 2; - -module.exports = exports = { - "env": { - "es6": true - }, - - "ecmaFeatures": { - // env=es6 doesn't include modules, which we are using - "modules": true - }, - - "extends": "eslint:recommended", - - "rules": { - // Possible Errors (overrides from recommended set) - "no-extra-parens": ERROR, - "no-unexpected-multiline": ERROR, - // All JSDoc comments must be valid - "valid-jsdoc": [ ERROR, { - "requireReturn": false, - "requireReturnDescription": false, - "requireParamDescription": true, - "prefer": { - "return": "returns" - } - }], - - // Best Practices - - // Allowed a getter without setter, but all setters require getters - "accessor-pairs": [ ERROR, { - "getWithoutSet": false, - "setWithoutGet": true - }], - "block-scoped-var": WARN, - "consistent-return": ERROR, - "curly": ERROR, - "default-case": WARN, - // the dot goes with the property when doing multiline - "dot-location": [ WARN, "property" ], - "dot-notation": WARN, - "eqeqeq": [ ERROR, "smart" ], - "guard-for-in": WARN, - "no-alert": ERROR, - "no-caller": ERROR, - "no-case-declarations": WARN, - "no-div-regex": WARN, - "no-else-return": WARN, - "no-empty-label": WARN, - "no-empty-pattern": WARN, - "no-eq-null": WARN, - "no-eval": ERROR, - "no-extend-native": ERROR, - "no-extra-bind": WARN, - "no-floating-decimal": WARN, - "no-implicit-coercion": [ WARN, { - "boolean": true, - "number": true, - "string": true - }], - "no-implied-eval": ERROR, - "no-invalid-this": ERROR, - "no-iterator": ERROR, - "no-labels": WARN, - "no-lone-blocks": WARN, - "no-loop-func": ERROR, - "no-magic-numbers": WARN, - "no-multi-spaces": ERROR, - "no-multi-str": WARN, - "no-native-reassign": ERROR, - "no-new-func": ERROR, - "no-new-wrappers": ERROR, - "no-new": ERROR, - "no-octal-escape": ERROR, - "no-param-reassign": ERROR, - "no-process-env": WARN, - "no-proto": ERROR, - "no-redeclare": ERROR, - "no-return-assign": ERROR, - "no-script-url": ERROR, - "no-self-compare": ERROR, - "no-throw-literal": ERROR, - "no-unused-expressions": ERROR, - "no-useless-call": ERROR, - "no-useless-concat": ERROR, - "no-void": WARN, - // Produce warnings when something is commented as TODO or FIXME - "no-warning-comments": [ WARN, { - "terms": [ "TODO", "FIXME" ], - "location": "start" - }], - "no-with": WARN, - "radix": WARN, - "vars-on-top": ERROR, - // Enforces the style of wrapped functions - "wrap-iife": [ ERROR, "outside" ], - "yoda": ERROR, - - // Strict Mode - for ES6, never use strict. - "strict": [ ERROR, "never" ], - - // Variables - "init-declarations": [ ERROR, "always" ], - "no-catch-shadow": WARN, - "no-delete-var": ERROR, - "no-label-var": ERROR, - "no-shadow-restricted-names": ERROR, - "no-shadow": WARN, - // We require all vars to be initialized (see init-declarations) - // If we NEED a var to be initialized to undefined, it needs to be explicit - "no-undef-init": OFF, - "no-undef": ERROR, - "no-undefined": OFF, - "no-unused-vars": WARN, - // Disallow hoisting - let & const don't allow hoisting anyhow - "no-use-before-define": ERROR, - - // Node.js and CommonJS - "callback-return": [ WARN, [ "callback", "next" ]], - "global-require": ERROR, - "handle-callback-err": WARN, - "no-mixed-requires": WARN, - "no-new-require": ERROR, - // Use path.concat instead - "no-path-concat": ERROR, - "no-process-exit": ERROR, - "no-restricted-modules": OFF, - "no-sync": WARN, - - // ECMAScript 6 support - "arrow-body-style": [ ERROR, "always" ], - "arrow-parens": [ ERROR, "always" ], - "arrow-spacing": [ ERROR, { "before": true, "after": true }], - "constructor-super": ERROR, - "generator-star-spacing": [ ERROR, "before" ], - "no-arrow-condition": ERROR, - "no-class-assign": ERROR, - "no-const-assign": ERROR, - "no-dupe-class-members": ERROR, - "no-this-before-super": ERROR, - "no-var": WARN, - "object-shorthand": [ WARN, "never" ], - "prefer-arrow-callback": WARN, - "prefer-spread": WARN, - "prefer-template": WARN, - "require-yield": ERROR, - - // Stylistic - everything here is a warning because of style. - "array-bracket-spacing": [ WARN, "always" ], - "block-spacing": [ WARN, "always" ], - "brace-style": [ WARN, "1tbs", { "allowSingleLine": false } ], - "camelcase": WARN, - "comma-spacing": [ WARN, { "before": false, "after": true } ], - "comma-style": [ WARN, "last" ], - "computed-property-spacing": [ WARN, "never" ], - "consistent-this": [ WARN, "self" ], - "eol-last": WARN, - "func-names": WARN, - "func-style": [ WARN, "declaration" ], - "id-length": [ WARN, { "min": 2, "max": 32 } ], - "indent": [ WARN, 4 ], - "jsx-quotes": [ WARN, "prefer-double" ], - "linebreak-style": [ WARN, "unix" ], - "lines-around-comment": [ WARN, { "beforeBlockComment": true } ], - "max-depth": [ WARN, 8 ], - "max-len": [ WARN, 132 ], - "max-nested-callbacks": [ WARN, 8 ], - "max-params": [ WARN, 8 ], - "new-cap": WARN, - "new-parens": WARN, - "no-array-constructor": WARN, - "no-bitwise": OFF, - "no-continue": OFF, - "no-inline-comments": OFF, - "no-lonely-if": WARN, - "no-mixed-spaces-and-tabs": WARN, - "no-multiple-empty-lines": WARN, - "no-negated-condition": OFF, - "no-nested-ternary": WARN, - "no-new-object": WARN, - "no-plusplus": OFF, - "no-spaced-func": WARN, - "no-ternary": OFF, - "no-trailing-spaces": WARN, - "no-underscore-dangle": WARN, - "no-unneeded-ternary": WARN, - "object-curly-spacing": [ WARN, "always" ], - "one-var": OFF, - "operator-assignment": [ WARN, "never" ], - "operator-linebreak": [ WARN, "after" ], - "padded-blocks": [ WARN, "never" ], - "quote-props": [ WARN, "consistent-as-needed" ], - "quotes": [ WARN, "single" ], - "require-jsdoc": [ WARN, { - "require": { - "FunctionDeclaration": true, - "MethodDefinition": true, - "ClassDeclaration": false - } - }], - "semi-spacing": [ WARN, { "before": false, "after": true }], - "semi": [ ERROR, "always" ], - "sort-vars": OFF, - "space-after-keywords": [ WARN, "always" ], - "space-before-blocks": [ WARN, "always" ], - "space-before-function-paren": [ WARN, "never" ], - "space-before-keywords": [ WARN, "always" ], - "space-in-parens": [ WARN, "never" ], - "space-infix-ops": [ WARN, { "int32Hint": true } ], - "space-return-throw-case": ERROR, - "space-unary-ops": ERROR, - "spaced-comment": [ WARN, "always" ], - "wrap-regex": WARN - } -}; diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index b4a2177..119958b 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -18,21 +18,17 @@ import React, {Component} from 'react'; import Typed from 'typed.js'; import './Header.scss'; -import {filtersDefinitions, filtersNames} from "./filters/FiltersDefinitions"; import {Link, withRouter} from "react-router-dom"; import ButtonField from "./fields/ButtonField"; import ExitSearchFilter from "./filters/ExitSearchFilter"; +import {cleanNumber, validatePort} from "../utils"; +import StringConnectionsFilter from "./filters/StringConnectionsFilter"; +import RulesConnectionsFilter from "./filters/RulesConnectionsFilter"; +import BooleanConnectionsFilter from "./filters/BooleanConnectionsFilter"; +import AdvancedFilters from "./filters/AdvancedFilters"; class Header extends Component { - constructor(props) { - super(props); - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = false); - this.state = newState; - this.fetchStateFromLocalStorage = this.fetchStateFromLocalStorage.bind(this); - } - componentDidMount() { const options = { strings: ["caronte$ "], @@ -40,33 +36,13 @@ class Header extends Component { cursorChar: "❚" }; this.typed = new Typed(this.el, options); - - this.fetchStateFromLocalStorage(); - - if (typeof window !== "undefined") { - window.addEventListener("quick-filters", this.fetchStateFromLocalStorage); - } } componentWillUnmount() { this.typed.destroy(); - - if (typeof window) { - window.removeEventListener("quick-filters", this.fetchStateFromLocalStorage); - } - } - - fetchStateFromLocalStorage() { - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); - this.setState(newState); } render() { - let quickFilters = filtersNames.filter(name => this.state[`${name}_active`]) - .map(name => {filtersDefinitions[name]}) - .slice(0, 5); - return (

@@ -82,14 +58,21 @@ class Header extends Component {

- {quickFilters} - + + + + +

- diff --git a/frontend/src/components/Header.scss b/frontend/src/components/Header.scss index e2e8e1c..fff28e6 100644 --- a/frontend/src/components/Header.scss +++ b/frontend/src/components/Header.scss @@ -26,9 +26,16 @@ .filters-bar { padding: 3px 0; - .filter { + .filter, + .button-field { display: inline-block; margin-right: 10px; } + + .button-field button { + font-weight: 400; + padding: 7px 10px; + border-radius: 5px; + } } } diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js index dfd554b..d2cce4f 100644 --- a/frontend/src/components/dialogs/Filters.js +++ b/frontend/src/components/dialogs/Filters.js @@ -16,91 +16,63 @@ */ import React, {Component} from 'react'; -import {Col, Container, Modal, Row, Table} from "react-bootstrap"; -import {filtersDefinitions, filtersNames} from "../filters/FiltersDefinitions"; +import {Col, Container, Modal, Row} from "react-bootstrap"; import ButtonField from "../fields/ButtonField"; +import './Filters.scss'; +import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; +import StringConnectionsFilter from "../filters/StringConnectionsFilter"; class Filters extends Component { - constructor(props) { - super(props); - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = false); - this.state = newState; - } - - componentDidMount() { - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); - this.setState(newState); - } - - checkboxChangesHandler(filterName, event) { - this.setState({[`${filterName}_active`]: event.target.checked}); - localStorage.setItem(`filters.${filterName}`, event.target.checked); - if (typeof window !== "undefined") { - window.dispatchEvent(new Event("quick-filters")); - } - } - - generateRows(filtersNames) { - return filtersNames.map(name => - - this.checkboxChangesHandler(name, event)}/> - {filtersDefinitions[name]} - - ); - } - render() { return ( - ~/filters + ~/advanced_filters - - - - - - - - - - - - {this.generateRows(["service_port", "client_address", "min_duration", - "min_bytes"])} - -

show	filter

- - - - - - - - - - - {this.generateRows(["matched_rules", "client_port", "max_duration", - "max_bytes", "marked"])} - -

show	filter

- - - +

+ + + +

+ +

+ + + +

diff --git a/frontend/src/components/dialogs/Filters.scss b/frontend/src/components/dialogs/Filters.scss new file mode 100644 index 0000000..7d09380 --- /dev/null +++ b/frontend/src/components/dialogs/Filters.scss @@ -0,0 +1,5 @@ +.advanced-filters { + .filter { + margin: 10px; + } +} diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index 193339c..850f837 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -55,7 +55,8 @@ class ButtonField extends Component { } return ( -

diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss index 9e46b9f..99afe08 100644 --- a/frontend/src/components/fields/ButtonField.scss +++ b/frontend/src/components/fields/ButtonField.scss @@ -15,6 +15,13 @@ } } + &.field-active { + button { + color: $color-primary-1; + background-color: $color-primary-4; + } + } + .button-variant-red { color: $color-red-light; background-color: $color-red; diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js new file mode 100644 index 0000000..f5ba825 --- /dev/null +++ b/frontend/src/components/filters/AdvancedFilters.js @@ -0,0 +1,54 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import {withRouter} from "react-router-dom"; +import dispatcher from "../../dispatcher"; +import ButtonField from "../fields/ButtonField"; +import {updateParams} from "../../utils"; + +class AdvancedFilters extends Component { + + state = {}; + + componentDidMount() { + this.urlParams = new URLSearchParams(this.props.location.search); + + this.connectionsFiltersCallback = payload => { + this.urlParams = updateParams(this.urlParams, payload); + const active = ["client_address", "client_port", "min_duration", "max_duration", "min_bytes", "max_bytes"] + .some(f => this.urlParams.has(f)); + if (this.state.active !== active) { + this.setState({active: active}); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); + } + + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); + } + + render() { + return ( + + ); + } + +} + +export default withRouter(AdvancedFilters); diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js index c611a0d..9558323 100644 --- a/frontend/src/components/filters/BooleanConnectionsFilter.js +++ b/frontend/src/components/filters/BooleanConnectionsFilter.js @@ -59,7 +59,7 @@ class BooleanConnectionsFilter extends Component { return (

+ onChange={this.filterChanged} small/>

); } diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js deleted file mode 100644 index 9fb3b18..0000000 --- a/frontend/src/components/filters/FiltersDefinitions.js +++ /dev/null @@ -1,73 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; -import StringConnectionsFilter from "./StringConnectionsFilter"; -import React from "react"; -import RulesConnectionsFilter from "./RulesConnectionsFilter"; -import BooleanConnectionsFilter from "./BooleanConnectionsFilter"; - -export const filtersNames = ["service_port", "matched_rules", "client_address", "client_port", - "min_duration", "max_duration", "min_bytes", "max_bytes", "marked"]; - -export const filtersDefinitions = { - service_port: , - matched_rules: , - client_address: , - client_port: , - min_duration: , - max_duration: , - min_bytes: , - max_bytes: , - contains_string: , - marked: -}; diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js index c833220..18b3784 100644 --- a/frontend/src/components/filters/StringConnectionsFilter.js +++ b/frontend/src/components/filters/StringConnectionsFilter.js @@ -127,7 +127,7 @@ class StringConnectionsFilter extends Component {

+ value={this.state.fieldValue} inline={this.props.inline} small={this.props.small}/>

); } diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js index 33dd7c1..89859e6 100644 --- a/frontend/src/components/panels/ConnectionsPane.js +++ b/frontend/src/components/panels/ConnectionsPane.js @@ -26,6 +26,7 @@ import log from "../../log"; import ButtonField from "../fields/ButtonField"; import dispatcher from "../../dispatcher"; import {Redirect} from "react-router"; +import {updateParams} from "../../utils"; const classNames = require('classnames'); @@ -67,29 +68,16 @@ class ConnectionsPane extends Component { this.loadConnections(additionalParams, urlParams, true).then(() => log.debug("Connections loaded")); this.connectionsFiltersCallback = payload => { - const params = this.state.urlParams; - const initialParams = params.toString(); - - Object.entries(payload).forEach(([key, value]) => { - if (value == null) { - params.delete(key); - } else if (Array.isArray(value)) { - params.delete(key); - value.forEach(v => params.append(key, v)); - } else { - params.set(key, value); - } - }); - - if (initialParams === params.toString()) { + const newParams = updateParams(this.state.urlParams, payload); + if (this.state.urlParams.toString() === newParams.toString()) { return; } log.debug("Update following url params:", payload); this.queryStringRedirect = true; - this.setState({urlParams}); + this.setState({urlParams: newParams}); - this.loadConnections({limit: this.queryLimit}, urlParams) + this.loadConnections({limit: this.queryLimit}, newParams) .then(() => log.info("ConnectionsPane reloaded after query string update")); }; dispatcher.register("connections_filters", this.connectionsFiltersCallback); diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js index fa08d48..881970f 100644 --- a/frontend/src/dispatcher.js +++ b/frontend/src/dispatcher.js @@ -47,7 +47,7 @@ class Dispatcher { }; unregister = (callback) => { - this.listeners = _.without(callback); + _.remove(this.listeners, l => l.callback === callback); }; } diff --git a/frontend/src/index.js b/frontend/src/index.js index ca1273a..4bc2730 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -26,9 +26,9 @@ import notifications from "./notifications"; notifications.createWebsocket(); ReactDOM.render( - - - , + // + , + // , document.getElementById('root') ); diff --git a/frontend/src/utils.js b/frontend/src/utils.js index f333f0d..06414ac 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -146,3 +146,19 @@ export function downloadBlob(blob, fileName) { a.click(); window.URL.revokeObjectURL(url); } + +export function updateParams(urlParams, payload) { + const params = new URLSearchParams(urlParams.toString()); + Object.entries(payload).forEach(([key, value]) => { + if (value == null) { + params.delete(key); + } else if (Array.isArray(value)) { + params.delete(key); + value.forEach(v => params.append(key, v)); + } else { + params.set(key, value); + } + }); + + return params; +} -- cgit v1.2.3-70-g09d2 From c745263e1b28e4cedffa88de764f11d6379d745d Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 15 Oct 2020 13:50:37 +0200 Subject: Update rules filters --- frontend/src/components/Timeline.js | 77 ++++++------- frontend/src/components/dialogs/Filters.js | 2 +- frontend/src/components/fields/TagField.js | 29 +++-- frontend/src/components/fields/TagField.scss | 99 +++++++++++------ frontend/src/components/fields/common.scss | 1 + .../components/filters/RulesConnectionsFilter.js | 23 +--- .../components/filters/RulesConnectionsFilter.scss | 121 --------------------- frontend/src/components/objects/MessageAction.js | 2 +- frontend/src/components/panels/PcapsPane.js | 6 +- frontend/src/components/panels/SearchPane.js | 14 +-- frontend/src/components/panels/StreamsPane.js | 2 +- statistics_controller.go | 5 +- 12 files changed, 139 insertions(+), 242 deletions(-) delete mode 100644 frontend/src/components/filters/RulesConnectionsFilter.scss (limited to 'frontend/src/components') diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index bc42a01..1d88bcb 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -35,7 +35,6 @@ import log from "../log"; import dispatcher from "../dispatcher"; const minutes = 60 * 1000; -const _ = require('lodash'); const classNames = require('classnames'); const leftSelectionPaddingMultiplier = 24; @@ -54,19 +53,26 @@ class Timeline extends Component { this.selectionTimeout = null; } - additionalFilters = () => { + componentDidMount() { const urlParams = new URLSearchParams(this.props.location.search); - if (this.state.metric === "matched_rules") { - return urlParams.getAll("matched_rules") || []; - } else { - return urlParams.get("service_port"); - } - }; + this.setState({ + servicePortFilter: urlParams.get("service_port") || null, + matchedRulesFilter: urlParams.getAll("matched_rules") || null + }); - componentDidMount() { - const additionalFilters = this.additionalFilters(); - this.setState({filters: additionalFilters}); - this.loadStatistics(this.state.metric, additionalFilters).then(() => log.debug("Statistics loaded after mount")); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics loaded after mount")); + + this.connectionsFiltersCallback = payload => { + if ("service_port" in payload && this.state.servicePortFilter !== payload["service_port"]) { + this.setState({servicePortFilter: payload["service_port"]}); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after service port changed")); + } + if ("matched_rules" in payload && this.state.matchedRulesFilter !== payload["matched_rules"]) { + this.setState({matchedRulesFilter: payload["matched_rules"]}); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after matched rules changed")); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); dispatcher.register("connection_updates", payload => { this.setState({ @@ -76,8 +82,10 @@ class Timeline extends Component { }); dispatcher.register("notifications", payload => { - if (payload.event === "services.edit") { - this.loadServices().then(() => this.adjustSelection()); + if (payload.event === "services.edit" && this.state.metric !== "matched_rules") { + this.loadServices().then(() => log.debug("Statistics reloaded after services updates")); + } else if (payload.event.startsWith("rules") && this.state.metric === "matched_rules") { + this.loadServices().then(() => log.debug("Statistics reloaded after rules updates")); } }); @@ -87,41 +95,29 @@ class Timeline extends Component { }); } - componentDidUpdate(prevProps, prevState, snapshot) { - const additionalFilters = this.additionalFilters(); - const updateStatistics = () => { - this.setState({filters: additionalFilters}); - this.loadStatistics(this.state.metric, additionalFilters).then(() => - log.debug("Statistics reloaded after filters changes")); - }; - - if (this.state.metric === "matched_rules") { - if (!Array.isArray(this.state.filters) || - !_.isEqual(_.sortBy(additionalFilters), _.sortBy(this.state.filters))) { - updateStatistics(); - } - } else { - if (this.state.filters !== additionalFilters) { - updateStatistics(); - } - } + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); } - loadStatistics = async (metric, filters) => { + loadStatistics = async (metric) => { const urlParams = new URLSearchParams(); urlParams.set("metric", metric); let columns = []; if (metric === "matched_rules") { let rules = await this.loadRules(); - filters.forEach(id => { - urlParams.append("matched_rules", id); - }); - columns = rules.map(r => r.id); + if (this.state.matchedRulesFilter.length > 0) { + this.state.matchedRulesFilter.forEach(id => { + urlParams.append("rules_ids", id); + }); + columns = this.state.matchedRulesFilter; + } else { + columns = rules.map(r => r.id); + } } else { let services = await this.loadServices(); - const filteredPort = filters; - if (filteredPort && services[filters]) { + const filteredPort = this.state.servicePortFilter; + if (filteredPort && services[filteredPort]) { const service = services[filteredPort]; services = {}; services[filteredPort] = service; @@ -172,7 +168,6 @@ class Timeline extends Component { start, end }); - log.debug(`Loaded statistics for metric "${metric}"`); }; loadServices = async () => { @@ -279,7 +274,7 @@ class Timeline extends Component { "server_bytes_per_service", "duration_per_service", "matched_rules"]} values={["connections_per_service", "client_bytes_per_service", "server_bytes_per_service", "duration_per_service", "matched_rules"]} - onChange={(metric) => this.loadStatistics(metric, this.state.filters) + onChange={(metric) => this.loadStatistics(metric) .then(() => log.debug("Statistics loaded after metric changes"))} value={this.state.metric}/>

diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js index d2cce4f..a35ece2 100644 --- a/frontend/src/components/dialogs/Filters.js +++ b/frontend/src/components/dialogs/Filters.js @@ -16,7 +16,7 @@ */ import React, {Component} from 'react'; -import {Col, Container, Modal, Row} from "react-bootstrap"; +import {Modal} from "react-bootstrap"; import ButtonField from "../fields/ButtonField"; import './Filters.scss'; import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js index f1a48bd..89445b6 100644 --- a/frontend/src/components/fields/TagField.js +++ b/frontend/src/components/fields/TagField.js @@ -26,50 +26,47 @@ const _ = require('lodash'); class TagField extends Component { + state = {}; + constructor(props) { super(props); this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; } - state = { - - }; - onAddition = (tag) => { if (typeof this.props.onChange === "function") { - const tags = [].concat(this.wrappedTags(), tag); - this.props.onChange(tags.map(t => t.name), true, tag); // true == addition + this.props.onChange([].concat(this.props.tags, tag), true, tag); // true == addition } }; onDelete = (i) => { if (typeof this.props.onChange === "function") { - const tags = this.wrappedTags(); + const tags = _.clone(this.props.tags); const tag = tags[i]; tags.splice(i, 1); - this.props.onChange(tags.map(t => t.name), true, tag); // false == delete + this.props.onChange(tags, true, tag); // false == delete } }; - wrappedTags = () => this.props.tags.map(t => new Object({"name": t})); render() { const small = this.props.small || false; const name = this.props.name || null; return ( -

- { name && +

+ {name &&

{name}:

} - +

+ +

); } diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss index e77db97..737f11f 100644 --- a/frontend/src/components/fields/TagField.scss +++ b/frontend/src/components/fields/TagField.scss @@ -1,31 +1,68 @@ @import "../../colors.scss"; .tag-field { + font-size: 0.9em; + margin: 5px 0; + + .field-name { + label { + margin: 0; + } + } + + &.field-small { + font-size: 0.8em; + } + + &.field-inline { + display: flex; + + .field-name { + padding: 6px 0 6px 7px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + background-color: $color-primary-2; + } + + .field-input { + flex: 1; + + .react-tags { + padding-left: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + + &:focus-within .field-name { + background-color: $color-primary-1; + } + } + .react-tags { - font-size: 12px; position: relative; - z-index: 10; - padding: 0 6px; - cursor: text; + display: flex; border-radius: 4px; background-color: $color-primary-2; - } - .react-tags.is-focused { - border-color: #b1b1b1; + &:focus-within, + &:focus-within .react-tags__search-input { + background-color: $color-primary-1; + } } .react-tags__selected { - display: inline; + display: inline-block; + flex: 0 1; + margin: 6px 0; + white-space: nowrap; } .react-tags__selected-tag { - font-size: 11px; - display: inline-block; - margin: 0 6px 6px 0; + font-size: 0.75em; + margin: 0 3px; padding: 2px 4px; color: $color-primary-3; - border: none; border-radius: 2px; background: $color-primary-4; } @@ -39,12 +76,15 @@ .react-tags__selected-tag:hover, .react-tags__selected-tag:focus { border-color: #b1b1b1; + background-color: $color-primary-0; + + &::after { + color: $color-primary-4; + } } .react-tags__search { - display: inline-block; - max-width: 100%; - padding: 7px 10px; + flex: 1 0; } @media screen and (min-width: 30em) { @@ -54,14 +94,7 @@ } .react-tags__search-input { - font-size: inherit; - line-height: inherit; - max-width: 100%; - margin: 0; - padding: 0; color: $color-primary-4; - border: 0; - outline: none; background-color: $color-primary-2; } @@ -71,6 +104,7 @@ .react-tags__suggestions { position: absolute; + z-index: 50; top: 100%; left: 0; width: 100%; @@ -87,30 +121,33 @@ margin: 4px -1px; padding: 0; list-style: none; - color: $color-primary-1; - border-radius: 2px; - background: $color-primary-4; + border-radius: 3px; + background: $color-primary-2; } .react-tags__suggestions li { - padding: 3px 5px; - border-bottom: 1px solid #ddd; + padding: 5px 10px; } .react-tags__suggestions li mark { font-weight: 600; - text-decoration: underline; + padding: 0; + color: $color-primary-4; background: none; } .react-tags__suggestions li:hover { cursor: pointer; - color: $color-primary-4; - background: $color-primary-0; + border-radius: 3px; + background: $color-primary-1; + + mark { + color: $color-primary-4; + } } .react-tags__suggestions li.is-active { - background: #b7cfe0; + background: $color-primary-3; } .react-tags__suggestions li.is-disabled { diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss index 8fbef0d..e5dc65c 100644 --- a/frontend/src/components/fields/common.scss +++ b/frontend/src/components/fields/common.scss @@ -3,6 +3,7 @@ .field { input, textarea { + font-family: "Fira Code", monospace; width: 100%; padding: 7px 10px; color: $color-primary-4; diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js index 4c993dc..8e40d30 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.js +++ b/frontend/src/components/filters/RulesConnectionsFilter.js @@ -17,10 +17,9 @@ import React, {Component} from 'react'; import {withRouter} from "react-router-dom"; -import './RulesConnectionsFilter.scss'; -import ReactTags from 'react-tag-autocomplete'; import backend from "../../backend"; import dispatcher from "../../dispatcher"; +import TagField from "../fields/TagField"; const classNames = require('classnames'); const _ = require('lodash'); @@ -59,16 +58,8 @@ class RulesConnectionsFilter extends Component { dispatcher.unregister(this.connectionsFiltersCallback); } - onDelete = (i) => { - const activeRules = _.clone(this.state.activeRules); - activeRules.splice(i, 1); - this.setState({activeRules}); - dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)}); - }; - - onAddition = (rule) => { - if (!this.state.activeRules.includes(rule)) { - const activeRules = [].concat(this.state.activeRules, rule); + onChange = (activeRules) => { + if (!_.isEqual(activeRules.sort(), this.state.activeRules.sort())) { this.setState({activeRules}); dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)}); } @@ -79,11 +70,9 @@ class RulesConnectionsFilter extends Component {

- - suggestion.name.startsWith(query) && !this.state.activeRules.includes(suggestion)}/> +

); diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss deleted file mode 100644 index 0bb4952..0000000 --- a/frontend/src/components/filters/RulesConnectionsFilter.scss +++ /dev/null @@ -1,121 +0,0 @@ -@import "../../colors"; - -.filter-rules { - .react-tags { - font-size: 12px; - position: relative; - z-index: 10; - padding: 0 6px; - cursor: text; - border-radius: 4px; - background-color: $color-primary-2; - } - - .react-tags.is-focused { - border-color: #b1b1b1; - } - - .react-tags__selected { - display: inline; - } - - .react-tags__selected-tag { - font-size: 11px; - display: inline-block; - margin: 0 6px 6px 0; - padding: 2px 4px; - color: $color-primary-3; - border: none; - border-radius: 2px; - background: $color-primary-4; - } - - .react-tags__selected-tag::after { - margin-left: 8px; - content: "\2715"; - color: $color-primary-3; - } - - .react-tags__selected-tag:hover, - .react-tags__selected-tag:focus { - border-color: #b1b1b1; - } - - .react-tags__search { - display: inline-block; - max-width: 100%; - padding: 7px 10px; - } - - @media screen and (min-width: 30em) { - .react-tags__search { - position: relative; - } - } - - .react-tags__search-input { - font-size: inherit; - line-height: inherit; - max-width: 100%; - margin: 0; - padding: 0; - color: $color-primary-4; - border: 0; - outline: none; - background-color: $color-primary-2; - } - - .react-tags__search-input::-ms-clear { - display: none; - } - - .react-tags__suggestions { - position: absolute; - top: 100%; - left: 0; - width: 100%; - } - - @media screen and (min-width: 30em) { - .react-tags__suggestions { - width: 240px; - } - } - - .react-tags__suggestions ul { - font-size: 12px; - margin: 4px -1px; - padding: 0; - list-style: none; - color: $color-primary-1; - border-radius: 2px; - background: $color-primary-4; - } - - .react-tags__suggestions li { - padding: 3px 5px; - border-bottom: 1px solid #ddd; - } - - .react-tags__suggestions li mark { - font-weight: 600; - text-decoration: underline; - background: none; - } - - .react-tags__suggestions li:hover { - cursor: pointer; - color: $color-primary-4; - background: $color-primary-0; - } - - .react-tags__suggestions li.is-active { - background: #b7cfe0; - } - - .react-tags__suggestions li.is-disabled { - cursor: auto; - opacity: 0.5; - } - -} diff --git a/frontend/src/components/objects/MessageAction.js b/frontend/src/components/objects/MessageAction.js index 9f199b7..2b46320 100644 --- a/frontend/src/components/objects/MessageAction.js +++ b/frontend/src/components/objects/MessageAction.js @@ -43,7 +43,7 @@ class MessageAction extends Component { return ( - + {s["id"].substring(0, 8)} {dateTimeToTime(s["started_at"])} {durationBetween(s["started_at"], s["completed_at"])} @@ -166,13 +166,13 @@ class PcapsPane extends Component { }); }; - const uploadCurlCommand = createCurlCommand("pcap/upload", "POST", null, { + const uploadCurlCommand = createCurlCommand("/pcap/upload", "POST", null, { file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ? this.state.uploadSelectedFile.name : "invalid.pcap"), flush_all: this.state.uploadFlushAll }); - const fileCurlCommand = createCurlCommand("pcap/file", "POST", { + const fileCurlCommand = createCurlCommand("/pcap/file", "POST", { file: this.state.fileValue, flush_all: this.state.processFlushAll, delete_original_file: this.state.deleteOriginalFile diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js index 21ba139..1fb48ef 100644 --- a/frontend/src/components/panels/SearchPane.js +++ b/frontend/src/components/panels/SearchPane.js @@ -29,7 +29,6 @@ import dispatcher from "../../dispatcher"; import TagField from "../fields/TagField"; import CheckField from "../fields/CheckField"; -const classNames = require('classnames'); const _ = require('lodash'); class SearchPane extends Component { @@ -161,7 +160,7 @@ class SearchPane extends Component { const options = this.state.currentSearchOptions; let searches = this.state.searches.map(s => - + {s.id.substring(0, 8)} {this.extractPattern(s["search_options"])} {s["affected_connections_count"]} @@ -223,13 +222,14 @@ class SearchPane extends Component {

- {return {name: t};})} + name="terms" min={3} inline allowNew={true} readonly={regexOptionsModified || options.text_search.exact_phrase} - onChange={(tags) => this.updateParam(s => s.text_search.terms = tags)}/> - this.updateParam(s => s.text_search.terms = tags.map(t => t.name))}/> + {return {name: t};})} + name="excluded_terms" min={3} inline allowNew={true} readonly={regexOptionsModified || options.text_search.exact_phrase} - onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags)}/> + onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags.map(t => t.name))}/> or diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js index 1aa5c53..be39777 100644 --- a/frontend/src/components/panels/StreamsPane.js +++ b/frontend/src/components/panels/StreamsPane.js @@ -65,7 +65,7 @@ class StreamsPane extends Component { } loadStream = (connectionId) => { - this.setState({messages: []}); + this.setState({messages: [], currentId: connectionId}); backend.get(`/api/streams/${connectionId}?format=${this.state.format}`) .then(res => this.setState({messages: res.json})); }; diff --git a/statistics_controller.go b/statistics_controller.go index fda7494..29f3fec 100644 --- a/statistics_controller.go +++ b/statistics_controller.go @@ -31,14 +31,14 @@ type StatisticRecord struct { ServerBytesPerService map[uint16]int `json:"server_bytes_per_service" bson:"server_bytes_per_service"` TotalBytesPerService map[uint16]int `json:"total_bytes_per_service" bson:"total_bytes_per_service"` DurationPerService map[uint16]int64 `json:"duration_per_service" bson:"duration_per_service"` - MatchedRules map[string]int64 `json:"matched_rules" bson:"matched_rules"` + MatchedRules map[string]int64 `json:"matched_rules" bson:"matched_rules"` } type StatisticsFilter struct { RangeFrom time.Time `form:"range_from"` RangeTo time.Time `form:"range_to"` Ports []uint16 `form:"ports"` - RulesIDs []string `form:"rules_ids"` + RulesIDs []string `form:"rules_ids"` Metric string `form:"metric"` } @@ -91,7 +91,6 @@ func (sc *StatisticsController) GetStatistics(context context.Context, filter St } } - log.Println(query) if err := query.All(&statisticRecords); err != nil { log.WithError(err).WithField("filter", filter).Error("failed to retrieve statistics") return []StatisticRecord{} -- cgit v1.2.3-70-g09d2 From 2fb8993008752063fa13f253784e9e92552e339d Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Fri, 16 Oct 2020 11:13:21 +0200 Subject: Refactor js files --- frontend/src/components/Header.js | 18 ++-- frontend/src/components/Notifications.js | 8 +- frontend/src/components/Timeline.js | 30 +++--- frontend/src/components/dialogs/Filters.js | 6 +- frontend/src/components/fields/ButtonField.js | 8 +- frontend/src/components/fields/CheckField.js | 12 +-- frontend/src/components/fields/InputField.js | 20 ++-- frontend/src/components/fields/TagField.js | 12 +-- frontend/src/components/fields/TextField.js | 10 +- .../src/components/fields/extensions/ColorField.js | 17 ++-- .../components/fields/extensions/NumericField.js | 6 +- frontend/src/components/filters/AdvancedFilters.js | 4 +- .../components/filters/BooleanConnectionsFilter.js | 6 +- .../src/components/filters/ExitSearchFilter.js | 4 +- .../components/filters/RulesConnectionsFilter.js | 6 +- .../components/filters/StringConnectionsFilter.js | 20 +--- frontend/src/components/objects/Connection.js | 12 +-- frontend/src/components/objects/LinkPopover.js | 15 +-- frontend/src/components/pages/ConfigurationPage.js | 43 ++++----- frontend/src/components/pages/MainPage.js | 20 ++-- .../src/components/pages/ServiceUnavailablePage.js | 4 +- frontend/src/components/panels/ConnectionsPane.js | 4 +- frontend/src/components/panels/MainPane.js | 12 +-- frontend/src/components/panels/PcapsPane.js | 34 +++---- frontend/src/components/panels/SearchPane.js | 106 +++++++++++---------- frontend/src/components/panels/StreamsPane.js | 18 ++-- frontend/src/dispatcher.js | 2 +- frontend/src/index.js | 20 ++-- frontend/src/notifications.js | 2 +- frontend/src/serviceWorker.js | 12 +-- frontend/src/setupProxy.js | 10 +- frontend/src/setupTests.js | 2 +- frontend/src/utils.js | 20 ++-- 33 files changed, 258 insertions(+), 265 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index 119958b..ab16dd1 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -15,17 +15,17 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import Typed from 'typed.js'; -import './Header.scss'; +import React, {Component} from "react"; import {Link, withRouter} from "react-router-dom"; +import Typed from "typed.js"; +import {cleanNumber, validatePort} from "../utils"; import ButtonField from "./fields/ButtonField"; +import AdvancedFilters from "./filters/AdvancedFilters"; +import BooleanConnectionsFilter from "./filters/BooleanConnectionsFilter"; import ExitSearchFilter from "./filters/ExitSearchFilter"; -import {cleanNumber, validatePort} from "../utils"; -import StringConnectionsFilter from "./filters/StringConnectionsFilter"; import RulesConnectionsFilter from "./filters/RulesConnectionsFilter"; -import BooleanConnectionsFilter from "./filters/BooleanConnectionsFilter"; -import AdvancedFilters from "./filters/AdvancedFilters"; +import StringConnectionsFilter from "./filters/StringConnectionsFilter"; +import "./Header.scss"; class Header extends Component { @@ -49,7 +49,7 @@ class Header extends Component {

- { + { this.el = el; }}/> @@ -67,7 +67,7 @@ class Header extends Component { - +

diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js index ad681a2..56a4508 100644 --- a/frontend/src/components/Notifications.js +++ b/frontend/src/components/Notifications.js @@ -15,12 +15,12 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import './Notifications.scss'; +import React, {Component} from "react"; import dispatcher from "../dispatcher"; +import "./Notifications.scss"; -const _ = require('lodash'); -const classNames = require('classnames'); +const _ = require("lodash"); +const classNames = require("classnames"); class Notifications extends Component { diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js index 1d88bcb..8d1fd40 100644 --- a/frontend/src/components/Timeline.js +++ b/frontend/src/components/Timeline.js @@ -62,7 +62,7 @@ class Timeline extends Component { this.loadStatistics(this.state.metric).then(() => log.debug("Statistics loaded after mount")); - this.connectionsFiltersCallback = payload => { + this.connectionsFiltersCallback = (payload) => { if ("service_port" in payload && this.state.servicePortFilter !== payload["service_port"]) { this.setState({servicePortFilter: payload["service_port"]}); this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after service port changed")); @@ -74,22 +74,22 @@ class Timeline extends Component { }; dispatcher.register("connections_filters", this.connectionsFiltersCallback); - dispatcher.register("connection_updates", payload => { + dispatcher.register("connection_updates", (payload) => { this.setState({ selection: new TimeRange(payload.from, payload.to), }); this.adjustSelection(); }); - dispatcher.register("notifications", payload => { + dispatcher.register("notifications", (payload) => { if (payload.event === "services.edit" && this.state.metric !== "matched_rules") { - this.loadServices().then(() => log.debug("Statistics reloaded after services updates")); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after services updates")); } else if (payload.event.startsWith("rules") && this.state.metric === "matched_rules") { - this.loadServices().then(() => log.debug("Statistics reloaded after rules updates")); + this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after rules updates")); } }); - dispatcher.register("pulse_timeline", payload => { + dispatcher.register("pulse_timeline", (payload) => { this.setState({pulseTimeline: true}); setTimeout(() => this.setState({pulseTimeline: false}), payload.duration); }); @@ -107,12 +107,12 @@ class Timeline extends Component { if (metric === "matched_rules") { let rules = await this.loadRules(); if (this.state.matchedRulesFilter.length > 0) { - this.state.matchedRulesFilter.forEach(id => { + this.state.matchedRulesFilter.forEach((id) => { urlParams.append("rules_ids", id); }); columns = this.state.matchedRulesFilter; } else { - columns = rules.map(r => r.id); + columns = rules.map((r) => r.id); } } else { let services = await this.loadServices(); @@ -124,7 +124,7 @@ class Timeline extends Component { } columns = Object.keys(services); - columns.forEach(port => urlParams.append("ports", port)); + columns.forEach((port) => urlParams.append("ports", port)); } const metrics = (await backend.get("/api/statistics?" + urlParams)).json; @@ -133,7 +133,7 @@ class Timeline extends Component { } const zeroFilledMetrics = []; - const toTime = m => new Date(m["range_start"]).getTime(); + const toTime = (m) => new Date(m["range_start"]).getTime(); let i = 0; for (let interval = toTime(metrics[0]) - minutes; interval <= toTime(metrics[metrics.length - 1]) + minutes; interval += minutes) { if (i < metrics.length && interval === toTime(metrics[i])) { @@ -144,7 +144,7 @@ class Timeline extends Component { const m = {}; m["range_start"] = new Date(interval); m[metric] = {}; - columns.forEach(c => m[metric][c] = 0); + columns.forEach((c) => m[metric][c] = 0); zeroFilledMetrics.push(m); } } @@ -152,7 +152,7 @@ class Timeline extends Component { const series = new TimeSeries({ name: "statistics", columns: ["time"].concat(columns), - points: zeroFilledMetrics.map(m => [m["range_start"]].concat(columns.map(c => + points: zeroFilledMetrics.map((m) => [m["range_start"]].concat(columns.map(c => ((metric in m) && (m[metric] != null)) ? (m[metric][c] || 0) : 0 ))) }); @@ -184,11 +184,11 @@ class Timeline extends Component { createStyler = () => { if (this.state.metric === "matched_rules") { - return styler(this.state.rules.map(rule => { + return styler(this.state.rules.map((rule) => { return {key: rule.id, color: rule.color, width: 2}; })); } else { - return styler(Object.keys(this.state.services).map(port => { + return styler(Object.keys(this.state.services).map((port) => { return {key: port, color: this.state.services[port].color, width: 2}; })); } @@ -227,7 +227,7 @@ class Timeline extends Component { }; aggregateSeries = (func) => { - const values = this.state.series.columns().map(c => this.state.series[func](c)); + const values = this.state.series.columns().map((c) => this.state.series[func](c)); return Math[func](...values); }; diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js index a35ece2..a2407df 100644 --- a/frontend/src/components/dialogs/Filters.js +++ b/frontend/src/components/dialogs/Filters.js @@ -15,12 +15,12 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; +import React, {Component} from "react"; import {Modal} from "react-bootstrap"; -import ButtonField from "../fields/ButtonField"; -import './Filters.scss'; import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; +import ButtonField from "../fields/ButtonField"; import StringConnectionsFilter from "../filters/StringConnectionsFilter"; +import "./Filters.scss"; class Filters extends Component { diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index 850f837..de747a5 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -15,11 +15,11 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import './ButtonField.scss'; -import './common.scss'; +import React, {Component} from "react"; +import "./ButtonField.scss"; +import "./common.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class ButtonField extends Component { diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js index a0e2706..bfa1c9d 100644 --- a/frontend/src/components/fields/CheckField.js +++ b/frontend/src/components/fields/CheckField.js @@ -15,12 +15,12 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import './CheckField.scss'; -import './common.scss'; +import React, {Component} from "react"; import {randomClassName} from "../../utils"; +import "./CheckField.scss"; +import "./common.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class CheckField extends Component { @@ -41,9 +41,9 @@ class CheckField extends Component { }; return ( -

- + {(checked ? "✓ " : "✗ ") + (name != null ? name : "")}

diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js index 80cce3b..823989d 100644 --- a/frontend/src/components/fields/InputField.js +++ b/frontend/src/components/fields/InputField.js @@ -15,12 +15,12 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import './InputField.scss'; -import './common.scss'; +import React, {Component} from "react"; import {randomClassName} from "../../utils"; +import "./common.scss"; +import "./InputField.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class InputField extends Component { @@ -59,23 +59,23 @@ class InputField extends Component { } return ( -

- { name && + {name &&

{name}:

}

- { type === "file" && - {value.name || this.props.placeholder} } + {type === "file" && + {value.name || this.props.placeholder}} + readOnly={this.props.readonly}/>

- { type !== "file" && value !== "" && + {type !== "file" && value !== "" &&

handler(null)}>del

diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js index 89445b6..9a36da4 100644 --- a/frontend/src/components/fields/TagField.js +++ b/frontend/src/components/fields/TagField.js @@ -15,14 +15,14 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import './TagField.scss'; -import './common.scss'; -import {randomClassName} from "../../utils"; +import React, {Component} from "react"; import ReactTags from "react-tag-autocomplete"; +import {randomClassName} from "../../utils"; +import "./common.scss"; +import "./TagField.scss"; -const classNames = require('classnames'); -const _ = require('lodash'); +const classNames = require("classnames"); +const _ = require("lodash"); class TagField extends Component { diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js index 9237c0c..4dd77bd 100644 --- a/frontend/src/components/fields/TextField.js +++ b/frontend/src/components/fields/TextField.js @@ -15,12 +15,12 @@ * along with this program. If not, see . */ -import React, {Component} from 'react'; -import './TextField.scss'; -import './common.scss'; +import React, {Component} from "react"; import {randomClassName} from "../../utils"; +import "./common.scss"; +import "./TextField.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class TextField extends Component { @@ -50,7 +50,7 @@ class TextField extends Component { {"field-invalid": this.props.invalid}, {"field-small": this.props.small})}> {name && {name}:}

+                          readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef}/>
                 {error && <div className="field-error">error: {error}</div>}
             </div>
         );
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index f1c0caf..fd30988 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -15,22 +15,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {OverlayTrigger, Popover} from "react-bootstrap";
-import './ColorField.scss';
-import InputField from "../InputField";
 import validation from "../../../validation";
+import InputField from "../InputField";
+import "./ColorField.scss";
 
 class ColorField extends Component {
 
     constructor(props) {
         super(props);
 
-        this.state = {
-        };
+        this.state = {};
 
-        this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
-            "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
+        this.colors = ["#e53935", "#d81b60", "#8e24aa", "#5e35b1", "#3949ab", "#1e88e5", "#039be5", "#00acc1",
+            "#00897b", "#43a047", "#7cb342", "#9e9d24", "#f9a825", "#fb8c00", "#f4511e", "#6d4c41"];
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -55,7 +54,7 @@ class ColorField extends Component {
                           this.props.onChange(color);
                       }
                       document.body.click(); // magic to close popup
-                  }} />);
+                  }}/>);
 
         const popover = (
             <Popover id="popover-basic">
@@ -82,7 +81,7 @@ class ColorField extends Component {
             <div className="field color-field">
                 <div className="color-input">
                     <InputField {...this.props} onChange={this.onChange} invalid={this.state.invalid} name="color"
-                                error={null} />
+                                error={null}/>
                     <div className="color-picker">
                         <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
                             <button type="button" className="picker-button" style={buttonStyles}>pick</button>
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
index d4d027d..a6cba26 100644
--- a/frontend/src/components/fields/extensions/NumericField.js
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -15,7 +15,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import InputField from "../InputField";
 
 class NumericField extends Component {
@@ -35,7 +35,7 @@ class NumericField extends Component {
     }
 
     onChange = (value) => {
-        value = value.toString().replace(/[^\d]/gi, '');
+        value = value.toString().replace(/[^\d]/gi, "");
         let intValue = 0;
         if (value !== "") {
             intValue = parseInt(value, 10);
@@ -53,7 +53,7 @@ class NumericField extends Component {
     render() {
         return (
             <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"}
-                        invalid={this.state.invalid} />
+                        invalid={this.state.invalid}/>
         );
     }
 
diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js
index f5ba825..2b479ed 100644
--- a/frontend/src/components/filters/AdvancedFilters.js
+++ b/frontend/src/components/filters/AdvancedFilters.js
@@ -15,11 +15,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
 import dispatcher from "../../dispatcher";
-import ButtonField from "../fields/ButtonField";
 import {updateParams} from "../../utils";
+import ButtonField from "../fields/ButtonField";
 
 class AdvancedFilters extends Component {
 
diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js
index 9558323..0355167 100644
--- a/frontend/src/components/filters/BooleanConnectionsFilter.js
+++ b/frontend/src/components/filters/BooleanConnectionsFilter.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
-import CheckField from "../fields/CheckField";
 import dispatcher from "../../dispatcher";
+import CheckField from "../fields/CheckField";
 
 class BooleanConnectionsFilter extends Component {
 
@@ -30,7 +30,7 @@ class BooleanConnectionsFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         this.setState({filterActive: this.toBoolean(params.get(this.props.filterName)).toString()});
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             const name = this.props.filterName;
             if (name in payload && this.state.filterActive !== payload[name]) {
                 this.setState({filterActive: payload[name]});
diff --git a/frontend/src/components/filters/ExitSearchFilter.js b/frontend/src/components/filters/ExitSearchFilter.js
index 68ca686..72cfb0c 100644
--- a/frontend/src/components/filters/ExitSearchFilter.js
+++ b/frontend/src/components/filters/ExitSearchFilter.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
-import CheckField from "../fields/CheckField";
 import dispatcher from "../../dispatcher";
+import CheckField from "../fields/CheckField";
 
 class ExitSearchFilter extends Component {
 
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 8e40d30..86eae7e 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -15,14 +15,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
 import backend from "../../backend";
 import dispatcher from "../../dispatcher";
 import TagField from "../fields/TagField";
 
-const classNames = require('classnames');
-const _ = require('lodash');
+const classNames = require("classnames");
+const _ = require("lodash");
 
 class RulesConnectionsFilter extends Component {
 
diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js
index 18b3784..c3c5925 100644
--- a/frontend/src/components/filters/StringConnectionsFilter.js
+++ b/frontend/src/components/filters/StringConnectionsFilter.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
-import InputField from "../fields/InputField";
 import dispatcher from "../../dispatcher";
+import InputField from "../fields/InputField";
 
 class StringConnectionsFilter extends Component {
 
@@ -56,15 +56,9 @@ class StringConnectionsFilter extends Component {
                 fieldValue = this.props.replaceFunc(fieldValue);
             }
             if (this.isValueValid(fieldValue)) {
-                this.setState({
-                    fieldValue: fieldValue,
-                    filterValue: filterValue
-                });
+                this.setState({fieldValue, filterValue: filterValue});
             } else {
-                this.setState({
-                    fieldValue: fieldValue,
-                    invalidValue: true
-                });
+                this.setState({fieldValue, invalidValue: true});
             }
         } else {
             this.setState({fieldValue: "", filterValue: null});
@@ -97,7 +91,6 @@ class StringConnectionsFilter extends Component {
         }
 
 
-
         if (this.isValueValid(fieldValue)) {
             let filterValue = fieldValue;
             if (filterValue !== "" && typeof this.props.encodeFunc === "function") {
@@ -113,10 +106,7 @@ class StringConnectionsFilter extends Component {
                 invalidValue: false
             });
         } else {
-            this.setState({
-                fieldValue: fieldValue,
-                invalidValue: true
-            });
+            this.setState({fieldValue, invalidValue: true});
         }
     };
 
diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index 96f2235..f838606 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -15,17 +15,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './Connection.scss';
+import React, {Component} from "react";
 import {Form} from "react-bootstrap";
 import backend from "../../backend";
+import dispatcher from "../../dispatcher";
 import {dateTimeToTime, durationBetween, formatSize} from "../../utils";
 import ButtonField from "../fields/ButtonField";
-import LinkPopover from "./LinkPopover";
 import TextField from "../fields/TextField";
-import dispatcher from "../../dispatcher";
+import "./Connection.scss";
+import LinkPopover from "./LinkPopover";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class Connection extends Component {
 
@@ -59,7 +59,7 @@ class Connection extends Component {
         }
         if (name === "copy") {
             this.copyTextarea.current.select();
-            document.execCommand('copy');
+            document.execCommand("copy");
             this.setState({copiedMessage: true});
             setTimeout(() => this.setState({copiedMessage: false}), 3000);
         }
diff --git a/frontend/src/components/objects/LinkPopover.js b/frontend/src/components/objects/LinkPopover.js
index 3c5bf67..551a819 100644
--- a/frontend/src/components/objects/LinkPopover.js
+++ b/frontend/src/components/objects/LinkPopover.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import {randomClassName} from "../../utils";
+import React, {Component} from "react";
 import {OverlayTrigger, Popover} from "react-bootstrap";
-import './LinkPopover.scss';
+import {randomClassName} from "../../utils";
+import "./LinkPopover.scss";
 
 class LinkPopover extends Component {
 
@@ -39,10 +39,11 @@ class LinkPopover extends Component {
         );
 
         return (this.props.content ?
-            <OverlayTrigger trigger={["hover", "focus"]} placement={this.props.placement || "top"} overlay={popover}>
-                <span className="link-popover">{this.props.text}</span>
-            </OverlayTrigger> :
-            <span className="link-popover-empty">{this.props.text}</span>
+                <OverlayTrigger trigger={["hover", "focus"]} placement={this.props.placement || "top"}
+                                overlay={popover}>
+                    <span className="link-popover">{this.props.text}</span>
+                </OverlayTrigger> :
+                <span className="link-popover-empty">{this.props.text}</span>
         );
     }
 }
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 6ab8ae3..2bd2da7 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -15,19 +15,19 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import '../panels/common.scss';
-import './ConfigurationPage.scss';
-import LinkPopover from "../objects/LinkPopover";
+import React, {Component} from "react";
 import {Col, Container, Row} from "react-bootstrap";
-import InputField from "../fields/InputField";
-import TextField from "../fields/TextField";
-import ButtonField from "../fields/ButtonField";
-import CheckField from "../fields/CheckField";
-import {createCurlCommand} from "../../utils";
 import Table from "react-bootstrap/Table";
-import validation from "../../validation";
 import backend from "../../backend";
+import {createCurlCommand} from "../../utils";
+import validation from "../../validation";
+import ButtonField from "../fields/ButtonField";
+import CheckField from "../fields/CheckField";
+import InputField from "../fields/InputField";
+import TextField from "../fields/TextField";
+import LinkPopover from "../objects/LinkPopover";
+import "../panels/common.scss";
+import "./ConfigurationPage.scss";
 
 class ConfigurationPage extends Component {
 
@@ -40,8 +40,7 @@ class ConfigurationPage extends Component {
                     "flag_regex": "",
                     "auth_required": false
                 },
-                "accounts": {
-                }
+                "accounts": {}
             },
             newUsername: "",
             newPassword: ""
@@ -50,9 +49,9 @@ class ConfigurationPage extends Component {
 
     saveSettings = () => {
         if (this.validateSettings(this.state.settings)) {
-            backend.post("/setup", this.state.settings).then(_ => {
+            backend.post("/setup", this.state.settings).then((_) => {
                 this.props.onConfigured();
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)});
             });
         }
@@ -102,14 +101,14 @@ class ConfigurationPage extends Component {
         const accounts = Object.entries(settings.accounts).map(([username, password]) =>
             <tr key={username}>
                 <td>{username}</td>
-                <td><LinkPopover text="******" content={password} /></td>
+                <td><LinkPopover text="******" content={password}/></td>
                 <td><ButtonField variant="red" small rounded name="delete"
-                                 onClick={() => this.updateParam((s) => delete s.accounts[username]) }/></td>
+                                 onClick={() => this.updateParam((s) => delete s.accounts[username])}/></td>
             </tr>).concat(<tr key={"new_account"}>
             <td><InputField value={this.state.newUsername} small active={this.state.newUsernameActive}
-                            onChange={(v) => this.setState({newUsername: v})} /></td>
+                            onChange={(v) => this.setState({newUsername: v})}/></td>
             <td><InputField value={this.state.newPassword} small active={this.state.newPasswordActive}
-                            onChange={(v) => this.setState({newPassword: v})} /></td>
+                            onChange={(v) => this.setState({newPassword: v})}/></td>
             <td><ButtonField variant="green" small rounded name="add" onClick={this.addAccount}/></td>
         </tr>);
 
@@ -122,7 +121,7 @@ class ConfigurationPage extends Component {
                                 <span className="api-request">POST /setup</span>
                                 <span className="api-response"><LinkPopover text={this.state.setupStatusCode}
                                                                             content={this.state.setupResponse}
-                                                                            placement="left" /></span>
+                                                                            placement="left"/></span>
                             </div>
 
                             <div className="section-content">
@@ -131,10 +130,10 @@ class ConfigurationPage extends Component {
                                         <Col>
                                             <InputField name="server_address" value={settings.config.server_address}
                                                         error={this.state.serverAddressError}
-                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)} />
+                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)}/>
                                             <InputField name="flag_regex" value={settings.config.flag_regex}
                                                         onChange={(v) => this.updateParam((s) => s.config.flag_regex = v)}
-                                                        error={this.state.flagRegexError} />
+                                                        error={this.state.flagRegexError}/>
                                             <div style={{"marginTop": "10px"}}>
                                                 <CheckField checked={settings.config.auth_required} name="auth_required"
                                                             onChange={(v) => this.updateParam((s) => s.config.auth_required = v)}/>
@@ -166,7 +165,7 @@ class ConfigurationPage extends Component {
                             </div>
 
                             <div className="section-footer">
-                                <ButtonField variant="green" name="save" bordered onClick={this.saveSettings} />
+                                <ButtonField variant="green" name="save" bordered onClick={this.saveSettings}/>
                             </div>
                         </div>
                     </div>
diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js
index 0b06f55..a542e3f 100644
--- a/frontend/src/components/pages/MainPage.js
+++ b/frontend/src/components/pages/MainPage.js
@@ -15,20 +15,20 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './MainPage.scss';
-import './common.scss';
-import Connections from "../panels/ConnectionsPane";
-import StreamsPane from "../panels/StreamsPane";
+import React, {Component} from "react";
 import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
-import Timeline from "../Timeline";
-import PcapsPane from "../panels/PcapsPane";
-import RulesPane from "../panels/RulesPane";
-import ServicesPane from "../panels/ServicesPane";
-import Header from "../Header";
 import Filters from "../dialogs/Filters";
+import Header from "../Header";
+import Connections from "../panels/ConnectionsPane";
 import MainPane from "../panels/MainPane";
+import PcapsPane from "../panels/PcapsPane";
+import RulesPane from "../panels/RulesPane";
 import SearchPane from "../panels/SearchPane";
+import ServicesPane from "../panels/ServicesPane";
+import StreamsPane from "../panels/StreamsPane";
+import Timeline from "../Timeline";
+import "./common.scss";
+import "./MainPage.scss";
 
 class MainPage extends Component {
 
diff --git a/frontend/src/components/pages/ServiceUnavailablePage.js b/frontend/src/components/pages/ServiceUnavailablePage.js
index f27d84d..deb4cf8 100644
--- a/frontend/src/components/pages/ServiceUnavailablePage.js
+++ b/frontend/src/components/pages/ServiceUnavailablePage.js
@@ -15,8 +15,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './MainPage.scss';
+import React, {Component} from "react";
+import "./MainPage.scss";
 
 class ServiceUnavailablePage extends Component {
 
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 89859e6..ea47059 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -85,8 +85,8 @@ class ConnectionsPane extends Component {
         this.timelineUpdatesCallback = payload => {
             this.connectionsListRef.current.scrollTop = 0;
             this.loadConnections({
-                started_after: Math.round(payload.from.getTime() / 1000),
-                started_before: Math.round(payload.to.getTime() / 1000),
+                "started_after": Math.round(payload.from.getTime() / 1000),
+                "started_before": Math.round(payload.to.getTime() / 1000),
                 limit: this.maxConnections
             }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`));
         };
diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js
index 8aa8ad8..ce72be5 100644
--- a/frontend/src/components/panels/MainPane.js
+++ b/frontend/src/components/panels/MainPane.js
@@ -15,15 +15,15 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './common.scss';
-import './MainPane.scss';
+import React, {Component} from "react";
 import Typed from "typed.js";
 import dispatcher from "../../dispatcher";
-import RulesPane from "./RulesPane";
-import StreamsPane from "./StreamsPane";
+import "./common.scss";
+import "./MainPane.scss";
 import PcapsPane from "./PcapsPane";
+import RulesPane from "./RulesPane";
 import ServicesPane from "./ServicesPane";
+import StreamsPane from "./StreamsPane";
 
 class MainPane extends Component {
 
@@ -94,7 +94,7 @@ class MainPane extends Component {
                 <div className="main-pane">
                     <div className="pane-section">
                         <div className="tutorial">
-                            <span style={{whiteSpace: 'pre'}} ref={(el) => {
+                            <span style={{whiteSpace: "pre"}} ref={(el) => {
                                 this.el = el;
                             }}/>
                         </div>
diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js
index 900aacc..fd3db75 100644
--- a/frontend/src/components/panels/PcapsPane.js
+++ b/frontend/src/components/panels/PcapsPane.js
@@ -15,18 +15,18 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './PcapsPane.scss';
-import './common.scss';
+import React, {Component} from "react";
 import Table from "react-bootstrap/Table";
 import backend from "../../backend";
+import dispatcher from "../../dispatcher";
 import {createCurlCommand, dateTimeToTime, durationBetween, formatSize} from "../../utils";
-import InputField from "../fields/InputField";
+import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
+import InputField from "../fields/InputField";
 import TextField from "../fields/TextField";
-import ButtonField from "../fields/ButtonField";
 import LinkPopover from "../objects/LinkPopover";
-import dispatcher from "../../dispatcher";
+import "./common.scss";
+import "./PcapsPane.scss";
 
 class PcapsPane extends Component {
 
@@ -45,7 +45,7 @@ class PcapsPane extends Component {
     componentDidMount() {
         this.loadSessions();
 
-        dispatcher.register("notifications", payload => {
+        dispatcher.register("notifications", (payload) => {
             if (payload.event === "pcap.upload" || payload.event === "pcap.file") {
                 this.loadSessions();
             }
@@ -56,8 +56,8 @@ class PcapsPane extends Component {
 
     loadSessions = () => {
         backend.get("/api/pcap/sessions")
-            .then(res => this.setState({sessions: res.json, sessionsStatusCode: res.status}))
-            .catch(res => this.setState({
+            .then((res) => this.setState({sessions: res.json, sessionsStatusCode: res.status}))
+            .catch((res) => this.setState({
                 sessions: res.json, sessionsStatusCode: res.status,
                 sessionsResponse: JSON.stringify(res.json)
             }));
@@ -72,14 +72,14 @@ class PcapsPane extends Component {
         const formData = new FormData();
         formData.append("file", this.state.uploadSelectedFile);
         formData.append("flush_all", this.state.uploadFlushAll);
-        backend.postFile("/api/pcap/upload", formData).then(res => {
+        backend.postFile("/api/pcap/upload", formData).then((res) => {
             this.setState({
                 uploadStatusCode: res.status,
                 uploadResponse: JSON.stringify(res.json)
             });
             this.resetUpload();
             this.loadSessions();
-        }).catch(res => this.setState({
+        }).catch((res) => this.setState({
                 uploadStatusCode: res.status,
                 uploadResponse: JSON.stringify(res.json)
             })
@@ -96,14 +96,14 @@ class PcapsPane extends Component {
             file: this.state.fileValue,
             flush_all: this.state.processFlushAll,
             delete_original_file: this.state.deleteOriginalFile
-        }).then(res => {
+        }).then((res) => {
             this.setState({
                 processStatusCode: res.status,
                 processResponse: JSON.stringify(res.json)
             });
             this.resetProcess();
             this.loadSessions();
-        }).catch(res => this.setState({
+        }).catch((res) => this.setState({
                 processStatusCode: res.status,
                 processResponse: JSON.stringify(res.json)
             })
@@ -130,7 +130,7 @@ class PcapsPane extends Component {
     };
 
     render() {
-        let sessions = this.state.sessions.map(s =>
+        let sessions = this.state.sessions.map((s) =>
             <tr key={s.id} className="row-small row-clickable">
                 <td>{s["id"].substring(0, 8)}</td>
                 <td>{dateTimeToTime(s["started_at"])}</td>
@@ -229,7 +229,7 @@ class PcapsPane extends Component {
                                 <div className="upload-options">
                                     <span>options:</span>
                                     <CheckField name="flush_all" checked={this.state.uploadFlushAll}
-                                                onChange={v => this.setState({uploadFlushAll: v})}/>
+                                                onChange={(v) => this.setState({uploadFlushAll: v})}/>
                                 </div>
                                 <ButtonField variant="green" bordered onClick={this.uploadPcap} name="upload"/>
                             </div>
@@ -254,9 +254,9 @@ class PcapsPane extends Component {
                             <div className="upload-actions" style={{"marginTop": "11px"}}>
                                 <div className="upload-options">
                                     <CheckField name="flush_all" checked={this.state.processFlushAll}
-                                                onChange={v => this.setState({processFlushAll: v})}/>
+                                                onChange={(v) => this.setState({processFlushAll: v})}/>
                                     <CheckField name="delete_original_file" checked={this.state.deleteOriginalFile}
-                                                onChange={v => this.setState({deleteOriginalFile: v})}/>
+                                                onChange={(v) => this.setState({deleteOriginalFile: v})}/>
                                 </div>
                                 <ButtonField variant="blue" bordered onClick={this.processPcap} name="process"/>
                             </div>
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index 1fb48ef..d3c0c8b 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -15,21 +15,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './common.scss';
-import './SearchPane.scss';
+import React, {Component} from "react";
 import Table from "react-bootstrap/Table";
-import InputField from "../fields/InputField";
-import TextField from "../fields/TextField";
 import backend from "../../backend";
-import ButtonField from "../fields/ButtonField";
-import LinkPopover from "../objects/LinkPopover";
-import {createCurlCommand, dateTimeToTime, durationBetween} from "../../utils";
 import dispatcher from "../../dispatcher";
-import TagField from "../fields/TagField";
+import {createCurlCommand, dateTimeToTime, durationBetween} from "../../utils";
+import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
+import InputField from "../fields/InputField";
+import TagField from "../fields/TagField";
+import TextField from "../fields/TextField";
+import LinkPopover from "../objects/LinkPopover";
+import "./common.scss";
+import "./SearchPane.scss";
 
-const _ = require('lodash');
+const _ = require("lodash");
 
 class SearchPane extends Component {
 
@@ -104,15 +104,15 @@ class SearchPane extends Component {
 
     validateSearch = (options) => {
         let valid = true;
-        if (options.text_search.exact_phrase && options.text_search.exact_phrase.length < 3) {
+        if (options["text_search"]["exact_phrase"] && options["text_search"]["exact_phrase"].length < 3) {
             this.setState({exactPhraseError: "text_search.exact_phrase.length < 3"});
             valid = false;
         }
-        if (options.regex_search.pattern && options.regex_search.pattern.length < 3) {
+        if (options["regex_search"].pattern && options["regex_search"].pattern.length < 3) {
             this.setState({patternError: "regex_search.pattern.length < 3"});
             valid = false;
         }
-        if (options.regex_search.not_pattern && options.regex_search.not_pattern.length < 3) {
+        if (options["regex_search"]["not_pattern"] && options["regex_search"]["not_pattern"].length < 3) {
             this.setState({exactPhraseError: "regex_search.not_pattern.length < 3"});
             valid = false;
         }
@@ -128,25 +128,25 @@ class SearchPane extends Component {
     extractPattern = (options) => {
         let pattern = "";
         if (_.isEqual(options.regex_search, this.searchOptions.regex_search)) { // is text search
-            if (options.text_search.exact_phrase) {
-                pattern += `"${options.text_search.exact_phrase}"`;
+            if (options["text_search"]["exact_phrase"]) {
+                pattern += `"${options["text_search"]["exact_phrase"]}"`;
             } else {
-                pattern += options.text_search.terms.join(" ");
-                if (options.text_search.excluded_terms) {
-                    pattern += " -" + options.text_search.excluded_terms.join(" -");
+                pattern += options["text_search"].terms.join(" ");
+                if (options["text_search"]["excluded_terms"]) {
+                    pattern += " -" + options["text_search"]["excluded_terms"].join(" -");
                 }
             }
-            options.text_search.case_sensitive && (pattern += "/s");
+            options["text_search"]["case_sensitive"] && (pattern += "/s");
         } else { // is regex search
-            if (options.regex_search.pattern) {
-                pattern += "/" + options.regex_search.pattern + "/";
+            if (options["regex_search"].pattern) {
+                pattern += "/" + options["regex_search"].pattern + "/";
             } else {
-                pattern += "!/" + options.regex_search.not_pattern + "/";
+                pattern += "!/" + options["regex_search"]["not_pattern"] + "/";
             }
-            options.regex_search.case_insensitive && (pattern += "i");
-            options.regex_search.multi_line && (pattern += "m");
-            options.regex_search.ignore_whitespaces && (pattern += "x");
-            options.regex_search.dot_character && (pattern += "s");
+            options["regex_search"]["case_insensitive"] && (pattern += "i");
+            options["regex_search"]["multi_line"] && (pattern += "m");
+            options["regex_search"]["ignore_whitespaces"] && (pattern += "x");
+            options["regex_search"]["dot_character"] && (pattern += "s");
         }
 
         return pattern;
@@ -222,25 +222,29 @@ class SearchPane extends Component {
 
                         <div className="content-row">
                             <div className="text-search">
-                                <TagField tags={(options.text_search.terms || []).map(t => {return {name: t};})}
+                                <TagField tags={(options["text_search"].terms || []).map(t => {
+                                    return {name: t};
+                                })}
                                           name="terms" min={3} inline allowNew={true}
-                                          readonly={regexOptionsModified || options.text_search.exact_phrase}
-                                          onChange={(tags) => this.updateParam(s => s.text_search.terms = tags.map(t => t.name))}/>
-                                <TagField tags={(options.text_search.excluded_terms || []).map(t => {return {name: t};})}
+                                          readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+                                          onChange={(tags) => this.updateParam(s => s["text_search"].terms = tags.map(t => t.name))}/>
+                                <TagField tags={(options["text_search"]["excluded_terms"] || []).map(t => {
+                                    return {name: t};
+                                })}
                                           name="excluded_terms" min={3} inline allowNew={true}
-                                          readonly={regexOptionsModified || options.text_search.exact_phrase}
-                                          onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags.map(t => t.name))}/>
+                                          readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+                                          onChange={(tags) => this.updateParam(s => s["text_search"]["excluded_terms"] = tags.map(t => t.name))}/>
 
                                 <span className="exclusive-separator">or</span>
 
-                                <InputField name="exact_phrase" value={options.text_search.exact_phrase} inline
+                                <InputField name="exact_phrase" value={options["text_search"]["exact_phrase"]} inline
                                             error={this.state.exactPhraseError}
-                                            onChange={v => this.updateParam(s => s.text_search.exact_phrase = v)}
-                                            readonly={regexOptionsModified || (Array.isArray(options.text_search.terms) && options.text_search.terms.length > 0)}/>
+                                            onChange={v => this.updateParam(s => s["text_search"]["exact_phrase"] = v)}
+                                            readonly={regexOptionsModified || (Array.isArray(options["text_search"].terms) && options["text_search"].terms.length > 0)}/>
 
-                                <CheckField checked={options.text_search.case_sensitive} name="case_sensitive"
+                                <CheckField checked={options["text_search"]["case_sensitive"]} name="case_sensitive"
                                             readonly={regexOptionsModified} small
-                                            onChange={(v) => this.updateParam(s => s.text_search.case_sensitive = v)}/>
+                                            onChange={(v) => this.updateParam(s => s["text_search"]["case_sensitive"] = v)}/>
                             </div>
 
                             <div className="separator">
@@ -248,30 +252,30 @@ class SearchPane extends Component {
                             </div>
 
                             <div className="regex-search">
-                                <InputField name="pattern" value={options.regex_search.pattern} inline
+                                <InputField name="pattern" value={options["regex_search"].pattern} inline
                                             error={this.state.patternError}
-                                            readonly={textOptionsModified || options.regex_search.not_pattern}
-                                            onChange={v => this.updateParam(s => s.regex_search.pattern = v)}/>
+                                            readonly={textOptionsModified || options["regex_search"]["not_pattern"]}
+                                            onChange={v => this.updateParam(s => s["regex_search"].pattern = v)}/>
                                 <span className="exclusive-separator">or</span>
-                                <InputField name="not_pattern" value={options.regex_search.not_pattern} inline
+                                <InputField name="not_pattern" value={options["regex_search"]["not_pattern"]} inline
                                             error={this.state.notPatternError}
-                                            readonly={textOptionsModified || options.regex_search.pattern}
-                                            onChange={v => this.updateParam(s => s.regex_search.not_pattern = v)}/>
+                                            readonly={textOptionsModified || options["regex_search"].pattern}
+                                            onChange={v => this.updateParam(s => s["regex_search"]["not_pattern"] = v)}/>
 
                                 <div className="checkbox-line">
-                                    <CheckField checked={options.regex_search.case_insensitive} name="case_insensitive"
+                                    <CheckField checked={options["regex_search"]["case_insensitive"]} name="case_insensitive"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.case_insensitive = v)}/>
-                                    <CheckField checked={options.regex_search.multi_line} name="multi_line"
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["case_insensitive"] = v)}/>
+                                    <CheckField checked={options["regex_search"]["multi_line"]} name="multi_line"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.multi_line = v)}/>
-                                    <CheckField checked={options.regex_search.ignore_whitespaces}
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["multi_line"] = v)}/>
+                                    <CheckField checked={options["regex_search"]["ignore_whitespaces"]}
                                                 name="ignore_whitespaces"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.ignore_whitespaces = v)}/>
-                                    <CheckField checked={options.regex_search.dot_character} name="dot_character"
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["ignore_whitespaces"] = v)}/>
+                                    <CheckField checked={options["regex_search"]["dot_character"]} name="dot_character"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.dot_character = v)}/>
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["dot_character"] = v)}/>
                                 </div>
                             </div>
                         </div>
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index be39777..41ab33d 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -15,19 +15,19 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './StreamsPane.scss';
-import {Row} from 'react-bootstrap';
-import MessageAction from "../objects/MessageAction";
+import DOMPurify from "dompurify";
+import React, {Component} from "react";
+import {Row} from "react-bootstrap";
+import ReactJson from "react-json-view"
 import backend from "../../backend";
+import log from "../../log";
+import {downloadBlob, getHeaderValue} from "../../utils";
 import ButtonField from "../fields/ButtonField";
 import ChoiceField from "../fields/ChoiceField";
-import DOMPurify from 'dompurify';
-import ReactJson from 'react-json-view'
-import {downloadBlob, getHeaderValue} from "../../utils";
-import log from "../../log";
+import MessageAction from "../objects/MessageAction";
+import "./StreamsPane.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class StreamsPane extends Component {
 
diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js
index 881970f..ef5dbde 100644
--- a/frontend/src/dispatcher.js
+++ b/frontend/src/dispatcher.js
@@ -15,7 +15,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-const _ = require('lodash');
+const _ = require("lodash");
 
 class Dispatcher {
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 4bc2730..d00df88 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -15,21 +15,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'bootstrap/dist/css/bootstrap.css';
-import './index.scss';
-import App from './components/App';
-import * as serviceWorker from './serviceWorker';
+import "bootstrap/dist/css/bootstrap.css";
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+import "./index.scss";
 import notifications from "./notifications";
+import * as serviceWorker from "./serviceWorker";
 
 notifications.createWebsocket();
 
 ReactDOM.render(
-  // <React.StrictMode>
-    <App />,
-  // </React.StrictMode>,
-  document.getElementById('root')
+    // <React.StrictMode>
+    <App/>,
+    // </React.StrictMode>,
+    document.getElementById("root")
 );
 
 serviceWorker.unregister();
diff --git a/frontend/src/notifications.js b/frontend/src/notifications.js
index f04036d..3c83b87 100644
--- a/frontend/src/notifications.js
+++ b/frontend/src/notifications.js
@@ -15,8 +15,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import log from "./log";
 import dispatcher from "./dispatcher";
+import log from "./log";
 
 class Notifications {
 
diff --git a/frontend/src/serviceWorker.js b/frontend/src/serviceWorker.js
index b04b771..c633a91 100644
--- a/frontend/src/serviceWorker.js
+++ b/frontend/src/serviceWorker.js
@@ -57,7 +57,7 @@ export function register(config) {
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {
@@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
@@ -103,7 +103,7 @@ function checkValidServiceWorker(swUrl, config) {
   fetch(swUrl, {
     headers: { 'Service-Worker': 'script' },
   })
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
@@ -111,7 +111,7 @@ function checkValidServiceWorker(swUrl, config) {
         (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -131,10 +131,10 @@ function checkValidServiceWorker(swUrl, config) {
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready
-      .then(registration => {
+      .then((registration) => {
         registration.unregister();
       })
-      .catch(error => {
+      .catch((error) => {
         console.error(error.message);
       });
   }
diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js
index f2e1c39..fb60b75 100644
--- a/frontend/src/setupProxy.js
+++ b/frontend/src/setupProxy.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-const { createProxyMiddleware } = require('http-proxy-middleware');
+const {createProxyMiddleware} = require("http-proxy-middleware");
 
-module.exports = function(app) {
-    app.use(createProxyMiddleware("/api", { target: "http://localhost:3333" }));
-    app.use(createProxyMiddleware("/setup", { target: "http://localhost:3333" }));
-    app.use(createProxyMiddleware("/ws", { target: "http://localhost:3333", ws: true }));
+module.exports = function (app) {
+    app.use(createProxyMiddleware("/api", {target: "http://localhost:3333"}));
+    app.use(createProxyMiddleware("/setup", {target: "http://localhost:3333"}));
+    app.use(createProxyMiddleware("/ws", {target: "http://localhost:3333", ws: true}));
 };
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
index 74b1a27..9b1d6d0 100644
--- a/frontend/src/setupTests.js
+++ b/frontend/src/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";
\ No newline at end of file
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 06414ac..0f0927e 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -18,15 +18,15 @@
 const timeRegex = /^(0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
 
 export function createCurlCommand(subCommand, method = null, json = null, data = null) {
-    const full = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+    const full = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "");
 
     let contentType = null;
     let content = null;
     if (json != null) {
-        contentType = '    -H "Content-Type: application/json" \\\n';
+        contentType = "    -H \"Content-Type: application/json\" \\\n";
         content = `    -d '${JSON.stringify(json)}'`;
     } else if (data != null) {
-        contentType = '    -H "Content-Type: multipart/form-data" \\\n';
+        contentType = "    -H \"Content-Type: multipart/form-data\" \\\n";
         content = "    " + Object.entries(data).map(([key, value]) => `-F "${key}=${value}"`).join(" \\\n    ");
     }
 
@@ -66,13 +66,13 @@ export function timeToTimestamp(time) {
     let d = new Date();
     let matches = time.match(timeRegex);
 
-    if (matches[1] !== undefined) {
+    if (matches[1]) {
         d.setHours(matches[1]);
     }
-    if (matches[2] !== undefined) {
+    if (matches[2]) {
         d.setMinutes(matches[2]);
     }
-    if (matches[3] !== undefined) {
+    if (matches[3]) {
         d.setSeconds(matches[3]);
     }
 
@@ -84,7 +84,7 @@ export function timestampToTime(timestamp) {
     let hours = d.getHours();
     let minutes = "0" + d.getMinutes();
     let seconds = "0" + d.getSeconds();
-    return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+    return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
 }
 
 export function timestampToDateTime(timestamp) {
@@ -100,7 +100,7 @@ export function dateTimeToTime(dateTime) {
     let hours = dateTime.getHours();
     let minutes = "0" + dateTime.getMinutes();
     let seconds = "0" + dateTime.getSeconds();
-    return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+    return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
 }
 
 export function durationBetween(from, to) {
@@ -131,7 +131,7 @@ export function randomClassName() {
 
 export function getHeaderValue(request, key) {
     if (request && request.headers) {
-        return request.headers[Object.keys(request.headers).find(k => k.toLowerCase() === key.toLowerCase())];
+        return request.headers[Object.keys(request.headers).find((k) => k.toLowerCase() === key.toLowerCase())];
     }
     return undefined;
 }
@@ -154,7 +154,7 @@ export function updateParams(urlParams, payload) {
             params.delete(key);
         } else if (Array.isArray(value)) {
             params.delete(key);
-            value.forEach(v => params.append(key, v));
+            value.forEach((v) => params.append(key, v));
         } else {
             params.set(key, value);
         }
-- 
cgit v1.2.3-70-g09d2


From d4bac2d6741f7a291522c29c9ecc87c3e32e21d4 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 14:16:44 +0200
Subject: Add notification when pcap have been processed

---
 application_context.go                             |  12 +-
 caronte.go                                         |   2 +
 frontend/src/components/App.js                     |   6 +-
 frontend/src/components/Notifications.js           |  17 +-
 frontend/src/components/Timeline.js                |  88 +++++----
 frontend/src/components/fields/ButtonField.js      |   2 +-
 frontend/src/components/fields/ChoiceField.js      |  10 +-
 frontend/src/components/objects/Connection.js      |  36 +---
 .../components/objects/ConnectionMatchedRules.js   |  10 +-
 frontend/src/components/objects/CopyLinkPopover.js |  54 ++++++
 frontend/src/components/objects/MessageAction.js   |  15 +-
 frontend/src/components/panels/ConnectionsPane.js  | 107 +++++------
 frontend/src/components/panels/PcapsPane.js        |  40 ++--
 frontend/src/components/panels/RulesPane.js        |  51 ++---
 frontend/src/components/panels/SearchPane.js       |  34 ++--
 frontend/src/components/panels/ServicesPane.js     |  68 ++++---
 frontend/src/serviceWorker.js                      | 208 ++++++++++-----------
 parsers/http_request_parser.go                     |  12 +-
 pcap_importer.go                                   |  39 ++--
 19 files changed, 458 insertions(+), 353 deletions(-)
 create mode 100644 frontend/src/components/objects/CopyLinkPopover.js

(limited to 'frontend/src/components')

diff --git a/application_context.go b/application_context.go
index 8abb6f4..0410b88 100644
--- a/application_context.go
+++ b/application_context.go
@@ -39,6 +39,7 @@ type ApplicationContext struct {
 	ConnectionStreamsController ConnectionStreamsController
 	SearchController            *SearchController
 	StatisticsController        StatisticsController
+	NotificationController      *NotificationController
 	IsConfigured                bool
 	Version                     string
 }
@@ -70,13 +71,12 @@ func CreateApplicationContext(storage Storage, version string) (*ApplicationCont
 		Version:                version,
 	}
 
-	applicationContext.configure()
 	return applicationContext, nil
 }
 
 func (sm *ApplicationContext) SetConfig(config Config) {
 	sm.Config = config
-	sm.configure()
+	sm.Configure()
 	var upsertResults interface{}
 	if _, err := sm.Storage.Update(Settings).Upsert(&upsertResults).
 		Filter(OrderedDocument{{"_id", "config"}}).One(UnorderedDocument{"config": config}); err != nil {
@@ -93,7 +93,11 @@ func (sm *ApplicationContext) SetAccounts(accounts gin.Accounts) {
 	}
 }
 
-func (sm *ApplicationContext) configure() {
+func (sm *ApplicationContext) SetNotificationController(notificationController *NotificationController) {
+	sm.NotificationController = notificationController
+}
+
+func (sm *ApplicationContext) Configure() {
 	if sm.IsConfigured {
 		return
 	}
@@ -110,7 +114,7 @@ func (sm *ApplicationContext) configure() {
 		log.WithError(err).Panic("failed to create a RulesManager")
 	}
 	sm.RulesManager = rulesManager
-	sm.PcapImporter = NewPcapImporter(sm.Storage, *serverNet, sm.RulesManager)
+	sm.PcapImporter = NewPcapImporter(sm.Storage, *serverNet, sm.RulesManager, sm.NotificationController)
 	sm.ServicesController = NewServicesController(sm.Storage)
 	sm.SearchController = NewSearchController(sm.Storage)
 	sm.ConnectionsController = NewConnectionsController(sm.Storage, sm.SearchController, sm.ServicesController)
diff --git a/caronte.go b/caronte.go
index 2d24af6..95f00ef 100644
--- a/caronte.go
+++ b/caronte.go
@@ -51,10 +51,12 @@ func main() {
 
 	notificationController := NewNotificationController(applicationContext)
 	go notificationController.Run()
+	applicationContext.SetNotificationController(notificationController)
 
 	resourcesController := NewResourcesController(notificationController)
 	go resourcesController.Run()
 
+	applicationContext.Configure()
 	applicationRouter := CreateApplicationRouter(applicationContext, notificationController, resourcesController)
 	if applicationRouter.Run(fmt.Sprintf("%s:%v", *bindAddress, *bindPort)) != nil {
 		log.WithError(err).WithFields(logFields).Fatal("failed to create the server")
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 0f700db..888ff86 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import ConfigurationPage from "./pages/ConfigurationPage";
-import Notifications from "./Notifications";
+import React, {Component} from "react";
 import dispatcher from "../dispatcher";
+import Notifications from "./Notifications";
+import ConfigurationPage from "./pages/ConfigurationPage";
 import MainPage from "./pages/MainPage";
 import ServiceUnavailablePage from "./pages/ServiceUnavailablePage";
 
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index 56a4508..92731d9 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -17,6 +17,7 @@
 
 import React, {Component} from "react";
 import dispatcher from "../dispatcher";
+import {randomClassName} from "../utils";
 import "./Notifications.scss";
 
 const _ = require("lodash");
@@ -30,9 +31,15 @@ class Notifications extends Component {
     };
 
     componentDidMount() {
-        dispatcher.register("notifications", n => this.notificationHandler(n));
+        dispatcher.register("notifications", this.handleNotifications);
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotifications);
+    }
+
+    handleNotifications = (n) => this.notificationHandler(n);
+
     notificationHandler = (n) => {
         switch (n.event) {
             case "connected":
@@ -54,6 +61,11 @@ class Notifications extends Component {
                 n.description = `existing rule updated: ${n.message["name"]}`;
                 n.variant = "blue";
                 return this.pushNotification(n);
+            case "pcap.completed":
+                n.title = "new pcap analyzed";
+                n.description = `${n.message["processed_packets"]} packets processed`;
+                n.variant = "blue";
+                return this.pushNotification(n);
             default:
                 return;
         }
@@ -61,6 +73,7 @@ class Notifications extends Component {
 
     pushNotification = (notification) => {
         const notifications = this.state.notifications;
+        notification.id = randomClassName();
         notifications.push(notification);
         this.setState({notifications});
         setTimeout(() => {
@@ -103,7 +116,7 @@ class Notifications extends Component {
                             if (n.variant) {
                                 notificationClassnames[`notification-${n.variant}`] = true;
                             }
-                            return <div className={classNames(notificationClassnames)} onClick={n.onClick}>
+                            return <div key={n.id} className={classNames(notificationClassnames)} onClick={n.onClick}>
                                 <h3 className="notification-title">{n.title}</h3>
                                 <pre className="notification-description">{n.description}</pre>
                             </div>;
diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js
index 8d1fd40..94fa4d0 100644
--- a/frontend/src/components/Timeline.js
+++ b/frontend/src/components/Timeline.js
@@ -15,8 +15,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './Timeline.scss';
+import {TimeRange, TimeSeries} from "pondjs";
+import React, {Component} from "react";
+import {withRouter} from "react-router-dom";
 import {
     ChartContainer,
     ChartRow,
@@ -27,15 +28,14 @@ import {
     styler,
     YAxis
 } from "react-timeseries-charts";
-import {TimeRange, TimeSeries} from "pondjs";
 import backend from "../backend";
-import ChoiceField from "./fields/ChoiceField";
-import {withRouter} from "react-router-dom";
-import log from "../log";
 import dispatcher from "../dispatcher";
+import log from "../log";
+import ChoiceField from "./fields/ChoiceField";
+import "./Timeline.scss";
 
 const minutes = 60 * 1000;
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 const leftSelectionPaddingMultiplier = 24;
 const rightSelectionPaddingMultiplier = 8;
@@ -61,42 +61,17 @@ class Timeline extends Component {
         });
 
         this.loadStatistics(this.state.metric).then(() => log.debug("Statistics loaded after mount"));
-
-        this.connectionsFiltersCallback = (payload) => {
-            if ("service_port" in payload && this.state.servicePortFilter !== payload["service_port"]) {
-                this.setState({servicePortFilter: payload["service_port"]});
-                this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after service port changed"));
-            }
-            if ("matched_rules" in payload && this.state.matchedRulesFilter !== payload["matched_rules"]) {
-                this.setState({matchedRulesFilter: payload["matched_rules"]});
-                this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after matched rules changed"));
-            }
-        };
-        dispatcher.register("connections_filters", this.connectionsFiltersCallback);
-
-        dispatcher.register("connection_updates", (payload) => {
-            this.setState({
-                selection: new TimeRange(payload.from, payload.to),
-            });
-            this.adjustSelection();
-        });
-
-        dispatcher.register("notifications", (payload) => {
-            if (payload.event === "services.edit" && this.state.metric !== "matched_rules") {
-                this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after services updates"));
-            } else if (payload.event.startsWith("rules") && this.state.metric === "matched_rules") {
-                this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after rules updates"));
-            }
-        });
-
-        dispatcher.register("pulse_timeline", (payload) => {
-            this.setState({pulseTimeline: true});
-            setTimeout(() => this.setState({pulseTimeline: false}), payload.duration);
-        });
+        dispatcher.register("connections_filters", this.handleConnectionsFiltersCallback);
+        dispatcher.register("connection_updates", this.handleConnectionUpdates);
+        dispatcher.register("notifications", this.handleNotifications);
+        dispatcher.register("pulse_timeline", this.handlePulseTimeline);
     }
 
     componentWillUnmount() {
-        dispatcher.unregister(this.connectionsFiltersCallback);
+        dispatcher.unregister(this.handleConnectionsFiltersCallback);
+        dispatcher.unregister(this.handleConnectionUpdates);
+        dispatcher.unregister(this.handleNotifications);
+        dispatcher.unregister(this.handlePulseTimeline);
     }
 
     loadStatistics = async (metric) => {
@@ -217,6 +192,39 @@ class Timeline extends Component {
         }, 1000);
     };
 
+    handleConnectionsFiltersCallback = (payload) => {
+        if ("service_port" in payload && this.state.servicePortFilter !== payload["service_port"]) {
+            this.setState({servicePortFilter: payload["service_port"]});
+            this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after service port changed"));
+        }
+        if ("matched_rules" in payload && this.state.matchedRulesFilter !== payload["matched_rules"]) {
+            this.setState({matchedRulesFilter: payload["matched_rules"]});
+            this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after matched rules changed"));
+        }
+    };
+
+    handleConnectionUpdates = (payload) => {
+        this.setState({
+            selection: new TimeRange(payload.from, payload.to),
+        });
+        this.adjustSelection();
+    };
+
+    handleNotifications = (payload) => {
+        if (payload.event === "services.edit" && this.state.metric !== "matched_rules") {
+            this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after services updates"));
+        } else if (payload.event.startsWith("rules") && this.state.metric === "matched_rules") {
+            this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after rules updates"));
+        } else if (payload.event === "pcap.completed") {
+            this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after pcap processed"));
+        }
+    };
+
+    handlePulseTimeline = (payload) => {
+        this.setState({pulseTimeline: true});
+        setTimeout(() => this.setState({pulseTimeline: false}), payload.duration);
+    };
+
     adjustSelection = () => {
         const seriesRange = this.state.series.range();
         const selection = this.state.selection;
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
index de747a5..15ef179 100644
--- a/frontend/src/components/fields/ButtonField.js
+++ b/frontend/src/components/fields/ButtonField.js
@@ -58,7 +58,7 @@ class ButtonField extends Component {
             <div className={classNames("field", "button-field", {"field-small": this.props.small},
                 {"field-active": this.props.active})}>
                 <button type="button" className={classNames(buttonClassnames)}
-                        onClick={handler} style={buttonStyle}>{this.props.name}</button>
+                        onClick={handler} style={buttonStyle} disabled={this.props.disabled}>{this.props.name}</button>
             </div>
         );
     }
diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js
index 14071c3..7e97d89 100644
--- a/frontend/src/components/fields/ChoiceField.js
+++ b/frontend/src/components/fields/ChoiceField.js
@@ -15,12 +15,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './ChoiceField.scss';
-import './common.scss';
+import React, {Component} from "react";
 import {randomClassName} from "../../utils";
+import "./ChoiceField.scss";
+import "./common.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class ChoiceField extends Component {
 
@@ -67,7 +67,7 @@ class ChoiceField extends Component {
         }
 
         return (
-            <div className={classNames( "field", "choice-field", {"field-inline" : inline},
+            <div className={classNames("field", "choice-field", {"field-inline": inline},
                 {"field-small": this.props.small})}>
                 {!inline && name && <label className="field-name">{name}:</label>}
                 <div className={classNames("field-select", {"select-expanded": this.state.expanded})}
diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index f838606..e5896e9 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -21,26 +21,19 @@ import backend from "../../backend";
 import dispatcher from "../../dispatcher";
 import {dateTimeToTime, durationBetween, formatSize} from "../../utils";
 import ButtonField from "../fields/ButtonField";
-import TextField from "../fields/TextField";
 import "./Connection.scss";
+import CopyLinkPopover from "./CopyLinkPopover";
 import LinkPopover from "./LinkPopover";
 
 const classNames = require("classnames");
 
 class Connection extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            update: false,
-            copiedMessage: false
-        };
+    state = {
+        update: false
+    };
 
-        this.copyTextarea = React.createRef();
-        this.handleAction = this.handleAction.bind(this);
-    }
-
-    handleAction(name) {
+    handleAction = (name) => {
         if (name === "hide") {
             const enabled = !this.props.data.hidden;
             backend.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`)
@@ -57,13 +50,7 @@ class Connection extends Component {
                     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;
@@ -88,12 +75,6 @@ class Connection extends Component {
             {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>}
-            <TextField readonly rows={1} value={conn.id} textRef={this.copyTextarea}/>
-        </div>;
-
         return (
             <tr className={classNames("connection", {"connection-selected": this.props.selected},
                 {"has-matched-rules": conn.matched_rules.length > 0})}>
@@ -121,9 +102,8 @@ class Connection extends Component {
                     <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.comment})}
                                              onClick={() => this.handleAction("comment")}>@</span>}
                                  content={commentPopoverContent} placement="right"/>
-                    <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.hidden})}
-                                             onClick={() => this.handleAction("copy")}>#</span>}
-                                 content={copyPopoverContent} placement="right"/>
+                    <CopyLinkPopover text="#" value={conn.id}
+                                     textClassName={classNames("connection-icon", {"icon-enabled": conn.hidden})}/>
                 </td>
             </tr>
         );
diff --git a/frontend/src/components/objects/ConnectionMatchedRules.js b/frontend/src/components/objects/ConnectionMatchedRules.js
index 92bde49..cfd1254 100644
--- a/frontend/src/components/objects/ConnectionMatchedRules.js
+++ b/frontend/src/components/objects/ConnectionMatchedRules.js
@@ -15,11 +15,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './ConnectionMatchedRules.scss';
-import ButtonField from "../fields/ButtonField";
-import dispatcher from "../../dispatcher";
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
+import dispatcher from "../../dispatcher";
+import ButtonField from "../fields/ButtonField";
+import "./ConnectionMatchedRules.scss";
 
 class ConnectionMatchedRules extends Component {
 
@@ -28,7 +28,7 @@ class ConnectionMatchedRules extends Component {
         const rules = params.getAll("matched_rules");
         if (!rules.includes(id)) {
             rules.push(id);
-            dispatcher.dispatch("connections_filters",{"matched_rules": rules});
+            dispatcher.dispatch("connections_filters", {"matched_rules": rules});
         }
     };
 
diff --git a/frontend/src/components/objects/CopyLinkPopover.js b/frontend/src/components/objects/CopyLinkPopover.js
new file mode 100644
index 0000000..fa9266f
--- /dev/null
+++ b/frontend/src/components/objects/CopyLinkPopover.js
@@ -0,0 +1,54 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, {Component} from "react";
+import TextField from "../fields/TextField";
+import LinkPopover from "./LinkPopover";
+
+class CopyLinkPopover extends Component {
+
+    state = {};
+
+    constructor(props) {
+        super(props);
+
+        this.copyTextarea = React.createRef();
+    }
+
+    handleClick = () => {
+        this.copyTextarea.current.select();
+        document.execCommand("copy");
+        this.setState({copiedMessage: true});
+        setTimeout(() => this.setState({copiedMessage: false}), 3000);
+    };
+
+    render() {
+        const copyPopoverContent = <div style={{"width": "400px"}}>
+            {this.state.copiedMessage ? <span><strong>Copied!</strong></span> :
+                <span>Click to <strong>copy</strong></span>}
+            <TextField readonly rows={1} value={this.props.value} textRef={this.copyTextarea}/>
+        </div>;
+
+        return (
+            <LinkPopover text={<span className={this.props.textClassName}
+                                     onClick={this.handleClick}>{this.props.text}</span>}
+                         content={copyPopoverContent} placement="right"/>
+        );
+    }
+}
+
+export default CopyLinkPopover;
diff --git a/frontend/src/components/objects/MessageAction.js b/frontend/src/components/objects/MessageAction.js
index 2b46320..e0c96e8 100644
--- a/frontend/src/components/objects/MessageAction.js
+++ b/frontend/src/components/objects/MessageAction.js
@@ -15,11 +15,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './MessageAction.scss';
+import React, {Component} from "react";
 import {Modal} from "react-bootstrap";
-import TextField from "../fields/TextField";
 import ButtonField from "../fields/ButtonField";
+import TextField from "../fields/TextField";
+import "./MessageAction.scss";
 
 class MessageAction extends Component {
 
@@ -34,7 +34,7 @@ class MessageAction extends Component {
 
     copyActionValue() {
         this.actionValue.current.select();
-        document.execCommand('copy');
+        document.execCommand("copy");
         this.setState({copyButtonText: "copied!"});
         setTimeout(() => this.setState({copyButtonText: "copy"}), 3000);
     }
@@ -54,11 +54,12 @@ class MessageAction extends Component {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15} />
+                    <TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15}/>
                 </Modal.Body>
                 <Modal.Footer className="dialog-footer">
-                    <ButtonField variant="green" bordered onClick={this.copyActionValue} name={this.state.copyButtonText} />
-                    <ButtonField variant="red" bordered onClick={this.props.onHide} name="close" />
+                    <ButtonField variant="green" bordered onClick={this.copyActionValue}
+                                 name={this.state.copyButtonText}/>
+                    <ButtonField variant="red" bordered onClick={this.props.onHide} name="close"/>
                 </Modal.Footer>
             </Modal>
         );
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index ea47059..23c6114 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -15,20 +15,20 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './ConnectionsPane.scss';
-import Connection from "../objects/Connection";
-import Table from 'react-bootstrap/Table';
+import React, {Component} from "react";
+import Table from "react-bootstrap/Table";
+import {Redirect} from "react-router";
 import {withRouter} from "react-router-dom";
 import backend from "../../backend";
-import ConnectionMatchedRules from "../objects/ConnectionMatchedRules";
-import log from "../../log";
-import ButtonField from "../fields/ButtonField";
 import dispatcher from "../../dispatcher";
-import {Redirect} from "react-router";
+import log from "../../log";
 import {updateParams} from "../../utils";
+import ButtonField from "../fields/ButtonField";
+import Connection from "../objects/Connection";
+import ConnectionMatchedRules from "../objects/ConnectionMatchedRules";
+import "./ConnectionsPane.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class ConnectionsPane extends Component {
 
@@ -67,55 +67,56 @@ class ConnectionsPane extends Component {
 
         this.loadConnections(additionalParams, urlParams, true).then(() => log.debug("Connections loaded"));
 
-        this.connectionsFiltersCallback = payload => {
-            const newParams = updateParams(this.state.urlParams, payload);
-            if (this.state.urlParams.toString() === newParams.toString()) {
-                return;
-            }
-
-            log.debug("Update following url params:", payload);
-            this.queryStringRedirect = true;
-            this.setState({urlParams: newParams});
-
-            this.loadConnections({limit: this.queryLimit}, newParams)
-                .then(() => log.info("ConnectionsPane reloaded after query string update"));
-        };
-        dispatcher.register("connections_filters", this.connectionsFiltersCallback);
-
-        this.timelineUpdatesCallback = payload => {
-            this.connectionsListRef.current.scrollTop = 0;
-            this.loadConnections({
-                "started_after": Math.round(payload.from.getTime() / 1000),
-                "started_before": Math.round(payload.to.getTime() / 1000),
-                limit: this.maxConnections
-            }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`));
-        };
-        dispatcher.register("timeline_updates", this.timelineUpdatesCallback);
-
-        this.notificationsCallback = payload => {
-            if (payload.event === "rules.new" || payload.event === "rules.edit") {
-                this.loadRules().then(() => log.debug("Loaded connection rules after notification update"));
-            }
-            if (payload.event === "services.edit") {
-                this.loadServices().then(() => log.debug("Services reloaded after notification update"));
-            }
-        };
-        dispatcher.register("notifications", this.notificationsCallback);
-
-        this.pulseConnectionsViewCallback = payload => {
-            this.setState({pulseConnectionsView: true});
-            setTimeout(() => this.setState({pulseConnectionsView: false}), payload.duration);
-        };
-        dispatcher.register("pulse_connections_view", this.pulseConnectionsViewCallback);
+        dispatcher.register("connections_filters", this.handleConnectionsFilters);
+        dispatcher.register("timeline_updates", this.handleTimelineUpdates);
+        dispatcher.register("notifications", this.handleNotifications);
+        dispatcher.register("pulse_connections_view", this.handlePulseConnectionsView);
     }
 
     componentWillUnmount() {
-        dispatcher.unregister(this.timelineUpdatesCallback);
-        dispatcher.unregister(this.notificationsCallback);
-        dispatcher.unregister(this.pulseConnectionsViewCallback);
-        dispatcher.unregister(this.connectionsFiltersCallback);
+        dispatcher.unregister(this.handleConnectionsFilters);
+        dispatcher.unregister(this.handleTimelineUpdates);
+        dispatcher.unregister(this.handleNotifications);
+        dispatcher.unregister(this.handlePulseConnectionsView);
     }
 
+    handleConnectionsFilters = (payload) => {
+        const newParams = updateParams(this.state.urlParams, payload);
+        if (this.state.urlParams.toString() === newParams.toString()) {
+            return;
+        }
+
+        log.debug("Update following url params:", payload);
+        this.queryStringRedirect = true;
+        this.setState({urlParams: newParams});
+
+        this.loadConnections({limit: this.queryLimit}, newParams)
+            .then(() => log.info("ConnectionsPane reloaded after query string update"));
+    };
+
+    handleTimelineUpdates = (payload) => {
+        this.connectionsListRef.current.scrollTop = 0;
+        this.loadConnections({
+            "started_after": Math.round(payload.from.getTime() / 1000),
+            "started_before": Math.round(payload.to.getTime() / 1000),
+            limit: this.maxConnections
+        }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`));
+    };
+
+    handleNotifications = (payload) => {
+        if (payload.event === "rules.new" || payload.event === "rules.edit") {
+            this.loadRules().then(() => log.debug("Loaded connection rules after notification update"));
+        }
+        if (payload.event === "services.edit") {
+            this.loadServices().then(() => log.debug("Services reloaded after notification update"));
+        }
+    };
+
+    handlePulseConnectionsView = (payload) => {
+        this.setState({pulseConnectionsView: true});
+        setTimeout(() => this.setState({pulseConnectionsView: false}), payload.duration);
+    };
+
     connectionSelected = (c) => {
         this.connectionSelectedRedirect = true;
         this.setState({selected: c.id});
diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js
index fd3db75..64e7804 100644
--- a/frontend/src/components/panels/PcapsPane.js
+++ b/frontend/src/components/panels/PcapsPane.js
@@ -24,6 +24,7 @@ import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
 import InputField from "../fields/InputField";
 import TextField from "../fields/TextField";
+import CopyLinkPopover from "../objects/CopyLinkPopover";
 import LinkPopover from "../objects/LinkPopover";
 import "./common.scss";
 import "./PcapsPane.scss";
@@ -44,16 +45,20 @@ class PcapsPane extends Component {
 
     componentDidMount() {
         this.loadSessions();
-
-        dispatcher.register("notifications", (payload) => {
-            if (payload.event === "pcap.upload" || payload.event === "pcap.file") {
-                this.loadSessions();
-            }
-        });
-
+        dispatcher.register("notifications", this.handleNotifications);
         document.title = "caronte:~/pcaps$";
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotifications);
+    }
+
+    handleNotifications = (payload) => {
+        if (payload.event.startsWith("pcap")) {
+            this.loadSessions();
+        }
+    };
+
     loadSessions = () => {
         backend.get("/api/pcap/sessions")
             .then((res) => this.setState({sessions: res.json, sessionsStatusCode: res.status}))
@@ -130,10 +135,19 @@ class PcapsPane extends Component {
     };
 
     render() {
-        let sessions = this.state.sessions.map((s) =>
-            <tr key={s.id} className="row-small row-clickable">
-                <td>{s["id"].substring(0, 8)}</td>
-                <td>{dateTimeToTime(s["started_at"])}</td>
+        let sessions = this.state.sessions.map((s) => {
+            const startedAt = new Date(s["started_at"]);
+            const completedAt = new Date(s["completed_at"]);
+            let timeInfo = <div>
+                <span>Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}</span><br/>
+                <span>Completed at {completedAt.toLocaleDateString() + " " + completedAt.toLocaleTimeString()}</span>
+            </div>;
+
+            return <tr key={s.id} className="row-small row-clickable">
+                <td><CopyLinkPopover text={s["id"].substring(0, 8)} value={s["id"]}/></td>
+                <td>
+                    <LinkPopover text={dateTimeToTime(s["started_at"])} content={timeInfo} placement="right"/>
+                </td>
                 <td>{durationBetween(s["started_at"], s["completed_at"])}</td>
                 <td>{formatSize(s["size"])}</td>
                 <td>{s["processed_packets"]}</td>
@@ -143,8 +157,8 @@ class PcapsPane extends Component {
                                  placement="left"/></td>
                 <td className="table-cell-action"><a href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a>
                 </td>
-            </tr>
-        );
+            </tr>;
+        });
 
         const handleUploadFileChange = (file) => {
             this.setState({
diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js
index a66cde7..d872b47 100644
--- a/frontend/src/components/panels/RulesPane.js
+++ b/frontend/src/components/panels/RulesPane.js
@@ -15,26 +15,26 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './common.scss';
-import './RulesPane.scss';
-import Table from "react-bootstrap/Table";
+import React, {Component} from "react";
 import {Col, Container, Row} from "react-bootstrap";
-import InputField from "../fields/InputField";
-import CheckField from "../fields/CheckField";
-import TextField from "../fields/TextField";
+import Table from "react-bootstrap/Table";
 import backend from "../../backend";
-import NumericField from "../fields/extensions/NumericField";
-import ColorField from "../fields/extensions/ColorField";
-import ChoiceField from "../fields/ChoiceField";
-import ButtonField from "../fields/ButtonField";
+import dispatcher from "../../dispatcher";
 import validation from "../../validation";
+import ButtonField from "../fields/ButtonField";
+import CheckField from "../fields/CheckField";
+import ChoiceField from "../fields/ChoiceField";
+import ColorField from "../fields/extensions/ColorField";
+import NumericField from "../fields/extensions/NumericField";
+import InputField from "../fields/InputField";
+import TextField from "../fields/TextField";
+import CopyLinkPopover from "../objects/CopyLinkPopover";
 import LinkPopover from "../objects/LinkPopover";
-import {randomClassName} from "../../utils";
-import dispatcher from "../../dispatcher";
+import "./common.scss";
+import "./RulesPane.scss";
 
-const classNames = require('classnames');
-const _ = require('lodash');
+const classNames = require("classnames");
+const _ = require("lodash");
 
 class RulesPane extends Component {
 
@@ -88,15 +88,20 @@ class RulesPane extends Component {
         this.reset();
         this.loadRules();
 
-        dispatcher.register("notifications", payload => {
-            if (payload.event === "rules.new" || payload.event === "rules.edit") {
-                this.loadRules();
-            }
-        });
-
+        dispatcher.register("notifications", this.handleNotifications);
         document.title = "caronte:~/rules$";
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotifications);
+    }
+
+    handleNotifications = (payload) => {
+        if (payload.event === "rules.new" || payload.event === "rules.edit") {
+            this.loadRules();
+        }
+    };
+
     loadRules = () => {
         backend.get("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status}))
             .catch(res => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)}));
@@ -249,7 +254,7 @@ class RulesPane extends Component {
                 this.reset();
                 this.setState({selectedRule: _.cloneDeep(r)});
             }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}>
-                <td>{r["id"].substring(0, 8)}</td>
+                <CopyLinkPopover text={r["id"].substring(0, 8)} value={r["id"]}/>
                 <td>{r["name"]}</td>
                 <td><ButtonField name={r["color"]} color={r["color"]} small/></td>
                 <td>{r["notes"]}</td>
@@ -260,7 +265,7 @@ class RulesPane extends Component {
                 rule.patterns.concat(this.state.newPattern) :
                 rule.patterns
         ).map(p => p === pattern ?
-            <tr key={randomClassName()}>
+            <tr key={"new_pattern"}>
                 <td style={{"width": "500px"}}>
                     <InputField small active={this.state.patternRegexFocused} value={pattern.regex}
                                 onChange={(v) => {
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index d3c0c8b..d36e85e 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -60,15 +60,14 @@ class SearchPane extends Component {
         this.reset();
         this.loadSearches();
 
-        dispatcher.register("notifications", payload => {
-            if (payload.event === "searches.new") {
-                this.loadSearches();
-            }
-        });
-
+        dispatcher.register("notifications", this.handleNotification);
         document.title = "caronte:~/searches$";
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotification);
+    }
+
     loadSearches = () => {
         backend.get("/api/searches")
             .then(res => this.setState({searches: res.json, searchesStatusCode: res.status}))
@@ -77,14 +76,18 @@ class SearchPane extends Component {
 
     performSearch = () => {
         const options = this.state.currentSearchOptions;
+        this.setState({loading: true});
         if (this.validateSearch(options)) {
             backend.post("/api/searches/perform", options).then(res => {
                 this.reset();
-                this.setState({searchStatusCode: res.status});
+                this.setState({searchStatusCode: res.status, loading: false});
                 this.loadSearches();
                 this.viewSearch(res.json.id);
             }).catch(res => {
-                this.setState({searchStatusCode: res.status, searchResponse: JSON.stringify(res.json)});
+                this.setState({
+                    searchStatusCode: res.status, searchResponse: JSON.stringify(res.json),
+                    loading: false
+                });
             });
         }
     };
@@ -156,6 +159,12 @@ class SearchPane extends Component {
         dispatcher.dispatch("connections_filters", {"performed_search": searchId});
     };
 
+    handleNotification = (payload) => {
+        if (payload.event === "searches.new") {
+            this.loadSearches();
+        }
+    };
+
     render() {
         const options = this.state.currentSearchOptions;
 
@@ -263,7 +272,8 @@ class SearchPane extends Component {
                                             onChange={v => this.updateParam(s => s["regex_search"]["not_pattern"] = v)}/>
 
                                 <div className="checkbox-line">
-                                    <CheckField checked={options["regex_search"]["case_insensitive"]} name="case_insensitive"
+                                    <CheckField checked={options["regex_search"]["case_insensitive"]}
+                                                name="case_insensitive"
                                                 readonly={textOptionsModified} small
                                                 onChange={(v) => this.updateParam(s => s["regex_search"]["case_insensitive"] = v)}/>
                                     <CheckField checked={options["regex_search"]["multi_line"]} name="multi_line"
@@ -284,8 +294,10 @@ class SearchPane extends Component {
                     </div>
 
                     <div className="section-footer">
-                        <ButtonField variant="red" name="cancel" bordered onClick={this.reset}/>
-                        <ButtonField variant="green" name="perform_search" bordered onClick={this.performSearch}/>
+                        <ButtonField variant="red" name="cancel" bordered disabled={this.state.loading}
+                                     onClick={this.reset}/>
+                        <ButtonField variant="green" name="perform_search" bordered
+                                     disabled={this.state.loading} onClick={this.performSearch}/>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/components/panels/ServicesPane.js b/frontend/src/components/panels/ServicesPane.js
index bc82356..48d9e29 100644
--- a/frontend/src/components/panels/ServicesPane.js
+++ b/frontend/src/components/panels/ServicesPane.js
@@ -15,24 +15,24 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './common.scss';
-import './ServicesPane.scss';
-import Table from "react-bootstrap/Table";
+import React, {Component} from "react";
 import {Col, Container, Row} from "react-bootstrap";
-import InputField from "../fields/InputField";
-import TextField from "../fields/TextField";
+import Table from "react-bootstrap/Table";
 import backend from "../../backend";
-import NumericField from "../fields/extensions/NumericField";
-import ColorField from "../fields/extensions/ColorField";
-import ButtonField from "../fields/ButtonField";
+import dispatcher from "../../dispatcher";
+import {createCurlCommand} from "../../utils";
 import validation from "../../validation";
+import ButtonField from "../fields/ButtonField";
+import ColorField from "../fields/extensions/ColorField";
+import NumericField from "../fields/extensions/NumericField";
+import InputField from "../fields/InputField";
+import TextField from "../fields/TextField";
 import LinkPopover from "../objects/LinkPopover";
-import {createCurlCommand} from "../../utils";
-import dispatcher from "../../dispatcher";
+import "./common.scss";
+import "./ServicesPane.scss";
 
-const classNames = require('classnames');
-const _ = require('lodash');
+const classNames = require("classnames");
+const _ = require("lodash");
 
 class ServicesPane extends Component {
 
@@ -52,15 +52,20 @@ class ServicesPane extends Component {
         this.reset();
         this.loadServices();
 
-        dispatcher.register("notifications", payload => {
-            if (payload.event === "services.edit") {
-                this.loadServices();
-            }
-        });
-
+        dispatcher.register("notifications", this.handleNotifications);
         document.title = "caronte:~/services$";
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotifications);
+    }
+
+    handleNotifications = (payload) => {
+        if (payload.event === "services.edit") {
+            this.loadServices();
+        }
+    };
+
     loadServices = () => {
         backend.get("/api/services")
             .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status}))
@@ -125,10 +130,10 @@ class ServicesPane extends Component {
             <tr key={s.port} onClick={() => {
                 this.reset();
                 this.setState({isUpdate: true, currentService: _.cloneDeep(s)});
-            }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port })}>
+            }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port})}>
                 <td>{s["port"]}</td>
                 <td>{s["name"]}</td>
-                <td><ButtonField name={s["color"]} color={s["color"]} small /></td>
+                <td><ButtonField name={s["color"]} color={s["color"]} small/></td>
                 <td>{s["notes"]}</td>
             </tr>
         );
@@ -141,9 +146,9 @@ class ServicesPane extends Component {
                     <div className="section-header">
                         <span className="api-request">GET /api/services</span>
                         {this.state.servicesStatusCode &&
-                            <span className="api-response"><LinkPopover text={this.state.servicesStatusCode}
-                                                                        content={this.state.servicesResponse}
-                                                                        placement="left" /></span>}
+                        <span className="api-response"><LinkPopover text={this.state.servicesStatusCode}
+                                                                    content={this.state.servicesResponse}
+                                                                    placement="left"/></span>}
                     </div>
 
                     <div className="section-content">
@@ -170,7 +175,7 @@ class ServicesPane extends Component {
                         <span className="api-request">PUT /api/services</span>
                         <span className="api-response"><LinkPopover text={this.state.serviceStatusCode}
                                                                     content={this.state.serviceResponse}
-                                                                    placement="left" /></span>
+                                                                    placement="left"/></span>
                     </div>
 
                     <div className="section-content">
@@ -179,17 +184,17 @@ class ServicesPane extends Component {
                                 <Col>
                                     <NumericField name="port" value={service.port}
                                                   onChange={(v) => this.updateParam((s) => s.port = v)}
-                                                  min={0} max={65565} error={this.state.servicePortError} />
+                                                  min={0} max={65565} error={this.state.servicePortError}/>
                                     <InputField name="name" value={service.name}
                                                 onChange={(v) => this.updateParam((s) => s.name = v)}
-                                                error={this.state.serviceNameError} />
+                                                error={this.state.serviceNameError}/>
                                     <ColorField value={service.color} error={this.state.serviceColorError}
-                                                onChange={(v) => this.updateParam((s) => s.color = v)} />
+                                                onChange={(v) => this.updateParam((s) => s.color = v)}/>
                                 </Col>
 
                                 <Col>
                                     <TextField name="notes" rows={7} value={service.notes}
-                                               onChange={(v) => this.updateParam((s) => s.notes = v)} />
+                                               onChange={(v) => this.updateParam((s) => s.notes = v)}/>
                                 </Col>
                             </Row>
                         </Container>
@@ -199,8 +204,9 @@ class ServicesPane extends Component {
 
                     <div className="section-footer">
                         {<ButtonField variant="red" name="cancel" bordered onClick={this.reset}/>}
-                        <ButtonField variant={isUpdate ? "blue" : "green"} name={isUpdate ? "update_service" : "add_service"}
-                                     bordered onClick={this.updateService} />
+                        <ButtonField variant={isUpdate ? "blue" : "green"}
+                                     name={isUpdate ? "update_service" : "add_service"}
+                                     bordered onClick={this.updateService}/>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/serviceWorker.js b/frontend/src/serviceWorker.js
index c633a91..a1f0ba8 100644
--- a/frontend/src/serviceWorker.js
+++ b/frontend/src/serviceWorker.js
@@ -11,131 +11,131 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+    window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    window.location.hostname === "[::1]" ||
     // 127.0.0.0/8 are considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
     )
 );
 
 export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
+    if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+        // The URL constructor is available in all browsers that support SW.
+        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+        if (publicUrl.origin !== window.location.origin) {
+            // Our service worker won't work if PUBLIC_URL is on a different origin
+            // from what our page is served on. This might happen if a CDN is used to
+            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+            return;
+        }
 
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+        window.addEventListener("load", () => {
+            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+            if (isLocalhost) {
+                // This is running on localhost. Let's check if a service worker still exists or not.
+                checkValidServiceWorker(swUrl, config);
 
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
+                // Add some additional logging to localhost, pointing developers to the
+                // service worker/PWA documentation.
+                navigator.serviceWorker.ready.then(() => {
+                    console.log(
+                        "This web app is being served cache-first by a service " +
+                        "worker. To learn more, visit https://bit.ly/CRA-PWA"
+                    );
+                });
+            } else {
+                // Is not localhost. Just register service worker
+                registerValidSW(swUrl, config);
+            }
         });
-      } else {
-        // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
+    }
 }
 
 function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        if (installingWorker == null) {
-          return;
-        }
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the updated precached content has been fetched,
-              // but the previous service worker will still serve the older
-              // content until all client tabs are closed.
-              console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
+    navigator.serviceWorker
+        .register(swUrl)
+        .then((registration) => {
+            registration.onupdatefound = () => {
+                const installingWorker = registration.installing;
+                if (installingWorker == null) {
+                    return;
+                }
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === "installed") {
+                        if (navigator.serviceWorker.controller) {
+                            // At this point, the updated precached content has been fetched,
+                            // but the previous service worker will still serve the older
+                            // content until all client tabs are closed.
+                            console.log(
+                                "New content is available and will be used when all " +
+                                "tabs for this page are closed. See https://bit.ly/CRA-PWA."
+                            );
 
-              // Execute callback
-              if (config && config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+                            // Execute callback
+                            if (config && config.onUpdate) {
+                                config.onUpdate(registration);
+                            }
+                        } else {
+                            // At this point, everything has been precached.
+                            // It's the perfect time to display a
+                            // "Content is cached for offline use." message.
+                            console.log("Content is cached for offline use.");
 
-              // Execute callback
-              if (config && config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch((error) => {
-      console.error('Error during service worker registration:', error);
-    });
+                            // Execute callback
+                            if (config && config.onSuccess) {
+                                config.onSuccess(registration);
+                            }
+                        }
+                    }
+                };
+            };
+        })
+        .catch((error) => {
+            console.error("Error during service worker registration:", error);
+        });
 }
 
 function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' },
-  })
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
-      if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+        headers: {"Service-Worker": "script"},
     })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
+        .then((response) => {
+            // Ensure service worker exists, and that we really are getting a JS file.
+            const contentType = response.headers.get("content-type");
+            if (
+                response.status === 404 ||
+                (contentType != null && contentType.indexOf("javascript") === -1)
+            ) {
+                // No service worker found. Probably a different app. Reload the page.
+                navigator.serviceWorker.ready.then((registration) => {
+                    registration.unregister().then(() => {
+                        window.location.reload();
+                    });
+                });
+            } else {
+                // Service worker found. Proceed as normal.
+                registerValidSW(swUrl, config);
+            }
+        })
+        .catch(() => {
+            console.log(
+                "No internet connection found. App is running in offline mode."
+            );
+        });
 }
 
 export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready
-      .then((registration) => {
-        registration.unregister();
-      })
-      .catch((error) => {
-        console.error(error.message);
-      });
-  }
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.ready
+            .then((registration) => {
+                registration.unregister();
+            })
+            .catch((error) => {
+                console.error(error.message);
+            });
+    }
 }
diff --git a/parsers/http_request_parser.go b/parsers/http_request_parser.go
index bc98f8f..56093c9 100644
--- a/parsers/http_request_parser.go
+++ b/parsers/http_request_parser.go
@@ -82,7 +82,7 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata {
 		Trailer:       JoinArrayMap(request.Trailer),
 		Reproducers: HttpRequestMetadataReproducers{
 			CurlCommand:  curlCommand(content),
-			RequestsCode: requestsCode(request),
+			RequestsCode: requestsCode(request, body),
 			FetchRequest: fetchRequest(request, body),
 		},
 	}
@@ -99,19 +99,15 @@ func curlCommand(content []byte) string {
 	}
 }
 
-func requestsCode(request *http.Request) string {
+func requestsCode(request *http.Request, body string) string {
 	var b strings.Builder
-	var params string
-	if request.Form != nil {
-		params = toJson(JoinArrayMap(request.PostForm))
-	}
 	headers := toJson(JoinArrayMap(request.Header))
 	cookies := toJson(CookiesMap(request.Cookies()))
 
 	b.WriteString("import requests\n\nresponse = requests." + strings.ToLower(request.Method) + "(")
 	b.WriteString("\"" + request.URL.String() + "\"")
-	if params != "" {
-		b.WriteString(", data = " + params)
+	if body != "" {
+		b.WriteString(", data = \"" + strings.Replace(body, "\"", "\\\"", -1) + "\"")
 	}
 	if headers != "" {
 		b.WriteString(", headers = " + headers)
diff --git a/pcap_importer.go b/pcap_importer.go
index 41ed082..1c80b3f 100644
--- a/pcap_importer.go
+++ b/pcap_importer.go
@@ -29,6 +29,7 @@ import (
 	"os"
 	"path"
 	"path/filepath"
+	"sort"
 	"sync"
 	"time"
 )
@@ -39,13 +40,14 @@ const initialAssemblerPoolSize = 16
 const importUpdateProgressInterval = 100 * time.Millisecond
 
 type PcapImporter struct {
-	storage     Storage
-	streamPool  *tcpassembly.StreamPool
-	assemblers  []*tcpassembly.Assembler
-	sessions    map[string]ImportingSession
-	mAssemblers sync.Mutex
-	mSessions   sync.Mutex
-	serverNet   net.IPNet
+	storage                Storage
+	streamPool             *tcpassembly.StreamPool
+	assemblers             []*tcpassembly.Assembler
+	sessions               map[string]ImportingSession
+	mAssemblers            sync.Mutex
+	mSessions              sync.Mutex
+	serverNet              net.IPNet
+	notificationController *NotificationController
 }
 
 type ImportingSession struct {
@@ -63,7 +65,8 @@ type ImportingSession struct {
 
 type flowCount [2]int
 
-func NewPcapImporter(storage Storage, serverNet net.IPNet, rulesManager RulesManager) *PcapImporter {
+func NewPcapImporter(storage Storage, serverNet net.IPNet, rulesManager RulesManager,
+	notificationController *NotificationController) *PcapImporter {
 	streamPool := tcpassembly.NewStreamPool(NewBiDirectionalStreamFactory(storage, serverNet, rulesManager))
 
 	var result []ImportingSession
@@ -76,13 +79,14 @@ func NewPcapImporter(storage Storage, serverNet net.IPNet, rulesManager RulesMan
 	}
 
 	return &PcapImporter{
-		storage:     storage,
-		streamPool:  streamPool,
-		assemblers:  make([]*tcpassembly.Assembler, 0, initialAssemblerPoolSize),
-		sessions:    sessions,
-		mAssemblers: sync.Mutex{},
-		mSessions:   sync.Mutex{},
-		serverNet:   serverNet,
+		storage:                storage,
+		streamPool:             streamPool,
+		assemblers:             make([]*tcpassembly.Assembler, 0, initialAssemblerPoolSize),
+		sessions:               sessions,
+		mAssemblers:            sync.Mutex{},
+		mSessions:              sync.Mutex{},
+		serverNet:              serverNet,
+		notificationController: notificationController,
 	}
 }
 
@@ -136,6 +140,9 @@ func (pi *PcapImporter) GetSessions() []ImportingSession {
 	for _, session := range pi.sessions {
 		sessions = append(sessions, session)
 	}
+	sort.Slice(sessions, func(i, j int) bool {
+		return sessions[i].StartedAt.Before(sessions[j].StartedAt)
+	})
 	pi.mSessions.Unlock()
 	return sessions
 }
@@ -202,6 +209,8 @@ func (pi *PcapImporter) parsePcap(session ImportingSession, fileName string, flu
 				handle.Close()
 				pi.releaseAssembler(assembler)
 				pi.progressUpdate(session, fileName, true, "")
+				pi.notificationController.Notify("pcap.completed", session)
+
 				return
 			}
 
-- 
cgit v1.2.3-70-g09d2


From 5534413b3a3e6e783310be8147ac8340d3098a7e Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 15:09:05 +0200
Subject: Fix tests. General refactor

---
 application_context_test.go                        |   7 +
 connection_streams_controller.go                   |   4 +-
 frontend/src/backend.js                            |   2 +-
 frontend/src/components/Notifications.js           |   2 +-
 frontend/src/components/Notifications.scss         |   2 +-
 frontend/src/components/fields/ChoiceField.scss    |   4 +-
 frontend/src/components/fields/InputField.scss     |   8 +-
 frontend/src/components/fields/TagField.scss       |  26 ++--
 frontend/src/components/filters/AdvancedFilters.js |   2 +-
 .../components/filters/RulesConnectionsFilter.js   |  14 +-
 .../components/filters/StringConnectionsFilter.js  |   8 +-
 frontend/src/components/pages/ConfigurationPage.js |  18 +--
 frontend/src/components/panels/ConnectionsPane.js  |  11 +-
 frontend/src/components/panels/PcapsPane.js        |  10 +-
 frontend/src/components/panels/RulesPane.js        |  90 +++++++------
 frontend/src/components/panels/SearchPane.js       |  10 +-
 frontend/src/components/panels/StreamsPane.js      |   4 +-
 frontend/src/index.js                              |   3 -
 frontend/src/index.scss                            |   2 +
 frontend/src/log.js                                |   7 +-
 frontend/src/serviceWorker.js                      | 141 ---------------------
 frontend/src/setupTests.js                         |   5 -
 frontend/src/utils.js                              |   2 +-
 parsers/http_request_parser.go                     |  28 ++--
 parsers/http_response_parser.go                    |  12 +-
 parsers/parser.go                                  |   4 +-
 pcap_importer_test.go                              |   1 +
 rules_manager.go                                   |   4 +-
 scripts/generate_ping.py                           |   2 +-
 utils.go                                           |   8 +-
 30 files changed, 150 insertions(+), 291 deletions(-)
 delete mode 100644 frontend/src/serviceWorker.js
 delete mode 100644 frontend/src/setupTests.js

(limited to 'frontend/src/components')

diff --git a/application_context_test.go b/application_context_test.go
index a7f1a49..11d1ed4 100644
--- a/application_context_test.go
+++ b/application_context_test.go
@@ -35,6 +35,10 @@ func TestCreateApplicationContext(t *testing.T) {
 	assert.Nil(t, appContext.PcapImporter)
 	assert.Nil(t, appContext.RulesManager)
 
+	notificationController := NewNotificationController(appContext)
+	appContext.SetNotificationController(notificationController)
+	assert.Equal(t, notificationController, appContext.NotificationController)
+
 	config := Config{
 		ServerAddress: "10.10.10.10",
 		FlagRegex:     "FLAG{test}",
@@ -58,11 +62,14 @@ func TestCreateApplicationContext(t *testing.T) {
 
 	checkAppContext, err := CreateApplicationContext(wrapper.Storage, "test")
 	assert.NoError(t, err)
+	checkAppContext.SetNotificationController(notificationController)
+	checkAppContext.Configure()
 	assert.True(t, checkAppContext.IsConfigured)
 	assert.Equal(t, checkAppContext.Config, config)
 	assert.Equal(t, checkAppContext.Accounts, accounts)
 	assert.NotNil(t, checkAppContext.PcapImporter)
 	assert.NotNil(t, checkAppContext.RulesManager)
+	assert.Equal(t, notificationController, appContext.NotificationController)
 
 	wrapper.Destroy(t)
 }
diff --git a/connection_streams_controller.go b/connection_streams_controller.go
index eef1a2a..038c2c5 100644
--- a/connection_streams_controller.go
+++ b/connection_streams_controller.go
@@ -369,7 +369,7 @@ func decodePwntools(payload []byte, isClient bool, format string) string {
 
 	if isClient {
 		return fmt.Sprintf("p.send(%s)\n", content)
-	} else {
-		return fmt.Sprintf("p.recvuntil(%s)\n", content)
 	}
+
+	return fmt.Sprintf("p.recvuntil(%s)\n", content)
 }
diff --git a/frontend/src/backend.js b/frontend/src/backend.js
index cc8604a..dc5089f 100644
--- a/frontend/src/backend.js
+++ b/frontend/src/backend.js
@@ -17,7 +17,7 @@
 
 async function json(method, url, data, json, headers) {
     const options = {
-        method: method,
+        method,
         body: json != null ? JSON.stringify(json) : data,
         mode: "cors",
         cache: "no-cache",
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index 92731d9..a81eba1 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -67,7 +67,7 @@ class Notifications extends Component {
                 n.variant = "blue";
                 return this.pushNotification(n);
             default:
-                return;
+                return null;
         }
     };
 
diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss
index 98d228e..5852c7d 100644
--- a/frontend/src/components/Notifications.scss
+++ b/frontend/src/components/Notifications.scss
@@ -32,7 +32,7 @@
     }
 
     &.notification-open {
-      transform: translateX(0px);
+      transform: translateX(0);
     }
 
     &.notification-closed {
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index c8c7ff1..85986af 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -27,8 +27,8 @@
     }
 
     .field-options {
-      position: absolute;
-      z-index: 20;
+      position: static;
+      z-index: 100;
       top: 35px;
       display: none;
       width: 100%;
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index e8ef46a..eafb2ab 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -47,15 +47,15 @@
       background-color: $color-primary-4 !important;
     }
 
+    .file-label::after {
+      background-color: $color-secondary-4 !important;
+    }
+
     .field-value input,
     .field-value .file-label {
       color: $color-primary-3 !important;
       background-color: $color-primary-4 !important;
     }
-
-    .file-label::after {
-      background-color: $color-secondary-4 !important;
-    }
   }
 
   &.field-invalid {
diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss
index 737f11f..723e71f 100644
--- a/frontend/src/components/fields/TagField.scss
+++ b/frontend/src/components/fields/TagField.scss
@@ -10,6 +10,18 @@
     }
   }
 
+  .react-tags {
+    position: relative;
+    display: flex;
+    border-radius: 4px;
+    background-color: $color-primary-2;
+
+    &:focus-within,
+    &:focus-within .react-tags__search-input {
+      background-color: $color-primary-1;
+    }
+  }
+
   &.field-small {
     font-size: 0.8em;
   }
@@ -39,18 +51,6 @@
     }
   }
 
-  .react-tags {
-    position: relative;
-    display: flex;
-    border-radius: 4px;
-    background-color: $color-primary-2;
-
-    &:focus-within,
-    &:focus-within .react-tags__search-input {
-      background-color: $color-primary-1;
-    }
-  }
-
   .react-tags__selected {
     display: inline-block;
     flex: 0 1;
@@ -154,4 +154,4 @@
     cursor: auto;
     opacity: 0.5;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js
index 2b479ed..15667a5 100644
--- a/frontend/src/components/filters/AdvancedFilters.js
+++ b/frontend/src/components/filters/AdvancedFilters.js
@@ -33,7 +33,7 @@ class AdvancedFilters extends Component {
             const active = ["client_address", "client_port", "min_duration", "max_duration", "min_bytes", "max_bytes"]
                 .some(f => this.urlParams.has(f));
             if (this.state.active !== active) {
-                this.setState({active: active});
+                this.setState({active});
             }
         };
         dispatcher.register("connections_filters", this.connectionsFiltersCallback);
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 86eae7e..37d36b7 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -35,17 +35,17 @@ class RulesConnectionsFilter extends Component {
         const params = new URLSearchParams(this.props.location.search);
         let activeRules = params.getAll("matched_rules") || [];
 
-        backend.get("/api/rules").then(res => {
-            let rules = res.json.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
-            activeRules = rules.filter(rule => activeRules.some(id => rule.id === id));
+        backend.get("/api/rules").then((res) => {
+            let rules = res.json.flatMap((rule) => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
+            activeRules = rules.filter((rule) => activeRules.some(id => rule.id === id));
             this.setState({rules, activeRules});
         });
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             if ("matched_rules" in payload && !_.isEqual(payload["matched_rules"].sort(), this.state.activeRules.sort())) {
-                const newRules = this.state.rules.filter(r => payload["matched_rules"].includes(r.id));
+                const newRules = this.state.rules.filter((r) => payload["matched_rules"].includes(r.id));
                 this.setState({
-                    activeRules: newRules.map(r => {
+                    activeRules: newRules.map((r) => {
                         return {id: r.id, name: r.name};
                     })
                 });
@@ -61,7 +61,7 @@ class RulesConnectionsFilter extends Component {
     onChange = (activeRules) => {
         if (!_.isEqual(activeRules.sort(), this.state.activeRules.sort())) {
             this.setState({activeRules});
-            dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)});
+            dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map((r) => r.id)});
         }
     };
 
diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js
index c3c5925..c5d7075 100644
--- a/frontend/src/components/filters/StringConnectionsFilter.js
+++ b/frontend/src/components/filters/StringConnectionsFilter.js
@@ -33,7 +33,7 @@ class StringConnectionsFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         this.updateStateFromFilterValue(params.get(this.props.filterName));
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             const name = this.props.filterName;
             if (name in payload && this.state.filterValue !== payload[name]) {
                 this.updateStateFromFilterValue(payload[name]);
@@ -56,7 +56,7 @@ class StringConnectionsFilter extends Component {
                 fieldValue = this.props.replaceFunc(fieldValue);
             }
             if (this.isValueValid(fieldValue)) {
-                this.setState({fieldValue, filterValue: filterValue});
+                this.setState({fieldValue, filterValue});
             } else {
                 this.setState({fieldValue, invalidValue: true});
             }
@@ -98,9 +98,9 @@ class StringConnectionsFilter extends Component {
             }
 
             this.setState({
-                fieldValue: fieldValue,
+                fieldValue,
                 timeoutHandle: setTimeout(() => {
-                    this.setState({filterValue: filterValue});
+                    this.setState({filterValue});
                     this.changeFilterValue(filterValue);
                 }, 500),
                 invalidValue: false
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 2bd2da7..4f0ce21 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -59,11 +59,11 @@ class ConfigurationPage extends Component {
 
     validateSettings = (settings) => {
         let valid = true;
-        if (!validation.isValidAddress(settings.config.server_address, true)) {
+        if (!validation.isValidAddress(settings.config["server_address"], true)) {
             this.setState({serverAddressError: "invalid ip_address"});
             valid = false;
         }
-        if (settings.config.flag_regex.length < 8) {
+        if (settings.config["flag_regex"].length < 8) {
             this.setState({flagRegexError: "flag_regex.length < 8"});
             valid = false;
         }
@@ -84,7 +84,7 @@ class ConfigurationPage extends Component {
             this.setState({
                 newUsername: "",
                 newPassword: "",
-                settings: settings
+                settings
             });
         } else {
             this.setState({
@@ -128,15 +128,15 @@ class ConfigurationPage extends Component {
                                 <Container className="p-0">
                                     <Row>
                                         <Col>
-                                            <InputField name="server_address" value={settings.config.server_address}
+                                            <InputField name="server_address" value={settings.config["server_address"]}
                                                         error={this.state.serverAddressError}
-                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)}/>
-                                            <InputField name="flag_regex" value={settings.config.flag_regex}
-                                                        onChange={(v) => this.updateParam((s) => s.config.flag_regex = v)}
+                                                        onChange={(v) => this.updateParam((s) => s.config["server_address"] = v)}/>
+                                            <InputField name="flag_regex" value={settings.config["flag_regex"]}
+                                                        onChange={(v) => this.updateParam((s) => s.config["flag_regex"] = v)}
                                                         error={this.state.flagRegexError}/>
                                             <div style={{"marginTop": "10px"}}>
-                                                <CheckField checked={settings.config.auth_required} name="auth_required"
-                                                            onChange={(v) => this.updateParam((s) => s.config.auth_required = v)}/>
+                                                <CheckField checked={settings.config["auth_required"]} name="auth_required"
+                                                            onChange={(v) => this.updateParam((s) => s.config["auth_required"] = v)}/>
                                             </div>
 
                                         </Col>
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 23c6114..9418fad 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -178,7 +178,7 @@ class ConnectionsPane extends Component {
         let firstConnection = this.state.firstConnection;
         let lastConnection = this.state.lastConnection;
 
-        if (additionalParams !== undefined && additionalParams.from !== undefined && additionalParams.to === undefined) {
+        if (additionalParams && additionalParams.from && !additionalParams.to) {
             if (res.length > 0) {
                 if (!isInitial) {
                     res = res.slice(1);
@@ -194,7 +194,7 @@ class ConnectionsPane extends Component {
                     firstConnection = connections[0];
                 }
             }
-        } else if (additionalParams !== undefined && additionalParams.to !== undefined && additionalParams.from === undefined) {
+        } else if (additionalParams && additionalParams.to && !additionalParams.from) {
             if (res.length > 0) {
                 connections = res.slice(0, res.length - 1).concat(this.state.connections);
                 firstConnection = connections[0];
@@ -215,12 +215,7 @@ class ConnectionsPane extends Component {
             }
         }
 
-        this.setState({
-            loading: false,
-            connections: connections,
-            firstConnection: firstConnection,
-            lastConnection: lastConnection
-        });
+        this.setState({loading: false, connections, firstConnection, lastConnection});
 
         if (firstConnection != null && lastConnection != null) {
             dispatcher.dispatch("connection_updates", {
diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js
index 64e7804..ddc5948 100644
--- a/frontend/src/components/panels/PcapsPane.js
+++ b/frontend/src/components/panels/PcapsPane.js
@@ -181,15 +181,15 @@ class PcapsPane extends Component {
         };
 
         const uploadCurlCommand = createCurlCommand("/pcap/upload", "POST", null, {
-            file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ?
+            "file": "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ?
                 this.state.uploadSelectedFile.name : "invalid.pcap"),
-            flush_all: this.state.uploadFlushAll
+            "flush_all": this.state.uploadFlushAll
         });
 
         const fileCurlCommand = createCurlCommand("/pcap/file", "POST", {
-            file: this.state.fileValue,
-            flush_all: this.state.processFlushAll,
-            delete_original_file: this.state.deleteOriginalFile
+            "file": this.state.fileValue,
+            "flush_all": this.state.processFlushAll,
+            "delete_original_file": this.state.deleteOriginalFile
         });
 
         return (
diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js
index d872b47..0bbd407 100644
--- a/frontend/src/components/panels/RulesPane.js
+++ b/frontend/src/components/panels/RulesPane.js
@@ -142,23 +142,23 @@ class RulesPane extends Component {
             this.setState({ruleColorError: "color is not hexcolor"});
             valid = false;
         }
-        if (!validation.isValidPort(rule.filter.service_port)) {
+        if (!validation.isValidPort(rule.filter["service_port"])) {
             this.setState({ruleServicePortError: "service_port > 65565"});
             valid = false;
         }
-        if (!validation.isValidPort(rule.filter.client_port)) {
+        if (!validation.isValidPort(rule.filter["client_port"])) {
             this.setState({ruleClientPortError: "client_port > 65565"});
             valid = false;
         }
-        if (!validation.isValidAddress(rule.filter.client_address)) {
+        if (!validation.isValidAddress(rule.filter["client_address"])) {
             this.setState({ruleClientAddressError: "client_address is not ip_address"});
             valid = false;
         }
-        if (rule.filter.min_duration > rule.filter.max_duration) {
+        if (rule.filter["min_duration"] > rule.filter["max_duration"]) {
             this.setState({ruleDurationError: "min_duration > max_dur."});
             valid = false;
         }
-        if (rule.filter.min_bytes > rule.filter.max_bytes) {
+        if (rule.filter["min_bytes"] > rule.filter["max_bytes"]) {
             this.setState({ruleBytesError: "min_bytes > max_bytes"});
             valid = false;
         }
@@ -175,9 +175,9 @@ class RulesPane extends Component {
         const newPattern = _.cloneDeep(this.emptyPattern);
         this.setState({
             selectedRule: null,
-            newRule: newRule,
+            newRule,
             selectedPattern: null,
-            newPattern: newPattern,
+            newPattern,
             patternRegexFocused: false,
             patternOccurrencesFocused: false,
             ruleNameError: null,
@@ -210,9 +210,7 @@ class RulesPane extends Component {
 
         const newPattern = _.cloneDeep(this.emptyPattern);
         this.currentRule().patterns.push(pattern);
-        this.setState({
-            newPattern: newPattern
-        });
+        this.setState({newPattern});
     };
 
     editPattern = (pattern) => {
@@ -237,7 +235,7 @@ class RulesPane extends Component {
             valid = false;
             this.setState({patternRegexFocused: true});
         }
-        if (pattern.min_occurrences > pattern.max_occurrences) {
+        if (pattern["min_occurrences"] > pattern["max_occurrences"]) {
             valid = false;
             this.setState({patternOccurrencesFocused: true});
         }
@@ -273,25 +271,25 @@ class RulesPane extends Component {
                                     this.setState({patternRegexFocused: pattern.regex === ""});
                                 }}/>
                 </td>
-                <td><CheckField small checked={pattern.flags.caseless}
-                                onChange={(v) => this.updateParam(() => pattern.flags.caseless = v)}/></td>
-                <td><CheckField small checked={pattern.flags.dot_all}
-                                onChange={(v) => this.updateParam(() => pattern.flags.dot_all = v)}/></td>
-                <td><CheckField small checked={pattern.flags.multi_line}
-                                onChange={(v) => this.updateParam(() => pattern.flags.multi_line = v)}/></td>
-                <td><CheckField small checked={pattern.flags.utf_8_mode}
-                                onChange={(v) => this.updateParam(() => pattern.flags.utf_8_mode = v)}/></td>
-                <td><CheckField small checked={pattern.flags.unicode_property}
-                                onChange={(v) => this.updateParam(() => pattern.flags.unicode_property = v)}/></td>
+                <td><CheckField small checked={pattern.flags["caseless"]}
+                                onChange={(v) => this.updateParam(() => pattern.flags["caseless"] = v)}/></td>
+                <td><CheckField small checked={pattern.flags["dot_all"]}
+                                onChange={(v) => this.updateParam(() => pattern.flags["dot_all"] = v)}/></td>
+                <td><CheckField small checked={pattern.flags["multi_line"]}
+                                onChange={(v) => this.updateParam(() => pattern.flags["multi_line"] = v)}/></td>
+                <td><CheckField small checked={pattern.flags["utf_8_mode"]}
+                                onChange={(v) => this.updateParam(() => pattern.flags["utf_8_mode"] = v)}/></td>
+                <td><CheckField small checked={pattern.flags["unicode_property"]}
+                                onChange={(v) => this.updateParam(() => pattern.flags["unicode_property"] = v)}/></td>
                 <td style={{"width": "70px"}}>
-                    <NumericField small value={pattern.min_occurrences}
+                    <NumericField small value={pattern["min_occurrences"]}
                                   active={this.state.patternOccurrencesFocused}
-                                  onChange={(v) => this.updateParam(() => pattern.min_occurrences = v)}/>
+                                  onChange={(v) => this.updateParam(() => pattern["min_occurrences"] = v)}/>
                 </td>
                 <td style={{"width": "70px"}}>
-                    <NumericField small value={pattern.max_occurrences}
+                    <NumericField small value={pattern["max_occurrences"]}
                                   active={this.state.patternOccurrencesFocused}
-                                  onChange={(v) => this.updateParam(() => pattern.max_occurrences = v)}/>
+                                  onChange={(v) => this.updateParam(() => pattern["max_occurrences"] = v)}/>
                 </td>
                 <td><ChoiceField inline small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]}
                                  value={this.directions[pattern.direction]}
@@ -305,13 +303,13 @@ class RulesPane extends Component {
             :
             <tr key={"new_pattern"} className="row-small">
                 <td>{p.regex}</td>
-                <td>{p.flags.caseless ? "yes" : "no"}</td>
-                <td>{p.flags.dot_all ? "yes" : "no"}</td>
-                <td>{p.flags.multi_line ? "yes" : "no"}</td>
-                <td>{p.flags.utf_8_mode ? "yes" : "no"}</td>
-                <td>{p.flags.unicode_property ? "yes" : "no"}</td>
-                <td>{p.min_occurrences}</td>
-                <td>{p.max_occurrences}</td>
+                <td>{p.flags["caseless"] ? "yes" : "no"}</td>
+                <td>{p.flags["dot_all"] ? "yes" : "no"}</td>
+                <td>{p.flags["multi_line"] ? "yes" : "no"}</td>
+                <td>{p.flags["utf_8_mode"] ? "yes" : "no"}</td>
+                <td>{p.flags["unicode_property"] ? "yes" : "no"}</td>
+                <td>{p["min_occurrences"]}</td>
+                <td>{p["max_occurrences"]}</td>
                 <td>{this.directions[p.direction]}</td>
                 {!isUpdate && <td><ButtonField variant="blue" small rounded name="edit"
                                                onClick={() => this.editPattern(p)}/></td>}
@@ -373,32 +371,32 @@ class RulesPane extends Component {
 
                                 <Col style={{"paddingTop": "6px"}}>
                                     <span>filters:</span>
-                                    <NumericField name="service_port" inline value={rule.filter.service_port}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.service_port = v)}
+                                    <NumericField name="service_port" inline value={rule.filter["service_port"]}
+                                                  onChange={(v) => this.updateParam((r) => r.filter["service_port"] = v)}
                                                   min={0} max={65565} error={this.state.ruleServicePortError}
                                                   readonly={isUpdate}/>
-                                    <NumericField name="client_port" inline value={rule.filter.client_port}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.client_port = v)}
+                                    <NumericField name="client_port" inline value={rule.filter["client_port"]}
+                                                  onChange={(v) => this.updateParam((r) => r.filter["client_port"] = v)}
                                                   min={0} max={65565} error={this.state.ruleClientPortError}
                                                   readonly={isUpdate}/>
-                                    <InputField name="client_address" value={rule.filter.client_address}
+                                    <InputField name="client_address" value={rule.filter["client_address"]}
                                                 error={this.state.ruleClientAddressError} readonly={isUpdate}
-                                                onChange={(v) => this.updateParam((r) => r.filter.client_address = v)}/>
+                                                onChange={(v) => this.updateParam((r) => r.filter["client_address"] = v)}/>
                                 </Col>
 
                                 <Col style={{"paddingTop": "11px"}}>
-                                    <NumericField name="min_duration" inline value={rule.filter.min_duration}
+                                    <NumericField name="min_duration" inline value={rule.filter["min_duration"]}
                                                   error={this.state.ruleDurationError} readonly={isUpdate}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.min_duration = v)}/>
-                                    <NumericField name="max_duration" inline value={rule.filter.max_duration}
+                                                  onChange={(v) => this.updateParam((r) => r.filter["min_duration"] = v)}/>
+                                    <NumericField name="max_duration" inline value={rule.filter["max_duration"]}
                                                   error={this.state.ruleDurationError} readonly={isUpdate}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.max_duration = v)}/>
-                                    <NumericField name="min_bytes" inline value={rule.filter.min_bytes}
+                                                  onChange={(v) => this.updateParam((r) => r.filter["max_duration"] = v)}/>
+                                    <NumericField name="min_bytes" inline value={rule.filter["min_bytes"]}
                                                   error={this.state.ruleBytesError} readonly={isUpdate}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.min_bytes = v)}/>
-                                    <NumericField name="max_bytes" inline value={rule.filter.max_bytes}
+                                                  onChange={(v) => this.updateParam((r) => r.filter["min_bytes"] = v)}/>
+                                    <NumericField name="max_bytes" inline value={rule.filter["max_bytes"]}
                                                   error={this.state.ruleBytesError} readonly={isUpdate}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.max_bytes = v)}/>
+                                                  onChange={(v) => this.updateParam((r) => r.filter["max_bytes"] = v)}/>
                                 </Col>
                             </Row>
                         </Container>
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index d36e85e..776ebd0 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -70,20 +70,20 @@ class SearchPane extends Component {
 
     loadSearches = () => {
         backend.get("/api/searches")
-            .then(res => this.setState({searches: res.json, searchesStatusCode: res.status}))
-            .catch(res => this.setState({searchesStatusCode: res.status, searchesResponse: JSON.stringify(res.json)}));
+            .then((res) => this.setState({searches: res.json, searchesStatusCode: res.status}))
+            .catch((res) => this.setState({searchesStatusCode: res.status, searchesResponse: JSON.stringify(res.json)}));
     };
 
     performSearch = () => {
         const options = this.state.currentSearchOptions;
         this.setState({loading: true});
         if (this.validateSearch(options)) {
-            backend.post("/api/searches/perform", options).then(res => {
+            backend.post("/api/searches/perform", options).then((res) => {
                 this.reset();
                 this.setState({searchStatusCode: res.status, loading: false});
                 this.loadSearches();
                 this.viewSearch(res.json.id);
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({
                     searchStatusCode: res.status, searchResponse: JSON.stringify(res.json),
                     loading: false
@@ -168,7 +168,7 @@ class SearchPane extends Component {
     render() {
         const options = this.state.currentSearchOptions;
 
-        let searches = this.state.searches.map(s =>
+        let searches = this.state.searches.map((s) =>
             <tr key={s.id} className="row-small row-clickable">
                 <td>{s.id.substring(0, 8)}</td>
                 <td>{this.extractPattern(s["search_options"])}</td>
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index 41ab33d..1819fec 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -18,7 +18,7 @@
 import DOMPurify from "dompurify";
 import React, {Component} from "react";
 import {Row} from "react-bootstrap";
-import ReactJson from "react-json-view"
+import ReactJson from "react-json-view";
 import backend from "../../backend";
 import log from "../../log";
 import {downloadBlob, getHeaderValue} from "../../utils";
@@ -72,7 +72,7 @@ class StreamsPane extends Component {
 
     setFormat = (format) => {
         if (this.validFormats.includes(format)) {
-            this.setState({format: format});
+            this.setState({format});
         }
     };
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d00df88..62cb974 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -21,7 +21,6 @@ import ReactDOM from "react-dom";
 import App from "./components/App";
 import "./index.scss";
 import notifications from "./notifications";
-import * as serviceWorker from "./serviceWorker";
 
 notifications.createWebsocket();
 
@@ -31,5 +30,3 @@ ReactDOM.render(
     // </React.StrictMode>,
     document.getElementById("root")
 );
-
-serviceWorker.unregister();
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index ea360be..1378d81 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -82,9 +82,11 @@ a {
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.3;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/frontend/src/log.js b/frontend/src/log.js
index 424e1b4..0afac47 100644
--- a/frontend/src/log.js
+++ b/frontend/src/log.js
@@ -16,9 +16,14 @@
  */
 
 const log = {
-    debug: (...obj) => console.info(...obj),
+    debug: (...obj) => isDevelopment() && console.info(...obj),
     info: (...obj) => console.info(...obj),
+    warn: (...obj) => console.warn(...obj),
     error: (...obj) => console.error(obj)
 };
 
+function isDevelopment() {
+    return !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+}
+
 export default log;
diff --git a/frontend/src/serviceWorker.js b/frontend/src/serviceWorker.js
deleted file mode 100644
index a1f0ba8..0000000
--- a/frontend/src/serviceWorker.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-    window.location.hostname === "localhost" ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === "[::1]" ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-    if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
-        // The URL constructor is available in all browsers that support SW.
-        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-        if (publicUrl.origin !== window.location.origin) {
-            // Our service worker won't work if PUBLIC_URL is on a different origin
-            // from what our page is served on. This might happen if a CDN is used to
-            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-            return;
-        }
-
-        window.addEventListener("load", () => {
-            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-            if (isLocalhost) {
-                // This is running on localhost. Let's check if a service worker still exists or not.
-                checkValidServiceWorker(swUrl, config);
-
-                // Add some additional logging to localhost, pointing developers to the
-                // service worker/PWA documentation.
-                navigator.serviceWorker.ready.then(() => {
-                    console.log(
-                        "This web app is being served cache-first by a service " +
-                        "worker. To learn more, visit https://bit.ly/CRA-PWA"
-                    );
-                });
-            } else {
-                // Is not localhost. Just register service worker
-                registerValidSW(swUrl, config);
-            }
-        });
-    }
-}
-
-function registerValidSW(swUrl, config) {
-    navigator.serviceWorker
-        .register(swUrl)
-        .then((registration) => {
-            registration.onupdatefound = () => {
-                const installingWorker = registration.installing;
-                if (installingWorker == null) {
-                    return;
-                }
-                installingWorker.onstatechange = () => {
-                    if (installingWorker.state === "installed") {
-                        if (navigator.serviceWorker.controller) {
-                            // At this point, the updated precached content has been fetched,
-                            // but the previous service worker will still serve the older
-                            // content until all client tabs are closed.
-                            console.log(
-                                "New content is available and will be used when all " +
-                                "tabs for this page are closed. See https://bit.ly/CRA-PWA."
-                            );
-
-                            // Execute callback
-                            if (config && config.onUpdate) {
-                                config.onUpdate(registration);
-                            }
-                        } else {
-                            // At this point, everything has been precached.
-                            // It's the perfect time to display a
-                            // "Content is cached for offline use." message.
-                            console.log("Content is cached for offline use.");
-
-                            // Execute callback
-                            if (config && config.onSuccess) {
-                                config.onSuccess(registration);
-                            }
-                        }
-                    }
-                };
-            };
-        })
-        .catch((error) => {
-            console.error("Error during service worker registration:", error);
-        });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-    // Check if the service worker can be found. If it can't reload the page.
-    fetch(swUrl, {
-        headers: {"Service-Worker": "script"},
-    })
-        .then((response) => {
-            // Ensure service worker exists, and that we really are getting a JS file.
-            const contentType = response.headers.get("content-type");
-            if (
-                response.status === 404 ||
-                (contentType != null && contentType.indexOf("javascript") === -1)
-            ) {
-                // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then((registration) => {
-                    registration.unregister().then(() => {
-                        window.location.reload();
-                    });
-                });
-            } else {
-                // Service worker found. Proceed as normal.
-                registerValidSW(swUrl, config);
-            }
-        })
-        .catch(() => {
-            console.log(
-                "No internet connection found. App is running in offline mode."
-            );
-        });
-}
-
-export function unregister() {
-    if ("serviceWorker" in navigator) {
-        navigator.serviceWorker.ready
-            .then((registration) => {
-                registration.unregister();
-            })
-            .catch((error) => {
-                console.error(error.message);
-            });
-    }
-}
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
deleted file mode 100644
index 9b1d6d0..0000000
--- a/frontend/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
\ No newline at end of file
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 0f0927e..445e576 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -133,7 +133,7 @@ export function getHeaderValue(request, key) {
     if (request && request.headers) {
         return request.headers[Object.keys(request.headers).find((k) => k.toLowerCase() === key.toLowerCase())];
     }
-    return undefined;
+    return null;
 }
 
 export function downloadBlob(blob, fileName) {
diff --git a/parsers/http_request_parser.go b/parsers/http_request_parser.go
index 56093c9..d7ed81c 100644
--- a/parsers/http_request_parser.go
+++ b/parsers/http_request_parser.go
@@ -28,7 +28,7 @@ import (
 	"strings"
 )
 
-type HttpRequestMetadata struct {
+type HTTPRequestMetadata struct {
 	BasicMetadata
 	Method        string                         `json:"method"`
 	URL           string                         `json:"url"`
@@ -40,19 +40,19 @@ type HttpRequestMetadata struct {
 	FormData      map[string]string              `json:"form_data" binding:"omitempty"`
 	Body          string                         `json:"body" binding:"omitempty"`
 	Trailer       map[string]string              `json:"trailer" binding:"omitempty"`
-	Reproducers   HttpRequestMetadataReproducers `json:"reproducers"`
+	Reproducers   HTTPRequestMetadataReproducers `json:"reproducers"`
 }
 
-type HttpRequestMetadataReproducers struct {
+type HTTPRequestMetadataReproducers struct {
 	CurlCommand  string `json:"curl_command"`
 	RequestsCode string `json:"requests_code"`
 	FetchRequest string `json:"fetch_request"`
 }
 
-type HttpRequestParser struct {
+type HTTPRequestParser struct {
 }
 
-func (p HttpRequestParser) TryParse(content []byte) Metadata {
+func (p HTTPRequestParser) TryParse(content []byte) Metadata {
 	reader := bufio.NewReader(bytes.NewReader(content))
 	request, err := http.ReadRequest(reader)
 	if err != nil {
@@ -68,7 +68,7 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata {
 	_ = request.Body.Close()
 	_ = request.ParseForm()
 
-	return HttpRequestMetadata{
+	return HTTPRequestMetadata{
 		BasicMetadata: BasicMetadata{"http-request"},
 		Method:        request.Method,
 		URL:           request.URL.String(),
@@ -80,7 +80,7 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata {
 		FormData:      JoinArrayMap(request.Form),
 		Body:          body,
 		Trailer:       JoinArrayMap(request.Trailer),
-		Reproducers: HttpRequestMetadataReproducers{
+		Reproducers: HTTPRequestMetadataReproducers{
 			CurlCommand:  curlCommand(content),
 			RequestsCode: requestsCode(request, body),
 			FetchRequest: fetchRequest(request, body),
@@ -92,17 +92,17 @@ func curlCommand(content []byte) string {
 	// a new reader is required because all the body is read before and GetBody() doesn't works
 	reader := bufio.NewReader(bytes.NewReader(content))
 	request, _ := http.ReadRequest(reader)
-	if command, err := http2curl.GetCurlCommand(request); err == nil {
+	command, err := http2curl.GetCurlCommand(request)
+	if err == nil {
 		return command.String()
-	} else {
-		return err.Error()
 	}
+	return err.Error()
 }
 
 func requestsCode(request *http.Request, body string) string {
 	var b strings.Builder
-	headers := toJson(JoinArrayMap(request.Header))
-	cookies := toJson(CookiesMap(request.Cookies()))
+	headers := toJSON(JoinArrayMap(request.Header))
+	cookies := toJSON(CookiesMap(request.Cookies()))
 
 	b.WriteString("import requests\n\nresponse = requests." + strings.ToLower(request.Method) + "(")
 	b.WriteString("\"" + request.URL.String() + "\"")
@@ -146,14 +146,14 @@ func fetchRequest(request *http.Request, body string) string {
 	data["method"] = request.Method
 	// TODO: mode
 
-	if jsonData := toJson(data); jsonData != "" {
+	if jsonData := toJSON(data); jsonData != "" {
 		return "fetch(\"" + request.URL.String() + "\", " + jsonData + ");"
 	} else {
 		return "invalid-request"
 	}
 }
 
-func toJson(obj interface{}) string {
+func toJSON(obj interface{}) string {
 	if buffer, err := json.MarshalIndent(obj, "", "\t"); err == nil {
 		return string(buffer)
 	} else {
diff --git a/parsers/http_response_parser.go b/parsers/http_response_parser.go
index e5ef1ac..e61fffd 100644
--- a/parsers/http_response_parser.go
+++ b/parsers/http_response_parser.go
@@ -26,7 +26,7 @@ import (
 	"net/http"
 )
 
-type HttpResponseMetadata struct {
+type HTTPResponseMetadata struct {
 	BasicMetadata
 	Status           string            `json:"status"`
 	StatusCode       int               `json:"status_code"`
@@ -40,10 +40,10 @@ type HttpResponseMetadata struct {
 	Trailer          map[string]string `json:"trailer" binding:"omitempty"`
 }
 
-type HttpResponseParser struct {
+type HTTPResponseParser struct {
 }
 
-func (p HttpResponseParser) TryParse(content []byte) Metadata {
+func (p HTTPResponseParser) TryParse(content []byte) Metadata {
 	reader := bufio.NewReader(bytes.NewReader(content))
 	response, err := http.ReadResponse(reader, nil)
 	if err != nil {
@@ -74,11 +74,11 @@ func (p HttpResponseParser) TryParse(content []byte) Metadata {
 	_ = response.Body.Close()
 
 	var location string
-	if locationUrl, err := response.Location(); err == nil {
-		location = locationUrl.String()
+	if locationURL, err := response.Location(); err == nil {
+		location = locationURL.String()
 	}
 
-	return HttpResponseMetadata{
+	return HTTPResponseMetadata{
 		BasicMetadata:    BasicMetadata{"http-response"},
 		Status:           response.Status,
 		StatusCode:       response.StatusCode,
diff --git a/parsers/parser.go b/parsers/parser.go
index a29b1ab..9aca3b6 100644
--- a/parsers/parser.go
+++ b/parsers/parser.go
@@ -30,8 +30,8 @@ type BasicMetadata struct {
 }
 
 var parsers = []Parser{	// order matter
-	HttpRequestParser{},
-	HttpResponseParser{},
+	HTTPRequestParser{},
+	HTTPResponseParser{},
 }
 
 func Parse(content []byte) Metadata {
diff --git a/pcap_importer_test.go b/pcap_importer_test.go
index 8940060..a47f2d9 100644
--- a/pcap_importer_test.go
+++ b/pcap_importer_test.go
@@ -127,6 +127,7 @@ func newTestPcapImporter(wrapper *TestStorageWrapper, serverAddress string) *Pca
 		mAssemblers: sync.Mutex{},
 		mSessions:   sync.Mutex{},
 		serverNet:   *ParseIPNet(serverAddress),
+		notificationController: NewNotificationController(nil),
 	}
 }
 
diff --git a/rules_manager.go b/rules_manager.go
index 327e4ec..a6d969f 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -328,10 +328,10 @@ func (rm *rulesManagerImpl) validateAndAddRuleLocal(rule *Rule) error {
 		duplicatePatterns[regex] = true
 	}
 
-	startId := len(rm.patterns)
+	startID := len(rm.patterns)
 	for id, pattern := range newPatterns {
 		rm.patterns = append(rm.patterns, pattern)
-		rm.patternsIds[pattern.String()] = uint(startId + id)
+		rm.patternsIds[pattern.String()] = uint(startID + id)
 	}
 
 	rm.rules[rule.ID] = *rule
diff --git a/scripts/generate_ping.py b/scripts/generate_ping.py
index 73454c1..0c06a9e 100755
--- a/scripts/generate_ping.py
+++ b/scripts/generate_ping.py
@@ -28,7 +28,7 @@ if __name__ == "__main__":
 
     port = 9999
     n = 10000
-    
+
     if sys.argv[1] == "server":
         # docker run -it --rm -p 9999:9999 -v "$PWD":/ping -w /ping python:3 python generate_ping.py server
         with socketserver.TCPServer(("0.0.0.0", port), PongHandler) as server:
diff --git a/utils.go b/utils.go
index 639fd94..e721d78 100644
--- a/utils.go
+++ b/utils.go
@@ -57,12 +57,12 @@ func CustomRowID(payload uint64, timestamp time.Time) RowID {
 	binary.BigEndian.PutUint32(key[0:4], uint32(timestamp.Unix()))
 	binary.BigEndian.PutUint64(key[4:12], payload)
 
-	if oid, err := primitive.ObjectIDFromHex(hex.EncodeToString(key[:])); err == nil {
+	oid, err := primitive.ObjectIDFromHex(hex.EncodeToString(key[:]))
+	if err == nil {
 		return oid
-	} else {
-		log.WithError(err).Warn("failed to create object id")
-		return primitive.NewObjectID()
 	}
+	log.WithError(err).Warn("failed to create object id")
+	return primitive.NewObjectID()
 }
 
 func NewRowID() RowID {
-- 
cgit v1.2.3-70-g09d2


From d429a344ef34bb9289616dc7ca11c161fabce5d7 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 15:26:55 +0200
Subject: Refactor js arrow functions

---
 frontend/src/components/App.js                     |  2 +-
 frontend/src/components/Notifications.js           |  2 +-
 frontend/src/components/Timeline.js                |  2 +-
 frontend/src/components/filters/AdvancedFilters.js |  4 ++--
 .../src/components/filters/ExitSearchFilter.js     |  2 +-
 .../components/filters/RulesConnectionsFilter.js   |  2 +-
 frontend/src/components/objects/Connection.js      |  4 ++--
 .../components/objects/ConnectionMatchedRules.js   |  4 ++--
 frontend/src/components/panels/ConnectionsPane.js  | 10 +++++-----
 frontend/src/components/panels/PcapsPane.js        |  6 +++---
 frontend/src/components/panels/RulesPane.js        | 16 ++++++++--------
 frontend/src/components/panels/SearchPane.js       | 22 +++++++++++-----------
 frontend/src/components/panels/ServicesPane.js     | 10 +++++-----
 frontend/src/components/panels/StreamsPane.js      |  6 +++---
 frontend/src/dispatcher.js                         |  8 ++++----
 frontend/src/log.js                                |  2 +-
 parsers/http_request_parser.go                     |  3 +--
 17 files changed, 52 insertions(+), 53 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 888ff86..e12a99d 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -27,7 +27,7 @@ class App extends Component {
     state = {};
 
     componentDidMount() {
-        dispatcher.register("notifications", payload => {
+        dispatcher.register("notifications", (payload) => {
             if (payload.event === "connected") {
                 this.setState({
                     connected: true,
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index a81eba1..0b47b43 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -107,7 +107,7 @@ class Notifications extends Component {
             <div className="notifications">
                 <div className="notifications-list">
                     {
-                        this.state.closedNotifications.concat(this.state.notifications).map(n => {
+                        this.state.closedNotifications.concat(this.state.notifications).map((n) => {
                             const notificationClassnames = {
                                 "notification": true,
                                 "notification-closed": n.closed,
diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js
index 94fa4d0..9ecbd80 100644
--- a/frontend/src/components/Timeline.js
+++ b/frontend/src/components/Timeline.js
@@ -127,7 +127,7 @@ class Timeline extends Component {
         const series = new TimeSeries({
             name: "statistics",
             columns: ["time"].concat(columns),
-            points: zeroFilledMetrics.map((m) => [m["range_start"]].concat(columns.map(c =>
+            points: zeroFilledMetrics.map((m) => [m["range_start"]].concat(columns.map((c) =>
                 ((metric in m) && (m[metric] != null)) ? (m[metric][c] || 0) : 0
             )))
         });
diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js
index 15667a5..8598185 100644
--- a/frontend/src/components/filters/AdvancedFilters.js
+++ b/frontend/src/components/filters/AdvancedFilters.js
@@ -28,10 +28,10 @@ class AdvancedFilters extends Component {
     componentDidMount() {
         this.urlParams = new URLSearchParams(this.props.location.search);
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             this.urlParams = updateParams(this.urlParams, payload);
             const active = ["client_address", "client_port", "min_duration", "max_duration", "min_bytes", "max_bytes"]
-                .some(f => this.urlParams.has(f));
+                .some((f) => this.urlParams.has(f));
             if (this.state.active !== active) {
                 this.setState({active});
             }
diff --git a/frontend/src/components/filters/ExitSearchFilter.js b/frontend/src/components/filters/ExitSearchFilter.js
index 72cfb0c..0aacfd6 100644
--- a/frontend/src/components/filters/ExitSearchFilter.js
+++ b/frontend/src/components/filters/ExitSearchFilter.js
@@ -28,7 +28,7 @@ class ExitSearchFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         this.setState({performedSearch: params.get("performed_search")});
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             if (this.state.performedSearch !== payload["performed_search"]) {
                 this.setState({performedSearch: payload["performed_search"]});
             }
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 37d36b7..210ee36 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -37,7 +37,7 @@ class RulesConnectionsFilter extends Component {
 
         backend.get("/api/rules").then((res) => {
             let rules = res.json.flatMap((rule) => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
-            activeRules = rules.filter((rule) => activeRules.some(id => rule.id === id));
+            activeRules = rules.filter((rule) => activeRules.some((id) => rule.id === id));
             this.setState({rules, activeRules});
         });
 
diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index e5896e9..b70b7f7 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -37,7 +37,7 @@ class Connection extends Component {
         if (name === "hide") {
             const enabled = !this.props.data.hidden;
             backend.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`)
-                .then(_ => {
+                .then((_) => {
                     this.props.onEnabled(!enabled);
                     this.setState({update: true});
                 });
@@ -45,7 +45,7 @@ class Connection extends Component {
         if (name === "mark") {
             const marked = this.props.data.marked;
             backend.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`)
-                .then(_ => {
+                .then((_) => {
                     this.props.onMarked(!marked);
                     this.setState({update: true});
                 });
diff --git a/frontend/src/components/objects/ConnectionMatchedRules.js b/frontend/src/components/objects/ConnectionMatchedRules.js
index cfd1254..a69cad8 100644
--- a/frontend/src/components/objects/ConnectionMatchedRules.js
+++ b/frontend/src/components/objects/ConnectionMatchedRules.js
@@ -33,8 +33,8 @@ class ConnectionMatchedRules extends Component {
     };
 
     render() {
-        const matchedRules = this.props.matchedRules.map(mr => {
-            const rule = this.props.rules.find(r => r.id === mr);
+        const matchedRules = this.props.matchedRules.map((mr) => {
+            const rule = this.props.rules.find((r) => r.id === mr);
             return <ButtonField key={mr} onClick={() => this.onMatchedRulesSelected(rule.id)} name={rule.name}
                                 color={rule.color} small/>;
         });
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 9418fad..457c249 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -61,8 +61,8 @@ class ConnectionsPane extends Component {
             const id = match[1];
             additionalParams.from = id;
             backend.get(`/api/connections/${id}`)
-                .then(res => this.connectionSelected(res.json))
-                .catch(error => log.error("Error loading initial connection", error));
+                .then((res) => this.connectionSelected(res.json))
+                .catch((error) => log.error("Error loading initial connection", error));
         }
 
         this.loadConnections(additionalParams, urlParams, true).then(() => log.debug("Connections loaded"));
@@ -283,11 +283,11 @@ class ConnectionsPane extends Component {
                         </thead>
                         <tbody>
                         {
-                            this.state.connections.flatMap(c => {
+                            this.state.connections.flatMap((c) => {
                                 return [<Connection key={c.id} data={c} onSelected={() => this.connectionSelected(c)}
                                                     selected={this.state.selected === c.id}
-                                                    onMarked={marked => c.marked = marked}
-                                                    onEnabled={enabled => c.hidden = !enabled}
+                                                    onMarked={(marked) => c.marked = marked}
+                                                    onEnabled={(enabled) => c.hidden = !enabled}
                                                     services={this.state.services}/>,
                                     c.matched_rules.length > 0 &&
                                     <ConnectionMatchedRules key={c.id + "_m"} matchedRules={c.matched_rules}
diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js
index ddc5948..b7d5ce9 100644
--- a/frontend/src/components/panels/PcapsPane.js
+++ b/frontend/src/components/panels/PcapsPane.js
@@ -98,9 +98,9 @@ class PcapsPane extends Component {
         }
 
         backend.post("/api/pcap/file", {
-            file: this.state.fileValue,
-            flush_all: this.state.processFlushAll,
-            delete_original_file: this.state.deleteOriginalFile
+            "file": this.state.fileValue,
+            "flush_all": this.state.processFlushAll,
+            "delete_original_file": this.state.deleteOriginalFile
         }).then((res) => {
             this.setState({
                 processStatusCode: res.status,
diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js
index 0bbd407..cdfe185 100644
--- a/frontend/src/components/panels/RulesPane.js
+++ b/frontend/src/components/panels/RulesPane.js
@@ -103,17 +103,17 @@ class RulesPane extends Component {
     };
 
     loadRules = () => {
-        backend.get("/api/rules").then(res => this.setState({rules: res.json, rulesStatusCode: res.status}))
-            .catch(res => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)}));
+        backend.get("/api/rules").then((res) => this.setState({rules: res.json, rulesStatusCode: res.status}))
+            .catch((res) => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)}));
     };
 
     addRule = () => {
         if (this.validateRule(this.state.newRule)) {
-            backend.post("/api/rules", this.state.newRule).then(res => {
+            backend.post("/api/rules", this.state.newRule).then((res) => {
                 this.reset();
                 this.setState({ruleStatusCode: res.status});
                 this.loadRules();
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)});
             });
         }
@@ -122,11 +122,11 @@ class RulesPane extends Component {
     updateRule = () => {
         const rule = this.state.selectedRule;
         if (this.validateRule(rule)) {
-            backend.put(`/api/rules/${rule.id}`, rule).then(res => {
+            backend.put(`/api/rules/${rule.id}`, rule).then((res) => {
                 this.reset();
                 this.setState({ruleStatusCode: res.status});
                 this.loadRules();
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)});
             });
         }
@@ -247,7 +247,7 @@ class RulesPane extends Component {
         const rule = this.currentRule();
         const pattern = this.state.selectedPattern || this.state.newPattern;
 
-        let rules = this.state.rules.map(r =>
+        let rules = this.state.rules.map((r) =>
             <tr key={r.id} onClick={() => {
                 this.reset();
                 this.setState({selectedRule: _.cloneDeep(r)});
@@ -262,7 +262,7 @@ class RulesPane extends Component {
         let patterns = (this.state.selectedPattern == null && !isUpdate ?
                 rule.patterns.concat(this.state.newPattern) :
                 rule.patterns
-        ).map(p => p === pattern ?
+        ).map((p) => p === pattern ?
             <tr key={"new_pattern"}>
                 <td style={{"width": "500px"}}>
                     <InputField small active={this.state.patternRegexFocused} value={pattern.regex}
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index 776ebd0..4c9f229 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -231,29 +231,29 @@ class SearchPane extends Component {
 
                         <div className="content-row">
                             <div className="text-search">
-                                <TagField tags={(options["text_search"].terms || []).map(t => {
+                                <TagField tags={(options["text_search"].terms || []).map((t) => {
                                     return {name: t};
                                 })}
                                           name="terms" min={3} inline allowNew={true}
                                           readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
-                                          onChange={(tags) => this.updateParam(s => s["text_search"].terms = tags.map(t => t.name))}/>
+                                          onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map(t => t.name))}/>
                                 <TagField tags={(options["text_search"]["excluded_terms"] || []).map(t => {
                                     return {name: t};
                                 })}
                                           name="excluded_terms" min={3} inline allowNew={true}
                                           readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
-                                          onChange={(tags) => this.updateParam(s => s["text_search"]["excluded_terms"] = tags.map(t => t.name))}/>
+                                          onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map(t => t.name))}/>
 
                                 <span className="exclusive-separator">or</span>
 
                                 <InputField name="exact_phrase" value={options["text_search"]["exact_phrase"]} inline
                                             error={this.state.exactPhraseError}
-                                            onChange={v => this.updateParam(s => s["text_search"]["exact_phrase"] = v)}
+                                            onChange={(v) => this.updateParam((s) => s["text_search"]["exact_phrase"] = v)}
                                             readonly={regexOptionsModified || (Array.isArray(options["text_search"].terms) && options["text_search"].terms.length > 0)}/>
 
                                 <CheckField checked={options["text_search"]["case_sensitive"]} name="case_sensitive"
                                             readonly={regexOptionsModified} small
-                                            onChange={(v) => this.updateParam(s => s["text_search"]["case_sensitive"] = v)}/>
+                                            onChange={(v) => this.updateParam((s) => s["text_search"]["case_sensitive"] = v)}/>
                             </div>
 
                             <div className="separator">
@@ -264,28 +264,28 @@ class SearchPane extends Component {
                                 <InputField name="pattern" value={options["regex_search"].pattern} inline
                                             error={this.state.patternError}
                                             readonly={textOptionsModified || options["regex_search"]["not_pattern"]}
-                                            onChange={v => this.updateParam(s => s["regex_search"].pattern = v)}/>
+                                            onChange={(v) => this.updateParam((s) => s["regex_search"].pattern = v)}/>
                                 <span className="exclusive-separator">or</span>
                                 <InputField name="not_pattern" value={options["regex_search"]["not_pattern"]} inline
                                             error={this.state.notPatternError}
                                             readonly={textOptionsModified || options["regex_search"].pattern}
-                                            onChange={v => this.updateParam(s => s["regex_search"]["not_pattern"] = v)}/>
+                                            onChange={(v) => this.updateParam((s) => s["regex_search"]["not_pattern"] = v)}/>
 
                                 <div className="checkbox-line">
                                     <CheckField checked={options["regex_search"]["case_insensitive"]}
                                                 name="case_insensitive"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s["regex_search"]["case_insensitive"] = v)}/>
+                                                onChange={(v) => this.updateParam((s) => s["regex_search"]["case_insensitive"] = v)}/>
                                     <CheckField checked={options["regex_search"]["multi_line"]} name="multi_line"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s["regex_search"]["multi_line"] = v)}/>
+                                                onChange={(v) => this.updateParam((s) => s["regex_search"]["multi_line"] = v)}/>
                                     <CheckField checked={options["regex_search"]["ignore_whitespaces"]}
                                                 name="ignore_whitespaces"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s["regex_search"]["ignore_whitespaces"] = v)}/>
+                                                onChange={(v) => this.updateParam((s) => s["regex_search"]["ignore_whitespaces"] = v)}/>
                                     <CheckField checked={options["regex_search"]["dot_character"]} name="dot_character"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s["regex_search"]["dot_character"] = v)}/>
+                                                onChange={(v) => this.updateParam((s) => s["regex_search"]["dot_character"] = v)}/>
                                 </div>
                             </div>
                         </div>
diff --git a/frontend/src/components/panels/ServicesPane.js b/frontend/src/components/panels/ServicesPane.js
index 48d9e29..5986804 100644
--- a/frontend/src/components/panels/ServicesPane.js
+++ b/frontend/src/components/panels/ServicesPane.js
@@ -68,18 +68,18 @@ class ServicesPane extends Component {
 
     loadServices = () => {
         backend.get("/api/services")
-            .then(res => this.setState({services: Object.values(res.json), servicesStatusCode: res.status}))
-            .catch(res => this.setState({servicesStatusCode: res.status, servicesResponse: JSON.stringify(res.json)}));
+            .then((res) => this.setState({services: Object.values(res.json), servicesStatusCode: res.status}))
+            .catch((res) => this.setState({servicesStatusCode: res.status, servicesResponse: JSON.stringify(res.json)}));
     };
 
     updateService = () => {
         const service = this.state.currentService;
         if (this.validateService(service)) {
-            backend.put("/api/services", service).then(res => {
+            backend.put("/api/services", service).then((res) => {
                 this.reset();
                 this.setState({serviceStatusCode: res.status});
                 this.loadServices();
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({serviceStatusCode: res.status, serviceResponse: JSON.stringify(res.json)});
             });
         }
@@ -126,7 +126,7 @@ class ServicesPane extends Component {
         const isUpdate = this.state.isUpdate;
         const service = this.state.currentService;
 
-        let services = this.state.services.map(s =>
+        let services = this.state.services.map((s) =>
             <tr key={s.port} onClick={() => {
                 this.reset();
                 this.setState({isUpdate: true, currentService: _.cloneDeep(s)});
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index 1819fec..9470d7d 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -67,7 +67,7 @@ class StreamsPane extends Component {
     loadStream = (connectionId) => {
         this.setState({messages: [], currentId: connectionId});
         backend.get(`/api/streams/${connectionId}?format=${this.state.format}`)
-            .then(res => this.setState({messages: res.json}));
+            .then((res) => this.setState({messages: res.json}));
     };
 
     setFormat = (format) => {
@@ -166,8 +166,8 @@ class StreamsPane extends Component {
     downloadStreamRaw = (value) => {
         if (this.state.currentId) {
             backend.download(`/api/streams/${this.props.connection.id}/download?format=${this.state.format}&type=${value}`)
-                .then(res => downloadBlob(res.blob, `${this.state.currentId}-${value}-${this.state.format}.txt`))
-                .catch(_ => log.error("Failed to download stream messages"));
+                .then((res) => downloadBlob(res.blob, `${this.state.currentId}-${value}-${this.state.format}.txt`))
+                .catch((_) => log.error("Failed to download stream messages"));
         }
     };
 
diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js
index ef5dbde..32f3f33 100644
--- a/frontend/src/dispatcher.js
+++ b/frontend/src/dispatcher.js
@@ -24,7 +24,7 @@ class Dispatcher {
     }
 
     dispatch = (topic, payload) => {
-        this.listeners.filter(l => l.topic === topic).forEach(l => l.callback(payload));
+        this.listeners.filter((l) => l.topic === topic).forEach((l) => l.callback(payload));
     };
 
     register = (topic, callback) => {
@@ -34,20 +34,20 @@ class Dispatcher {
         if (typeof topic === "string") {
             this.listeners.push({topic, callback});
         } else if (typeof topic === "object" && Array.isArray(topic)) {
-            topic.forEach(e => {
+            topic.forEach((e) => {
                 if (typeof e !== "string") {
                     throw new Error("all topics must be strings");
                 }
             });
 
-            topic.forEach(e => this.listeners.push({e, callback}));
+            topic.forEach((e) => this.listeners.push({e, callback}));
         } else {
             throw new Error("topic must be a string or an array of strings");
         }
     };
 
     unregister = (callback) => {
-        _.remove(this.listeners, l => l.callback === callback);
+        _.remove(this.listeners, (l) => l.callback === callback);
     };
 
 }
diff --git a/frontend/src/log.js b/frontend/src/log.js
index 0afac47..9a75fbc 100644
--- a/frontend/src/log.js
+++ b/frontend/src/log.js
@@ -23,7 +23,7 @@ const log = {
 };
 
 function isDevelopment() {
-    return !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+    return !process.env.NODE_ENV || process.env.NODE_ENV === "development";
 }
 
 export default log;
diff --git a/parsers/http_request_parser.go b/parsers/http_request_parser.go
index d7ed81c..98ba8e3 100644
--- a/parsers/http_request_parser.go
+++ b/parsers/http_request_parser.go
@@ -148,9 +148,8 @@ func fetchRequest(request *http.Request, body string) string {
 
 	if jsonData := toJSON(data); jsonData != "" {
 		return "fetch(\"" + request.URL.String() + "\", " + jsonData + ");"
-	} else {
-		return "invalid-request"
 	}
+	return "invalid-request"
 }
 
 func toJSON(obj interface{}) string {
-- 
cgit v1.2.3-70-g09d2


From 79b8b2fa3e8563c986da8baa3a761f2d4f0c6f47 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 19:05:44 +0200
Subject: Minor improvements

---
 application_router.go                              |  2 +-
 frontend/src/components/App.js                     | 29 ++++++++-----
 frontend/src/components/Header.js                  | 12 +++---
 frontend/src/components/fields/InputField.js       |  2 +-
 frontend/src/components/objects/CopyLinkPopover.js |  4 +-
 frontend/src/components/pages/ConfigurationPage.js | 12 ++++--
 .../src/components/pages/ConfigurationPage.scss    | 30 +++++++++----
 frontend/src/components/pages/MainPage.js          | 50 +++++++++++-----------
 frontend/src/components/panels/ConnectionsPane.js  |  4 +-
 frontend/src/components/panels/SearchPane.js       |  6 +--
 rules_manager.go                                   |  5 +++
 11 files changed, 93 insertions(+), 63 deletions(-)

(limited to 'frontend/src/components')

diff --git a/application_router.go b/application_router.go
index 656b63e..4048dc5 100644
--- a/application_router.go
+++ b/application_router.go
@@ -39,7 +39,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext,
 
 	router.Use(static.Serve("/", static.LocalFile("./frontend/build", true)))
 
-	for _, path := range []string{"/connections/:id", "/pcaps", "/rules", "/services", "/config"} {
+	for _, path := range []string{"/connections/:id", "/pcaps", "/rules", "/services", "/config", "/searches"} {
 		router.GET(path, func(c *gin.Context) {
 			c.File("./frontend/build/index.html")
 		})
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index e12a99d..96083cd 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -16,6 +16,7 @@
  */
 
 import React, {Component} from "react";
+import {BrowserRouter as Router} from "react-router-dom";
 import dispatcher from "../dispatcher";
 import Notifications from "./Notifications";
 import ConfigurationPage from "./pages/ConfigurationPage";
@@ -27,15 +28,7 @@ class App extends Component {
     state = {};
 
     componentDidMount() {
-        dispatcher.register("notifications", (payload) => {
-            if (payload.event === "connected") {
-                this.setState({
-                    connected: true,
-                    configured: payload.message["is_configured"],
-                    version: payload.message["version"]
-                });
-            }
-        });
+        dispatcher.register("notifications", this.handleNotifications);
 
         setInterval(() => {
             if (document.title.endsWith("❚")) {
@@ -46,16 +39,30 @@ class App extends Component {
         }, 500);
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotifications);
+    }
+
+    handleNotifications = (payload) => {
+        if (payload.event === "connected") {
+            this.setState({
+                connected: true,
+                configured: payload.message["is_configured"],
+                version: payload.message["version"]
+            });
+        }
+    };
+
     render() {
         return (
-            <>
+            <Router>
                 <Notifications/>
                 {this.state.connected ?
                     (this.state.configured ? <MainPage version={this.state.version}/> :
                         <ConfigurationPage onConfigured={() => this.setState({configured: true})}/>) :
                     <ServiceUnavailablePage/>
                 }
-            </>
+            </Router>
         );
     }
 }
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index ab16dd1..c46d768 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -27,6 +27,8 @@ import RulesConnectionsFilter from "./filters/RulesConnectionsFilter";
 import StringConnectionsFilter from "./filters/StringConnectionsFilter";
 import "./Header.scss";
 
+const classNames = require("classnames");
+
 class Header extends Component {
 
     componentDidMount() {
@@ -46,7 +48,7 @@ class Header extends Component {
         return (
             <header className="header container-fluid">
                 <div className="row">
-                    <div className="col-auto">
+                    <div className={classNames({"col-auto": this.props.configured, "col": !this.props.configured})}>
                         <h1 className="header-title type-wrap">
                             <Link to="/">
                                 <span style={{whiteSpace: "pre"}} ref={(el) => {
@@ -56,7 +58,7 @@ class Header extends Component {
                         </h1>
                     </div>
 
-                    <div className="col-auto">
+                    {this.props.configured && <div className="col-auto">
                         <div className="filters-bar">
                             <StringConnectionsFilter filterName="service_port"
                                                      defaultFilterValue="all_ports"
@@ -69,9 +71,9 @@ class Header extends Component {
                             <ExitSearchFilter/>
                             <AdvancedFilters onClick={this.props.onOpenFilters}/>
                         </div>
-                    </div>
+                    </div>}
 
-                    <div className="col">
+                    {this.props.configured && <div className="col">
                         <div className="header-buttons">
                             <Link to={"/searches" + this.props.location.search}>
                                 <ButtonField variant="pink" name="searches" bordered/>
@@ -89,7 +91,7 @@ class Header extends Component {
                                 <ButtonField variant="blue" name="config" bordered/>
                             </Link>
                         </div>
-                    </div>
+                    </div>}
                 </div>
             </header>
         );
diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js
index 823989d..e2ea020 100644
--- a/frontend/src/components/fields/InputField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -75,7 +75,7 @@ class InputField extends Component {
                                    aria-describedby={this.id} onChange={handler} {...inputProps}
                                    readOnly={this.props.readonly}/>
                         </div>
-                        {type !== "file" && value !== "" &&
+                        {type !== "file" && value !== "" && !this.props.readonly &&
                         <div className="field-clear">
                             <span onClick={() => handler(null)}>del</span>
                         </div>
diff --git a/frontend/src/components/objects/CopyLinkPopover.js b/frontend/src/components/objects/CopyLinkPopover.js
index fa9266f..b951603 100644
--- a/frontend/src/components/objects/CopyLinkPopover.js
+++ b/frontend/src/components/objects/CopyLinkPopover.js
@@ -37,10 +37,10 @@ class CopyLinkPopover extends Component {
     };
 
     render() {
-        const copyPopoverContent = <div style={{"width": "400px"}}>
+        const copyPopoverContent = <div style={{"width": "250px"}}>
             {this.state.copiedMessage ? <span><strong>Copied!</strong></span> :
                 <span>Click to <strong>copy</strong></span>}
-            <TextField readonly rows={1} value={this.props.value} textRef={this.copyTextarea}/>
+            <TextField readonly rows={2} value={this.props.value} textRef={this.copyTextarea}/>
         </div>;
 
         return (
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 4f0ce21..8f9b68b 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -25,8 +25,10 @@ import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
 import InputField from "../fields/InputField";
 import TextField from "../fields/TextField";
+import Header from "../Header";
 import LinkPopover from "../objects/LinkPopover";
 import "../panels/common.scss";
+import "./common.scss";
 import "./ConfigurationPage.scss";
 
 class ConfigurationPage extends Component {
@@ -113,9 +115,13 @@ class ConfigurationPage extends Component {
         </tr>);
 
         return (
-            <div className="configuration-page">
-                <div className="pane">
-                    <div className="pane-container">
+            <div className="page configuration-page">
+                <div className="page-header">
+                    <Header />
+                </div>
+
+                <div className="page-content">
+                    <div className="pane-container configuration-pane">
                         <div className="pane-section">
                             <div className="section-header">
                                 <span className="api-request">POST /setup</span>
diff --git a/frontend/src/components/pages/ConfigurationPage.scss b/frontend/src/components/pages/ConfigurationPage.scss
index 4509865..4254547 100644
--- a/frontend/src/components/pages/ConfigurationPage.scss
+++ b/frontend/src/components/pages/ConfigurationPage.scss
@@ -1,18 +1,30 @@
 @import "../../colors";
 
 .configuration-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
   background-color: $color-primary-0;
 
-  .pane {
-    flex-basis: 900px;
-    margin-bottom: 200px;
+  .header-title {
+    margin: 50px auto;
   }
 
-  .pane-container {
-    padding-bottom: 1px;
+  .configuration-pane {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    padding-top: 100px;
+
+    .section-content {
+      background-color: $color-primary-3;
+      margin-top: 15px;
+    }
+
+    .section-table table {
+      background-color: red !important;
+    }
+
+    .section-footer {
+      background-color: $color-primary-3;
+    }
   }
 }
+
diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js
index a542e3f..c4dcd20 100644
--- a/frontend/src/components/pages/MainPage.js
+++ b/frontend/src/components/pages/MainPage.js
@@ -16,7 +16,7 @@
  */
 
 import React, {Component} from "react";
-import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
+import {Route, Switch} from "react-router-dom";
 import Filters from "../dialogs/Filters";
 import Header from "../Header";
 import Connections from "../panels/ConnectionsPane";
@@ -42,34 +42,32 @@ class MainPage extends Component {
 
         return (
             <div className="page main-page">
-                <Router>
-                    <div className="page-header">
-                        <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/>
-                    </div>
-
-                    <div className="page-content">
-                        <div className="pane connections-pane">
-                            <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
-                        </div>
-                        <div className="pane details-pane">
-                            <Switch>
-                                <Route path="/searches" children={<SearchPane/>}/>
-                                <Route path="/pcaps" children={<PcapsPane/>}/>
-                                <Route path="/rules" children={<RulesPane/>}/>
-                                <Route path="/services" children={<ServicesPane/>}/>
-                                <Route exact path="/connections/:id"
-                                       children={<StreamsPane connection={this.state.selectedConnection}/>}/>
-                                <Route children={<MainPane version={this.props.version}/>}/>
-                            </Switch>
-                        </div>
+                <div className="page-header">
+                    <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/>
+                </div>
 
-                        {modal}
+                <div className="page-content">
+                    <div className="pane connections-pane">
+                        <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
                     </div>
-
-                    <div className="page-footer">
-                        <Timeline/>
+                    <div className="pane details-pane">
+                        <Switch>
+                            <Route path="/searches" children={<SearchPane/>}/>
+                            <Route path="/pcaps" children={<PcapsPane/>}/>
+                            <Route path="/rules" children={<RulesPane/>}/>
+                            <Route path="/services" children={<ServicesPane/>}/>
+                            <Route exact path="/connections/:id"
+                                   children={<StreamsPane connection={this.state.selectedConnection}/>}/>
+                            <Route children={<MainPane version={this.props.version}/>}/>
+                        </Switch>
                     </div>
-                </Router>
+
+                    {modal}
+                </div>
+
+                <div className="page-footer">
+                    <Timeline/>
+                </div>
             </div>
         );
     }
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 457c249..6418b3e 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -226,11 +226,11 @@ class ConnectionsPane extends Component {
     }
 
     loadRules = async () => {
-        return backend.get("/api/rules").then(res => this.setState({rules: res.json}));
+        return backend.get("/api/rules").then((res) => this.setState({rules: res.json}));
     };
 
     loadServices = async () => {
-        return backend.get("/api/services").then(res => this.setState({services: res.json}));
+        return backend.get("/api/services").then((res) => this.setState({services: res.json}));
     };
 
     render() {
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index 4c9f229..4ef5632 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -236,13 +236,13 @@ class SearchPane extends Component {
                                 })}
                                           name="terms" min={3} inline allowNew={true}
                                           readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
-                                          onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map(t => t.name))}/>
-                                <TagField tags={(options["text_search"]["excluded_terms"] || []).map(t => {
+                                          onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map((t) => t.name))}/>
+                                <TagField tags={(options["text_search"]["excluded_terms"] || []).map((t) => {
                                     return {name: t};
                                 })}
                                           name="excluded_terms" min={3} inline allowNew={true}
                                           readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
-                                          onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map(t => t.name))}/>
+                                          onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map((t) => t.name))}/>
 
                                 <span className="exclusive-separator">or</span>
 
diff --git a/rules_manager.go b/rules_manager.go
index a6d969f..5d6cded 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -24,6 +24,7 @@ import (
 	"github.com/flier/gohs/hyperscan"
 	"github.com/go-playground/validator/v10"
 	log "github.com/sirupsen/logrus"
+	"sort"
 	"sync"
 	"time"
 )
@@ -213,6 +214,10 @@ func (rm *rulesManagerImpl) GetRules() []Rule {
 		rules = append(rules, rule)
 	}
 
+	sort.Slice(rules, func(i, j int) bool {
+		return rules[i].ID.Timestamp().Before(rules[j].ID.Timestamp())
+	})
+
 	return rules
 }
 
-- 
cgit v1.2.3-70-g09d2