From 9a47e7a2e2100f0bb7ebfab11f7644d32b68241f Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Sun, 13 Sep 2020 00:51:39 +0200
Subject: initial commit

---
 frontend/src/views/Config.js   | 226 +++++++++++++++++++++++++++++++++++++++++
 frontend/src/views/Config.scss |  38 +++++++
 2 files changed, 264 insertions(+)
 create mode 100644 frontend/src/views/Config.js
 create mode 100644 frontend/src/views/Config.scss

(limited to 'frontend/src')

diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js
new file mode 100644
index 0000000..438e2d6
--- /dev/null
+++ b/frontend/src/views/Config.js
@@ -0,0 +1,226 @@
+import {
+    validateIpAddress,
+} from "../utils";
+import React, {Component, useState} from 'react';
+import './Config.scss';
+import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap";
+import axios from 'axios'
+import {createCurlCommand} from '../utils';
+
+class Config extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            server_address: "",
+            flag_regex: "",
+			auth_required: false,
+			accounts: {},
+			showSignup: false,
+			showConfig: true,
+			tmpUser:"",
+			tmpPass:"",
+			tmpConf:""
+        };
+
+        this.serverIpChanged = this.serverIpChanged.bind(this);
+        this.flagRegexChanged = this.flagRegexChanged.bind(this);
+        this.authRequiredChanged = this.authRequiredChanged.bind(this);
+        this.userChanged = this.userChanged.bind(this);
+        this.passwdChanged = this.passwdChanged.bind(this);
+        this.confirmChanged = this.confirmChanged.bind(this);
+    }
+
+    serverIpChanged(event) {
+        this.setState({server_address: event.target.value});
+    }
+
+    flagRegexChanged(event) {
+        this.setState({flag_regex: event.target.value});
+    }
+
+    authRequiredChanged() {
+        this.setState({auth_required: !this.value});
+		this.checked = !this.checked;
+		this.value = !this.value;
+    }
+
+    userChanged(event) {
+        this.setState({tmpUser: event.target.value});
+    }
+
+    passwdChanged(event) {
+        this.setState({tmpPass: event.target.value});
+    }
+	
+    confirmChanged(event) {
+        this.setState({tmpConf: event.target.value});
+    }
+
+    setup() {
+		const requestOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+			config: { 
+				server_address:  this.state.server_address,
+				flag_regex: this.state.flag_regex,
+				auth_required: this.state.auth_required,
+				}, 
+				accounts: this.state.accounts  
+			})
+		};
+
+
+		fetch('/setup', requestOptions)
+			.then(function(response){
+				console.log(response.status);
+				console.log(response);
+			}
+		);
+		
+    }
+
+	signup(){
+		if (this.state.tmpPass === this.state.tmpConf){
+			const accounts = {...this.state.accounts};
+			accounts[this.state.tmpUser] = this.state.tmpPass;
+			this.setState({accounts});
+			console.log(this.state);
+			this.setState({showSignup:false,showConfig:true})
+		}
+		this.setState({tmpUser : ""});
+		this.setState({tmpPass : ""});
+		this.setState({tmpConf : ""});
+	}
+
+    render() {
+		let rows = Object.keys(this.state.accounts).map(u =>
+            <tr>
+                <td>{u}</td>
+            </tr>
+        );
+
+
+
+        return (
+			<>
+			<Modal show={this.state.showSignup} size="lg" aria-labelledby="services-dialog" centered >
+                <Modal.Header>
+                    <Modal.Title id="services-dialog">
+                        # passwd
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Container>
+                        <Row>
+                                <Form id="passwd-form">
+                                    <Form.Group controlId="username">
+                                        <Form.Label>username:</Form.Label>
+                                        <Form.Control type="text" onChange={this.userChanged} value={this.state.tmpUser}/>
+                                    </Form.Group>
+
+                                    <Form.Group controlId="password">
+                                        <Form.Label>password:</Form.Label>
+                                        <Form.Control type="password" onChange={this.passwdChanged} value={this.state.tmpPass}/>
+                                    </Form.Group>
+
+                                    <Form.Group controlId="confirmPassword">
+                                        <Form.Label>confirm password:</Form.Label>
+                                        <Form.Control type="password" onChange={this.confirmChanged} value={this.state.tmpConf}/>
+                                    </Form.Group>
+
+
+                                </Form>
+
+                        </Row>
+
+                    </Container>
+                </Modal.Body>
+                <Modal.Footer className="dialog-footer">
+					<Button variant="green" onClick={() => this.signup()}>signup</Button>
+                    <Button variant="red" onClick={() => this.setState({showSignup:false,showConfig:true})}>close</Button>
+                </Modal.Footer>
+
+			</Modal>
+            <Modal
+                {...this.props}
+                show="true"
+                size="lg"
+                aria-labelledby="services-dialog"
+                centered
+            >
+                <Modal.Header>
+                    <Modal.Title id="services-dialog">
+                        ~/.config
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Container>
+                        <Row>
+                            <Col md={5}>
+
+									<ButtonGroup toggle className="mb-2">
+									<ToggleButton
+									  type="checkbox"
+									  variant="secondary"
+									  checked={this.state.auth_required}
+									  value={this.state.auth_required}
+									  onChange={() => this.authRequiredChanged()}
+									>
+									  Authentication
+									</ToggleButton>
+								  </ButtonGroup>
+
+									<Table borderless size="sm" className="users-list">
+
+									<thead>
+									<tr>
+									<th>users</th>
+									</tr>
+									</thead>
+									<tbody>
+									{rows}
+									<tr> <td>
+									<Button size="sm" onClick={() => this.setState({showSignup:true,showConfig:false})}>new</Button>
+									</td> </tr>
+									</tbody>
+									</Table>
+
+
+
+                            </Col>
+
+                            <Col md={7}>
+
+									<Form>
+                                    <Form.Group controlId="server_address">
+                                        <Form.Label>server_address:</Form.Label>
+                                        <Form.Control type="text" onChange={this.serverIpChanged} value={this.state.server_address}/>
+                                    </Form.Group>
+
+                                    <Form.Group controlId="flag_regex">
+                                        <Form.Label>flag_regex:</Form.Label>
+                                        <Form.Control type="text" onChange={this.flagRegexChanged} value={this.state.flag_regex}/>
+                                    </Form.Group>
+
+                                </Form>
+
+                            </Col>
+
+                        </Row>
+
+                    </Container>
+                </Modal.Body>
+                <Modal.Footer className="dialog-footer">
+					<Button variant="green" onClick={() => this.setup()}>set</Button>
+                    <Button variant="red" onClick={this.props.onHide}>close</Button>
+                </Modal.Footer>
+            </Modal>
+			</>
+        );
+    }
+}
+
+export default Config;
diff --git a/frontend/src/views/Config.scss b/frontend/src/views/Config.scss
new file mode 100644
index 0000000..9946ce9
--- /dev/null
+++ b/frontend/src/views/Config.scss
@@ -0,0 +1,38 @@
+@import '../colors.scss';
+
+.curl-output {
+  width: 100%;
+  font-size: 13px;
+}
+
+#passwd-form {
+	margin:auto;
+}
+
+.users-list {
+  .btn {
+    width: 70px;
+  }
+
+  td {
+    background-color: $color-primary-2;
+    border-top: 2px solid $color-primary-0;
+    vertical-align: middle;
+    text-align: center; 
+  }
+
+  th {
+    background-color: $color-primary-1;
+    text-align: center; 
+  }
+}
+
+.btn-color {
+  border: 3px solid #fff;
+}
+
+.dialog-footer {
+  .btn {
+    width: 80px;
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From 042cd78894b7c9ce622715e86cb52e203dbe4b34 Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Sun, 13 Sep 2020 00:51:55 +0200
Subject: added config menu

---
 frontend/public/favicon.ico  | Bin 3150 -> 34239 bytes
 frontend/public/logo192.png  | Bin 5347 -> 34239 bytes
 frontend/public/logo512.png  | Bin 9664 -> 34239 bytes
 frontend/src/views/App.js    |  11 +++++++++--
 frontend/src/views/Header.js |   5 ++---
 5 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
index bcd5dfd..1dc499d 100644
Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png
index fc44b0a..1dc499d 100644
Binary files a/frontend/public/logo192.png and b/frontend/public/logo192.png differ
diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png
index a4e47a6..1dc499d 100644
Binary files a/frontend/public/logo512.png and b/frontend/public/logo512.png differ
diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index 6c101fa..229eaed 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -6,6 +6,7 @@ import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
 import Services from "./Services";
 import Filters from "./Filters";
 import Rules from "./Rules";
+import Config from "./Config";
 
 class App extends Component {
 
@@ -14,7 +15,8 @@ class App extends Component {
         this.state = {
             servicesWindowOpen: false,
             filterWindowOpen: false,
-            rulesWindowOpen: false
+            rulesWindowOpen: false,
+            configWindowOpen: false
         };
     }
 
@@ -29,13 +31,18 @@ class App extends Component {
         if (this.state.rulesWindowOpen) {
             modal = <Rules onHide={() => this.setState({rulesWindowOpen: false})}/>;
         }
+        if (this.state.configWindowOpen) {
+            modal = <Config onHide={() => this.setState({configWindowOpen: false})}/>;
+        }
 
         return (
             <div className="app">
                 <Router>
                     <Header onOpenServices={() => this.setState({servicesWindowOpen: true})}
                             onOpenFilters={() => this.setState({filterWindowOpen: true})}
-                            onOpenRules={() => this.setState({rulesWindowOpen: true})} />
+                            onOpenRules={() => this.setState({rulesWindowOpen: true})} 
+                            onOpenConfig={() => this.setState({configWindowOpen: true})} 
+					/>
                     <Switch>
                         <Route path="/connections/:id" children={<MainPane/>}/>
                         <Route path="/" children={<MainPane/>}/>
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index 5d0f690..03e4e5c 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -72,9 +72,8 @@ class Header extends Component {
                             <Button onClick={this.props.onOpenFilters}>filters</Button>
                             <Button variant="yellow" size="sm">pcaps</Button>
                             <Button variant="blue" onClick={this.props.onOpenRules}>rules</Button>
-                            <Button variant="red" onClick={this.props.onOpenServices}>
-                                services
-                            </Button>
+                            <Button variant="red" onClick={this.props.onOpenServices}>services</Button>
+                            <Button variant="green" onClick={this.props.onOpenConfig}>config</Button>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From fdf53489eced715e1586f582882cb064721a965e Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Sun, 13 Sep 2020 12:07:11 +0200
Subject: service creation/edit fix

---
 frontend/src/views/Services.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

(limited to 'frontend/src')

diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js
index b95b01c..9f0fbd2 100644
--- a/frontend/src/views/Services.js
+++ b/frontend/src/views/Services.js
@@ -64,12 +64,33 @@ 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);
+				}
+			);
+
+			/*
             axios.put("/api/services", {
                 name: this.state.name,
                 port: this.state.port,
                 color: this.state.color,
                 notes: this.state.notes
             });
+			*/
+
 
             this.newService();
             this.loadServices();
-- 
cgit v1.2.3-70-g09d2


From b5f3cd7accf3699fd7ed3053d671a4c254dfeaa3 Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Mon, 14 Sep 2020 09:45:18 +0200
Subject: auto startup configuration

---
 frontend/src/views/App.js      |  9 +++++++++
 frontend/src/views/Config.js   |  9 +++++----
 frontend/src/views/Services.js | 10 ----------
 3 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index 229eaed..5b49045 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -18,6 +18,15 @@ class App extends Component {
             rulesWindowOpen: false,
             configWindowOpen: false
         };
+
+		fetch('/api/services')
+		.then(response => {
+			if( response.status === 503){
+				this.setState({configWindowOpen: true});
+			}
+		});
+
+
     }
 
     render() {
diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js
index 438e2d6..9b220d9 100644
--- a/frontend/src/views/Config.js
+++ b/frontend/src/views/Config.js
@@ -4,7 +4,6 @@ import {
 import React, {Component, useState} from 'react';
 import './Config.scss';
 import {Button, ButtonGroup, ToggleButton, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap";
-import axios from 'axios'
 import {createCurlCommand} from '../utils';
 
 class Config extends Component {
@@ -74,9 +73,11 @@ class Config extends Component {
 
 
 		fetch('/setup', requestOptions)
-			.then(function(response){
-				console.log(response.status);
-				console.log(response);
+			.then(response => {
+				if (response.status === 202 ){
+					//this.setState({showConfig:false});
+					this.props.onHide();
+				}
 			}
 		);
 		
diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js
index 9f0fbd2..0de021f 100644
--- a/frontend/src/views/Services.js
+++ b/frontend/src/views/Services.js
@@ -82,16 +82,6 @@ class Services extends Component {
 				}
 			);
 
-			/*
-            axios.put("/api/services", {
-                name: this.state.name,
-                port: this.state.port,
-                color: this.state.color,
-                notes: this.state.notes
-            });
-			*/
-
-
             this.newService();
             this.loadServices();
         }
-- 
cgit v1.2.3-70-g09d2


From e1ce4fefede7f956e4b7ae9bc602b4f49fbfad69 Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Mon, 14 Sep 2020 11:32:57 +0200
Subject: auto disabling config button

---
 frontend/src/views/App.js      |  9 +++++++--
 frontend/src/views/Config.js   |  4 ++++
 frontend/src/views/Config.scss | 13 +++++++++++++
 frontend/src/views/Header.js   |  3 ++-
 4 files changed, 26 insertions(+), 3 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index 5b49045..5a2d913 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -16,13 +16,16 @@ class App extends Component {
             servicesWindowOpen: false,
             filterWindowOpen: false,
             rulesWindowOpen: false,
-            configWindowOpen: false
+            configWindowOpen: false,
+            configDone: false
         };
 
 		fetch('/api/services')
 		.then(response => {
 			if( response.status === 503){
 				this.setState({configWindowOpen: true});
+			} else if (response.status === 200){
+				this.setState({configDone: true});
 			}
 		});
 
@@ -41,7 +44,8 @@ class App extends Component {
             modal = <Rules onHide={() => this.setState({rulesWindowOpen: false})}/>;
         }
         if (this.state.configWindowOpen) {
-            modal = <Config onHide={() => this.setState({configWindowOpen: false})}/>;
+            modal = <Config onHide={() => this.setState({configWindowOpen: false})}
+						onDone={() => this.setState({configDone: true})}/>;
         }
 
         return (
@@ -51,6 +55,7 @@ class App extends Component {
                             onOpenFilters={() => this.setState({filterWindowOpen: true})}
                             onOpenRules={() => this.setState({rulesWindowOpen: true})} 
                             onOpenConfig={() => this.setState({configWindowOpen: true})} 
+							onConfigDone={this.state.configDone}
 					/>
                     <Switch>
                         <Route path="/connections/:id" children={<MainPane/>}/>
diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js
index 9b220d9..1468b1b 100644
--- a/frontend/src/views/Config.js
+++ b/frontend/src/views/Config.js
@@ -77,6 +77,8 @@ class Config extends Component {
 				if (response.status === 202 ){
 					//this.setState({showConfig:false});
 					this.props.onHide();
+					this.props.onDone();
+					console.log(this.props.disabled);
 				}
 			}
 		);
@@ -158,6 +160,8 @@ class Config extends Component {
                     </Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
+					<div class="blink"><span><b>Warning:</b></span> once the configuration is completed, it cannot be changed unless you reset caronte :(</div> 
+					<hr/>
                     <Container>
                         <Row>
                             <Col md={5}>
diff --git a/frontend/src/views/Config.scss b/frontend/src/views/Config.scss
index 9946ce9..b0b899f 100644
--- a/frontend/src/views/Config.scss
+++ b/frontend/src/views/Config.scss
@@ -36,3 +36,16 @@
     width: 80px;
   }
 }
+
+.blink{
+
+	span{
+		animation: blink 1s linear infinite;
+	}
+	@keyframes blink{
+		0%{opacity: 0;}
+		50%{opacity: .5;}
+		100%{opacity: 1;}
+	}
+
+}
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index 03e4e5c..3f95bcd 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -73,7 +73,8 @@ class Header extends Component {
                             <Button variant="yellow" size="sm">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}>config</Button>
+                            <Button variant="green" onClick={this.props.onOpenConfig} 
+								disabled={this.props.onConfigDone}>config</Button>
                         </div>
                     </div>
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 83a5fedb95ea211f3bd66ab94d87e82ee1cc51e3 Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Mon, 14 Sep 2020 12:11:45 +0200
Subject: added error handling

---
 frontend/src/views/Config.js   | 21 +++++++++++++++++++--
 frontend/src/views/Config.scss |  4 ++++
 2 files changed, 23 insertions(+), 2 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/views/Config.js b/frontend/src/views/Config.js
index 1468b1b..f5766eb 100644
--- a/frontend/src/views/Config.js
+++ b/frontend/src/views/Config.js
@@ -20,7 +20,8 @@ class Config extends Component {
 			showConfig: true,
 			tmpUser:"",
 			tmpPass:"",
-			tmpConf:""
+			tmpConf:"",
+			errors:""
         };
 
         this.serverIpChanged = this.serverIpChanged.bind(this);
@@ -71,6 +72,7 @@ class Config extends Component {
 			})
 		};
 
+		let msg = "";
 
 		fetch('/setup', requestOptions)
 			.then(response => {
@@ -78,7 +80,12 @@ class Config extends Component {
 					//this.setState({showConfig:false});
 					this.props.onHide();
 					this.props.onDone();
-					console.log(this.props.disabled);
+				} else {
+					response.json().then(data => {
+						this.setState(
+							{errors : data.error.toString()}
+						);
+					});
 				}
 			}
 		);
@@ -215,6 +222,16 @@ class Config extends Component {
                             </Col>
 
                         </Row>
+                        <Row>
+							<div class="error">
+							<b>
+								{this.state.errors
+									.split('\n').map((item, key) => {
+									  return <span key={key}>{item}<br/></span>})
+								}
+							</b>
+							</div>
+                        </Row>
 
                     </Container>
                 </Modal.Body>
diff --git a/frontend/src/views/Config.scss b/frontend/src/views/Config.scss
index b0b899f..331d7a7 100644
--- a/frontend/src/views/Config.scss
+++ b/frontend/src/views/Config.scss
@@ -49,3 +49,7 @@
 	}
 
 }
+
+.error{
+	color: red;
+}
-- 
cgit v1.2.3-70-g09d2


From 81e22267dfddca85e9e515ce7683efa9c8541ac8 Mon Sep 17 00:00:00 2001
From: therealbobo
Date: Mon, 14 Sep 2020 18:49:09 +0200
Subject: initial upload support

---
 frontend/src/views/App.js      |   6 +++
 frontend/src/views/Header.js   |   2 +-
 frontend/src/views/Upload.js   | 106 +++++++++++++++++++++++++++++++++++++++++
 frontend/src/views/Upload.scss |  21 ++++++++
 4 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/views/Upload.js
 create mode 100644 frontend/src/views/Upload.scss

(limited to 'frontend/src')

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index 5a2d913..ebead2f 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -7,6 +7,7 @@ import Services from "./Services";
 import Filters from "./Filters";
 import Rules from "./Rules";
 import Config from "./Config";
+import Upload from "./Upload";
 
 class App extends Component {
 
@@ -17,6 +18,7 @@ class App extends Component {
             filterWindowOpen: false,
             rulesWindowOpen: false,
             configWindowOpen: false,
+            uploadWindowOpen: false,
             configDone: false
         };
 
@@ -47,6 +49,9 @@ 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">
@@ -55,6 +60,7 @@ class App extends Component {
                             onOpenFilters={() => this.setState({filterWindowOpen: true})}
                             onOpenRules={() => this.setState({rulesWindowOpen: true})} 
                             onOpenConfig={() => this.setState({configWindowOpen: true})} 
+                            onOpenUpload={() => this.setState({uploadWindowOpen: true})} 
 							onConfigDone={this.state.configDone}
 					/>
                     <Switch>
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index 3f95bcd..0af7abf 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -70,7 +70,7 @@ class Header extends Component {
                     <div className="col">
                         <div className="header-buttons">
                             <Button onClick={this.props.onOpenFilters}>filters</Button>
-                            <Button variant="yellow" size="sm">pcaps</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} 
diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js
new file mode 100644
index 0000000..522afe8
--- /dev/null
+++ b/frontend/src/views/Upload.js
@@ -0,0 +1,106 @@
+import React, {Component} from 'react';
+import './Upload.scss';
+import {Button, ButtonGroup, Col, Container, Form, FormControl, 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,
+			errors: ""
+		};
+
+    }
+
+	onFileChange = event => { 
+      this.setState({ selectedFile: event.target.files[0] }); 
+     
+    }; 
+
+	componentDidMount() {
+		bsCustomFileInput.init()
+	}
+
+    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/upload
+                    </Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <Container>
+                        <Row>
+							<Form.File
+							type="file"
+							className="custom-file"
+							onChange={this.onFileChange}
+							label=".pcap/.pcapng"
+							id="custom-file"
+							custom
+							/>
+                        </Row>
+                        <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="green" onClick={this.onFileUpload}>upload</Button>
+                    <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
new file mode 100644
index 0000000..e327b8c
--- /dev/null
+++ b/frontend/src/views/Upload.scss
@@ -0,0 +1,21 @@
+@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;
+  }
+}
-- 
cgit v1.2.3-70-g09d2