Merge pull request #17 from therealbobo/file-load

File load

1 files changed, 115 insertions, 3 deletions

diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js
index 522afe8..29d514d 100644
--- a/frontend/src/views/Upload.js
+++ b/frontend/src/views/Upload.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import './Upload.scss';
-import {Button, ButtonGroup, Col, Container, Form, FormControl, InputGroup, Modal, Row, Table} from "react-bootstrap";
+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';
 
@@ -11,11 +11,34 @@ class Upload extends Component {
 
 		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] }); 
      
@@ -25,6 +48,30 @@ class Upload extends Component {
 		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( 
@@ -65,12 +112,31 @@ class Upload extends Component {
             >
                 <Modal.Header>
                     <Modal.Title id="services-dialog">
-                        /usr/bin/upload
+                        /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"
@@ -79,7 +145,54 @@ class Upload extends Component {
 							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>
@@ -95,7 +208,6 @@ class Upload extends Component {
                 </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>