From 1412a34f64e234dbc7d4e6815b841699f4dd104a Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Sun, 27 Sep 2020 17:48:38 +0200 Subject: Add other custom fields --- frontend/src/backend.js | 27 +++- frontend/src/components/ConnectionContent.js | 28 ++-- frontend/src/components/MessageAction.js | 13 +- frontend/src/components/fields/ButtonField.js | 44 ++++++ frontend/src/components/fields/ButtonField.scss | 119 +++++++++++++++ frontend/src/components/fields/CheckField.js | 5 +- frontend/src/components/fields/ChoiceField.js | 59 ++++++++ frontend/src/components/fields/ChoiceField.scss | 69 +++++++++ frontend/src/components/fields/InputField.js | 7 +- frontend/src/components/fields/InputField.scss | 28 +--- frontend/src/components/fields/TextField.js | 5 +- frontend/src/components/fields/TextField.scss | 25 ---- frontend/src/components/fields/common.scss | 54 +++++++ .../src/components/fields/extensions/ColorField.js | 63 ++++++++ .../components/fields/extensions/ColorField.scss | 39 +++++ .../components/fields/extensions/NumericField.js | 39 +++++ .../components/filters/RulesConnectionsFilter.js | 2 +- frontend/src/components/panels/PcapPane.js | 110 +++++++++----- frontend/src/components/panels/RulePane.js | 166 +++++++++++++++++++++ frontend/src/components/panels/RulePane.scss | 16 ++ frontend/src/index.scss | 116 +------------- frontend/src/views/Connections.js | 24 +-- frontend/src/views/Header.js | 4 +- frontend/src/views/MainPane.js | 27 ++-- 24 files changed, 841 insertions(+), 248 deletions(-) create mode 100644 frontend/src/components/fields/ButtonField.js create mode 100644 frontend/src/components/fields/ButtonField.scss create mode 100644 frontend/src/components/fields/ChoiceField.js create mode 100644 frontend/src/components/fields/ChoiceField.scss create mode 100644 frontend/src/components/fields/common.scss create mode 100644 frontend/src/components/fields/extensions/ColorField.js create mode 100644 frontend/src/components/fields/extensions/ColorField.scss create mode 100644 frontend/src/components/fields/extensions/NumericField.js create mode 100644 frontend/src/components/panels/RulePane.js create mode 100644 frontend/src/components/panels/RulePane.scss (limited to 'frontend/src') diff --git a/frontend/src/backend.js b/frontend/src/backend.js index 5eb0e40..a02f7a8 100644 --- a/frontend/src/backend.js +++ b/frontend/src/backend.js @@ -1,5 +1,5 @@ -async function json(method, url, data, headers) { +async function json(method, url, data, headers, returnJson) { const options = { method: method, mode: "cors", @@ -15,7 +15,18 @@ async function json(method, url, data, headers) { options.body = JSON.stringify(data); } const result = await fetch(url, options); - return result.json(); + if (returnJson) { + if (result.status >= 200 && result.status < 300) { + return result.json(); + } else { + return Promise.reject({ + response: result, + json: await result.json() + }); + } + } else { + return result; + } } async function file(url, data, headers) { @@ -44,6 +55,18 @@ const backend = { delete: (url = "", data = null, headers = null) => { return json("DELETE", url, data, headers); }, + getJson: (url = "", headers = null) => { + return json("GET", url, null, headers, true); + }, + postJson: (url = "", data = null, headers = null) => { + return json("POST", url, data, headers, true); + }, + putJson: (url = "", data = null, headers = null) => { + return json("PUT", url, data, headers, true); + }, + deleteJson: (url = "", data = null, headers = null) => { + return json("DELETE", url, data, headers, true); + }, postFile: (url = "", data = null, headers = null) => { return file(url, data, headers); }, diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js index 0c00e8e..0069424 100644 --- a/frontend/src/components/ConnectionContent.js +++ b/frontend/src/components/ConnectionContent.js @@ -22,20 +22,30 @@ class ConnectionContent extends Component { this.setFormat = this.setFormat.bind(this); } + componentDidMount() { + if (this.props.connection != null) { + this.loadStream(); + } + } + componentDidUpdate(prevProps, prevState, snapshot) { - if (this.props.connection !== null && ( + if (this.props.connection != null && ( this.props.connection !== prevProps.connection || this.state.format !== prevState.format)) { - this.setState({loading: true}); - // TODO: limit workaround. - backend.get(`/api/streams/${this.props.connection.id}?format=${this.state.format}&limit=999999`).then(res => { - this.setState({ - connectionContent: res, - loading: false - }); - }); + this.loadStream(); } } + loadStream = () => { + this.setState({loading: true}); + // TODO: limit workaround. + backend.getJson(`/api/streams/${this.props.connection.id}?format=${this.state.format}&limit=999999`).then(res => { + this.setState({ + connectionContent: res, + loading: false + }); + }); + }; + setFormat(format) { if (this.validFormats.includes(format)) { this.setState({format: format}); diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js index 2c85d84..2c6ebbc 100644 --- a/frontend/src/components/MessageAction.js +++ b/frontend/src/components/MessageAction.js @@ -1,6 +1,8 @@ import React, {Component} from 'react'; import './MessageAction.scss'; -import {Button, FormControl, InputGroup, Modal} from "react-bootstrap"; +import {Modal} from "react-bootstrap"; +import TextField from "./fields/TextField"; +import ButtonField from "./fields/ButtonField"; class MessageAction extends Component { @@ -35,14 +37,11 @@ class MessageAction extends Component { - - - + - - + + ); diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js new file mode 100644 index 0000000..b32aee8 --- /dev/null +++ b/frontend/src/components/fields/ButtonField.js @@ -0,0 +1,44 @@ +import React, {Component} from 'react'; +import './ButtonField.scss'; +import './common.scss'; + +const classNames = require('classnames'); + +class ButtonField extends Component { + + constructor(props) { + super(props); + } + + render() { + const handler = () => { + if (typeof this.props.onClick === "function") { + this.props.onClick(); + } + }; + + let buttonClassnames = { + "button-bordered": this.props.bordered, + }; + if (this.props.variant) { + buttonClassnames[`button-variant-${this.props.variant}`] = true; + } + + let buttonStyle = {}; + if (this.props.color) { + buttonStyle["backgroundColor"] = this.props.color; + } + if (this.props.border) { + buttonStyle["borderColor"] = this.props.border; + } + + return ( +
+ +
+ ); + } +} + +export default ButtonField; diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss new file mode 100644 index 0000000..933279e --- /dev/null +++ b/frontend/src/components/fields/ButtonField.scss @@ -0,0 +1,119 @@ +@import '../../colors.scss'; + +.button-field { + font-size: 0.9em; + + .button-bordered { + border-bottom: 5px solid $color-primary-1; + } + + &.field-small { + font-size: 0.8em; + } + + .button-variant-red { + color: $color-red-light; + background-color: $color-red; + + &.button-bordered { + border-bottom: 5px solid $color-red-dark; + } + + &:hover, + &:active { + color: $color-red-light; + background-color: $color-red-dark; + } + } + + .button-variant-pink { + color: $color-pink-light; + background-color: $color-pink; + + &.button-bordered { + border-bottom: 5px solid $color-pink-dark; + } + + &:hover, + &:active { + color: $color-pink-light; + background-color: $color-pink-dark; + } + } + + .button-variant-purple { + color: $color-purple-light; + background-color: $color-purple; + + &.button-bordered { + border-bottom: 5px solid $color-purple-dark; + } + + &:hover, + &:active { + color: $color-purple-light; + background-color: $color-purple-dark; + } + } + + .button-variant-deep-purple { + color: $color-deep-purple-light; + background-color: $color-deep-purple; + + &.button-bordered { + border-bottom: 5px solid $color-deep-purple-dark; + } + + &:hover, + &:active { + color: $color-deep-purple-light; + background-color: $color-deep-purple-dark; + } + } + + .button-variant-indigo { + color: $color-indigo-light; + background-color: $color-indigo; + + &.button-bordered { + border-bottom: 5px solid $color-indigo-dark; + } + + &:hover, + &:active { + color: $color-indigo-light; + background-color: $color-indigo-dark; + } + } + + .button-variant-blue { + color: $color-blue-light; + background-color: $color-blue; + + &.button-bordered { + border-bottom: 5px solid $color-blue-dark; + } + + &:hover, + &:active { + color: $color-blue-light; + background-color: $color-blue-dark; + } + } + + .button-variant-green { + color: $color-green-light; + background-color: $color-green; + + &.button-bordered { + border-bottom: 5px solid $color-green-dark; + } + + &:hover, + &:active { + color: $color-green-light; + background-color: $color-green-dark; + } + } + +} diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js index 5cceac4..33f4f83 100644 --- a/frontend/src/components/fields/CheckField.js +++ b/frontend/src/components/fields/CheckField.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import './CheckField.scss'; +import './common.scss'; import {randomClassName} from "../../utils"; const classNames = require('classnames'); @@ -23,10 +24,10 @@ class CheckField extends Component { }; return ( -
+
- +
); diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js new file mode 100644 index 0000000..d409b21 --- /dev/null +++ b/frontend/src/components/fields/ChoiceField.js @@ -0,0 +1,59 @@ +import React, {Component} from 'react'; +import './ChoiceField.scss'; +import './common.scss'; +import {randomClassName} from "../../utils"; + +const classNames = require('classnames'); + +class ChoiceField extends Component { + + constructor(props) { + super(props); + + this.state = { + expanded: false + }; + + this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; + } + + render() { + const name = this.props.name || null; + const inline = this.props.inline; + + const collapse = () => this.setState({expanded: false}); + const expand = () => this.setState({expanded: true}); + + const handler = (key) => { + collapse(); + if (this.props.onChange) { + this.props.onChange(key); + } + }; + + const keys = this.props.keys || []; + const values = this.props.values || []; + + const options = keys.map((key, i) => + handler(key)}>{values[i]} + ); + + return ( +
+ {!inline && name && } +
this.state.expanded ? collapse() : expand()}> +
+ {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")} +
+
+ {options} +
+
+
+ ); + } +} + +export default ChoiceField; diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss new file mode 100644 index 0000000..7f32b0e --- /dev/null +++ b/frontend/src/components/fields/ChoiceField.scss @@ -0,0 +1,69 @@ +@import '../../colors.scss'; + +.choice-field { + font-size: 0.9em; + + .field-name { + margin: 0; + } + + .field-select { + position: relative; + margin-top: 5px; + + .field-value { + background-color: $color-primary-2; + border: none; + color: $color-primary-4; + border-radius: 5px; + padding: 7px 10px; + cursor: pointer; + + &:after { + content: "⋎"; + position: absolute; + right: 10px; + } + } + + .field-options { + position: absolute; + top: 35px; + width: 100%; + z-index: 20; + border-top: 3px solid $color-primary-0; + border-radius: 5px; + background-color: $color-primary-2; + display: none; + + .field-option { + display: block; + padding: 5px 10px; + cursor: pointer; + border-radius: 5px; + } + + .field-option:hover { + background-color: $color-primary-1; + } + } + + &:focus { + outline: none; + } + } + + .field-select.select-expanded { + .field-options { + display: block; + } + + .field-value:after { + content: "⋏"; + } + } + + &.field-small { + font-size: 0.8em; + } +} diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js index af3b3df..6cf967a 100644 --- a/frontend/src/components/fields/InputField.js +++ b/frontend/src/components/fields/InputField.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import './InputField.scss'; +import './common.scss'; import {randomClassName} from "../../utils"; const classNames = require('classnames'); @@ -36,12 +37,12 @@ class InputField extends Component { }; let inputProps = {}; if (type !== "file") { - inputProps["value"] = value; + inputProps["value"] = value || this.props.initialValue; } return ( -
+
{ name &&
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss index cdb8c9f..79e2b7e 100644 --- a/frontend/src/components/fields/InputField.scss +++ b/frontend/src/components/fields/InputField.scss @@ -14,42 +14,20 @@ position: relative; .field-value { - input, .file-label { + .file-label { background-color: $color-primary-2; + margin: 0; width: 100%; - border: none; color: $color-primary-4; border-radius: 5px; padding: 7px 10px; - - &:focus { - background-color: $color-primary-1; - color: $color-primary-4; - box-shadow: none; - outline: none; - } - - &[readonly] { - background-color: $color-primary-2; - border: none; - color: $color-primary-4; - } - - &[readonly]:focus { - background-color: $color-primary-1; - color: $color-primary-4; - box-shadow: none; - } + cursor: pointer; } input[type="file"] { display: none; } - .file-label { - margin: 0; - } - .file-label:after { content: "Browse"; position: absolute; diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js index 86b98ed..de68c21 100644 --- a/frontend/src/components/fields/TextField.js +++ b/frontend/src/components/fields/TextField.js @@ -1,5 +1,6 @@ import React, {Component} from 'react'; import './TextField.scss'; +import './common.scss'; import {randomClassName} from "../../utils"; const classNames = require('classnames'); @@ -28,11 +29,11 @@ class TextField extends Component { }; return ( -
{name && }