General refactor

20 files changed, 340 insertions, 337 deletions

diff --git a/frontend/package.json b/frontend/package.json
index bf995c5..3629e70 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
     "bs-custom-file-input": "^1.3.4",
     "classnames": "^2.2.6",
diff --git a/frontend/src/backend.js b/frontend/src/backend.js
index 35ae6e3..5eb0e40 100644
--- a/frontend/src/backend.js
+++ b/frontend/src/backend.js
@@ -1,11 +1,11 @@
 
-async function request(method, url, data) {
+async function json(method, url, data, headers) {
     const options = {
         method: method,
         mode: "cors",
         cache: "no-cache",
         credentials: "same-origin",
-        headers: {
+        headers: headers || {
             "Content-Type": "application/json"
         },
         redirect: "follow",
@@ -18,19 +18,35 @@ async function request(method, url, data) {
     return result.json();
 }
 
+async function file(url, data, headers) {
+    const options = {
+        method: "POST",
+        mode: "cors",
+        cache: "no-cache",
+        credentials: "same-origin",
+        body: data,
+        redirect: "follow",
+        referrerPolicy: "no-referrer",
+    };
+    return await fetch(url, options);
+}
+
 const backend = {
-    get: (url = "") => {
-        return request("GET", url, null);
+    get: (url = "", headers = null) => {
+        return json("GET", url, null, headers);
     },
-    post: (url = "", data = null) => {
-        return request("POST", url, data);
+    post: (url = "", data = null, headers = null) => {
+        return json("POST", url, data, headers);
     },
-    put: (url = "", data = null) => {
-        return request("PUT", url, data);
+    put: (url = "", data = null, headers = null) => {
+        return json("PUT", url, data, headers);
+    },
+    delete: (url = "", data = null, headers = null) => {
+        return json("DELETE", url, data, headers);
+    },
+    postFile: (url = "", data = null, headers = null) => {
+        return file(url, data, headers);
     },
-    delete: (url = "", data = null) => {
-        return request("DELETE", url, data);
-    }
 };
 
 export default backend;
diff --git a/frontend/src/components/fields/BooleanField.js b/frontend/src/components/fields/CheckField.js
index 06a6da7..5cceac4 100644
--- a/frontend/src/components/fields/BooleanField.js
+++ b/frontend/src/components/fields/CheckField.js
@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
-import './BooleanField.scss';
+import './CheckField.scss';
 import {randomClassName} from "../../utils";
 
 const classNames = require('classnames');
 
-class BooleanField extends Component {
+class CheckField extends Component {
 
     constructor(props) {
         super(props);
@@ -13,7 +13,6 @@ class BooleanField extends Component {
     }
 
     render() {
-
         const checked = this.props.checked || false;
         const small = this.props.small || false;
         const name = this.props.name || null;
@@ -24,7 +23,7 @@ class BooleanField extends Component {
         };
 
         return (
-            <div className={classNames( "boolean-field", {"field-checked" : checked}, {"field-small": small})}>
+            <div className={classNames( "check-field", {"field-checked" : checked}, {"field-small": small})}>
                 <div className="field-input">
                     <input type="checkbox" id={this.id} checked={checked} onChange={handler} />
                     <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + name}</label>
@@ -34,4 +33,4 @@ class BooleanField extends Component {
     }
 }
 
-export default BooleanField;
+export default CheckField;
diff --git a/frontend/src/components/fields/BooleanField.scss b/frontend/src/components/fields/CheckField.scss
index 6ec25f7..7b0ac5f 100644
--- a/frontend/src/components/fields/BooleanField.scss
+++ b/frontend/src/components/fields/CheckField.scss
@@ -1,7 +1,8 @@
 @import '../../colors.scss';
 
-.boolean-field {
+.check-field {
   font-size: 0.9em;
+  margin: 5px 0;
 
   .field-input {
     border-radius: 5px;
diff --git a/frontend/src/components/fields/StringField.js b/frontend/src/components/fields/InputField.js
index 7781b2d..af3b3df 100644
--- a/frontend/src/components/fields/StringField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
-import './StringField.scss';
+import './InputField.scss';
 import {randomClassName} from "../../utils";
 
 const classNames = require('classnames');
 
-class StringField extends Component {
+class InputField extends Component {
 
     constructor(props) {
         super(props);
@@ -13,7 +13,6 @@ class StringField extends Component {
     }
 
     render() {
-
         const active = this.props.active || false;
         const invalid = this.props.invalid || false;
         const small = this.props.small || false;
@@ -22,31 +21,41 @@ class StringField extends Component {
         const value = this.props.value || "";
         const type = this.props.type || "text";
         const error = this.props.error || null;
+        const defaultValue = this.props.defaultValue || null;
         const handler = (e) => {
             if (this.props.onChange) {
-                if (e == null) {
+                if (type === "file") {
+                    let file = e.target.files[0];
+                    this.props.onChange(file);
+                } else if (e == null) {
                     this.props.onChange("");
                 } else {
                     this.props.onChange(e.target.value);
                 }
             }
         };
+        let inputProps = {};
+        if (type !== "file") {
+            inputProps["value"] = value;
+        }
 
         return (
-            <div className={classNames("string-field", {"field-active" : active}, {"field-invalid": invalid},
+            <div className={classNames("input-field", {"field-active" : active}, {"field-invalid": invalid},
                 {"field-small": small}, {"field-inline": inline})}>
                 <div className="field-wrapper">
                     { name &&
                     <div className="field-name">
-                        <label id={this.id}>{name}:</label>
+                        <label>{name}:</label>
                     </div>
                     }
                     <div className="field-input">
                         <div className="field-value">
-                            <input type={type} placeholder={this.props.defaultValue} aria-label={name}
-                                   aria-describedby={this.id} onChange={handler} value={value} />
+                            { type === "file" && <label for={this.id} className={"file-label"}>
+                                {value.name || defaultValue}</label> }
+                            <input type={type} placeholder={defaultValue} id={this.id}
+                                   aria-describedby={this.id} onChange={handler} {...inputProps} />
                         </div>
-                        { value !== "" &&
+                        { type !== "file" && value !== "" &&
                         <div className="field-clear">
                             <span onClick={() => handler(null)}>del</span>
                         </div>
@@ -63,4 +72,4 @@ class StringField extends Component {
     }
 }
 
-export default StringField;
+export default InputField;
diff --git a/frontend/src/components/fields/StringField.scss b/frontend/src/components/fields/InputField.scss
index 2523c8d..cdb8c9f 100644
--- a/frontend/src/components/fields/StringField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -1,7 +1,8 @@
 @import '../../colors.scss';
 
-.string-field {
+.input-field {
   font-size: 0.9em;
+  margin: 5px 0;
 
   .field-name {
     label {
@@ -12,31 +13,52 @@
   .field-input {
     position: relative;
 
-    .field-value input {
-      background-color: $color-primary-2;
-      width: 100%;
-      border: none;
-      color: $color-primary-4;
-      border-radius: 5px;
-      padding: 7px 10px;
-
-      &:focus {
-        background-color: $color-primary-1;
-        color: $color-primary-4;
-        box-shadow: none;
-        outline: none;
-      }
-
-      &[readonly] {
+    .field-value {
+      input, .file-label {
         background-color: $color-primary-2;
+        width: 100%;
         border: none;
         color: $color-primary-4;
+        border-radius: 5px;
+        padding: 7px 10px;
+
+        &:focus {
+          background-color: $color-primary-1;
+          color: $color-primary-4;
+          box-shadow: none;
+          outline: none;
+        }
+
+        &[readonly] {
+          background-color: $color-primary-2;
+          border: none;
+          color: $color-primary-4;
+        }
+
+        &[readonly]:focus {
+          background-color: $color-primary-1;
+          color: $color-primary-4;
+          box-shadow: none;
+        }
+      }
+
+      input[type="file"] {
+        display: none;
+      }
+
+      .file-label {
+        margin: 0;
       }
 
-      &[readonly]:focus {
+      .file-label:after {
+        content: "Browse";
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 7px 10px 7px 12px;
         background-color: $color-primary-1;
-        color: $color-primary-4;
-        box-shadow: none;
+        border-bottom-right-radius: 5px;
+        border-top-right-radius: 5px;
       }
     }
   }
@@ -47,10 +69,14 @@
       color: $color-primary-3 !important;
     }
 
-    .field-value input {
+    .field-value input, .field-value .file-label {
       background-color: $color-primary-4 !important;
       color: $color-primary-3 !important;
     }
+
+    .file-label:after {
+      background-color: $color-secondary-4 !important;
+    }
   }
 
   &.field-invalid {
@@ -59,10 +85,14 @@
       color: $color-primary-4 !important;
     }
 
-    .field-value input {
+    .field-value input, .field-value .file-label {
       background-color: $color-secondary-2 !important;
       color: $color-primary-4 !important;
     }
+
+    .file-label:after {
+      background-color: $color-secondary-1 !important;
+    }
   }
 
   &.field-small {
@@ -82,7 +112,7 @@
     .field-input {
       width: 100%;
 
-      input {
+      input, .file-label {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
         padding-left: 3px;
diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js
new file mode 100644
index 0000000..86b98ed
--- /dev/null
+++ b/frontend/src/components/fields/TextField.js
@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import './TextField.scss';
+import {randomClassName} from "../../utils";
+
+const classNames = require('classnames');
+
+class TextField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+    }
+
+    render() {
+        const name = this.props.name || null;
+        const error = this.props.error || null;
+        const rows = this.props.rows || 3;
+
+        const handler = (e) => {
+            if (this.props.onChange) {
+                if (e == null) {
+                    this.props.onChange("");
+                } else {
+                    this.props.onChange(e.target.value);
+                }
+            }
+        };
+
+        return (
+            <div className={classNames("text-field", {"field-active": this.props.active},
+                {"field-invalid": this.props.invalid}, {"field-small": this.props.small})}>
+                {name && <label htmlFor={this.id}>{name}:</label>}
+                <textarea id={this.id} placeholder={this.props.defaultValue} onChange={handler} rows={rows}
+                          readOnly={this.props.readonly} value={this.props.value} />
+                {error && <div className="field-error">error: {error}</div>}
+            </div>
+        );
+    }
+}
+
+export default TextField;
diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss
new file mode 100644
index 0000000..606f537
--- /dev/null
+++ b/frontend/src/components/fields/TextField.scss
@@ -0,0 +1,79 @@
+@import '../../colors.scss';
+
+.text-field {
+  font-size: 0.9em;
+  margin: 5px 0;
+
+  label {
+    display: block;
+    margin: 0;
+  }
+
+  textarea {
+    background-color: $color-primary-2;
+    width: 100%;
+    border: none;
+    color: $color-primary-4;
+    border-radius: 5px;
+    padding: 7px 10px;
+    resize: none;
+
+    &:focus {
+      background-color: $color-primary-1;
+      color: $color-primary-4;
+      box-shadow: none;
+      outline: none;
+    }
+
+    &[readonly] {
+      background-color: $color-primary-2;
+      border: none;
+      color: $color-primary-4;
+    }
+
+    &[readonly]:focus {
+      background-color: $color-primary-1;
+      color: $color-primary-4;
+      box-shadow: none;
+    }
+  }
+
+  &.field-active {
+    textarea {
+      background-color: $color-primary-4 !important;
+      color: $color-primary-3 !important;
+    }
+  }
+
+  &.field-invalid {
+    textarea {
+      background-color: $color-secondary-2 !important;
+      color: $color-primary-4 !important;
+    }
+  }
+
+  &.field-small {
+    font-size: 0.8em;
+  }
+
+  .field-clear {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    z-index: 10;
+    font-size: 0.9em;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    cursor: pointer;
+  }
+
+  &.field-active .field-clear {
+    color: $color-primary-2;
+  }
+
+  .field-error {
+    padding: 5px 10px;
+    font-size: 0.9em;
+    color: $color-secondary-0;
+  }
+}
diff --git a/frontend/src/components/filters/BooleanConnectionsFilter.js b/frontend/src/components/filters/BooleanConnectionsFilter.js
index 490d185..4c5a78a 100644
--- a/frontend/src/components/filters/BooleanConnectionsFilter.js
+++ b/frontend/src/components/filters/BooleanConnectionsFilter.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
 import {Redirect} from "react-router";
-import BooleanField from "../fields/BooleanField";
+import CheckField from "../fields/CheckField";
 
 class BooleanConnectionsFilter extends Component {
 
@@ -56,8 +56,8 @@ class BooleanConnectionsFilter extends Component {
 
         return (
             <div className="filter" style={{"width": `${this.props.width}px`}}>
-                <BooleanField checked={this.toBoolean(this.state.filterActive)} name={this.props.filterName}
-                             onChange={this.filterChanged} />
+                <CheckField checked={this.toBoolean(this.state.filterActive)} name={this.props.filterName}
+                            onChange={this.filterChanged} />
                 {redirect}
             </div>
         );
diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js
index 0d7f063..a304198 100644
--- a/frontend/src/components/filters/StringConnectionsFilter.js
+++ b/frontend/src/components/filters/StringConnectionsFilter.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {withRouter} from "react-router-dom";
 import {Redirect} from "react-router";
-import StringField from "../fields/StringField";
+import InputField from "../fields/InputField";
 
 class StringConnectionsFilter extends Component {
 
@@ -114,9 +114,9 @@ class StringConnectionsFilter extends Component {
 
         return (
             <div className="filter" style={{"width": `${this.props.width}px`}}>
-                <StringField active={active} invalid={this.state.invalidValue} name={this.props.filterName}
-                             defaultValue={this.props.defaultFilterValue} onChange={this.filterChanged}
-                             value={this.state.fieldValue} inline={true} small={true} />
+                <InputField active={active} invalid={this.state.invalidValue} name={this.props.filterName}
+                            defaultValue={this.props.defaultFilterValue} onChange={this.filterChanged}
+                            value={this.state.fieldValue} inline={true} small={true} />
                 {redirect}
             </div>
         );
diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js
index 9f3bc19..701edf2 100644
--- a/frontend/src/components/panels/PcapPane.js
+++ b/frontend/src/components/panels/PcapPane.js
@@ -2,10 +2,11 @@ import React, {Component} from 'react';
 import './PcapPane.scss';
 import Table from "react-bootstrap/Table";
 import backend from "../../backend";
-import {formatSize, timestampToTime2} from "../../utils";
-import {Container, Row, Col, Form} from "react-bootstrap";
-import StringField from "../fields/StringField";
-import BooleanField from "../fields/BooleanField";
+import {createCurlCommand, formatSize, timestampToTime2} from "../../utils";
+import {Button, Col, Container, Form, Row} from "react-bootstrap";
+import InputField from "../fields/InputField";
+import CheckField from "../fields/CheckField";
+import TextField from "../fields/TextField";
 
 class PcapPane extends Component {
 
@@ -14,10 +15,17 @@ class PcapPane extends Component {
 
         this.state = {
             sessions: [],
-            test: false
+            isFileValid: true,
+            isFileFocused: false,
+            selectedFile: null,
+            uploadFlushAll: false,
+            uploadStatusCode: null,
+            uploadOutput: null
         };
 
         this.loadSessions = this.loadSessions.bind(this);
+        this.handleFileChange = this.handleFileChange.bind(this);
+        this.handleUploadPcap = this.handleUploadPcap.bind(this);
     }
 
     componentDidMount() {
@@ -28,6 +36,34 @@ class PcapPane extends Component {
         backend.get("/api/pcap/sessions").then(res => this.setState({sessions: res}));
     }
 
+    handleFileChange(file) {
+        this.setState({
+            isFileValid: file != null && file.type.endsWith("pcap"),
+            isFileFocused: false,
+            selectedFile: file
+        });
+    }
+
+    handleUploadPcap() {
+        if (this.state.selectedFile == null || !this.state.isFileValid) {
+            this.setState({isFileFocused: true});
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append(
+            "file",
+            this.state.selectedFile
+        );
+
+        backend.postFile("/api/pcap/upload", formData).then(response =>
+            response.json().then(result => this.setState({
+                uploadStatusCode: response.status + " " + response.statusText,
+                uploadOutput: JSON.stringify(result)
+            }))
+        );
+    }
+
     render() {
         let sessions = this.state.sessions.map(s =>
             <tr className="table-row">
@@ -38,10 +74,20 @@ class PcapPane extends Component {
                 <td>{s["processed_packets"]}</td>
                 <td>{s["invalid_packets"]}</td>
                 <td>undefined</td>
-                <td className="table-cell-action"><a target="_blank" href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a></td>
+                <td className="table-cell-action"><a target="_blank"
+                                                     href={"/api/pcap/sessions/" + s["id"] + "/download"}>download</a>
+                </td>
             </tr>
         );
 
+        const uploadOutput = this.state.uploadOutput != null ? this.state.uploadOutput :
+            createCurlCommand("pcap/upload", "POST", null, {
+                file: "@" + ((this.state.selectedFile != null && this.state.isFileValid) ? this.state.selectedFile.name :
+                    "invalid.pcap"),
+                flush_all: this.state.uploadFlushAll
+            })
+        ;
+
         return (
             <div className="pane-container">
                 <div className="pane-section">
@@ -77,19 +123,25 @@ class PcapPane extends Component {
                             <Col>
                                 <div className="section-header">
                                     <span className="api-request">POST /api/pcap/upload</span>
-                                    <span className="api-response"></span>
+                                    <span className="api-response">{this.state.uploadStatusCode}</span>
                                 </div>
 
                                 <div className="section-content">
-                                    <Form.File className="custom-file" onChange={this.onFileChange}
-                                        label=".pcap/.pcapng" id="custom-file"
-                                        custom={true}
-                                    />
-
-
-                                    <br/><br/><br/><br/>
-                                    <BooleanField small={true} name={"marked"} checked={this.state.test} onChange={(v) => this.setState({test: v})} />
-
+                                    <InputField type={"file"} name={"file"} invalid={!this.state.isFileValid}
+                                                active={this.state.isFileFocused}
+                                                onChange={this.handleFileChange} value={this.state.selectedFile}
+                                                defaultValue={"No .pcap[ng] selected"}/>
+
+                                    <div className="upload-actions">
+                                        <div className="upload-options">
+                                            <span>options:</span>
+                                            <CheckField name="flush_all" checked={this.state.uploadFlushAll}
+                                                        onChange={v => this.setState({uploadFlushAll: v})}/>
+                                        </div>
+                                        <Button variant="green" onClick={this.handleUploadPcap}>upload</Button>
+                                    </div>
+
+                                    <TextField value={uploadOutput} rows={4} readonly small={true}/>
                                 </div>
                             </Col>
 
@@ -110,8 +162,6 @@ class PcapPane extends Component {
                     </Container>
 
 
-
-
                 </div>
 
             </div>
diff --git a/frontend/src/components/panels/PcapPane.scss b/frontend/src/components/panels/PcapPane.scss
index 3df87f5..ce28227 100644
--- a/frontend/src/components/panels/PcapPane.scss
+++ b/frontend/src/components/panels/PcapPane.scss
@@ -38,8 +38,6 @@
     padding: 10px;
   }
 
-
-
   th {
     background-color: $color-primary-2;
     border-top: 3px solid $color-primary-3;
@@ -50,6 +48,18 @@
     padding: 5px;
   }
 
+  .upload-actions {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 20px;
+  }
+
+  .upload-options {
+    flex: 1;
 
+    span {
+      font-size: 0.9em;
+    }
+  }
 
 }
\ No newline at end of file
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 46667d6..6a5411c 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -1,9 +1,19 @@
 const timeRegex = /^(0[0-9]|1[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
 
-export function createCurlCommand(subCommand, data) {
-    let full = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
-    return `curl --request PUT \\\n  --url ${full}/api${subCommand} \\\n  ` +
-        `--header 'content-type: application/json' \\\n  --data '${JSON.stringify(data)}'`;
+export function createCurlCommand(subCommand, method = null, json = null, data = null) {
+    const full = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+
+    let contentType = null;
+    let content = null;
+    if (json != null) {
+        contentType = '    -H "Content-Type: application/json" \\\n';
+        content = `    -d '${JSON.stringify(json)}'`;
+    } else if (data != null) {
+        contentType = '    -H "Content-Type: multipart/form-data" \\\n';
+        content = "    " + Object.entries(data).map(([key, value]) => `-F "${key}=${value}"`).join(" \\\n    ");
+    }
+
+    return `curl${method != null ? " -X " + method : ""} "${full}/api${subCommand}" \\\n` + contentType + "" + content;
 }
 
 export function validateIpAddress(ipAddress) {
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;
-  }
-}