aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/views')
-rw-r--r--frontend/src/views/Config.js8
-rw-r--r--frontend/src/views/Connections.js23
-rw-r--r--frontend/src/views/Footer.js4
-rw-r--r--frontend/src/views/Header.js12
-rw-r--r--frontend/src/views/Header.scss4
-rw-r--r--frontend/src/views/MainPane.js8
-rw-r--r--frontend/src/views/Rules.js4
-rw-r--r--frontend/src/views/Services.js33
8 files changed, 43 insertions, 53 deletions
diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js
index f5766eb..a770378 100644
--- a/frontend/src/views/Config.js
+++ b/frontend/src/views/Config.js
@@ -1,10 +1,6 @@
-import {
- validateIpAddress,
-} from "../utils";
-import React, {Component, useState} from 'react';
+import React, {Component} from 'react';
import './Config.scss';
-import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap";
-import {createCurlCommand} from '../utils';
+import {Button, ButtonGroup, Col, Container, Form, Modal, Row, Table, ToggleButton} from "react-bootstrap";
class Config extends Component {
diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
index 62733d7..da8958b 100644
--- a/frontend/src/views/Connections.js
+++ b/frontend/src/views/Connections.js
@@ -1,10 +1,10 @@
import React, {Component} from 'react';
import './Connections.scss';
-import axios from 'axios';
import Connection from "../components/Connection";
import Table from 'react-bootstrap/Table';
import {Redirect} from 'react-router';
import {withRouter} from "react-router-dom";
+import backend from "../backend";
class Connections extends Component {
@@ -75,15 +75,15 @@ class Connections extends Component {
}
this.setState({loading: true, prevParams: params});
- let res = await axios.get(`${url}?${urlParams}`);
+ let res = await backend.get(`${url}?${urlParams}`);
let connections = this.state.connections;
let firstConnection = this.state.firstConnection;
let lastConnection = this.state.lastConnection;
if (params !== undefined && params.from !== undefined) {
- if (res.data.length > 0) {
- connections = this.state.connections.concat(res.data);
+ if (res.length > 0) {
+ connections = this.state.connections.concat(res);
lastConnection = connections[connections.length - 1];
if (connections.length > this.maxConnections) {
connections = connections.slice(connections.length - this.maxConnections,
@@ -92,8 +92,8 @@ class Connections extends Component {
}
}
} else if (params !== undefined && params.to !== undefined) {
- if (res.data.length > 0) {
- connections = res.data.concat(this.state.connections);
+ if (res.length > 0) {
+ connections = res.concat(this.state.connections);
firstConnection = connections[0];
if (connections.length > this.maxConnections) {
connections = connections.slice(0, this.maxConnections);
@@ -101,8 +101,8 @@ class Connections extends Component {
}
}
} else {
- if (res.data.length > 0) {
- connections = res.data;
+ if (res.length > 0) {
+ connections = res;
firstConnection = connections[0];
lastConnection = connections[connections.length - 1];
} else {
@@ -115,8 +115,7 @@ class Connections extends Component {
let flagRule = this.state.flagRule;
let rules = this.state.rules;
if (flagRule === null) {
- let res = await axios.get("/api/rules");
- rules = res.data;
+ rules = await backend.get("/api/rules");
flagRule = rules.filter(rule => {
return rule.name === "flag";
})[0];
@@ -125,7 +124,7 @@ class Connections extends Component {
this.setState({
loading: false,
connections: connections,
- rules: res.data,
+ rules: res,
flagRule: flagRule,
firstConnection: firstConnection,
lastConnection: lastConnection
@@ -134,7 +133,7 @@ class Connections extends Component {
render() {
let redirect;
- let queryString = this.state.queryString !== null ? this.state.queryString : ""
+ let queryString = this.state.queryString !== null ? this.state.queryString : "";
if (this.state.selected) {
let format = this.props.match.params.format;
format = format !== undefined ? "/" + format : "";
diff --git a/frontend/src/views/Footer.js b/frontend/src/views/Footer.js
index b6ffd9d..0a3c5a3 100644
--- a/frontend/src/views/Footer.js
+++ b/frontend/src/views/Footer.js
@@ -8,11 +8,11 @@ class Footer extends Component {
<footer className="footer container-fluid">
<div className="row">
<div className="col-12">
- <div className="footer-timeline">timeline</div>
+ <div className="footer-timeline">timeline - <a href="https://github.com/eciavatta/caronte/issues/12">to be implemented</a></div>
</div>
</div>
</footer>
- )
+ );
}
}
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index 0af7abf..5860d80 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -69,12 +69,12 @@ class Header extends Component {
<div className="col">
<div className="header-buttons">
- <Button onClick={this.props.onOpenFilters}>filters</Button>
- <Button variant="warning" onClick={this.props.onOpenUpload}>pcaps</Button>
- <Button variant="blue" onClick={this.props.onOpenRules}>rules</Button>
- <Button variant="red" onClick={this.props.onOpenServices}>services</Button>
- <Button variant="green" onClick={this.props.onOpenConfig}
- disabled={this.props.onConfigDone}>config</Button>
+ <Button variant="pink" onClick={this.props.onOpenFilters}>filters</Button>
+ <Button variant="purple" onClick={this.props.onOpenUpload}>pcaps</Button>
+ <Button variant="deep-purple" onClick={this.props.onOpenRules}>rules</Button>
+ <Button variant="indigo" onClick={this.props.onOpenServices}>services</Button>
+ <Button variant="blue" onClick={this.props.onOpenConfig}
+ disabled={false}>config</Button>
</div>
</div>
</div>
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
index e84e758..e36b2d6 100644
--- a/frontend/src/views/Header.scss
+++ b/frontend/src/views/Header.scss
@@ -16,6 +16,10 @@
.header-buttons {
margin: 5px 0;
text-align: right;
+
+ button {
+ margin-left: 10px;
+ }
}
.filters-bar-wrapper {
diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js
index 69de725..3c0d795 100644
--- a/frontend/src/views/MainPane.js
+++ b/frontend/src/views/MainPane.js
@@ -3,7 +3,8 @@ import './MainPane.scss';
import Connections from "./Connections";
import ConnectionContent from "../components/ConnectionContent";
import {withRouter} from "react-router-dom";
-import axios from 'axios';
+import PcapPane from "../components/panels/PcapPane";
+import backend from "../backend";
class MainPane extends Component {
@@ -17,9 +18,9 @@ class MainPane extends Component {
componentDidMount() {
if ('id' in this.props.match.params) {
const id = this.props.match.params.id;
- axios.get(`/api/connections/${id}`).then(res => {
+ backend.get(`/api/connections/${id}`).then(res => {
if (res.status === 200) {
- this.setState({selectedConnection: res.data});
+ this.setState({selectedConnection: res});
}
});
}
@@ -34,6 +35,7 @@ class MainPane extends Component {
<Connections onSelected={(c) => this.setState({selectedConnection: c})} />
</div>
<div className="col-md-6 pl-0 pane">
+ {/*<PcapPane />*/}
<ConnectionContent connection={this.state.selectedConnection}/>
</div>
</div>
diff --git a/frontend/src/views/Rules.js b/frontend/src/views/Rules.js
index 3424410..bbc3bb6 100644
--- a/frontend/src/views/Rules.js
+++ b/frontend/src/views/Rules.js
@@ -1,7 +1,7 @@
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";
+import backend from "../backend";
class Rules extends Component {
@@ -18,7 +18,7 @@ class Rules extends Component {
}
loadRules() {
- axios.get("/api/rules").then(res => this.setState({rules: res.data}));
+ backend.get("/api/rules").then(res => this.setState({rules: res.data}));
}
render() {
diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js
index 0de021f..22d61b3 100644
--- a/frontend/src/views/Services.js
+++ b/frontend/src/views/Services.js
@@ -1,8 +1,8 @@
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'
import {createCurlCommand} from '../utils';
+import backend from "../backend";
class Services extends Component {
@@ -64,31 +64,20 @@ class Services extends Component {
saveService() {
if (this.state.portValid && this.state.nameValid) {
- const requestOptions = {
- method: 'PUT',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- color: this.state.color,
- name: this.state.name,
- notes: this.state.notes,
- port: this.state.port,
- })
- };
-
-
- fetch('/api/services', requestOptions)
- .then(function(response){
- console.log(response);
- }
- );
-
- this.newService();
- this.loadServices();
+ backend.put("/api/services", {
+ color: this.state.color,
+ name: this.state.name,
+ notes: this.state.notes,
+ port: this.state.port,
+ }).then(_ => {
+ this.newService();
+ this.loadServices();
+ });
}
}
loadServices() {
- axios.get("/api/services").then(res => this.setState({services: res.data}));
+ backend.get("/api/services").then(res => this.setState({services: res}));
}
componentDidUpdate(prevProps, prevState, snapshot) {