Frontend refactor: checkpoint

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) {