From fe511f33c451a4c1c85950d0619b927747757d4e Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Tue, 11 Aug 2020 10:50:55 +0200 Subject: Fix codacy errors and warnings --- frontend/.eslintrc.js | 2 +- frontend/src/components/Connection.scss | 1 - .../filters/BooleanConnectionsFilter.scss | 2 - .../components/filters/RulesConnectionsFilter.scss | 28 +---- .../filters/StringConnectionsFilter.scss | 4 +- frontend/src/index.scss | 8 +- frontend/src/views/App.js | 11 +- frontend/src/views/App.scss | 2 - frontend/src/views/Filters.js | 7 +- frontend/src/views/Filters.scss | 0 frontend/src/views/Header.js | 10 +- frontend/src/views/Header.scss | 3 - frontend/src/views/Rules.js | 118 +++++++++++++++++++++ 13 files changed, 146 insertions(+), 50 deletions(-) delete mode 100644 frontend/src/views/App.scss delete mode 100644 frontend/src/views/Filters.scss create mode 100644 frontend/src/views/Rules.js (limited to 'frontend') diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js index 97fb33f..16ff228 100644 --- a/frontend/.eslintrc.js +++ b/frontend/.eslintrc.js @@ -1,4 +1,4 @@ -var OFF = 0, WARN = 1, ERROR = 2; +const OFF = 0, WARN = 1, ERROR = 2; module.exports = exports = { "env": { diff --git a/frontend/src/components/Connection.scss b/frontend/src/components/Connection.scss index 7c8e00c..cb9eb5f 100644 --- a/frontend/src/components/Connection.scss +++ b/frontend/src/components/Connection.scss @@ -42,7 +42,6 @@ &.contains-flag { border-right: 3px solid $color-secondary-2; } - } .connection-popover { diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.scss b/frontend/src/components/filters/BooleanConnectionsFilter.scss index f3d8697..941b967 100644 --- a/frontend/src/components/filters/BooleanConnectionsFilter.scss +++ b/frontend/src/components/filters/BooleanConnectionsFilter.scss @@ -1,7 +1,6 @@ @import '../../colors'; .filter { - .filter-boolean { padding: 0 10px; background-color: $color-primary-2; @@ -22,5 +21,4 @@ color: $color-primary-3; } } - } diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss index d75066e..5df0006 100644 --- a/frontend/src/components/filters/RulesConnectionsFilter.scss +++ b/frontend/src/components/filters/RulesConnectionsFilter.scss @@ -2,23 +2,16 @@ .react-tags { position: relative; - padding: 0px 6px; + padding: 0 6px; border-radius: 4px; - background-color: $color-primary-2; - - - /* shared font styles */ font-size: 12px; - - /* clicking anywhere will focus the input */ cursor: text; - z-index: 10; } .react-tags.is-focused { - border-color: #B1B1B1; + border-color: #b1b1b1; } .react-tags__selected { @@ -33,11 +26,10 @@ border-radius: 2px; background: $color-primary-4; color: $color-primary-3; - font-size: 11px; } -.react-tags__selected-tag:after { +.react-tags__selected-tag::after { content: '\2715'; color: $color-primary-3; margin-left: 8px; @@ -45,24 +37,19 @@ .react-tags__selected-tag:hover, .react-tags__selected-tag:focus { - border-color: #B1B1B1; + border-color: #b1b1b1; } .react-tags__search { display: inline-block; padding: 7px 10px; - - /* prevent autoresize overflowing the container */ max-width: 100%; } @media screen and (min-width: 30em) { - .react-tags__search { - /* this will become the offsetParent for suggestions */ position: relative; } - } .react-tags__search-input { @@ -71,11 +58,8 @@ padding: 0; border: 0; outline: none; - background-color: $color-primary-2; color: $color-primary-4; - - /* match the font styles */ font-size: inherit; line-height: inherit; } @@ -92,11 +76,9 @@ } @media screen and (min-width: 30em) { - .react-tags__suggestions { width: 240px; } - } .react-tags__suggestions ul { @@ -133,4 +115,4 @@ .react-tags__suggestions li.is-disabled { opacity: 0.5; cursor: auto; -} \ No newline at end of file +} diff --git a/frontend/src/components/filters/StringConnectionsFilter.scss b/frontend/src/components/filters/StringConnectionsFilter.scss index ecc8d0f..1476616 100644 --- a/frontend/src/components/filters/StringConnectionsFilter.scss +++ b/frontend/src/components/filters/StringConnectionsFilter.scss @@ -53,11 +53,9 @@ position: absolute; right: 10px; top: 10px; - z-index: 10; font-size: 11px; letter-spacing: -0.5px; - color: $color-primary-2; cursor: pointer; @@ -65,4 +63,4 @@ font-weight: 800; } } -} \ No newline at end of file +} diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 7db5cc5..53ce4dd 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -1,6 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); -@import-normalize ; +@import-normalize; @import 'colors.scss'; @@ -53,7 +53,8 @@ pre { background-color: $color-secondary-2; border-bottom: 5px solid $color-secondary-1; - &:hover, &:active { + &:hover, + &:active { color: $color-secondary-4; background-color: $color-secondary-1; } @@ -64,7 +65,8 @@ pre { background-color: $color-blue; border-bottom: 5px solid $color-blue-dark; - &:hover, &:active { + &:hover, + &:active { color: $color-blue-light; background-color: $color-blue-dark; } diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js index 14ff7bf..6c101fa 100644 --- a/frontend/src/views/App.js +++ b/frontend/src/views/App.js @@ -1,11 +1,11 @@ import React, {Component} from 'react'; import Header from "./Header"; -import './App.scss'; import MainPane from "./MainPane"; import Footer from "./Footer"; import {BrowserRouter as Router, Route, Switch} from "react-router-dom"; import Services from "./Services"; import Filters from "./Filters"; +import Rules from "./Rules"; class App extends Component { @@ -13,7 +13,8 @@ class App extends Component { super(props); this.state = { servicesWindowOpen: false, - filterWindowOpen: false + filterWindowOpen: false, + rulesWindowOpen: false }; } @@ -25,12 +26,16 @@ class App extends Component { if (this.state.filterWindowOpen) { modal = this.setState({filterWindowOpen: false})}/>; } + if (this.state.rulesWindowOpen) { + modal = this.setState({rulesWindowOpen: false})}/>; + } return (
this.setState({servicesWindowOpen: true})} - onOpenFilters={() => this.setState({filterWindowOpen: true})}/> + onOpenFilters={() => this.setState({filterWindowOpen: true})} + onOpenRules={() => this.setState({rulesWindowOpen: true})} /> }/> }/> diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss deleted file mode 100644 index d5813f9..0000000 --- a/frontend/src/views/App.scss +++ /dev/null @@ -1,2 +0,0 @@ -.app { -} diff --git a/frontend/src/views/Filters.js b/frontend/src/views/Filters.js index 23d3a00..78f0342 100644 --- a/frontend/src/views/Filters.js +++ b/frontend/src/views/Filters.js @@ -7,8 +7,9 @@ class Filters extends Component { constructor(props) { super(props); - this.state = {}; - filtersNames.forEach(elem => this.state[`${elem}_active`] = false); + let newState = {}; + filtersNames.forEach(elem => newState[`${elem}_active`] = false); + this.state = newState; } componentDidMount() { @@ -27,7 +28,7 @@ class Filters extends Component { generateRows(filtersNames) { return filtersNames.map(name => - + this.checkboxChangesHandler(name, event)} /> diff --git a/frontend/src/views/Filters.scss b/frontend/src/views/Filters.scss deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js index 007be74..5d0f690 100644 --- a/frontend/src/views/Header.js +++ b/frontend/src/views/Header.js @@ -2,17 +2,15 @@ import React, {Component} from 'react'; import Typed from 'typed.js'; import './Header.scss'; import {Button} from "react-bootstrap"; -import StringConnectionsFilter from "../components/filters/StringConnectionsFilter"; -import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../utils"; -import RulesConnectionsFilter from "../components/filters/RulesConnectionsFilter"; import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions"; class Header extends Component { constructor(props) { super(props); - this.state = {}; - filtersNames.forEach(elem => this.state[`${elem}_active`] = false); + let newState = {}; + filtersNames.forEach(elem => newState[`${elem}_active`] = false); + this.state = newState; this.fetchStateFromLocalStorage = this.fetchStateFromLocalStorage.bind(this); } @@ -73,7 +71,7 @@ class Header extends Component {
- + diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss index 806e398..e84e758 100644 --- a/frontend/src/views/Header.scss +++ b/frontend/src/views/Header.scss @@ -21,8 +21,5 @@ .filters-bar-wrapper { height: 50px; padding: 8px 0; - - .filters-bar { - } } } diff --git a/frontend/src/views/Rules.js b/frontend/src/views/Rules.js new file mode 100644 index 0000000..3424410 --- /dev/null +++ b/frontend/src/views/Rules.js @@ -0,0 +1,118 @@ +import React, {Component} from 'react'; +import './Services.scss'; +import {Button, ButtonGroup, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap"; +import axios from "axios"; + +class Rules extends Component { + + constructor(props) { + super(props); + + this.state = { + rules: [] + }; + } + + componentDidMount() { + this.loadRules(); + } + + loadRules() { + axios.get("/api/rules").then(res => this.setState({rules: res.data})); + } + + render() { + let rulesRows = this.state.rules.map(rule => + + + {rule.name} + + ); + + + return ( + + + + ~/rules + + + + + + + + + + + + + + + {rulesRows} + + +
name
+ + +
+ + port: + + + + + name: + + + + + color: + + + + + + + + + + notes: + + +
+ + + + + + + + + + + + + + + + + + + + + + + ); + } +} + +export default Rules; -- cgit v1.2.3-70-g09d2