From 97b0ee38fcf1e78e66dfe2a2816c95c3c3b10705 Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Thu, 15 Oct 2020 09:54:25 +0200 Subject: Update filters --- frontend/.eslintrc.js | 216 --------------------- frontend/src/components/Header.js | 47 ++--- frontend/src/components/Header.scss | 9 +- frontend/src/components/dialogs/Filters.js | 108 ++++------- frontend/src/components/dialogs/Filters.scss | 5 + frontend/src/components/fields/ButtonField.js | 3 +- frontend/src/components/fields/ButtonField.scss | 7 + frontend/src/components/filters/AdvancedFilters.js | 54 ++++++ .../components/filters/BooleanConnectionsFilter.js | 2 +- .../src/components/filters/FiltersDefinitions.js | 73 ------- .../components/filters/StringConnectionsFilter.js | 2 +- frontend/src/components/panels/ConnectionsPane.js | 22 +-- frontend/src/dispatcher.js | 2 +- frontend/src/index.js | 6 +- frontend/src/utils.js | 16 ++ 15 files changed, 158 insertions(+), 414 deletions(-) delete mode 100644 frontend/.eslintrc.js create mode 100644 frontend/src/components/dialogs/Filters.scss create mode 100644 frontend/src/components/filters/AdvancedFilters.js delete mode 100644 frontend/src/components/filters/FiltersDefinitions.js diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index 16ff228..0000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,216 +0,0 @@ -const OFF = 0, WARN = 1, ERROR = 2; - -module.exports = exports = { - "env": { - "es6": true - }, - - "ecmaFeatures": { - // env=es6 doesn't include modules, which we are using - "modules": true - }, - - "extends": "eslint:recommended", - - "rules": { - // Possible Errors (overrides from recommended set) - "no-extra-parens": ERROR, - "no-unexpected-multiline": ERROR, - // All JSDoc comments must be valid - "valid-jsdoc": [ ERROR, { - "requireReturn": false, - "requireReturnDescription": false, - "requireParamDescription": true, - "prefer": { - "return": "returns" - } - }], - - // Best Practices - - // Allowed a getter without setter, but all setters require getters - "accessor-pairs": [ ERROR, { - "getWithoutSet": false, - "setWithoutGet": true - }], - "block-scoped-var": WARN, - "consistent-return": ERROR, - "curly": ERROR, - "default-case": WARN, - // the dot goes with the property when doing multiline - "dot-location": [ WARN, "property" ], - "dot-notation": WARN, - "eqeqeq": [ ERROR, "smart" ], - "guard-for-in": WARN, - "no-alert": ERROR, - "no-caller": ERROR, - "no-case-declarations": WARN, - "no-div-regex": WARN, - "no-else-return": WARN, - "no-empty-label": WARN, - "no-empty-pattern": WARN, - "no-eq-null": WARN, - "no-eval": ERROR, - "no-extend-native": ERROR, - "no-extra-bind": WARN, - "no-floating-decimal": WARN, - "no-implicit-coercion": [ WARN, { - "boolean": true, - "number": true, - "string": true - }], - "no-implied-eval": ERROR, - "no-invalid-this": ERROR, - "no-iterator": ERROR, - "no-labels": WARN, - "no-lone-blocks": WARN, - "no-loop-func": ERROR, - "no-magic-numbers": WARN, - "no-multi-spaces": ERROR, - "no-multi-str": WARN, - "no-native-reassign": ERROR, - "no-new-func": ERROR, - "no-new-wrappers": ERROR, - "no-new": ERROR, - "no-octal-escape": ERROR, - "no-param-reassign": ERROR, - "no-process-env": WARN, - "no-proto": ERROR, - "no-redeclare": ERROR, - "no-return-assign": ERROR, - "no-script-url": ERROR, - "no-self-compare": ERROR, - "no-throw-literal": ERROR, - "no-unused-expressions": ERROR, - "no-useless-call": ERROR, - "no-useless-concat": ERROR, - "no-void": WARN, - // Produce warnings when something is commented as TODO or FIXME - "no-warning-comments": [ WARN, { - "terms": [ "TODO", "FIXME" ], - "location": "start" - }], - "no-with": WARN, - "radix": WARN, - "vars-on-top": ERROR, - // Enforces the style of wrapped functions - "wrap-iife": [ ERROR, "outside" ], - "yoda": ERROR, - - // Strict Mode - for ES6, never use strict. - "strict": [ ERROR, "never" ], - - // Variables - "init-declarations": [ ERROR, "always" ], - "no-catch-shadow": WARN, - "no-delete-var": ERROR, - "no-label-var": ERROR, - "no-shadow-restricted-names": ERROR, - "no-shadow": WARN, - // We require all vars to be initialized (see init-declarations) - // If we NEED a var to be initialized to undefined, it needs to be explicit - "no-undef-init": OFF, - "no-undef": ERROR, - "no-undefined": OFF, - "no-unused-vars": WARN, - // Disallow hoisting - let & const don't allow hoisting anyhow - "no-use-before-define": ERROR, - - // Node.js and CommonJS - "callback-return": [ WARN, [ "callback", "next" ]], - "global-require": ERROR, - "handle-callback-err": WARN, - "no-mixed-requires": WARN, - "no-new-require": ERROR, - // Use path.concat instead - "no-path-concat": ERROR, - "no-process-exit": ERROR, - "no-restricted-modules": OFF, - "no-sync": WARN, - - // ECMAScript 6 support - "arrow-body-style": [ ERROR, "always" ], - "arrow-parens": [ ERROR, "always" ], - "arrow-spacing": [ ERROR, { "before": true, "after": true }], - "constructor-super": ERROR, - "generator-star-spacing": [ ERROR, "before" ], - "no-arrow-condition": ERROR, - "no-class-assign": ERROR, - "no-const-assign": ERROR, - "no-dupe-class-members": ERROR, - "no-this-before-super": ERROR, - "no-var": WARN, - "object-shorthand": [ WARN, "never" ], - "prefer-arrow-callback": WARN, - "prefer-spread": WARN, - "prefer-template": WARN, - "require-yield": ERROR, - - // Stylistic - everything here is a warning because of style. - "array-bracket-spacing": [ WARN, "always" ], - "block-spacing": [ WARN, "always" ], - "brace-style": [ WARN, "1tbs", { "allowSingleLine": false } ], - "camelcase": WARN, - "comma-spacing": [ WARN, { "before": false, "after": true } ], - "comma-style": [ WARN, "last" ], - "computed-property-spacing": [ WARN, "never" ], - "consistent-this": [ WARN, "self" ], - "eol-last": WARN, - "func-names": WARN, - "func-style": [ WARN, "declaration" ], - "id-length": [ WARN, { "min": 2, "max": 32 } ], - "indent": [ WARN, 4 ], - "jsx-quotes": [ WARN, "prefer-double" ], - "linebreak-style": [ WARN, "unix" ], - "lines-around-comment": [ WARN, { "beforeBlockComment": true } ], - "max-depth": [ WARN, 8 ], - "max-len": [ WARN, 132 ], - "max-nested-callbacks": [ WARN, 8 ], - "max-params": [ WARN, 8 ], - "new-cap": WARN, - "new-parens": WARN, - "no-array-constructor": WARN, - "no-bitwise": OFF, - "no-continue": OFF, - "no-inline-comments": OFF, - "no-lonely-if": WARN, - "no-mixed-spaces-and-tabs": WARN, - "no-multiple-empty-lines": WARN, - "no-negated-condition": OFF, - "no-nested-ternary": WARN, - "no-new-object": WARN, - "no-plusplus": OFF, - "no-spaced-func": WARN, - "no-ternary": OFF, - "no-trailing-spaces": WARN, - "no-underscore-dangle": WARN, - "no-unneeded-ternary": WARN, - "object-curly-spacing": [ WARN, "always" ], - "one-var": OFF, - "operator-assignment": [ WARN, "never" ], - "operator-linebreak": [ WARN, "after" ], - "padded-blocks": [ WARN, "never" ], - "quote-props": [ WARN, "consistent-as-needed" ], - "quotes": [ WARN, "single" ], - "require-jsdoc": [ WARN, { - "require": { - "FunctionDeclaration": true, - "MethodDefinition": true, - "ClassDeclaration": false - } - }], - "semi-spacing": [ WARN, { "before": false, "after": true }], - "semi": [ ERROR, "always" ], - "sort-vars": OFF, - "space-after-keywords": [ WARN, "always" ], - "space-before-blocks": [ WARN, "always" ], - "space-before-function-paren": [ WARN, "never" ], - "space-before-keywords": [ WARN, "always" ], - "space-in-parens": [ WARN, "never" ], - "space-infix-ops": [ WARN, { "int32Hint": true } ], - "space-return-throw-case": ERROR, - "space-unary-ops": ERROR, - "spaced-comment": [ WARN, "always" ], - "wrap-regex": WARN - } -}; diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js index b4a2177..119958b 100644 --- a/frontend/src/components/Header.js +++ b/frontend/src/components/Header.js @@ -18,21 +18,17 @@ import React, {Component} from 'react'; import Typed from 'typed.js'; import './Header.scss'; -import {filtersDefinitions, filtersNames} from "./filters/FiltersDefinitions"; import {Link, withRouter} from "react-router-dom"; import ButtonField from "./fields/ButtonField"; 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"; class Header extends Component { - constructor(props) { - super(props); - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = false); - this.state = newState; - this.fetchStateFromLocalStorage = this.fetchStateFromLocalStorage.bind(this); - } - componentDidMount() { const options = { strings: ["caronte$ "], @@ -40,33 +36,13 @@ class Header extends Component { cursorChar: "❚" }; this.typed = new Typed(this.el, options); - - this.fetchStateFromLocalStorage(); - - if (typeof window !== "undefined") { - window.addEventListener("quick-filters", this.fetchStateFromLocalStorage); - } } componentWillUnmount() { this.typed.destroy(); - - if (typeof window) { - window.removeEventListener("quick-filters", this.fetchStateFromLocalStorage); - } - } - - fetchStateFromLocalStorage() { - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); - this.setState(newState); } render() { - let quickFilters = filtersNames.filter(name => this.state[`${name}_active`]) - .map(name => {filtersDefinitions[name]}) - .slice(0, 5); - return (
@@ -82,14 +58,21 @@ class Header extends Component {
- {quickFilters} - + + + + +
- diff --git a/frontend/src/components/Header.scss b/frontend/src/components/Header.scss index e2e8e1c..fff28e6 100644 --- a/frontend/src/components/Header.scss +++ b/frontend/src/components/Header.scss @@ -26,9 +26,16 @@ .filters-bar { padding: 3px 0; - .filter { + .filter, + .button-field { display: inline-block; margin-right: 10px; } + + .button-field button { + font-weight: 400; + padding: 7px 10px; + border-radius: 5px; + } } } diff --git a/frontend/src/components/dialogs/Filters.js b/frontend/src/components/dialogs/Filters.js index dfd554b..d2cce4f 100644 --- a/frontend/src/components/dialogs/Filters.js +++ b/frontend/src/components/dialogs/Filters.js @@ -16,91 +16,63 @@ */ import React, {Component} from 'react'; -import {Col, Container, Modal, Row, Table} from "react-bootstrap"; -import {filtersDefinitions, filtersNames} from "../filters/FiltersDefinitions"; +import {Col, Container, Modal, Row} from "react-bootstrap"; import ButtonField from "../fields/ButtonField"; +import './Filters.scss'; +import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; +import StringConnectionsFilter from "../filters/StringConnectionsFilter"; class Filters extends Component { - constructor(props) { - super(props); - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = false); - this.state = newState; - } - - componentDidMount() { - let newState = {}; - filtersNames.forEach(elem => newState[`${elem}_active`] = localStorage.getItem(`filters.${elem}`) === "true"); - this.setState(newState); - } - - checkboxChangesHandler(filterName, event) { - this.setState({[`${filterName}_active`]: event.target.checked}); - localStorage.setItem(`filters.${filterName}`, event.target.checked); - if (typeof window !== "undefined") { - window.dispatchEvent(new Event("quick-filters")); - } - } - - generateRows(filtersNames) { - return filtersNames.map(name => - - this.checkboxChangesHandler(name, event)}/> - {filtersDefinitions[name]} - - ); - } - render() { return ( - ~/filters + ~/advanced_filters - - - - - - - - - - - - {this.generateRows(["service_port", "client_address", "min_duration", - "min_bytes"])} - -
showfilter
- - - - - - - - - - - {this.generateRows(["matched_rules", "client_port", "max_duration", - "max_bytes", "marked"])} - -
showfilter
- -
-
+
+
+ + + +
+ +
+ + + +
+
diff --git a/frontend/src/components/dialogs/Filters.scss b/frontend/src/components/dialogs/Filters.scss new file mode 100644 index 0000000..7d09380 --- /dev/null +++ b/frontend/src/components/dialogs/Filters.scss @@ -0,0 +1,5 @@ +.advanced-filters { + .filter { + margin: 10px; + } +} diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index 193339c..850f837 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -55,7 +55,8 @@ class ButtonField extends Component { } return ( -
+
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss index 9e46b9f..99afe08 100644 --- a/frontend/src/components/fields/ButtonField.scss +++ b/frontend/src/components/fields/ButtonField.scss @@ -15,6 +15,13 @@ } } + &.field-active { + button { + color: $color-primary-1; + background-color: $color-primary-4; + } + } + .button-variant-red { color: $color-red-light; background-color: $color-red; diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js new file mode 100644 index 0000000..f5ba825 --- /dev/null +++ b/frontend/src/components/filters/AdvancedFilters.js @@ -0,0 +1,54 @@ +/* + * This file is part of caronte (https://github.com/eciavatta/caronte). + * Copyright (c) 2020 Emiliano Ciavatta. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, version 3. + * + * This program is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import React, {Component} from 'react'; +import {withRouter} from "react-router-dom"; +import dispatcher from "../../dispatcher"; +import ButtonField from "../fields/ButtonField"; +import {updateParams} from "../../utils"; + +class AdvancedFilters extends Component { + + state = {}; + + componentDidMount() { + this.urlParams = new URLSearchParams(this.props.location.search); + + this.connectionsFiltersCallback = payload => { + this.urlParams = updateParams(this.urlParams, payload); + const active = ["client_address", "client_port", "min_duration", "max_duration", "min_bytes", "max_bytes"] + .some(f => this.urlParams.has(f)); + if (this.state.active !== active) { + this.setState({active: active}); + } + }; + dispatcher.register("connections_filters", this.connectionsFiltersCallback); + } + + componentWillUnmount() { + dispatcher.unregister(this.connectionsFiltersCallback); + } + + render() { + return ( + + ); + } + +} + +export default withRouter(AdvancedFilters); diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js index c611a0d..9558323 100644 --- a/frontend/src/components/filters/BooleanConnectionsFilter.js +++ b/frontend/src/components/filters/BooleanConnectionsFilter.js @@ -59,7 +59,7 @@ class BooleanConnectionsFilter extends Component { return (
+ onChange={this.filterChanged} small/>
); } diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js deleted file mode 100644 index 9fb3b18..0000000 --- a/frontend/src/components/filters/FiltersDefinitions.js +++ /dev/null @@ -1,73 +0,0 @@ -/* - * This file is part of caronte (https://github.com/eciavatta/caronte). - * Copyright (c) 2020 Emiliano Ciavatta. - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils"; -import StringConnectionsFilter from "./StringConnectionsFilter"; -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", "marked"]; - -export const filtersDefinitions = { - service_port: , - matched_rules: , - client_address: , - client_port: , - min_duration: , - max_duration: , - min_bytes: , - max_bytes: , - contains_string: , - marked: -}; diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js index c833220..18b3784 100644 --- a/frontend/src/components/filters/StringConnectionsFilter.js +++ b/frontend/src/components/filters/StringConnectionsFilter.js @@ -127,7 +127,7 @@ class StringConnectionsFilter extends Component {
+ value={this.state.fieldValue} inline={this.props.inline} small={this.props.small}/>
); } diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js index 33dd7c1..89859e6 100644 --- a/frontend/src/components/panels/ConnectionsPane.js +++ b/frontend/src/components/panels/ConnectionsPane.js @@ -26,6 +26,7 @@ import log from "../../log"; import ButtonField from "../fields/ButtonField"; import dispatcher from "../../dispatcher"; import {Redirect} from "react-router"; +import {updateParams} from "../../utils"; const classNames = require('classnames'); @@ -67,29 +68,16 @@ class ConnectionsPane extends Component { this.loadConnections(additionalParams, urlParams, true).then(() => log.debug("Connections loaded")); this.connectionsFiltersCallback = payload => { - const params = this.state.urlParams; - const initialParams = params.toString(); - - Object.entries(payload).forEach(([key, value]) => { - if (value == null) { - params.delete(key); - } else if (Array.isArray(value)) { - params.delete(key); - value.forEach(v => params.append(key, v)); - } else { - params.set(key, value); - } - }); - - if (initialParams === params.toString()) { + const newParams = updateParams(this.state.urlParams, payload); + if (this.state.urlParams.toString() === newParams.toString()) { return; } log.debug("Update following url params:", payload); this.queryStringRedirect = true; - this.setState({urlParams}); + this.setState({urlParams: newParams}); - this.loadConnections({limit: this.queryLimit}, urlParams) + this.loadConnections({limit: this.queryLimit}, newParams) .then(() => log.info("ConnectionsPane reloaded after query string update")); }; dispatcher.register("connections_filters", this.connectionsFiltersCallback); diff --git a/frontend/src/dispatcher.js b/frontend/src/dispatcher.js index fa08d48..881970f 100644 --- a/frontend/src/dispatcher.js +++ b/frontend/src/dispatcher.js @@ -47,7 +47,7 @@ class Dispatcher { }; unregister = (callback) => { - this.listeners = _.without(callback); + _.remove(this.listeners, l => l.callback === callback); }; } diff --git a/frontend/src/index.js b/frontend/src/index.js index ca1273a..4bc2730 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -26,9 +26,9 @@ import notifications from "./notifications"; notifications.createWebsocket(); ReactDOM.render( - - - , + // + , + // , document.getElementById('root') ); diff --git a/frontend/src/utils.js b/frontend/src/utils.js index f333f0d..06414ac 100644 --- a/frontend/src/utils.js +++ b/frontend/src/utils.js @@ -146,3 +146,19 @@ export function downloadBlob(blob, fileName) { a.click(); window.URL.revokeObjectURL(url); } + +export function updateParams(urlParams, payload) { + const params = new URLSearchParams(urlParams.toString()); + Object.entries(payload).forEach(([key, value]) => { + if (value == null) { + params.delete(key); + } else if (Array.isArray(value)) { + params.delete(key); + value.forEach(v => params.append(key, v)); + } else { + params.set(key, value); + } + }); + + return params; +} -- cgit v1.2.3-70-g09d2