aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/views/Upload.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/views/Upload.js')
-rw-r--r--frontend/src/views/Upload.js112
1 files changed, 94 insertions, 18 deletions
diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js
index d3f6bf3..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, FormFile, 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] });
@@ -26,14 +49,14 @@ class Upload extends Component {
}
onFileProcess = () => {
- const formData = new FormData();
- formData.append(
- "file",
- this.state.selectedFile.name
- );
+ const data = {
+ "file": this.state.selectedFile,
+ "flush_all": this.state.flushAll,
+ "delete_original_file": this.state.removeOriginal};
+
fetch('/api/pcap/file', {
method: 'POST',
- body: formData
+ body: JSON.stringify(data)
})
.then(response => {
if (response.status === 202 ){
@@ -89,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"
@@ -103,16 +145,52 @@ class Upload extends Component {
id="custom-file"
custom
/>
+ </Col>
</Row>
- <hr/>
+ <br/>
<Row>
- <Form.Control
- type="text"
- id="pcap-upload"
- onChange={this.onLocalFileChange}
- placeholder="local .pcap/.pcapng"
- custom
- />
+ <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>
@@ -130,8 +208,6 @@ class Upload extends Component {
</Modal.Body>
<Modal.Footer className="dialog-footer">
- <Button variant="blue" onClick={this.onFileProcess}>process_local</Button>
- <Button variant="green" onClick={this.onFileUpload}>upload</Button>
<Button variant="red" onClick={this.props.onHide}>close</Button>
</Modal.Footer>
</Modal>