0})}>
|
{conn.port_src} |
{conn.ip_dst} |
{conn.port_dst} |
+ {dateTimeToTime(conn.started_at)} |
@@ -107,7 +103,7 @@ class Connection extends Component {
|
{formatSize(conn.client_bytes)} |
{formatSize(conn.server_bytes)} |
-
+ |
{/*Hide this connection from the list)}>*/}
{/* obj == null ? null : Object.entries(obj).map(([key, value]) =>
- {key}: {value}
+ {key}: {value}
);
let m = connectionMessage.metadata;
diff --git a/frontend/src/components/ConnectionMatchedRules.js b/frontend/src/components/ConnectionMatchedRules.js
new file mode 100644
index 0000000..21f2a92
--- /dev/null
+++ b/frontend/src/components/ConnectionMatchedRules.js
@@ -0,0 +1,29 @@
+import React, {Component} from 'react';
+import './ConnectionMatchedRules.scss';
+import ButtonField from "./fields/ButtonField";
+
+class ConnectionMatchedRules extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ };
+ }
+
+ render() {
+ const matchedRules = this.props.matchedRules.map(mr => {
+ const rule = this.props.rules.find(r => r.id === mr);
+ return this.props.addMatchedRulesFilter(rule.id)} name={rule.name}
+ color={rule.color} small />;
+ });
+
+ return (
+
+ | matched_rules: |
+ {matchedRules} |
+
+ );
+ }
+}
+
+export default ConnectionMatchedRules;
diff --git a/frontend/src/components/ConnectionMatchedRules.scss b/frontend/src/components/ConnectionMatchedRules.scss
new file mode 100644
index 0000000..ed18f3c
--- /dev/null
+++ b/frontend/src/components/ConnectionMatchedRules.scss
@@ -0,0 +1,23 @@
+@import '../colors.scss';
+
+.connection-matches {
+ background-color: $color-primary-0;
+
+ .rule-buttons {
+ padding: 0;
+ }
+
+ .button-field {
+ display: inline-block;
+ margin-right: 5px;
+
+ button {
+ font-size: 0.8em;
+ padding: 2px 10px;
+ }
+ }
+
+ .row-label {
+ font-size: 0.8em;
+ }
+}
diff --git a/frontend/src/components/panels/ConfigurationPane.js b/frontend/src/components/panels/ConfigurationPane.js
new file mode 100644
index 0000000..10309f6
--- /dev/null
+++ b/frontend/src/components/panels/ConfigurationPane.js
@@ -0,0 +1,162 @@
+import React, {Component} from 'react';
+import './common.scss';
+import './ConfigurationPane.scss';
+import LinkPopover from "../objects/LinkPopover";
+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";
+
+class ConfigurationPane extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ settings: {
+ "config": {
+ "server_address": "",
+ "flag_regex": "",
+ "auth_required": false
+ },
+ "accounts": {
+ }
+ },
+ newUsername: "",
+ newPassword: ""
+ };
+ }
+
+ saveSettings = () => {
+ if (this.validateSettings(this.state.settings)) {
+ backend.post("/setup", this.state.settings).then(_ => {
+ this.props.onConfigured();
+ }).catch(res => {
+ this.setState({setupStatusCode: res.status, setupResponse: JSON.stringify(res.json)});
+ });
+ }
+ };
+
+ validateSettings = (settings) => {
+ let valid = true;
+ if (!validation.isValidAddress(settings.config.server_address, true)) {
+ this.setState({serverAddressError: "invalid ip_address"});
+ valid = false;
+ }
+ if (settings.config.flag_regex.length < 8) {
+ this.setState({flagRegexError: "flag_regex.length < 8"});
+ valid = false;
+ }
+
+ return valid;
+ };
+
+ updateParam = (callback) => {
+ callback(this.state.settings);
+ this.setState({settings: this.state.settings});
+ };
+
+ addAccount = () => {
+ if (this.state.newUsername.length !== 0 && this.state.newPassword.length !== 0) {
+ const settings = this.state.settings;
+ settings.accounts[this.state.newUsername] = this.state.newPassword;
+
+ this.setState({
+ newUsername: "",
+ newPassword: "",
+ settings: settings
+ });
+ } else {
+ this.setState({
+ newUsernameActive: this.state.newUsername.length === 0,
+ newPasswordActive: this.state.newPassword.length === 0
+ });
+ }
+ };
+
+ render() {
+ const settings = this.state.settings;
+ const curlCommand = createCurlCommand("/setup", "POST", settings);
+
+ const accounts = Object.entries(settings.accounts).map(([username, password]) =>
+
+ | {username} |
+ |
+ this.updateParam((s) => delete s.accounts[username]) }/> |
+ ).concat(
+ | this.setState({newUsername: v})} /> |
+ this.setState({newPassword: v})} /> |
+ |
+ );
+
+ return (
+
+
+
+
+
+ POST /setup
+
+
+
+
+
+
+
+ this.updateParam((s) => s.config.server_address = v)} />
+ this.updateParam((s) => s.config.flag_regex = v)}
+ error={this.state.flagRegexError} />
+
+ this.updateParam((s) => s.config.auth_required = v)}/>
+
+
+
+
+
+ accounts:
+
+
+
+
+ | username |
+ password |
+ actions |
+
+
+
+ {accounts}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ !this.state.loading &&
+ this.setState({selectedConnection: c})}
+ initialConnection={this.state.selectedConnection} />
+ }
+
+
+
+ } />
+ } />
+ } />
+ } />
+ } />
+
+
+
+
| {s["id"].substring(0, 8)} |
{dateTimeToTime(s["started_at"])} |
{durationBetween(s["started_at"], s["completed_at"])} |
@@ -119,8 +119,7 @@ class PcapPane extends Component {
|
- download
+ | download
|
);
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js
index 7cb849c..49364d2 100644
--- a/frontend/src/components/panels/RulePane.js
+++ b/frontend/src/components/panels/RulePane.js
@@ -13,6 +13,7 @@ import ChoiceField from "../fields/ChoiceField";
import ButtonField from "../fields/ButtonField";
import validation from "../../validation";
import LinkPopover from "../objects/LinkPopover";
+import {randomClassName} from "../../utils";
const classNames = require('classnames');
const _ = require('lodash');
@@ -220,7 +221,7 @@ class RulePane extends Component {
const pattern = this.state.selectedPattern || this.state.newPattern;
let rules = this.state.rules.map(r =>
- {
+ {
this.reset();
this.setState({selectedRule: _.cloneDeep(r)});
}} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id })}>
@@ -235,7 +236,7 @@ class RulePane extends Component {
rule.patterns.concat(this.state.newPattern) :
rule.patterns
).map(p => p === pattern ?
-
+
|
{
@@ -272,7 +273,7 @@ class RulePane extends Component {
|
:
-
+
| {p.regex} |
{p.flags.caseless ? "yes": "no"} |
{p.flags.dot_all ? "yes": "no"} |
@@ -377,7 +378,7 @@ class RulePane extends Component {
| regex |
- Aa |
+ !Aa |
.* |
\n+ |
UTF8 |
diff --git a/frontend/src/components/panels/ServicePane.js b/frontend/src/components/panels/ServicePane.js
index b21ad6c..eaefa64 100644
--- a/frontend/src/components/panels/ServicePane.js
+++ b/frontend/src/components/panels/ServicePane.js
@@ -100,7 +100,7 @@ class ServicePane extends Component {
const service = this.state.currentService;
let services = this.state.services.map(s =>
- {
+ {
this.reset();
this.setState({isUpdate: true, currentService: _.cloneDeep(s)});
}} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port })}>
--
cgit v1.2.3-70-g09d2
|