- {
- !this.loading &&
- this.setState({selectedConnection: c})}
- initialConnection={this.state.selectedConnection}/>
- }
-
-
- }/>
- }/>
- }/>
- }/>
- }/>
-
+
);
}
+
}
-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
-
-
-
-
-
-
-
- id
- started_at
- duration
- size
- processed_packets
- invalid_packets
- packets_per_service
- actions
-
-
-
- {sessions}
-
-
-
-
-
-
-
-
-
- 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
+
+
+
+
+
+
+
+ id
+ started_at
+ duration
+ size
+ processed_packets
+ invalid_packets
+ packets_per_service
+ actions
+
+
+
+ {sessions}
+
+
+
+
+
+
+
+
+
+ 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 &&
-
-
-
-
-
-
-
- id
- name
- color
- notes
-
-
-
- {rules}
-
-
-
-
-
-
-
-
-
- {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)}/>
-
-
-
-
-
-
-
-
- regex
- !Aa
- .*
- \n+
- UTF8
- Uni_
- min
- max
- direction
- {!isUpdate && actions }
-
-
-
- {patterns}
-
-
- {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 &&
+
+
+
+
+
+
+
+ id
+ name
+ color
+ notes
+
+
+
+ {rules}
+
+
+
+
+
+
+
+
+
+ {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)}/>
+
+
+
+
+
+
+
+
+ regex
+ !Aa
+ .*
+ \n+
+ UTF8
+ Uni_
+ min
+ max
+ direction
+ {!isUpdate && actions }
+
+
+
+ {patterns}
+
+
+ {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 &&
-
-
-
-
-
-
-
- port
- name
- color
- notes
-
-
-
- {services}
-
-
-
-
-
-
-
-
- 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 &&
+
+
+
+
+
+
+
+ port
+ name
+ color
+ notes
+
+
+
+ {services}
+
+
+
+
+
+
+
+
+ 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}
+
+
+
+
+
+ flow : {conn["ip_src"]}:{conn["port_src"]} -> {conn["ip_dst"]}:{conn["port_dst"]} | timestamp : {conn["started_at"]}
+
+
+
+
+
+
+
+
+
+
+
{payload}
+ {this.state.messageActionDialog}
+
this.setState({filterWindowOpen: false})}/>;
- }
-
- return (
-
-
- {this.state.connected &&
-
-
- this.setState({filterWindowOpen: true})}/>
-
-
- {this.state.configured ? this.setState({configured: true})}/>}
- {modal}
-
-
- {this.state.configured &&
-
- }
-
;
- 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
-
-
-
- {
- 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}
-
-
-
- {redirect}
-
-
- {filtersDefinitions[name]}
-
- );
- }
-
- render() {
- return (
-
-
-
- ~/filters
-
-
-
-
-
-
-
-
- show
- filter
-
-
-
- {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"])}
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-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 {filtersDefinitions[name]} )
- .slice(0, 5);
-
- return (
-
- );
- }
-}
-
-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 :
this.setState({configured: true})}/>) :
{
- 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: ,
- // hidden: ,
+ 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:
-
- 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"]}
);
}
-
}
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 @@
-
-
-
-
+
- {/*
*/}
+
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 (
);
}
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 =
+
- 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 (
);
}
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 {
-
- ;
- 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
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/objects')
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
{
+ {
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 (
-
+
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} }
- { 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 &&
error: {error}
}
);
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
.
*/
-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 = (
@@ -82,7 +81,7 @@ class ColorField extends Component {
+ error={null}/>
pick
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
- {this.props.text}
- :
- {this.props.text}
+
+ {this.props.text}
+ :
+ {this.props.text}
);
}
}
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
{username}
- this.updateParam((s) => delete s.accounts[username]) }/> ).concat(
this.setState({newUsername: v})} /> this.setState({newPassword: v})} /> );
@@ -122,7 +121,7 @@ class ConfigurationPage extends Component {
POST /setup
@@ -131,10 +130,10 @@ class ConfigurationPage extends Component {
this.updateParam((s) => s.config.server_address = v)} />
+ onChange={(v) => this.updateParam((s) => s.config.server_address = v)}/>
this.updateParam((s) => s.config.flag_regex = v)}
- error={this.state.flagRegexError} />
+ error={this.state.flagRegexError}/>
this.updateParam((s) => s.config.auth_required = v)}/>
@@ -166,7 +165,7 @@ class ConfigurationPage extends Component {
-
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
.
*/
-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
.
*/
-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
.
*/
-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 {
- {
+ {
this.el = el;
}}/>
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
.
*/
-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) =>
{s["id"].substring(0, 8)}
{dateTimeToTime(s["started_at"])}
@@ -229,7 +229,7 @@ class PcapsPane extends Component {
options:
this.setState({uploadFlushAll: v})}/>
+ onChange={(v) => this.setState({uploadFlushAll: v})}/>
this.setState({processFlushAll: v})}/>
+ onChange={(v) => this.setState({processFlushAll: v})}/>
this.setState({deleteOriginalFile: v})}/>
+ onChange={(v) => this.setState({deleteOriginalFile: v})}/>
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
- {return {name: 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))}/>
- {return {name: t};})}
+ readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+ onChange={(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.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))}/>
or
- 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)}/>
- this.updateParam(s => s.text_search.case_sensitive = v)}/>
+ onChange={(v) => this.updateParam(s => s["text_search"]["case_sensitive"] = v)}/>
@@ -248,30 +252,30 @@ class SearchPane extends Component {
-
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)}/>
or
- 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)}/>
- this.updateParam(s => s.regex_search.case_insensitive = 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"]["multi_line"] = v)}/>
+ this.updateParam(s => s.regex_search.ignore_whitespaces = v)}/>
- this.updateParam(s => s["regex_search"]["ignore_whitespaces"] = v)}/>
+ this.updateParam(s => s.regex_search.dot_character = v)}/>
+ onChange={(v) => this.updateParam(s => s["regex_search"]["dot_character"] = v)}/>
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
- ,
- document.getElementById('root')
+ //
+ ,
+ 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
+ return
{n.title}
{n.description}
;
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
.
*/
-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 {
{this.props.name}
+ onClick={handler} style={buttonStyle} disabled={this.props.disabled}>{this.props.name}
);
}
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
.
*/
-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 (
-
{!inline && name &&
{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 && }
;
- const copyPopoverContent =
- {this.state.copiedMessage ? Copied! Click to copy the connection id }
-
-
;
-
return (
0})}>
@@ -121,9 +102,8 @@ class Connection extends Component {
this.handleAction("comment")}>@}
content={commentPopoverContent} placement="right"/>
- this.handleAction("copy")}>#}
- content={copyPopoverContent} placement="right"/>
+
);
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
.
*/
-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
.
+ */
+
+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 =
+ {this.state.copiedMessage ? Copied! Click to copy }
+
+
;
+
+ return (
+
{this.props.text}}
+ 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
-
-
+
);
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
- {s["id"].substring(0, 8)}
- {dateTimeToTime(s["started_at"])}
+ let sessions = this.state.sessions.map((s) => {
+ const startedAt = new Date(s["started_at"]);
+ const completedAt = new Date(s["completed_at"]);
+ let timeInfo =
+ Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()} Completed at {completedAt.toLocaleDateString() + " " + completedAt.toLocaleTimeString()}
+
;
+
+ return
+
+
{durationBetween(s["started_at"], s["completed_at"])}
{formatSize(s["size"])}
{s["processed_packets"]}
@@ -143,8 +157,8 @@ class PcapsPane extends Component {
placement="left"/>
download
- );
+ ;
+ });
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
.
*/
-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})}>
-
{r["id"].substring(0, 8)}
+
{r["name"]}
{r["notes"]}
@@ -260,7 +265,7 @@ class RulesPane extends Component {
rule.patterns.concat(this.state.newPattern) :
rule.patterns
).map(p => p === pattern ?
-
+
{
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)}/>
-
this.updateParam(s => s["regex_search"]["case_insensitive"] = v)}/>
-
-
+
+
{
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})}>
{s["port"]}
{s["name"]}
- {s["notes"]}
);
@@ -141,9 +146,9 @@ class ServicesPane extends Component {
GET /api/services
{this.state.servicesStatusCode &&
-
@@ -170,7 +175,7 @@ class ServicesPane extends Component {
PUT /api/services
@@ -179,17 +184,17 @@ class ServicesPane extends Component {
this.updateParam((s) => s.port = v)}
- min={0} max={65565} error={this.state.servicePortError} />
+ min={0} max={65565} error={this.state.servicePortError}/>
this.updateParam((s) => s.name = v)}
- error={this.state.serviceNameError} />
+ error={this.state.serviceNameError}/>
this.updateParam((s) => s.color = v)} />
+ onChange={(v) => this.updateParam((s) => s.color = v)}/>
this.updateParam((s) => s.notes = v)} />
+ onChange={(v) => this.updateParam((s) => s.notes = v)}/>
@@ -199,8 +204,9 @@ class ServicesPane extends Component {
{}
-
{
- 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 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 {
{
- this.state.connections.flatMap(c => {
+ 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}
+ onMarked={(marked) => c.marked = marked}
+ onEnabled={(enabled) => c.hidden = !enabled}
services={this.state.services}/>,
c.matched_rules.length > 0 &&
{
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) =>
{
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 ?
- {
+ {
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))}/>
{
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))}/>
or
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)}/>
this.updateParam(s => s["text_search"]["case_sensitive"] = v)}/>
+ onChange={(v) => this.updateParam((s) => s["text_search"]["case_sensitive"] = v)}/>
@@ -264,28 +264,28 @@ class SearchPane extends Component {
this.updateParam(s => s["regex_search"].pattern = v)}/>
+ onChange={(v) => this.updateParam((s) => s["regex_search"].pattern = v)}/>
or
this.updateParam(s => s["regex_search"]["not_pattern"] = v)}/>
+ onChange={(v) => this.updateParam((s) => s["regex_search"]["not_pattern"] = v)}/>
this.updateParam(s => s["regex_search"]["case_insensitive"] = v)}/>
+ onChange={(v) => this.updateParam((s) => s["regex_search"]["case_insensitive"] = v)}/>
this.updateParam(s => s["regex_search"]["multi_line"] = v)}/>
+ onChange={(v) => this.updateParam((s) => s["regex_search"]["multi_line"] = v)}/>
this.updateParam(s => s["regex_search"]["ignore_whitespaces"] = v)}/>
+ onChange={(v) => this.updateParam((s) => s["regex_search"]["ignore_whitespaces"] = v)}/>
this.updateParam(s => s["regex_search"]["dot_character"] = v)}/>
+ onChange={(v) => this.updateParam((s) => s["regex_search"]["dot_character"] = v)}/>
{
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/objects')
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 (
- <>
+
:
this.setState({configured: true})}/>) :
);
}
}
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 (
-
+
{
@@ -56,7 +58,7 @@ class Header extends Component {
-
+ {this.props.configured &&
+
}
-
+ {this.props.configured &&
-
+
}
);
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}/>
handler(null)}>del
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 =
+ const copyPopoverContent =
{this.state.copiedMessage ? Copied! Click to copy }
-
+
;
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 {
);
return (
-
-
-
+
+
+
+
+
+
+
POST /setup
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 (
-
-
- this.setState({filterWindowOpen: true})}/>
-
-
-
-
- this.setState({selectedConnection: c})}/>
-
-
-
- }/>
- }/>
- }/>
- }/>
- }/>
- }/>
-
-
+
+ this.setState({filterWindowOpen: true})} configured={true}/>
+
- {modal}
+
+
+ this.setState({selectedConnection: c})}/>
-
-
-
+
+
+ }/>
+ }/>
+ }/>
+ }/>
+ }/>
+ }/>
+
-
+
+ {modal}
+
+
+
+
);
}
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))}/>
-
{
+ onChange={(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.map(t => t.name))}/>
+ onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map((t) => t.name))}/>
or
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