diff options
Diffstat (limited to 'frontend/src/views/Upload.js')
| -rw-r--r-- | frontend/src/views/Upload.js | 118 |
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> |