Add BooleanField

5 files changed, 32 insertions, 135 deletions

diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js
index 7dea7cf..490d185 100644
--- a/frontend/src/components/filters/BooleanConnectionsFilter.js
+++ b/frontend/src/components/filters/BooleanConnectionsFilter.js
@@ -1,9 +1,7 @@
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
 import {Redirect} from "react-router";
-import './BooleanConnectionsFilter.scss';
-
-const classNames = require('classnames');
+import BooleanField from "../fields/BooleanField";
 
 class BooleanConnectionsFilter extends Component {
 
@@ -57,11 +55,9 @@ class BooleanConnectionsFilter extends Component {
         }
 
         return (
-            <div className={classNames("filter", "d-inline-block", {"filter-active" : this.toBoolean(this.state.filterActive)})}>
-                <div className="filter-boolean" onClick={this.filterChanged}>
-                    <span>{this.props.filterName}</span>
-                </div>
-
+            <div className="filter" style={{"width": `${this.props.width}px`}}>
+                <BooleanField checked={this.toBoolean(this.state.filterActive)} name={this.props.filterName}
+                             onChange={this.filterChanged} />
                 {redirect}
             </div>
         );
diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.scss b/frontend/src/components/filters/BooleanConnectionsFilter.scss
deleted file mode 100644
index 941b967..0000000
--- a/frontend/src/components/filters/BooleanConnectionsFilter.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import '../../colors';
-
-.filter {
-  .filter-boolean {
-    padding: 0 10px;
-    background-color: $color-primary-2;
-    border-radius: 5px;
-    cursor: pointer;
-    height: 34px;
-
-    span {
-      display: block;
-      font-size: 13px;
-      padding: 6px 5px;
-    }
-  }
-
-  &.filter-active {
-    .filter-boolean {
-      background-color: $color-primary-4;
-      color: $color-primary-3;
-    }
-  }
-}
diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js
index d36792e..02ccb42 100644
--- a/frontend/src/components/filters/FiltersDefinitions.js
+++ b/frontend/src/components/filters/FiltersDefinitions.js
@@ -12,7 +12,6 @@ import React from "react";
 import RulesConnectionsFilter from "./RulesConnectionsFilter";
 import BooleanConnectionsFilter from "./BooleanConnectionsFilter";
 
-
 export const filtersNames = ["service_port", "matched_rules", "client_address", "client_port",
     "min_duration", "max_duration", "min_bytes", "max_bytes", "started_after",
     "started_before", "closed_after", "closed_before", "marked", "hidden"];
@@ -22,59 +21,70 @@ export const filtersDefinitions = {
                                            defaultFilterValue="all_ports"
                                            replaceFunc={cleanNumber}
                                            validateFunc={validatePort}
-                                           key="service_port_filter" />,
+                                           key="service_port_filter"
+                                           width={200} />,
     matched_rules: <RulesConnectionsFilter />,
     client_address: <StringConnectionsFilter filterName="client_address"
                                              defaultFilterValue="all_addresses"
                                              validateFunc={validateIpAddress}
-                                             key="client_address_filter" />,
+                                             key="client_address_filter"
+                                             width={320} />,
     client_port: <StringConnectionsFilter filterName="client_port"
                                           defaultFilterValue="all_ports"
                                           replaceFunc={cleanNumber}
                                           validateFunc={validatePort}
-                                          key="client_port_filter" />,
+                                          key="client_port_filter"
+                                          width={200} />,
     min_duration: <StringConnectionsFilter filterName="min_duration"
                                            defaultFilterValue="0"
                                            replaceFunc={cleanNumber}
                                            validateFunc={validateMin(0)}
-                                           key="min_duration_filter" />,
+                                           key="min_duration_filter"
+                                           width={200} />,
     max_duration: <StringConnectionsFilter filterName="max_duration"
                                            defaultFilterValue="∞"
                                            replaceFunc={cleanNumber}
-                                           key="max_duration_filter" />,
+                                           key="max_duration_filter"
+                                           width={200} />,
     min_bytes: <StringConnectionsFilter filterName="min_bytes"
                                         defaultFilterValue="0"
                                         replaceFunc={cleanNumber}
                                         validateFunc={validateMin(0)}
-                                        key="min_bytes_filter" />,
+                                        key="min_bytes_filter"
+                                        width={200} />,
     max_bytes: <StringConnectionsFilter filterName="max_bytes"
                                         defaultFilterValue="∞"
                                         replaceFunc={cleanNumber}
-                                        key="max_bytes_filter" />,
+                                        key="max_bytes_filter"
+                                        width={200} />,
     started_after: <StringConnectionsFilter filterName="started_after"
                                             defaultFilterValue="00:00:00"
                                             validateFunc={validate24HourTime}
                                             encodeFunc={timeToTimestamp}
                                             decodeFunc={timestampToTime}
-                                            key="started_after_filter" />,
+                                            key="started_after_filter"
+                                            width={200} />,
     started_before: <StringConnectionsFilter filterName="started_before"
                                              defaultFilterValue="00:00:00"
                                              validateFunc={validate24HourTime}
                                              encodeFunc={timeToTimestamp}
                                              decodeFunc={timestampToTime}
-                                             key="started_before_filter" />,
+                                             key="started_before_filter"
+                                             width={200} />,
     closed_after: <StringConnectionsFilter filterName="closed_after"
                                            defaultFilterValue="00:00:00"
                                            validateFunc={validate24HourTime}
                                            encodeFunc={timeToTimestamp}
                                            decodeFunc={timestampToTime}
-                                           key="closed_after_filter" />,
+                                           key="closed_after_filter"
+                                           width={200} />,
     closed_before: <StringConnectionsFilter filterName="closed_before"
                                             defaultFilterValue="00:00:00"
                                             validateFunc={validate24HourTime}
                                             encodeFunc={timeToTimestamp}
                                             decodeFunc={timestampToTime}
-                                            key="closed_before_filter" />,
+                                            key="closed_before_filter"
+                                            width={200} />,
     marked: <BooleanConnectionsFilter filterName={"marked"} />,
     hidden: <BooleanConnectionsFilter filterName={"hidden"} />
 };
diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js
index 490a569..0d7f063 100644
--- a/frontend/src/components/filters/StringConnectionsFilter.js
+++ b/frontend/src/components/filters/StringConnectionsFilter.js
@@ -1,9 +1,7 @@
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
 import {Redirect} from "react-router";
-import './StringConnectionsFilter.scss';
-
-const classNames = require('classnames');
+import StringField from "../fields/StringField";
 
 class StringConnectionsFilter extends Component {
 
@@ -62,8 +60,7 @@ class StringConnectionsFilter extends Component {
             (typeof this.props.validateFunc === "function" && this.props.validateFunc(value));
     }
 
-    filterChanged(event) {
-        let fieldValue = event.target.value;
+    filterChanged(fieldValue) {
         if (this.state.timeoutHandle !== null) {
             clearTimeout(this.state.timeoutHandle);
         }
@@ -116,26 +113,10 @@ class StringConnectionsFilter extends Component {
         let active = this.state.filterValue !== null;
 
         return (
-            <div className={classNames("filter", "d-inline-block", {"filter-active" : active},
-                {"filter-invalid": this.state.invalidValue})} style={{"width": "200px"}}>
-                <div className="input-group">
-                    <div className="filter-name-wrapper">
-                        <span className="filter-name" id={`filter-${this.props.filterName}`}>{this.props.filterName}:</span>
-                    </div>
-                    <input placeholder={this.props.defaultFilterValue} aria-label={this.props.filterName}
-                           aria-describedby={`filter-${this.props.filterName}`} className="form-control filter-value"
-                           onChange={this.filterChanged} value={this.state.fieldValue} />
-                </div>
-
-                { active &&
-                    <div className="filter-delete">
-                        <span className="filter-delete-icon" onClick={() => {
-                            this.needRedirect = true;
-                            this.setState({fieldValue: "", filterValue: null});
-                        }}>del</span>
-                    </div>
-                }
-
+            <div className="filter" style={{"width": `${this.props.width}px`}}>
+                <StringField active={active} invalid={this.state.invalidValue} name={this.props.filterName}
+                             defaultValue={this.props.defaultFilterValue} onChange={this.filterChanged}
+                             value={this.state.fieldValue} inline={true} small={true} />
                 {redirect}
             </div>
         );
diff --git a/frontend/src/components/filters/StringConnectionsFilter.scss b/frontend/src/components/filters/StringConnectionsFilter.scss
deleted file mode 100644
index 1476616..0000000
--- a/frontend/src/components/filters/StringConnectionsFilter.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@import '../../colors';
-
-.filter {
-  margin: 0 10px;
-  position: relative;
-
-  .filter-name-wrapper {
-    background-color: $color-primary-2;
-    padding: 3px 7px;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-  }
-
-  .filter-name {
-    font-size: 13px;
-  }
-
-  .filter-value {
-    font-size: 13px;
-    padding-left: 0;
-    border-radius: 5px;
-
-    &:focus {
-      background-color: $color-primary-2;
-    }
-  }
-
-  &.filter-active {
-    .filter-name-wrapper {
-      background-color: $color-primary-4;
-      color: $color-primary-3;
-    }
-
-    .filter-value {
-      background-color: $color-primary-4;
-      color: $color-primary-3;
-    }
-  }
-
-  &.filter-invalid {
-    .filter-name-wrapper {
-      background-color: $color-secondary-2;
-      color: $color-primary-4;
-    }
-
-    .filter-value {
-      background-color: $color-secondary-2;
-      color: $color-primary-4;
-    }
-  }
-
-  .filter-delete {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 10;
-    font-size: 11px;
-    letter-spacing: -0.5px;
-    color: $color-primary-2;
-    cursor: pointer;
-
-    .filter-delete-icon {
-      font-weight: 800;
-    }
-  }
-}