diff options
Diffstat (limited to 'frontend/src/components')
26 files changed, 224 insertions, 231 deletions
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 { |