Merge pull request #16 from therealbobo/pcap-upload

Pcap upload

4 files changed, 134 insertions, 1 deletions

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;
+  }
+}