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/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 ++--
 5 files changed, 89 insertions(+), 85 deletions(-)

(limited to 'frontend/src/components/panels')

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