From d203f3c7e3bcaa20895c0f32f348cd1513ae9876 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 8 Oct 2020 22:17:04 +0200
Subject: Frontend folder structure refactor

---
 frontend/src/components/panels/RulesPane.js | 438 ++++++++++++++++++++++++++++
 1 file changed, 438 insertions(+)
 create mode 100644 frontend/src/components/panels/RulesPane.js

(limited to 'frontend/src/components/panels/RulesPane.js')

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 <http://www.gnu.org/licenses/>.
+ */
+
+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 =>
+            <tr key={r.id} onClick={() => {
+                this.reset();
+                this.setState({selectedRule: _.cloneDeep(r)});
+            }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}>
+                <td>{r["id"].substring(0, 8)}</td>
+                <td>{r["name"]}</td>
+                <td><ButtonField name={r["color"]} color={r["color"]} small/></td>
+                <td>{r["notes"]}</td>
+            </tr>
+        );
+
+        let patterns = (this.state.selectedPattern == null && !isUpdate ?
+                rule.patterns.concat(this.state.newPattern) :
+                rule.patterns
+        ).map(p => p === pattern ?
+            <tr key={randomClassName()}>
+                <td style={{"width": "500px"}}>
+                    <InputField small active={this.state.patternRegexFocused} value={pattern.regex}
+                                onChange={(v) => {
+                                    this.updateParam(() => pattern.regex = v);
+                                    this.setState({patternRegexFocused: pattern.regex === ""});
+                                }}/>
+                </td>
+                <td><CheckField small checked={pattern.flags.caseless}
+                                onChange={(v) => this.updateParam(() => pattern.flags.caseless = v)}/></td>
+                <td><CheckField small checked={pattern.flags.dot_all}
+                                onChange={(v) => this.updateParam(() => pattern.flags.dot_all = v)}/></td>
+                <td><CheckField small checked={pattern.flags.multi_line}
+                                onChange={(v) => this.updateParam(() => pattern.flags.multi_line = v)}/></td>
+                <td><CheckField small checked={pattern.flags.utf_8_mode}
+                                onChange={(v) => this.updateParam(() => pattern.flags.utf_8_mode = v)}/></td>
+                <td><CheckField small checked={pattern.flags.unicode_property}
+                                onChange={(v) => this.updateParam(() => pattern.flags.unicode_property = v)}/></td>
+                <td style={{"width": "70px"}}>
+                    <NumericField small value={pattern.min_occurrences}
+                                  active={this.state.patternOccurrencesFocused}
+                                  onChange={(v) => this.updateParam(() => pattern.min_occurrences = v)}/>
+                </td>
+                <td style={{"width": "70px"}}>
+                    <NumericField small value={pattern.max_occurrences}
+                                  active={this.state.patternOccurrencesFocused}
+                                  onChange={(v) => this.updateParam(() => pattern.max_occurrences = v)}/>
+                </td>
+                <td><ChoiceField inline small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]}
+                                 value={this.directions[pattern.direction]}
+                                 onChange={(v) => this.updateParam(() => pattern.direction = v)}/></td>
+                <td>{this.state.selectedPattern == null ?
+                    <ButtonField variant="green" small name="add" inline rounded onClick={() => this.addPattern(p)}/> :
+                    <ButtonField variant="green" small name="save" inline rounded
+                                 onClick={() => this.updatePattern(p)}/>}
+                </td>
+            </tr>
+            :
+            <tr key={"new_pattern"} className="row-small">
+                <td>{p.regex}</td>
+                <td>{p.flags.caseless ? "yes" : "no"}</td>
+                <td>{p.flags.dot_all ? "yes" : "no"}</td>
+                <td>{p.flags.multi_line ? "yes" : "no"}</td>
+                <td>{p.flags.utf_8_mode ? "yes" : "no"}</td>
+                <td>{p.flags.unicode_property ? "yes" : "no"}</td>
+                <td>{p.min_occurrences}</td>
+                <td>{p.max_occurrences}</td>
+                <td>{this.directions[p.direction]}</td>
+                {!isUpdate && <td><ButtonField variant="blue" small rounded name="edit"
+                                               onClick={() => this.editPattern(p)}/></td>}
+            </tr>
+        );
+
+        return (
+            <div className="pane-container rule-pane">
+                <div className="pane-section rules-list">
+                    <div className="section-header">
+                        <span className="api-request">GET /api/rules</span>
+                        {this.state.rulesStatusCode &&
+                        <span className="api-response"><LinkPopover text={this.state.rulesStatusCode}
+                                                                    content={this.state.rulesResponse}
+                                                                    placement="left"/></span>}
+                    </div>
+
+                    <div className="section-content">
+                        <div className="section-table">
+                            <Table borderless size="sm">
+                                <thead>
+                                <tr>
+                                    <th>id</th>
+                                    <th>name</th>
+                                    <th>color</th>
+                                    <th>notes</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {rules}
+                                </tbody>
+                            </Table>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="pane-section rule-edit">
+                    <div className="section-header">
+                        <span className="api-request">
+                            {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"}
+                        </span>
+                        <span className="api-response"><LinkPopover text={this.state.ruleStatusCode}
+                                                                    content={this.state.ruleResponse}
+                                                                    placement="left"/></span>
+                    </div>
+
+                    <div className="section-content">
+                        <Container className="p-0">
+                            <Row>
+                                <Col>
+                                    <InputField name="name" inline value={rule.name}
+                                                onChange={(v) => this.updateParam((r) => r.name = v)}
+                                                error={this.state.ruleNameError}/>
+                                    <ColorField inline value={rule.color} error={this.state.ruleColorError}
+                                                onChange={(v) => this.updateParam((r) => r.color = v)}/>
+                                    <TextField name="notes" rows={2} value={rule.notes}
+                                               onChange={(v) => this.updateParam((r) => r.notes = v)}/>
+                                </Col>
+
+                                <Col style={{"paddingTop": "6px"}}>
+                                    <span>filters:</span>
+                                    <NumericField name="service_port" inline value={rule.filter.service_port}
+                                                  onChange={(v) => this.updateParam((r) => r.filter.service_port = v)}
+                                                  min={0} max={65565} error={this.state.ruleServicePortError}
+                                                  readonly={isUpdate}/>
+                                    <NumericField name="client_port" inline value={rule.filter.client_port}
+                                                  onChange={(v) => this.updateParam((r) => r.filter.client_port = v)}
+                                                  min={0} max={65565} error={this.state.ruleClientPortError}
+                                                  readonly={isUpdate}/>
+                                    <InputField name="client_address" value={rule.filter.client_address}
+                                                error={this.state.ruleClientAddressError} readonly={isUpdate}
+                                                onChange={(v) => this.updateParam((r) => r.filter.client_address = v)}/>
+                                </Col>
+
+                                <Col style={{"paddingTop": "11px"}}>
+                                    <NumericField name="min_duration" inline value={rule.filter.min_duration}
+                                                  error={this.state.ruleDurationError} readonly={isUpdate}
+                                                  onChange={(v) => this.updateParam((r) => r.filter.min_duration = v)}/>
+                                    <NumericField name="max_duration" inline value={rule.filter.max_duration}
+                                                  error={this.state.ruleDurationError} readonly={isUpdate}
+                                                  onChange={(v) => this.updateParam((r) => r.filter.max_duration = v)}/>
+                                    <NumericField name="min_bytes" inline value={rule.filter.min_bytes}
+                                                  error={this.state.ruleBytesError} readonly={isUpdate}
+                                                  onChange={(v) => this.updateParam((r) => r.filter.min_bytes = v)}/>
+                                    <NumericField name="max_bytes" inline value={rule.filter.max_bytes}
+                                                  error={this.state.ruleBytesError} readonly={isUpdate}
+                                                  onChange={(v) => this.updateParam((r) => r.filter.max_bytes = v)}/>
+                                </Col>
+                            </Row>
+                        </Container>
+
+                        <div className="section-table">
+                            <Table borderless size="sm">
+                                <thead>
+                                <tr>
+                                    <th>regex</th>
+                                    <th>!Aa</th>
+                                    <th>.*</th>
+                                    <th>\n+</th>
+                                    <th>UTF8</th>
+                                    <th>Uni_</th>
+                                    <th>min</th>
+                                    <th>max</th>
+                                    <th>direction</th>
+                                    {!isUpdate && <th>actions</th>}
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {patterns}
+                                </tbody>
+                            </Table>
+                            {this.state.rulePatternsError != null &&
+                            <span className="table-error">error: {this.state.rulePatternsError}</span>}
+                        </div>
+                    </div>
+
+                    <div className="section-footer">
+                        {<ButtonField variant="red" name="cancel" bordered onClick={this.reset}/>}
+                        <ButtonField variant={isUpdate ? "blue" : "green"} name={isUpdate ? "update_rule" : "add_rule"}
+                                     bordered onClick={isUpdate ? this.updateRule : this.addRule}/>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+}
+
+export default RulesPane;
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'frontend/src/components/panels/RulesPane.js')

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


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

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

(limited to 'frontend/src/components/panels/RulesPane.js')

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


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

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

(limited to 'frontend/src/components/panels/RulesPane.js')

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