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/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 ++
 19 files changed, 780 insertions(+), 111 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/components')

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 {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <InputGroup>
-                        <FormControl as="textarea" className="message-action-value" readOnly={true}
-                                     style={{"height": "300px"}} value={this.props.actionValue} ref={this.actionValue} />
-                    </InputGroup>
+                    <TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15} />
                 </Modal.Body>
                 <Modal.Footer className="dialog-footer">
-                    <Button variant="green" onClick={this.copyActionValue}>{this.state.copyButtonText}</Button>
-                    <Button variant="red" onClick={this.props.onHide}>close</Button>
+                    <ButtonField variant="green" onClick={this.copyActionValue} name={this.state.copyButtonText} />
+                    <ButtonField variant="red" onClick={this.props.onHide} name="close" />
                 </Modal.Footer>
             </Modal>
         );
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 (
+            <div className={classNames( "field", "button-field", {"field-small": this.props.small})}>
+                <button type="button" className={classNames(classNames(buttonClassnames))}
+                        onClick={handler} style={buttonStyle}>{this.props.name}</button>
+            </div>
+        );
+    }
+}
+
+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 (
-            <div className={classNames( "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} />
-                    <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + name}</label>
+                    <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + (name != null ? name : "")}</label>
                 </div>
             </div>
         );
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) =>
+            <span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span>
+        );
+
+        return (
+            <div className={classNames( "field", "choice-field", {"field-inline" : inline},
+                {"field-small": this.props.small})}>
+                {!inline && name && <label className="field-name">{name}:</label>}
+                <div className={classNames("field-select", {"select-expanded": this.state.expanded})}
+                     tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}>
+                    <div className="field-value">
+                        {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")}
+                    </div>
+                    <div className="field-options">
+                        {options}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+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 (
-            <div className={classNames("input-field", {"field-active" : active}, {"field-invalid": invalid},
-                {"field-small": small}, {"field-inline": inline})}>
+            <div className={classNames("field", "input-field", {"field-active" : active},
+                {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}>
                 <div className="field-wrapper">
                     { name &&
                     <div className="field-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 (
-            <div className={classNames("text-field", {"field-active": this.props.active},
+            <div className={classNames("field", "text-field", {"field-active": this.props.active},
                 {"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} />
+                          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/TextField.scss b/frontend/src/components/fields/TextField.scss
index 606f537..de831fb 100644
--- a/frontend/src/components/fields/TextField.scss
+++ b/frontend/src/components/fields/TextField.scss
@@ -10,32 +10,7 @@
   }
 
   textarea {
-    background-color: $color-primary-2;
-    width: 100%;
-    border: none;
-    color: $color-primary-4;
-    border-radius: 5px;
-    padding: 7px 10px;
     resize: none;
-
-    &: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;
-    }
   }
 
   &.field-active {
diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss
new file mode 100644
index 0000000..f83a988
--- /dev/null
+++ b/frontend/src/components/fields/common.scss
@@ -0,0 +1,54 @@
+@import '../../colors.scss';
+
+.field {
+
+  input, textarea {
+    background-color: $color-primary-2;
+    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;
+    }
+  }
+
+  button {
+    border-radius: 0;
+    background-color: $color-primary-2;
+    border: none;
+    color: $color-primary-4;
+    outline: none;
+    padding: 5px 12px;
+    font-weight: 500;
+
+    &:hover,
+    &:active {
+      background-color: $color-primary-1;
+      color: $color-primary-4;
+    }
+
+    &:focus,
+    &:active {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+}
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
new file mode 100644
index 0000000..edcb720
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import './ColorField.scss';
+import InputField from "../InputField";
+
+class ColorField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            invalid: false
+        };
+
+        this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
+            "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
+    }
+
+    render() {
+        const colorButtons = this.colors.map((color) =>
+            <span key={"button" + color} className="color-input"
+                  style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+                  onClick={() => {
+                      this.setState({color: color});
+                      if (typeof this.props.onChange === "function") {
+                          this.props.onChange(color);
+                      }
+                      document.body.click(); // magic to close popup
+                  }} />);
+
+        const popover = (
+            <Popover id="popover-basic">
+                <Popover.Title as="h3">choose a color</Popover.Title>
+                <Popover.Content>
+                    <div className="colors-container">
+                        <div className="colors-row">
+                            {colorButtons.slice(0, 8)}
+                        </div>
+                        <div className="colors-row">
+                            {colorButtons.slice(8, 18)}
+                        </div>
+                    </div>
+                </Popover.Content>
+            </Popover>
+        );
+
+        return (
+            <div className="color-field">
+                <InputField {...this.props} name="color" />
+
+                <div className="color-picker">
+                    <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
+                        <Button variant="picker" size="sm">pick</Button>
+                    </OverlayTrigger>
+                </div>
+
+            </div>
+        );
+    }
+
+}
+
+export default ColorField;
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
new file mode 100644
index 0000000..c8f617c
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -0,0 +1,39 @@
+@import '../../../colors.scss';
+
+.color-field {
+  display: flex;
+  align-items: flex-end;
+
+  .input-field {
+    flex: 1;
+
+    input {
+      border-bottom-right-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+  }
+
+  .color-picker {
+    margin-bottom: 5.5px;
+
+    .btn-picker {
+      padding: 8.5px 15px;
+      border-bottom-right-radius: 5px;
+      border-top-right-radius: 5px;
+      background-color: $color-indigo;
+    }
+  }
+
+
+}
+
+.colors-container {
+  width: 600px;
+
+  .color-input {
+    display: inline-block;
+    width: 31px;
+    height: 31px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
new file mode 100644
index 0000000..8823c42
--- /dev/null
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import InputField from "../InputField";
+
+class NumericField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            invalid: false
+        };
+    }
+
+    render() {
+        const handler = (value) => {
+            value = value.replace(/[^\d]/gi, '');
+            let intValue = 0;
+            if (value !== "") {
+                intValue = parseInt(value);
+            }
+            const valid =
+                (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
+                (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
+                (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
+            this.setState({invalid: !valid});
+            if (this.props.onChange) {
+                this.props.onChange(intValue);
+            }
+        };
+
+        return (
+            <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0}
+                        invalid={this.state.invalid} />
+        );
+    }
+
+}
+
+export default NumericField;
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 621b6d6..0741bea 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -24,7 +24,7 @@ class RulesConnectionsFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         let activeRules = params.getAll("matched_rules") || [];
 
-        backend.get("/api/rules").then(res => {
+        backend.getJson("/api/rules").then(res => {
             let rules = res.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
             activeRules = rules.filter(rule => activeRules.some(id => rule.id === id));
             this.setState({rules, activeRules, mounted: true});
diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js
index 701edf2..7e0fa6c 100644
--- a/frontend/src/components/panels/PcapPane.js
+++ b/frontend/src/components/panels/PcapPane.js
@@ -3,7 +3,7 @@ import './PcapPane.scss';
 import Table from "react-bootstrap/Table";
 import backend from "../../backend";
 import {createCurlCommand, formatSize, timestampToTime2} from "../../utils";
-import {Button, Col, Container, Form, Row} from "react-bootstrap";
+import {Button, Col, Container, Row} from "react-bootstrap";
 import InputField from "../fields/InputField";
 import CheckField from "../fields/CheckField";
 import TextField from "../fields/TextField";
@@ -15,45 +15,48 @@ class PcapPane extends Component {
 
         this.state = {
             sessions: [],
-            isFileValid: true,
-            isFileFocused: false,
-            selectedFile: null,
+            isUploadFileValid: true,
+            isUploadFileFocused: false,
+            uploadSelectedFile: null,
             uploadFlushAll: false,
             uploadStatusCode: null,
-            uploadOutput: null
+            uploadOutput: null,
+            isFileValid: true,
+            isFileFocused: false,
+            fileValue: "",
+            fileFlushAll: false,
+            fileStatusCode: null,
+            fileOutput: null,
+            deleteOriginalFile: false
         };
-
-        this.loadSessions = this.loadSessions.bind(this);
-        this.handleFileChange = this.handleFileChange.bind(this);
-        this.handleUploadPcap = this.handleUploadPcap.bind(this);
     }
 
     componentDidMount() {
         this.loadSessions();
     }
 
-    loadSessions() {
-        backend.get("/api/pcap/sessions").then(res => this.setState({sessions: res}));
-    }
+    loadSessions = () => {
+        backend.getJson("/api/pcap/sessions").then(res => this.setState({sessions: res}));
+    };
 
-    handleFileChange(file) {
+    handleUploadFileChange = (file) => {
         this.setState({
-            isFileValid: file != null && file.type.endsWith("pcap"),
-            isFileFocused: false,
-            selectedFile: file
+            isUploadFileValid: file != null && file.type.endsWith("pcap"),
+            isUploadFileFocused: false,
+            uploadSelectedFile: file
         });
-    }
+    };
 
-    handleUploadPcap() {
-        if (this.state.selectedFile == null || !this.state.isFileValid) {
-            this.setState({isFileFocused: true});
+    handleUploadPcap = () => {
+        if (this.state.uploadSelectedFile == null || !this.state.isUploadFileValid) {
+            this.setState({isUploadFileFocused: true});
             return;
         }
 
         const formData = new FormData();
         formData.append(
             "file",
-            this.state.selectedFile
+            this.state.uploadSelectedFile
         );
 
         backend.postFile("/api/pcap/upload", formData).then(response =>
@@ -62,7 +65,33 @@ class PcapPane extends Component {
                 uploadOutput: JSON.stringify(result)
             }))
         );
-    }
+    };
+
+    handleFileChange = (file) => {
+        this.setState({
+            isFileValid: file !== "" && file.endsWith("pcap"),
+            isFileFocused: false,
+            fileValue: file
+        });
+    };
+
+    handleProcessPcap = () => {
+        if (this.state.fileValue === "" || !this.state.isFileValid) {
+            this.setState({isFileFocused: true});
+            return;
+        }
+
+        backend.post("/api/pcap/file", {
+            file: this.state.fileValue,
+            flush_all: this.state.fileFlushAll,
+            delete_original_file: this.state.deleteOriginalFile
+        }).then(response =>
+            response.json().then(result => this.setState({
+                fileStatusCode: response.status + " " + response.statusText,
+                fileOutput: JSON.stringify(result)
+            }))
+        );
+    };
 
     render() {
         let sessions = this.state.sessions.map(s =>
@@ -82,7 +111,7 @@ class PcapPane extends Component {
 
         const uploadOutput = this.state.uploadOutput != null ? this.state.uploadOutput :
             createCurlCommand("pcap/upload", "POST", null, {
-                file: "@" + ((this.state.selectedFile != null && this.state.isFileValid) ? this.state.selectedFile.name :
+                file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ? this.state.uploadSelectedFile.name :
                     "invalid.pcap"),
                 flush_all: this.state.uploadFlushAll
             })
@@ -120,17 +149,17 @@ class PcapPane extends Component {
                 <div className="pane-section">
                     <Container className="p-0">
                         <Row>
-                            <Col>
+                            <Col style={{"paddingRight": "0"}}>
                                 <div className="section-header">
                                     <span className="api-request">POST /api/pcap/upload</span>
                                     <span className="api-response">{this.state.uploadStatusCode}</span>
                                 </div>
 
                                 <div className="section-content">
-                                    <InputField type={"file"} name={"file"} invalid={!this.state.isFileValid}
-                                                active={this.state.isFileFocused}
-                                                onChange={this.handleFileChange} value={this.state.selectedFile}
-                                                defaultValue={"No .pcap[ng] selected"}/>
+                                    <InputField type={"file"} name={"file"} invalid={!this.state.isUploadFileValid}
+                                                active={this.state.isUploadFileFocused}
+                                                onChange={this.handleUploadFileChange} value={this.state.uploadSelectedFile}
+                                                defaultValue={"no .pcap[ng] selected"}/>
 
                                     <div className="upload-actions">
                                         <div className="upload-options">
@@ -148,24 +177,31 @@ class PcapPane extends Component {
                             <Col>
                                 <div className="section-header">
                                     <span className="api-request">POST /api/pcap/file</span>
-                                    <span className="api-response"></span>
+                                    <span className="api-response">{this.state.fileStatusCode}</span>
                                 </div>
 
                                 <div className="section-content">
-                                    <Form.Control type="text" id="pcap-upload" className="custom-file"
-                                                  onChange={this.onLocalFileChange} placeholder="local .pcap/.pcapng"
-                                                  custom
-                                    />
+                                    <InputField name="file" active={this.state.isUploadFileFocused}
+                                                onChange={this.handleFileChange} value={this.state.uploadSelectedFile}
+                                                defaultValue={"local .pcap[ng] path"} inline/>
+
+                                    <div className="upload-actions" style={{"marginTop": "11px"}}>
+                                        <div className="upload-options">
+                                            <CheckField name="flush_all" checked={this.state.uploadFlushAll}
+                                                        onChange={v => this.setState({uploadFlushAll: v})}/>
+                                            <CheckField name="delete_original_file" checked={this.state.uploadFlushAll}
+                                                        onChange={v => this.setState({uploadFlushAll: v})}/>
+                                        </div>
+                                        <Button variant="blue" onClick={this.handleUploadPcap}>process</Button>
+                                    </div>
+
+                                    <TextField value={uploadOutput} rows={4} readonly small={true}/>
                                 </div>
                             </Col>
                         </Row>
                     </Container>
-
-
                 </div>
-
             </div>
-
         );
     }
 }
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js
new file mode 100644
index 0000000..fbc8785
--- /dev/null
+++ b/frontend/src/components/panels/RulePane.js
@@ -0,0 +1,166 @@
+import React, {Component} from 'react';
+import './RulePane.scss';
+import Table from "react-bootstrap/Table";
+import {Button, Col, Container, Row} from "react-bootstrap";
+import InputField from "../fields/InputField";
+import CheckField from "../fields/CheckField";
+import TextField from "../fields/TextField";
+import backend from "../../backend";
+import NumericField from "../fields/extensions/NumericField";
+import ColorField from "../fields/extensions/ColorField";
+import ChoiceField from "../fields/ChoiceField";
+import ButtonField from "../fields/ButtonField";
+
+class RulePane extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            rules: [],
+        };
+    }
+
+    componentDidMount() {
+        this.loadRules();
+    }
+
+    loadRules = () => {
+        backend.getJson("/api/rules").then(res => this.setState({rules: res}));
+    };
+
+
+    render() {
+        let rules = this.state.rules.map(r =>
+            <tr className="table-row">
+                <td>{r["id"].substring(0, 8)}</td>
+                <td>{r["name"]}</td>
+                <td>{r["notes"]}</td>
+                {/*<td>{((new Date(s["completed_at"]) - new Date(s["started_at"])) / 1000).toFixed(3)}s</td>*/}
+                {/*<td>{formatSize(s["size"])}</td>*/}
+                {/*<td>{s["processed_packets"]}</td>*/}
+                {/*<td>{s["invalid_packets"]}</td>*/}
+                {/*<td>undefined</td>*/}
+                {/*<td className="table-cell-action"><a target="_blank"*/}
+                {/*                                     href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a>*/}
+                {/*</td>*/}
+            </tr>
+        );
+
+        return (
+            <div className="pane-container rule-pane">
+                <div className="pane-section">
+                    <div className="section-header">
+                        <span className="api-request">GET /api/rules</span>
+                        <span className="api-response">200 OK</span>
+                    </div>
+
+                    <div className="section-table">
+                        <Table borderless size="sm">
+                            <thead>
+                            <tr>
+                                <th>id</th>
+                                <th>name</th>
+                                <th>notes</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {rules}
+                            </tbody>
+                        </Table>
+                    </div>
+                </div>
+
+                <div className="pane-section">
+                    <div className="section-header">
+                        <span className="api-request">POST /api/rules</span>
+                        <span className="api-response"></span>
+                    </div>
+
+                    <div className="section-content">
+                        <Container className="p-0">
+                            <Row>
+                                <Col>
+                                    <InputField name="name" inline />
+                                    <ColorField value={this.state.test1} onChange={(e) => this.setState({test1: e})} inline />
+                                    <TextField name="notes" rows={2} />
+                                </Col>
+
+                                <Col>
+                                    <div >filters:</div>
+                                    <NumericField name="service_port" inline value={this.state.test} onChange={(e) => this.setState({test: e})} validate={(e) => e%2 === 0} />
+
+                                    <NumericField name="client_port" inline />
+                                    <InputField name="client_address" />
+                                </Col>
+
+                                <Col>
+                                    <NumericField name="min_duration" inline />
+                                    <NumericField name="max_duration" inline />
+                                    <NumericField name="min_bytes" inline />
+                                    <NumericField name="max_bytes" inline />
+
+                                </Col>
+                            </Row>
+                        </Container>
+
+                        <div className="post-rules-actions">
+                            <label>options:</label>
+                            <div className="rules-options">
+                                <CheckField name={"enabled"} />
+                            </div>
+
+                            <ButtonField variant="blue" name="clear" bordered />
+                            <ButtonField variant="green" name="add_rule" bordered />
+                        </div>
+
+                        patterns:
+                        <div className="section-table">
+                            <Table borderless size="sm">
+                                <thead>
+                                <tr>
+                                    <th>regex</th>
+                                    <th>Aa</th>
+                                    <th>.*</th>
+                                    <th>\n+</th>
+                                    <th>UTF8</th>
+                                    <th>Uni_</th>
+                                    <th>min</th>
+                                    <th>max</th>
+                                    <th>direction</th>
+                                    <th>actions</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td style={{"width": "500px"}}><InputField small /></td>
+                                        <td><CheckField small /></td>
+                                        <td><CheckField small /></td>
+                                        <td><CheckField small /></td>
+                                        <td><CheckField small /></td>
+                                        <td><CheckField small /></td>
+                                        <td style={{"width": "70px"}}><NumericField small /></td>
+                                        <td style={{"width": "70px"}}><NumericField small /></td>
+                                        <td><ChoiceField small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]} value="both" /></td>
+                                        <td><Button  variant="green" size="sm">add</Button></td>
+                                    </tr>
+                                </tbody>
+                            </Table>
+                        </div>
+
+                        <ButtonField name="add_rule" variant="green" bordered />
+                        <br />
+                        <ButtonField name="add_rule" small color="red"/>
+                        <br />
+                        <ButtonField name="add_rule" bordered border={"green"} />
+                    </div>
+                </div>
+
+
+            </div>
+        );
+    }
+
+}
+
+export default RulePane;
diff --git a/frontend/src/components/panels/RulePane.scss b/frontend/src/components/panels/RulePane.scss
new file mode 100644
index 0000000..b030c6a
--- /dev/null
+++ b/frontend/src/components/panels/RulePane.scss
@@ -0,0 +1,16 @@
+
+.rule-pane {
+  .post-rules-actions {
+    display: flex;
+
+    .rules-options {
+      flex: 1;
+    }
+
+    button {
+      margin-left: 10px;
+    }
+  }
+
+
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2