aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/components/Connection.scss1
-rw-r--r--frontend/src/components/filters/BooleanConnectionsFilter.scss2
-rw-r--r--frontend/src/components/filters/RulesConnectionsFilter.scss28
-rw-r--r--frontend/src/components/filters/StringConnectionsFilter.scss4
-rw-r--r--frontend/src/index.scss8
-rw-r--r--frontend/src/views/App.js11
-rw-r--r--frontend/src/views/App.scss2
-rw-r--r--frontend/src/views/Filters.js7
-rw-r--r--frontend/src/views/Filters.scss0
-rw-r--r--frontend/src/views/Header.js10
-rw-r--r--frontend/src/views/Header.scss3
-rw-r--r--frontend/src/views/Rules.js118
12 files changed, 145 insertions, 49 deletions
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 = <Filters onHide={() => this.setState({filterWindowOpen: false})}/>;
}
+ if (this.state.rulesWindowOpen) {
+ modal = <Rules onHide={() => this.setState({rulesWindowOpen: false})}/>;
+ }
return (
<div className="app">
<Router>
<Header onOpenServices={() => this.setState({servicesWindowOpen: true})}
- onOpenFilters={() => this.setState({filterWindowOpen: true})}/>
+ onOpenFilters={() => this.setState({filterWindowOpen: true})}
+ onOpenRules={() => this.setState({rulesWindowOpen: true})} />
<Switch>
<Route path="/connections/:id" children={<MainPane/>}/>
<Route path="/" children={<MainPane/>}/>
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 =>
- <tr>
+ <tr key={name}>
<td><input type="checkbox"
checked={this.state[`${name}_active`]}
onChange={event => this.checkboxChangesHandler(name, event)} /></td>
diff --git a/frontend/src/views/Filters.scss b/frontend/src/views/Filters.scss
deleted file mode 100644
index e69de29..0000000
--- a/frontend/src/views/Filters.scss
+++ /dev/null
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 {
<div className="header-buttons">
<Button onClick={this.props.onOpenFilters}>filters</Button>
<Button variant="yellow" size="sm">pcaps</Button>
- <Button variant="blue">rules</Button>
+ <Button variant="blue" onClick={this.props.onOpenRules}>rules</Button>
<Button variant="red" onClick={this.props.onOpenServices}>
services
</Button>
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 =>
+ <tr key={rule.id}>
+ <td><Button variant="btn-edit" size="sm"
+ style={{"backgroundColor": rule.color}}>edit</Button></td>
+ <td>{rule.name}</td>
+ </tr>
+ );
+
+
+ return (
+ <Modal
+ {...this.props}
+ show="true"
+ size="lg"
+ aria-labelledby="rules-dialog"
+ centered
+ >
+ <Modal.Header>
+ <Modal.Title id="rules-dialog">
+ ~/rules
+ </Modal.Title>
+ </Modal.Header>
+ <Modal.Body>
+ <Container>
+ <Row>
+ <Col md={7}>
+ <Table borderless size="sm" className="rules-list">
+ <thead>
+ <tr>
+ <th><Button size="sm" >new</Button></th>
+ <th>name</th>
+ </tr>
+ </thead>
+ <tbody>
+ {rulesRows}
+
+ </tbody>
+ </Table>
+ </Col>
+ <Col md={5}>
+ <Form>
+ <Form.Group controlId="servicePort">
+ <Form.Label>port:</Form.Label>
+ <Form.Control type="text" />
+ </Form.Group>
+
+ <Form.Group controlId="serviceName">
+ <Form.Label>name:</Form.Label>
+ <Form.Control type="text" />
+ </Form.Group>
+
+ <Form.Group controlId="serviceColor">
+ <Form.Label>color:</Form.Label>
+ <ButtonGroup aria-label="Basic example">
+
+ </ButtonGroup>
+ <ButtonGroup aria-label="Basic example">
+
+ </ButtonGroup>
+ </Form.Group>
+
+ <Form.Group controlId="serviceNotes">
+ <Form.Label>notes:</Form.Label>
+ <Form.Control as="textarea" rows={3} />
+ </Form.Group>
+ </Form>
+
+
+ </Col>
+
+ </Row>
+
+ <Row>
+ <Col md={12}>
+ <InputGroup>
+ <FormControl as="textarea" rows={4} className="curl-output" readOnly={true}
+ />
+ </InputGroup>
+
+ </Col>
+ </Row>
+
+
+ </Container>
+ </Modal.Body>
+ <Modal.Footer className="dialog-footer">
+ <Button variant="red" onClick={this.props.onHide}>close</Button>
+ </Modal.Footer>
+ </Modal>
+ );
+ }
+}
+
+export default Rules;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-22 14:26:02 +0000