- {/*
*/}
+
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 {
-
-