diff options
Diffstat (limited to 'frontend/src/components/panels')
| -rw-r--r-- | frontend/src/components/panels/ConnectionsPane.js | 4 | ||||
| -rw-r--r-- | frontend/src/components/panels/MainPane.js | 12 | ||||
| -rw-r--r-- | frontend/src/components/panels/PcapsPane.js | 34 | ||||
| -rw-r--r-- | frontend/src/components/panels/SearchPane.js | 106 | ||||
| -rw-r--r-- | frontend/src/components/panels/StreamsPane.js | 18 |
5 files changed, 89 insertions, 85 deletions
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 { |