General refactor

7 files changed, 13 insertions, 255 deletions

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index ebead2f..ccfdb3a 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -2,12 +2,11 @@ import React, {Component} from 'react';
 import Header from "./Header";
 import MainPane from "./MainPane";
 import Footer from "./Footer";
-import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
+import {BrowserRouter as Router} from "react-router-dom";
 import Services from "./Services";
 import Filters from "./Filters";
 import Rules from "./Rules";
 import Config from "./Config";
-import Upload from "./Upload";
 
 class App extends Component {
 
@@ -18,7 +17,6 @@ class App extends Component {
             filterWindowOpen: false,
             rulesWindowOpen: false,
             configWindowOpen: false,
-            uploadWindowOpen: false,
             configDone: false
         };
 
@@ -49,9 +47,6 @@ class App extends Component {
             modal = <Config onHide={() => this.setState({configWindowOpen: false})}
 						onDone={() => this.setState({configDone: true})}/>;
         }
-        if (this.state.uploadWindowOpen) {
-            modal = <Upload onHide={() => this.setState({uploadWindowOpen: false}) }/>;
-        }
 
         return (
             <div className="app">
@@ -63,10 +58,7 @@ class App extends Component {
                             onOpenUpload={() => this.setState({uploadWindowOpen: true})} 
 							onConfigDone={this.state.configDone}
 					/>
-                    <Switch>
-                        <Route path="/connections/:id" children={<MainPane/>}/>
-                        <Route path="/" children={<MainPane/>}/>
-                    </Switch>
+                    <MainPane />
                     {modal}
                     <Footer/>
                 </Router>
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index deb3ab7..e2d0e6a 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -3,6 +3,7 @@ import Typed from 'typed.js';
 import './Header.scss';
 import {Button} from "react-bootstrap";
 import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions";
+import {Link} from "react-router-dom";
 
 class Header extends Component {
 
@@ -68,7 +69,9 @@ class Header extends Component {
                     <div className="col">
                         <div className="header-buttons">
                             <Button variant="pink" onClick={this.props.onOpenFilters}>filters</Button>
-                            <Button variant="purple" onClick={this.props.onOpenUpload}>pcaps</Button>
+                            <Link to="/pcaps">
+                                <Button variant="purple">pcaps</Button>
+                            </Link>
                             <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}
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
index f3bfec1..71d49e3 100644
--- a/frontend/src/views/Header.scss
+++ b/frontend/src/views/Header.scss
@@ -23,7 +23,7 @@
   }
 
   .filters-bar {
-    padding: 8px 0;
+    padding: 3px 0;
 
     .filter {
       display: inline-block;
diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js
index 88af4a7..ce755d1 100644
--- a/frontend/src/views/MainPane.js
+++ b/frontend/src/views/MainPane.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import './MainPane.scss';
 import Connections from "./Connections";
 import ConnectionContent from "../components/ConnectionContent";
-import {withRouter} from "react-router-dom";
+import {Route, Switch, withRouter} from "react-router-dom";
 import PcapPane from "../components/panels/PcapPane";
 import backend from "../backend";
 
@@ -35,8 +35,10 @@ 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}/>*/}
+                            <Switch>
+                                <Route path="/pcaps" children={<PcapPane />} />
+                                <Route children={<ConnectionContent connection={this.state.selectedConnection} />} />
+                            </Switch>
                         </div>
                     </div>
                 </div>
diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js
index 22d61b3..97368dc 100644
--- a/frontend/src/views/Services.js
+++ b/frontend/src/views/Services.js
@@ -102,7 +102,7 @@ class Services extends Component {
             output += "assert(len(name) >= 3)\n";
         }
         if (output === "") {
-            output = createCurlCommand("/services", {
+            output = createCurlCommand("/services", "PUT", {
                 "port": this.state.port,
                 "name": this.state.name,
                 "color": this.state.color,
diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js
deleted file mode 100644
index 29d514d..0000000
--- a/frontend/src/views/Upload.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React, {Component} from 'react';
-import './Upload.scss';
-import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormFile, InputGroup, Modal, Row, Table} from "react-bootstrap";
-import bsCustomFileInput from 'bs-custom-file-input'
-import {createCurlCommand} from '../utils';
-
-class Upload extends Component {
-
-    constructor(props) {
-        super(props);
-
-		this.state = {
-		  selectedFile: null,
-		  removeOriginal: false,
-		  flushAll:       false,
-			errors: ""
-		};
-
-        this.flushAllChanged = this.flushAllChanged.bind(this);
-        this.removeOriginalChanged = this.removeOriginalChanged.bind(this);
-
-
-    }
-
-    flushAllChanged() {
-        this.setState({flushAll: !this.value});
-		this.checked = !this.checked;
-		this.value = !this.value;
-    }
-
-    removeOriginalChanged() {
-        this.setState({removeOriginal: !this.value});
-		this.checked = !this.checked;
-		this.value = !this.value;
-    }
-
-	onLocalFileChange = event => { 
-      this.setState({ selectedFile: event.target.value }); 
-     
-    }; 
-
-	onFileChange = event => { 
-      this.setState({ selectedFile: event.target.files[0] }); 
-     
-    }; 
-
-	componentDidMount() {
-		bsCustomFileInput.init()
-	}
-
-    onFileProcess = () => {
-		const data = {
-		  "file": this.state.selectedFile,
-		  "flush_all": this.state.flushAll,
-		  "delete_original_file": this.state.removeOriginal};
-
-		fetch('/api/pcap/file', {
-			method: 'POST',
-			body: JSON.stringify(data)
-		})
-			.then(response => {
-				if (response.status === 202 ){
-					this.props.onHide();
-				} else {
-					response.json().then(data => {
-						this.setState(
-							{errors : data.error.toString()}
-						);
-					});
-				}
-			}
-		);
-    }
-
-    onFileUpload = () => {
-		const formData = new FormData();
-		formData.append( 
-		  "file", 
-		  this.state.selectedFile, 
-		  this.state.selectedFile.name 
-		); 
-		fetch('/api/pcap/upload', {
-			method: 'POST',
-			body: formData
-		})
-			.then(response => {
-				if (response.status === 202 ){
-					//this.setState({showConfig:false});
-					this.props.onHide();
-					//this.props.onDone();
-				} else {
-					response.json().then(data => {
-						this.setState(
-							{errors : data.error.toString()}
-						);
-					});
-				}
-			}
-		);
-    }
-
-
-    render() {
-
-        return (
-            <Modal
-                {...this.props}
-                show="true"
-                size="lg"
-                aria-labelledby="services-dialog"
-                centered
-            >
-                <Modal.Header>
-                    <Modal.Title id="services-dialog">
-                        /usr/bin/load_pcap
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <Container>
-                        <Row>
-                            <Col>
-							--local
-                            </Col>
-                            <Col>
-							--upload
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col>
-							<Form.Control
-							type="text"
-							id="pcap-upload"
-							className="custom-file"
-							onChange={this.onLocalFileChange}
-							placeholder="local .pcap/.pcapng"
-							custom
-							/>
-                            </Col>
-                            <Col>
-							<Form.File
-							type="file"
-							className="custom-file"
-							onChange={this.onFileChange}
-							label=".pcap/.pcapng"
-							id="custom-file"
-							custom
-							/>
-                            </Col>
-                        </Row>
-						<br/>
-                        <Row>
-                            <Col>
-									<ButtonGroup toggle className="mb-2">
-									<ToggleButton
-									  type="checkbox"
-									  variant="secondary"
-									  checked={this.state.removeOriginal}
-									  value={this.state.removeOriginal}
-									  onChange={() => this.removeOriginalChanged()}
-									>
-									  --remove-original-file
-									</ToggleButton>
-								  </ButtonGroup>
-                            </Col>
-                            <Col>
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col>
-									<ButtonGroup toggle className="mb-2">
-									<ToggleButton
-									  type="checkbox"
-									  variant="secondary"
-									  checked={this.state.flushAll}
-									  value={this.state.flushAll}
-									  onChange={() => this.flushAllChanged()}
-									>
-									  --flush-all
-									</ToggleButton>
-								  </ButtonGroup>
-                            </Col>
-                            <Col>
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col>
-								<br/>
-								<Button variant="blue" onClick={this.onFileProcess}>process_local</Button>
-                            </Col>
-                            <Col>
-								<br/>
-								<Button variant="green" onClick={this.onFileUpload}>upload</Button>
-                            </Col>
-                        </Row>
-						<hr/>
-                        <Row>
-							<div class="error">
-							<b>
-								<br/>
-								{this.state.errors
-									.split('\n').map((item, key) => {
-									  return <span key={key}>{item}<br/></span>})
-								}
-							</b>
-							</div>
-                        </Row>
-                    </Container>
-                </Modal.Body>
-                <Modal.Footer className="dialog-footer">
-
-                    <Button variant="red" onClick={this.props.onHide}>close</Button>
-                </Modal.Footer>
-            </Modal>
-        );
-    }
-}
-
-export default Upload;
diff --git a/frontend/src/views/Upload.scss b/frontend/src/views/Upload.scss
deleted file mode 100644
index e327b8c..0000000
--- a/frontend/src/views/Upload.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import '../colors.scss';
-
-.curl-output {
-  width: 100%;
-  font-size: 13px;
-}
-
-#pcap-upload{
-	align: center;
-	width: 100%;
-}
-
-.btn-color {
-  border: 3px solid #fff;
-}
-
-.dialog-footer {
-  .btn {
-    width: 80px;
-  }
-}