From 2fb8993008752063fa13f253784e9e92552e339d Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 11:13:21 +0200
Subject: Refactor js files

---
 frontend/src/components/Header.js                  |  18 ++--
 frontend/src/components/Notifications.js           |   8 +-
 frontend/src/components/Timeline.js                |  30 +++---
 frontend/src/components/dialogs/Filters.js         |   6 +-
 frontend/src/components/fields/ButtonField.js      |   8 +-
 frontend/src/components/fields/CheckField.js       |  12 +--
 frontend/src/components/fields/InputField.js       |  20 ++--
 frontend/src/components/fields/TagField.js         |  12 +--
 frontend/src/components/fields/TextField.js        |  10 +-
 .../src/components/fields/extensions/ColorField.js |  17 ++--
 .../components/fields/extensions/NumericField.js   |   6 +-
 frontend/src/components/filters/AdvancedFilters.js |   4 +-
 .../components/filters/BooleanConnectionsFilter.js |   6 +-
 .../src/components/filters/ExitSearchFilter.js     |   4 +-
 .../components/filters/RulesConnectionsFilter.js   |   6 +-
 .../components/filters/StringConnectionsFilter.js  |  20 +---
 frontend/src/components/objects/Connection.js      |  12 +--
 frontend/src/components/objects/LinkPopover.js     |  15 +--
 frontend/src/components/pages/ConfigurationPage.js |  43 ++++-----
 frontend/src/components/pages/MainPage.js          |  20 ++--
 .../src/components/pages/ServiceUnavailablePage.js |   4 +-
 frontend/src/components/panels/ConnectionsPane.js  |   4 +-
 frontend/src/components/panels/MainPane.js         |  12 +--
 frontend/src/components/panels/PcapsPane.js        |  34 +++----
 frontend/src/components/panels/SearchPane.js       | 106 +++++++++++----------
 frontend/src/components/panels/StreamsPane.js      |  18 ++--
 26 files changed, 224 insertions(+), 231 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 119958b..ab16dd1 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -15,17 +15,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import Typed from 'typed.js';
-import './Header.scss';
+import React, {Component} from "react";
 import {Link, withRouter} from "react-router-dom";
+import Typed from "typed.js";
+import {cleanNumber, validatePort} from "../utils";
 import ButtonField from "./fields/ButtonField";
+import AdvancedFilters from "./filters/AdvancedFilters";
+import BooleanConnectionsFilter from "./filters/BooleanConnectionsFilter";
 import ExitSearchFilter from "./filters/ExitSearchFilter";
-import {cleanNumber, validatePort} from "../utils";
-import StringConnectionsFilter from "./filters/StringConnectionsFilter";
 import RulesConnectionsFilter from "./filters/RulesConnectionsFilter";
-import BooleanConnectionsFilter from "./filters/BooleanConnectionsFilter";
-import AdvancedFilters from "./filters/AdvancedFilters";
+import StringConnectionsFilter from "./filters/StringConnectionsFilter";
+import "./Header.scss";
 
 class Header extends Component {
 
@@ -49,7 +49,7 @@ class Header extends Component {
                     <div className="col-auto">
                         <h1 className="header-title type-wrap">
                             <Link to="/">
-                                <span style={{whiteSpace: 'pre'}} ref={(el) => {
+                                <span style={{whiteSpace: "pre"}} ref={(el) => {
                                     this.el = el;
                                 }}/>
                             </Link>
@@ -67,7 +67,7 @@ class Header extends Component {
                             <RulesConnectionsFilter/>
                             <BooleanConnectionsFilter filterName={"marked"}/>
                             <ExitSearchFilter/>
-                            <AdvancedFilters onClick={this.props.onOpenFilters} />
+                            <AdvancedFilters onClick={this.props.onOpenFilters}/>
                         </div>
                     </div>
 
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index ad681a2..56a4508 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -15,12 +15,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './Notifications.scss';
+import React, {Component} from "react";
 import dispatcher from "../dispatcher";
+import "./Notifications.scss";
 
-const _ = require('lodash');
-const classNames = require('classnames');
+const _ = require("lodash");
+const classNames = require("classnames");
 
 class Notifications extends Component {
 
diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js
index 1d88bcb..8d1fd40 100644
--- a/frontend/src/components/Timeline.js
+++ b/frontend/src/components/Timeline.js
@@ -62,7 +62,7 @@ class Timeline extends Component {
 
         this.loadStatistics(this.state.metric).then(() => log.debug("Statistics loaded after mount"));
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             if ("service_port" in payload && this.state.servicePortFilter !== payload["service_port"]) {
                 this.setState({servicePortFilter: payload["service_port"]});
                 this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after service port changed"));
@@ -74,22 +74,22 @@ class Timeline extends Component {
         };
         dispatcher.register("connections_filters", this.connectionsFiltersCallback);
 
-        dispatcher.register("connection_updates", payload => {
+        dispatcher.register("connection_updates", (payload) => {
             this.setState({
                 selection: new TimeRange(payload.from, payload.to),
             });
             this.adjustSelection();
         });
 
-        dispatcher.register("notifications", payload => {
+        dispatcher.register("notifications", (payload) => {
             if (payload.event === "services.edit" && this.state.metric !== "matched_rules") {
-                this.loadServices().then(() => log.debug("Statistics reloaded after services updates"));
+                this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after services updates"));
             } else if (payload.event.startsWith("rules") && this.state.metric === "matched_rules") {
-                this.loadServices().then(() => log.debug("Statistics reloaded after rules updates"));
+                this.loadStatistics(this.state.metric).then(() => log.debug("Statistics reloaded after rules updates"));
             }
         });
 
-        dispatcher.register("pulse_timeline", payload => {
+        dispatcher.register("pulse_timeline", (payload) => {
             this.setState({pulseTimeline: true});
             setTimeout(() => this.setState({pulseTimeline: false}), payload.duration);
         });
@@ -107,12 +107,12 @@ class Timeline extends Component {
         if (metric === "matched_rules") {
             let rules = await this.loadRules();
             if (this.state.matchedRulesFilter.length > 0) {
-                this.state.matchedRulesFilter.forEach(id => {
+                this.state.matchedRulesFilter.forEach((id) => {
                     urlParams.append("rules_ids", id);
                 });
                 columns = this.state.matchedRulesFilter;
             } else {
-                columns = rules.map(r => r.id);
+                columns = rules.map((r) => r.id);
             }
         } else {
             let services = await this.loadServices();
@@ -124,7 +124,7 @@ class Timeline extends Component {
             }
 
             columns = Object.keys(services);
-            columns.forEach(port => urlParams.append("ports", port));
+            columns.forEach((port) => urlParams.append("ports", port));
         }
 
         const metrics = (await backend.get("/api/statistics?" + urlParams)).json;
@@ -133,7 +133,7 @@ class Timeline extends Component {
         }
 
         const zeroFilledMetrics = [];
-        const toTime = m => new Date(m["range_start"]).getTime();
+        const toTime = (m) => new Date(m["range_start"]).getTime();
         let i = 0;
         for (let interval = toTime(metrics[0]) - minutes; interval <= toTime(metrics[metrics.length - 1]) + minutes; interval += minutes) {
             if (i < metrics.length && interval === toTime(metrics[i])) {
@@ -144,7 +144,7 @@ class Timeline extends Component {
                 const m = {};
                 m["range_start"] = new Date(interval);
                 m[metric] = {};
-                columns.forEach(c => m[metric][c] = 0);
+                columns.forEach((c) => m[metric][c] = 0);
                 zeroFilledMetrics.push(m);
             }
         }
@@ -152,7 +152,7 @@ class Timeline extends Component {
         const series = new TimeSeries({
             name: "statistics",
             columns: ["time"].concat(columns),
-            points: zeroFilledMetrics.map(m => [m["range_start"]].concat(columns.map(c =>
+            points: zeroFilledMetrics.map((m) => [m["range_start"]].concat(columns.map(c =>
                 ((metric in m) && (m[metric] != null)) ? (m[metric][c] || 0) : 0
             )))
         });
@@ -184,11 +184,11 @@ class Timeline extends Component {
 
     createStyler = () => {
         if (this.state.metric === "matched_rules") {
-            return styler(this.state.rules.map(rule => {
+            return styler(this.state.rules.map((rule) => {
                 return {key: rule.id, color: rule.color, width: 2};
             }));
         } else {
-            return styler(Object.keys(this.state.services).map(port => {
+            return styler(Object.keys(this.state.services).map((port) => {
                 return {key: port, color: this.state.services[port].color, width: 2};
             }));
         }
@@ -227,7 +227,7 @@ class Timeline extends Component {
     };
 
     aggregateSeries = (func) => {
-        const values = this.state.series.columns().map(c => this.state.series[func](c));
+        const values = this.state.series.columns().map((c) => this.state.series[func](c));
         return Math[func](...values);
     };
 
diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js
index a35ece2..a2407df 100644
--- a/frontend/src/components/dialogs/Filters.js
+++ b/frontend/src/components/dialogs/Filters.js
@@ -15,12 +15,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {Modal} from "react-bootstrap";
-import ButtonField from "../fields/ButtonField";
-import './Filters.scss';
 import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils";
+import ButtonField from "../fields/ButtonField";
 import StringConnectionsFilter from "../filters/StringConnectionsFilter";
+import "./Filters.scss";
 
 class Filters extends Component {
 
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
index 850f837..de747a5 100644
--- a/frontend/src/components/fields/ButtonField.js
+++ b/frontend/src/components/fields/ButtonField.js
@@ -15,11 +15,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './ButtonField.scss';
-import './common.scss';
+import React, {Component} from "react";
+import "./ButtonField.scss";
+import "./common.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class ButtonField extends Component {
 
diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js
index a0e2706..bfa1c9d 100644
--- a/frontend/src/components/fields/CheckField.js
+++ b/frontend/src/components/fields/CheckField.js
@@ -15,12 +15,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './CheckField.scss';
-import './common.scss';
+import React, {Component} from "react";
 import {randomClassName} from "../../utils";
+import "./CheckField.scss";
+import "./common.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class CheckField extends Component {
 
@@ -41,9 +41,9 @@ class CheckField extends Component {
         };
 
         return (
-            <div className={classNames( "field", "check-field", {"field-checked" : checked}, {"field-small": small})}>
+            <div className={classNames("field", "check-field", {"field-checked": checked}, {"field-small": small})}>
                 <div className="field-input">
-                    <input type="checkbox" id={this.id} checked={checked} onChange={handler} />
+                    <input type="checkbox" id={this.id} checked={checked} onChange={handler}/>
                     <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + (name != null ? name : "")}</label>
                 </div>
             </div>
diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js
index 80cce3b..823989d 100644
--- a/frontend/src/components/fields/InputField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -15,12 +15,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './InputField.scss';
-import './common.scss';
+import React, {Component} from "react";
 import {randomClassName} from "../../utils";
+import "./common.scss";
+import "./InputField.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class InputField extends Component {
 
@@ -59,23 +59,23 @@ class InputField extends Component {
         }
 
         return (
-            <div className={classNames("field", "input-field", {"field-active" : active},
+            <div className={classNames("field", "input-field", {"field-active": active},
                 {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}>
                 <div className="field-wrapper">
-                    { name &&
+                    {name &&
                     <div className="field-name">
                         <label>{name}:</label>
                     </div>
                     }
                     <div className="field-input">
                         <div className="field-value">
-                            { type === "file" && <label for={this.id} className={"file-label"}>
-                                {value.name || this.props.placeholder}</label> }
+                            {type === "file" && <label for={this.id} className={"file-label"}>
+                                {value.name || this.props.placeholder}</label>}
                             <input type={type} placeholder={this.props.placeholder} id={this.id}
                                    aria-describedby={this.id} onChange={handler} {...inputProps}
-                                   readOnly={this.props.readonly} />
+                                   readOnly={this.props.readonly}/>
                         </div>
-                        { type !== "file" && value !== "" &&
+                        {type !== "file" && value !== "" &&
                         <div className="field-clear">
                             <span onClick={() => handler(null)}>del</span>
                         </div>
diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js
index 89445b6..9a36da4 100644
--- a/frontend/src/components/fields/TagField.js
+++ b/frontend/src/components/fields/TagField.js
@@ -15,14 +15,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './TagField.scss';
-import './common.scss';
-import {randomClassName} from "../../utils";
+import React, {Component} from "react";
 import ReactTags from "react-tag-autocomplete";
+import {randomClassName} from "../../utils";
+import "./common.scss";
+import "./TagField.scss";
 
-const classNames = require('classnames');
-const _ = require('lodash');
+const classNames = require("classnames");
+const _ = require("lodash");
 
 class TagField extends Component {
 
diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js
index 9237c0c..4dd77bd 100644
--- a/frontend/src/components/fields/TextField.js
+++ b/frontend/src/components/fields/TextField.js
@@ -15,12 +15,12 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './TextField.scss';
-import './common.scss';
+import React, {Component} from "react";
 import {randomClassName} from "../../utils";
+import "./common.scss";
+import "./TextField.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class TextField extends Component {
 
@@ -50,7 +50,7 @@ class TextField extends Component {
                 {"field-invalid": this.props.invalid}, {"field-small": this.props.small})}>
                 {name && <label htmlFor={this.id}>{name}:</label>}
                 <textarea id={this.id} placeholder={this.props.defaultValue} onChange={handler} rows={rows}
-                          readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef} />
+                          readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef}/>
                 {error && <div className="field-error">error: {error}</div>}
             </div>
         );
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index f1c0caf..fd30988 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -15,22 +15,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {OverlayTrigger, Popover} from "react-bootstrap";
-import './ColorField.scss';
-import InputField from "../InputField";
 import validation from "../../../validation";
+import InputField from "../InputField";
+import "./ColorField.scss";
 
 class ColorField extends Component {
 
     constructor(props) {
         super(props);
 
-        this.state = {
-        };
+        this.state = {};
 
-        this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
-            "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
+        this.colors = ["#e53935", "#d81b60", "#8e24aa", "#5e35b1", "#3949ab", "#1e88e5", "#039be5", "#00acc1",
+            "#00897b", "#43a047", "#7cb342", "#9e9d24", "#f9a825", "#fb8c00", "#f4511e", "#6d4c41"];
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
@@ -55,7 +54,7 @@ class ColorField extends Component {
                           this.props.onChange(color);
                       }
                       document.body.click(); // magic to close popup
-                  }} />);
+                  }}/>);
 
         const popover = (
             <Popover id="popover-basic">
@@ -82,7 +81,7 @@ class ColorField extends Component {
             <div className="field color-field">
                 <div className="color-input">
                     <InputField {...this.props} onChange={this.onChange} invalid={this.state.invalid} name="color"
-                                error={null} />
+                                error={null}/>
                     <div className="color-picker">
                         <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
                             <button type="button" className="picker-button" style={buttonStyles}>pick</button>
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
index d4d027d..a6cba26 100644
--- a/frontend/src/components/fields/extensions/NumericField.js
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -15,7 +15,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import InputField from "../InputField";
 
 class NumericField extends Component {
@@ -35,7 +35,7 @@ class NumericField extends Component {
     }
 
     onChange = (value) => {
-        value = value.toString().replace(/[^\d]/gi, '');
+        value = value.toString().replace(/[^\d]/gi, "");
         let intValue = 0;
         if (value !== "") {
             intValue = parseInt(value, 10);
@@ -53,7 +53,7 @@ class NumericField extends Component {
     render() {
         return (
             <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"}
-                        invalid={this.state.invalid} />
+                        invalid={this.state.invalid}/>
         );
     }
 
diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js
index f5ba825..2b479ed 100644
--- a/frontend/src/components/filters/AdvancedFilters.js
+++ b/frontend/src/components/filters/AdvancedFilters.js
@@ -15,11 +15,11 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
 import dispatcher from "../../dispatcher";
-import ButtonField from "../fields/ButtonField";
 import {updateParams} from "../../utils";
+import ButtonField from "../fields/ButtonField";
 
 class AdvancedFilters extends Component {
 
diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js
index 9558323..0355167 100644
--- a/frontend/src/components/filters/BooleanConnectionsFilter.js
+++ b/frontend/src/components/filters/BooleanConnectionsFilter.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
-import CheckField from "../fields/CheckField";
 import dispatcher from "../../dispatcher";
+import CheckField from "../fields/CheckField";
 
 class BooleanConnectionsFilter extends Component {
 
@@ -30,7 +30,7 @@ class BooleanConnectionsFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         this.setState({filterActive: this.toBoolean(params.get(this.props.filterName)).toString()});
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             const name = this.props.filterName;
             if (name in payload && this.state.filterActive !== payload[name]) {
                 this.setState({filterActive: payload[name]});
diff --git a/frontend/src/components/filters/ExitSearchFilter.js b/frontend/src/components/filters/ExitSearchFilter.js
index 68ca686..72cfb0c 100644
--- a/frontend/src/components/filters/ExitSearchFilter.js
+++ b/frontend/src/components/filters/ExitSearchFilter.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
-import CheckField from "../fields/CheckField";
 import dispatcher from "../../dispatcher";
+import CheckField from "../fields/CheckField";
 
 class ExitSearchFilter extends Component {
 
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 8e40d30..86eae7e 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -15,14 +15,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
 import backend from "../../backend";
 import dispatcher from "../../dispatcher";
 import TagField from "../fields/TagField";
 
-const classNames = require('classnames');
-const _ = require('lodash');
+const classNames = require("classnames");
+const _ = require("lodash");
 
 class RulesConnectionsFilter extends Component {
 
diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js
index 18b3784..c3c5925 100644
--- a/frontend/src/components/filters/StringConnectionsFilter.js
+++ b/frontend/src/components/filters/StringConnectionsFilter.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
+import React, {Component} from "react";
 import {withRouter} from "react-router-dom";
-import InputField from "../fields/InputField";
 import dispatcher from "../../dispatcher";
+import InputField from "../fields/InputField";
 
 class StringConnectionsFilter extends Component {
 
@@ -56,15 +56,9 @@ class StringConnectionsFilter extends Component {
                 fieldValue = this.props.replaceFunc(fieldValue);
             }
             if (this.isValueValid(fieldValue)) {
-                this.setState({
-                    fieldValue: fieldValue,
-                    filterValue: filterValue
-                });
+                this.setState({fieldValue, filterValue: filterValue});
             } else {
-                this.setState({
-                    fieldValue: fieldValue,
-                    invalidValue: true
-                });
+                this.setState({fieldValue, invalidValue: true});
             }
         } else {
             this.setState({fieldValue: "", filterValue: null});
@@ -97,7 +91,6 @@ class StringConnectionsFilter extends Component {
         }
 
 
-
         if (this.isValueValid(fieldValue)) {
             let filterValue = fieldValue;
             if (filterValue !== "" && typeof this.props.encodeFunc === "function") {
@@ -113,10 +106,7 @@ class StringConnectionsFilter extends Component {
                 invalidValue: false
             });
         } else {
-            this.setState({
-                fieldValue: fieldValue,
-                invalidValue: true
-            });
+            this.setState({fieldValue, invalidValue: true});
         }
     };
 
diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index 96f2235..f838606 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -15,17 +15,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './Connection.scss';
+import React, {Component} from "react";
 import {Form} from "react-bootstrap";
 import backend from "../../backend";
+import dispatcher from "../../dispatcher";
 import {dateTimeToTime, durationBetween, formatSize} from "../../utils";
 import ButtonField from "../fields/ButtonField";
-import LinkPopover from "./LinkPopover";
 import TextField from "../fields/TextField";
-import dispatcher from "../../dispatcher";
+import "./Connection.scss";
+import LinkPopover from "./LinkPopover";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class Connection extends Component {
 
@@ -59,7 +59,7 @@ class Connection extends Component {
         }
         if (name === "copy") {
             this.copyTextarea.current.select();
-            document.execCommand('copy');
+            document.execCommand("copy");
             this.setState({copiedMessage: true});
             setTimeout(() => this.setState({copiedMessage: false}), 3000);
         }
diff --git a/frontend/src/components/objects/LinkPopover.js b/frontend/src/components/objects/LinkPopover.js
index 3c5bf67..551a819 100644
--- a/frontend/src/components/objects/LinkPopover.js
+++ b/frontend/src/components/objects/LinkPopover.js
@@ -15,10 +15,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import {randomClassName} from "../../utils";
+import React, {Component} from "react";
 import {OverlayTrigger, Popover} from "react-bootstrap";
-import './LinkPopover.scss';
+import {randomClassName} from "../../utils";
+import "./LinkPopover.scss";
 
 class LinkPopover extends Component {
 
@@ -39,10 +39,11 @@ class LinkPopover extends Component {
         );
 
         return (this.props.content ?
-            <OverlayTrigger trigger={["hover", "focus"]} placement={this.props.placement || "top"} overlay={popover}>
-                <span className="link-popover">{this.props.text}</span>
-            </OverlayTrigger> :
-            <span className="link-popover-empty">{this.props.text}</span>
+                <OverlayTrigger trigger={["hover", "focus"]} placement={this.props.placement || "top"}
+                                overlay={popover}>
+                    <span className="link-popover">{this.props.text}</span>
+                </OverlayTrigger> :
+                <span className="link-popover-empty">{this.props.text}</span>
         );
     }
 }
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 6ab8ae3..2bd2da7 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -15,19 +15,19 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import '../panels/common.scss';
-import './ConfigurationPage.scss';
-import LinkPopover from "../objects/LinkPopover";
+import React, {Component} from "react";
 import {Col, Container, Row} from "react-bootstrap";
-import InputField from "../fields/InputField";
-import TextField from "../fields/TextField";
-import ButtonField from "../fields/ButtonField";
-import CheckField from "../fields/CheckField";
-import {createCurlCommand} from "../../utils";
 import Table from "react-bootstrap/Table";
-import validation from "../../validation";
 import backend from "../../backend";
+import {createCurlCommand} from "../../utils";
+import validation from "../../validation";
+import ButtonField from "../fields/ButtonField";
+import CheckField from "../fields/CheckField";
+import InputField from "../fields/InputField";
+import TextField from "../fields/TextField";
+import LinkPopover from "../objects/LinkPopover";
+import "../panels/common.scss";
+import "./ConfigurationPage.scss";
 
 class ConfigurationPage extends Component {
 
@@ -40,8 +40,7 @@ class ConfigurationPage extends Component {
                     "flag_regex": "",
                     "auth_required": false
                 },
-                "accounts": {
-                }
+                "accounts": {}
             },
             newUsername: "",
             newPassword: ""
@@ -50,9 +49,9 @@ class ConfigurationPage extends Component {
 
     saveSettings = () => {
         if (this.validateSettings(this.state.settings)) {
-            backend.post("/setup", this.state.settings).then(_ => {
+            backend.post("/setup", this.state.settings).then((_) => {
                 this.props.onConfigured();
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)});
             });
         }
@@ -102,14 +101,14 @@ class ConfigurationPage extends Component {
         const accounts = Object.entries(settings.accounts).map(([username, password]) =>
             <tr key={username}>
                 <td>{username}</td>
-                <td><LinkPopover text="******" content={password} /></td>
+                <td><LinkPopover text="******" content={password}/></td>
                 <td><ButtonField variant="red" small rounded name="delete"
-                                 onClick={() => this.updateParam((s) => delete s.accounts[username]) }/></td>
+                                 onClick={() => this.updateParam((s) => delete s.accounts[username])}/></td>
             </tr>).concat(<tr key={"new_account"}>
             <td><InputField value={this.state.newUsername} small active={this.state.newUsernameActive}
-                            onChange={(v) => this.setState({newUsername: v})} /></td>
+                            onChange={(v) => this.setState({newUsername: v})}/></td>
             <td><InputField value={this.state.newPassword} small active={this.state.newPasswordActive}
-                            onChange={(v) => this.setState({newPassword: v})} /></td>
+                            onChange={(v) => this.setState({newPassword: v})}/></td>
             <td><ButtonField variant="green" small rounded name="add" onClick={this.addAccount}/></td>
         </tr>);
 
@@ -122,7 +121,7 @@ class ConfigurationPage extends Component {
                                 <span className="api-request">POST /setup</span>
                                 <span className="api-response"><LinkPopover text={this.state.setupStatusCode}
                                                                             content={this.state.setupResponse}
-                                                                            placement="left" /></span>
+                                                                            placement="left"/></span>
                             </div>
 
                             <div className="section-content">
@@ -131,10 +130,10 @@ class ConfigurationPage extends Component {
                                         <Col>
                                             <InputField name="server_address" value={settings.config.server_address}
                                                         error={this.state.serverAddressError}
-                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)} />
+                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)}/>
                                             <InputField name="flag_regex" value={settings.config.flag_regex}
                                                         onChange={(v) => this.updateParam((s) => s.config.flag_regex = v)}
-                                                        error={this.state.flagRegexError} />
+                                                        error={this.state.flagRegexError}/>
                                             <div style={{"marginTop": "10px"}}>
                                                 <CheckField checked={settings.config.auth_required} name="auth_required"
                                                             onChange={(v) => this.updateParam((s) => s.config.auth_required = v)}/>
@@ -166,7 +165,7 @@ class ConfigurationPage extends Component {
                             </div>
 
                             <div className="section-footer">
-                                <ButtonField variant="green" name="save" bordered onClick={this.saveSettings} />
+                                <ButtonField variant="green" name="save" bordered onClick={this.saveSettings}/>
                             </div>
                         </div>
                     </div>
diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js
index 0b06f55..a542e3f 100644
--- a/frontend/src/components/pages/MainPage.js
+++ b/frontend/src/components/pages/MainPage.js
@@ -15,20 +15,20 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './MainPage.scss';
-import './common.scss';
-import Connections from "../panels/ConnectionsPane";
-import StreamsPane from "../panels/StreamsPane";
+import React, {Component} from "react";
 import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
-import Timeline from "../Timeline";
-import PcapsPane from "../panels/PcapsPane";
-import RulesPane from "../panels/RulesPane";
-import ServicesPane from "../panels/ServicesPane";
-import Header from "../Header";
 import Filters from "../dialogs/Filters";
+import Header from "../Header";
+import Connections from "../panels/ConnectionsPane";
 import MainPane from "../panels/MainPane";
+import PcapsPane from "../panels/PcapsPane";
+import RulesPane from "../panels/RulesPane";
 import SearchPane from "../panels/SearchPane";
+import ServicesPane from "../panels/ServicesPane";
+import StreamsPane from "../panels/StreamsPane";
+import Timeline from "../Timeline";
+import "./common.scss";
+import "./MainPage.scss";
 
 class MainPage extends Component {
 
diff --git a/frontend/src/components/pages/ServiceUnavailablePage.js b/frontend/src/components/pages/ServiceUnavailablePage.js
index f27d84d..deb4cf8 100644
--- a/frontend/src/components/pages/ServiceUnavailablePage.js
+++ b/frontend/src/components/pages/ServiceUnavailablePage.js
@@ -15,8 +15,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './MainPage.scss';
+import React, {Component} from "react";
+import "./MainPage.scss";
 
 class ServiceUnavailablePage extends Component {
 
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 89859e6..ea47059 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -85,8 +85,8 @@ class ConnectionsPane extends Component {
         this.timelineUpdatesCallback = payload => {
             this.connectionsListRef.current.scrollTop = 0;
             this.loadConnections({
-                started_after: Math.round(payload.from.getTime() / 1000),
-                started_before: Math.round(payload.to.getTime() / 1000),
+                "started_after": Math.round(payload.from.getTime() / 1000),
+                "started_before": Math.round(payload.to.getTime() / 1000),
                 limit: this.maxConnections
             }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`));
         };
diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js
index 8aa8ad8..ce72be5 100644
--- a/frontend/src/components/panels/MainPane.js
+++ b/frontend/src/components/panels/MainPane.js
@@ -15,15 +15,15 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './common.scss';
-import './MainPane.scss';
+import React, {Component} from "react";
 import Typed from "typed.js";
 import dispatcher from "../../dispatcher";
-import RulesPane from "./RulesPane";
-import StreamsPane from "./StreamsPane";
+import "./common.scss";
+import "./MainPane.scss";
 import PcapsPane from "./PcapsPane";
+import RulesPane from "./RulesPane";
 import ServicesPane from "./ServicesPane";
+import StreamsPane from "./StreamsPane";
 
 class MainPane extends Component {
 
@@ -94,7 +94,7 @@ class MainPane extends Component {
                 <div className="main-pane">
                     <div className="pane-section">
                         <div className="tutorial">
-                            <span style={{whiteSpace: 'pre'}} ref={(el) => {
+                            <span style={{whiteSpace: "pre"}} ref={(el) => {
                                 this.el = el;
                             }}/>
                         </div>
diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js
index 900aacc..fd3db75 100644
--- a/frontend/src/components/panels/PcapsPane.js
+++ b/frontend/src/components/panels/PcapsPane.js
@@ -15,18 +15,18 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './PcapsPane.scss';
-import './common.scss';
+import React, {Component} from "react";
 import Table from "react-bootstrap/Table";
 import backend from "../../backend";
+import dispatcher from "../../dispatcher";
 import {createCurlCommand, dateTimeToTime, durationBetween, formatSize} from "../../utils";
-import InputField from "../fields/InputField";
+import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
+import InputField from "../fields/InputField";
 import TextField from "../fields/TextField";
-import ButtonField from "../fields/ButtonField";
 import LinkPopover from "../objects/LinkPopover";
-import dispatcher from "../../dispatcher";
+import "./common.scss";
+import "./PcapsPane.scss";
 
 class PcapsPane extends Component {
 
@@ -45,7 +45,7 @@ class PcapsPane extends Component {
     componentDidMount() {
         this.loadSessions();
 
-        dispatcher.register("notifications", payload => {
+        dispatcher.register("notifications", (payload) => {
             if (payload.event === "pcap.upload" || payload.event === "pcap.file") {
                 this.loadSessions();
             }
@@ -56,8 +56,8 @@ class PcapsPane extends Component {
 
     loadSessions = () => {
         backend.get("/api/pcap/sessions")
-            .then(res => this.setState({sessions: res.json, sessionsStatusCode: res.status}))
-            .catch(res => this.setState({
+            .then((res) => this.setState({sessions: res.json, sessionsStatusCode: res.status}))
+            .catch((res) => this.setState({
                 sessions: res.json, sessionsStatusCode: res.status,
                 sessionsResponse: JSON.stringify(res.json)
             }));
@@ -72,14 +72,14 @@ class PcapsPane extends Component {
         const formData = new FormData();
         formData.append("file", this.state.uploadSelectedFile);
         formData.append("flush_all", this.state.uploadFlushAll);
-        backend.postFile("/api/pcap/upload", formData).then(res => {
+        backend.postFile("/api/pcap/upload", formData).then((res) => {
             this.setState({
                 uploadStatusCode: res.status,
                 uploadResponse: JSON.stringify(res.json)
             });
             this.resetUpload();
             this.loadSessions();
-        }).catch(res => this.setState({
+        }).catch((res) => this.setState({
                 uploadStatusCode: res.status,
                 uploadResponse: JSON.stringify(res.json)
             })
@@ -96,14 +96,14 @@ class PcapsPane extends Component {
             file: this.state.fileValue,
             flush_all: this.state.processFlushAll,
             delete_original_file: this.state.deleteOriginalFile
-        }).then(res => {
+        }).then((res) => {
             this.setState({
                 processStatusCode: res.status,
                 processResponse: JSON.stringify(res.json)
             });
             this.resetProcess();
             this.loadSessions();
-        }).catch(res => this.setState({
+        }).catch((res) => this.setState({
                 processStatusCode: res.status,
                 processResponse: JSON.stringify(res.json)
             })
@@ -130,7 +130,7 @@ class PcapsPane extends Component {
     };
 
     render() {
-        let sessions = this.state.sessions.map(s =>
+        let sessions = this.state.sessions.map((s) =>
             <tr key={s.id} className="row-small row-clickable">
                 <td>{s["id"].substring(0, 8)}</td>
                 <td>{dateTimeToTime(s["started_at"])}</td>
@@ -229,7 +229,7 @@ class PcapsPane extends Component {
                                 <div className="upload-options">
                                     <span>options:</span>
                                     <CheckField name="flush_all" checked={this.state.uploadFlushAll}
-                                                onChange={v => this.setState({uploadFlushAll: v})}/>
+                                                onChange={(v) => this.setState({uploadFlushAll: v})}/>
                                 </div>
                                 <ButtonField variant="green" bordered onClick={this.uploadPcap} name="upload"/>
                             </div>
@@ -254,9 +254,9 @@ class PcapsPane extends Component {
                             <div className="upload-actions" style={{"marginTop": "11px"}}>
                                 <div className="upload-options">
                                     <CheckField name="flush_all" checked={this.state.processFlushAll}
-                                                onChange={v => this.setState({processFlushAll: v})}/>
+                                                onChange={(v) => this.setState({processFlushAll: v})}/>
                                     <CheckField name="delete_original_file" checked={this.state.deleteOriginalFile}
-                                                onChange={v => this.setState({deleteOriginalFile: v})}/>
+                                                onChange={(v) => this.setState({deleteOriginalFile: v})}/>
                                 </div>
                                 <ButtonField variant="blue" bordered onClick={this.processPcap} name="process"/>
                             </div>
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index 1fb48ef..d3c0c8b 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -15,21 +15,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './common.scss';
-import './SearchPane.scss';
+import React, {Component} from "react";
 import Table from "react-bootstrap/Table";
-import InputField from "../fields/InputField";
-import TextField from "../fields/TextField";
 import backend from "../../backend";
-import ButtonField from "../fields/ButtonField";
-import LinkPopover from "../objects/LinkPopover";
-import {createCurlCommand, dateTimeToTime, durationBetween} from "../../utils";
 import dispatcher from "../../dispatcher";
-import TagField from "../fields/TagField";
+import {createCurlCommand, dateTimeToTime, durationBetween} from "../../utils";
+import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
+import InputField from "../fields/InputField";
+import TagField from "../fields/TagField";
+import TextField from "../fields/TextField";
+import LinkPopover from "../objects/LinkPopover";
+import "./common.scss";
+import "./SearchPane.scss";
 
-const _ = require('lodash');
+const _ = require("lodash");
 
 class SearchPane extends Component {
 
@@ -104,15 +104,15 @@ class SearchPane extends Component {
 
     validateSearch = (options) => {
         let valid = true;
-        if (options.text_search.exact_phrase && options.text_search.exact_phrase.length < 3) {
+        if (options["text_search"]["exact_phrase"] && options["text_search"]["exact_phrase"].length < 3) {
             this.setState({exactPhraseError: "text_search.exact_phrase.length < 3"});
             valid = false;
         }
-        if (options.regex_search.pattern && options.regex_search.pattern.length < 3) {
+        if (options["regex_search"].pattern && options["regex_search"].pattern.length < 3) {
             this.setState({patternError: "regex_search.pattern.length < 3"});
             valid = false;
         }
-        if (options.regex_search.not_pattern && options.regex_search.not_pattern.length < 3) {
+        if (options["regex_search"]["not_pattern"] && options["regex_search"]["not_pattern"].length < 3) {
             this.setState({exactPhraseError: "regex_search.not_pattern.length < 3"});
             valid = false;
         }
@@ -128,25 +128,25 @@ class SearchPane extends Component {
     extractPattern = (options) => {
         let pattern = "";
         if (_.isEqual(options.regex_search, this.searchOptions.regex_search)) { // is text search
-            if (options.text_search.exact_phrase) {
-                pattern += `"${options.text_search.exact_phrase}"`;
+            if (options["text_search"]["exact_phrase"]) {
+                pattern += `"${options["text_search"]["exact_phrase"]}"`;
             } else {
-                pattern += options.text_search.terms.join(" ");
-                if (options.text_search.excluded_terms) {
-                    pattern += " -" + options.text_search.excluded_terms.join(" -");
+                pattern += options["text_search"].terms.join(" ");
+                if (options["text_search"]["excluded_terms"]) {
+                    pattern += " -" + options["text_search"]["excluded_terms"].join(" -");
                 }
             }
-            options.text_search.case_sensitive && (pattern += "/s");
+            options["text_search"]["case_sensitive"] && (pattern += "/s");
         } else { // is regex search
-            if (options.regex_search.pattern) {
-                pattern += "/" + options.regex_search.pattern + "/";
+            if (options["regex_search"].pattern) {
+                pattern += "/" + options["regex_search"].pattern + "/";
             } else {
-                pattern += "!/" + options.regex_search.not_pattern + "/";
+                pattern += "!/" + options["regex_search"]["not_pattern"] + "/";
             }
-            options.regex_search.case_insensitive && (pattern += "i");
-            options.regex_search.multi_line && (pattern += "m");
-            options.regex_search.ignore_whitespaces && (pattern += "x");
-            options.regex_search.dot_character && (pattern += "s");
+            options["regex_search"]["case_insensitive"] && (pattern += "i");
+            options["regex_search"]["multi_line"] && (pattern += "m");
+            options["regex_search"]["ignore_whitespaces"] && (pattern += "x");
+            options["regex_search"]["dot_character"] && (pattern += "s");
         }
 
         return pattern;
@@ -222,25 +222,29 @@ class SearchPane extends Component {
 
                         <div className="content-row">
                             <div className="text-search">
-                                <TagField tags={(options.text_search.terms || []).map(t => {return {name: t};})}
+                                <TagField tags={(options["text_search"].terms || []).map(t => {
+                                    return {name: t};
+                                })}
                                           name="terms" min={3} inline allowNew={true}
-                                          readonly={regexOptionsModified || options.text_search.exact_phrase}
-                                          onChange={(tags) => this.updateParam(s => s.text_search.terms = tags.map(t => t.name))}/>
-                                <TagField tags={(options.text_search.excluded_terms || []).map(t => {return {name: t};})}
+                                          readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+                                          onChange={(tags) => this.updateParam(s => s["text_search"].terms = tags.map(t => t.name))}/>
+                                <TagField tags={(options["text_search"]["excluded_terms"] || []).map(t => {
+                                    return {name: t};
+                                })}
                                           name="excluded_terms" min={3} inline allowNew={true}
-                                          readonly={regexOptionsModified || options.text_search.exact_phrase}
-                                          onChange={(tags) => this.updateParam(s => s.text_search.excluded_terms = tags.map(t => t.name))}/>
+                                          readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+                                          onChange={(tags) => this.updateParam(s => s["text_search"]["excluded_terms"] = tags.map(t => t.name))}/>
 
                                 <span className="exclusive-separator">or</span>
 
-                                <InputField name="exact_phrase" value={options.text_search.exact_phrase} inline
+                                <InputField name="exact_phrase" value={options["text_search"]["exact_phrase"]} inline
                                             error={this.state.exactPhraseError}
-                                            onChange={v => this.updateParam(s => s.text_search.exact_phrase = v)}
-                                            readonly={regexOptionsModified || (Array.isArray(options.text_search.terms) && options.text_search.terms.length > 0)}/>
+                                            onChange={v => this.updateParam(s => s["text_search"]["exact_phrase"] = v)}
+                                            readonly={regexOptionsModified || (Array.isArray(options["text_search"].terms) && options["text_search"].terms.length > 0)}/>
 
-                                <CheckField checked={options.text_search.case_sensitive} name="case_sensitive"
+                                <CheckField checked={options["text_search"]["case_sensitive"]} name="case_sensitive"
                                             readonly={regexOptionsModified} small
-                                            onChange={(v) => this.updateParam(s => s.text_search.case_sensitive = v)}/>
+                                            onChange={(v) => this.updateParam(s => s["text_search"]["case_sensitive"] = v)}/>
                             </div>
 
                             <div className="separator">
@@ -248,30 +252,30 @@ class SearchPane extends Component {
                             </div>
 
                             <div className="regex-search">
-                                <InputField name="pattern" value={options.regex_search.pattern} inline
+                                <InputField name="pattern" value={options["regex_search"].pattern} inline
                                             error={this.state.patternError}
-                                            readonly={textOptionsModified || options.regex_search.not_pattern}
-                                            onChange={v => this.updateParam(s => s.regex_search.pattern = v)}/>
+                                            readonly={textOptionsModified || options["regex_search"]["not_pattern"]}
+                                            onChange={v => this.updateParam(s => s["regex_search"].pattern = v)}/>
                                 <span className="exclusive-separator">or</span>
-                                <InputField name="not_pattern" value={options.regex_search.not_pattern} inline
+                                <InputField name="not_pattern" value={options["regex_search"]["not_pattern"]} inline
                                             error={this.state.notPatternError}
-                                            readonly={textOptionsModified || options.regex_search.pattern}
-                                            onChange={v => this.updateParam(s => s.regex_search.not_pattern = v)}/>
+                                            readonly={textOptionsModified || options["regex_search"].pattern}
+                                            onChange={v => this.updateParam(s => s["regex_search"]["not_pattern"] = v)}/>
 
                                 <div className="checkbox-line">
-                                    <CheckField checked={options.regex_search.case_insensitive} name="case_insensitive"
+                                    <CheckField checked={options["regex_search"]["case_insensitive"]} name="case_insensitive"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.case_insensitive = v)}/>
-                                    <CheckField checked={options.regex_search.multi_line} name="multi_line"
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["case_insensitive"] = v)}/>
+                                    <CheckField checked={options["regex_search"]["multi_line"]} name="multi_line"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.multi_line = v)}/>
-                                    <CheckField checked={options.regex_search.ignore_whitespaces}
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["multi_line"] = v)}/>
+                                    <CheckField checked={options["regex_search"]["ignore_whitespaces"]}
                                                 name="ignore_whitespaces"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.ignore_whitespaces = v)}/>
-                                    <CheckField checked={options.regex_search.dot_character} name="dot_character"
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["ignore_whitespaces"] = v)}/>
+                                    <CheckField checked={options["regex_search"]["dot_character"]} name="dot_character"
                                                 readonly={textOptionsModified} small
-                                                onChange={(v) => this.updateParam(s => s.regex_search.dot_character = v)}/>
+                                                onChange={(v) => this.updateParam(s => s["regex_search"]["dot_character"] = v)}/>
                                 </div>
                             </div>
                         </div>
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index be39777..41ab33d 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -15,19 +15,19 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, {Component} from 'react';
-import './StreamsPane.scss';
-import {Row} from 'react-bootstrap';
-import MessageAction from "../objects/MessageAction";
+import DOMPurify from "dompurify";
+import React, {Component} from "react";
+import {Row} from "react-bootstrap";
+import ReactJson from "react-json-view"
 import backend from "../../backend";
+import log from "../../log";
+import {downloadBlob, getHeaderValue} from "../../utils";
 import ButtonField from "../fields/ButtonField";
 import ChoiceField from "../fields/ChoiceField";
-import DOMPurify from 'dompurify';
-import ReactJson from 'react-json-view'
-import {downloadBlob, getHeaderValue} from "../../utils";
-import log from "../../log";
+import MessageAction from "../objects/MessageAction";
+import "./StreamsPane.scss";
 
-const classNames = require('classnames');
+const classNames = require("classnames");
 
 class StreamsPane extends Component {
 
-- 
cgit v1.2.3-70-g09d2