aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/views')
-rw-r--r--frontend/src/views/App.js12
-rw-r--r--frontend/src/views/Header.js5
-rw-r--r--frontend/src/views/Header.scss2
-rw-r--r--frontend/src/views/MainPane.js8
-rw-r--r--frontend/src/views/Services.js2
-rw-r--r--frontend/src/views/Upload.js218
-rw-r--r--frontend/src/views/Upload.scss21
7 files changed, 13 insertions, 255 deletions
diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index ebead2f..ccfdb3a 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -2,12 +2,11 @@ import React, {Component} from 'react';
import Header from "./Header";
import MainPane from "./MainPane";
import Footer from "./Footer";
-import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
+import {BrowserRouter as Router} from "react-router-dom";
import Services from "./Services";
import Filters from "./Filters";
import Rules from "./Rules";
import Config from "./Config";
-import Upload from "./Upload";
class App extends Component {
@@ -18,7 +17,6 @@ class App extends Component {
filterWindowOpen: false,
rulesWindowOpen: false,
configWindowOpen: false,
- uploadWindowOpen: false,
configDone: false
};
@@ -49,9 +47,6 @@ 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">
@@ -63,10 +58,7 @@ class App extends Component {
onOpenUpload={() => this.setState({uploadWindowOpen: true})}
onConfigDone={this.state.configDone}
/>
- <Switch>
- <Route path="/connections/:id" children={<MainPane/>}/>
- <Route path="/" children={<MainPane/>}/>
- </Switch>
+ <MainPane />
{modal}
<Footer/>
</Router>
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index deb3ab7..e2d0e6a 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -3,6 +3,7 @@ import Typed from 'typed.js';
import './Header.scss';
import {Button} from "react-bootstrap";
import {filtersDefinitions, filtersNames} from "../components/filters/FiltersDefinitions";
+import {Link} from "react-router-dom";
class Header extends Component {
@@ -68,7 +69,9 @@ class Header extends Component {
<div className="col">
<div className="header-buttons">
<Button variant="pink" onClick={this.props.onOpenFilters}>filters</Button>
- <Button variant="purple" onClick={this.props.onOpenUpload}>pcaps</Button>
+ <Link to="/pcaps">
+ <Button variant="purple">pcaps</Button>
+ </Link>
<Button variant="deep-purple" onClick={this.props.onOpenRules}>rules</Button>
<Button variant="indigo" onClick={this.props.onOpenServices}>services</Button>
<Button variant="blue" onClick={this.props.onOpenConfig}
diff --git a/frontend/src/views/Header.scss b/frontend/src/views/Header.scss
index f3bfec1..71d49e3 100644
--- a/frontend/src/views/Header.scss
+++ b/frontend/src/views/Header.scss
@@ -23,7 +23,7 @@
}
.filters-bar {
- padding: 8px 0;
+ padding: 3px 0;
.filter {
display: inline-block;
diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js
index 88af4a7..ce755d1 100644
--- a/frontend/src/views/MainPane.js
+++ b/frontend/src/views/MainPane.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
import './MainPane.scss';
import Connections from "./Connections";
import ConnectionContent from "../components/ConnectionContent";
-import {withRouter} from "react-router-dom";
+import {Route, Switch, withRouter} from "react-router-dom";
import PcapPane from "../components/panels/PcapPane";
import backend from "../backend";
@@ -35,8 +35,10 @@ class MainPane extends Component {
<Connections onSelected={(c) => this.setState({selectedConnection: c})} />
</div>
<div className="col-md-6 pl-0 pane">
- <PcapPane />
- {/*<ConnectionContent connection={this.state.selectedConnection}/>*/}
+ <Switch>
+ <Route path="/pcaps" children={<PcapPane />} />
+ <Route children={<ConnectionContent connection={this.state.selectedConnection} />} />
+ </Switch>
</div>
</div>
</div>
diff --git a/frontend/src/views/Services.js b/frontend/src/views/Services.js
index 22d61b3..97368dc 100644
--- a/frontend/src/views/Services.js
+++ b/frontend/src/views/Services.js
@@ -102,7 +102,7 @@ class Services extends Component {
output += "assert(len(name) >= 3)\n";
}
if (output === "") {
- output = createCurlCommand("/services", {
+ output = createCurlCommand("/services", "PUT", {
"port": this.state.port,
"name": this.state.name,
"color": this.state.color,
diff --git a/frontend/src/views/Upload.js b/frontend/src/views/Upload.js
deleted file mode 100644
index 29d514d..0000000
--- a/frontend/src/views/Upload.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import React, {Component} from 'react';
-import './Upload.scss';
-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';
-
-class Upload extends Component {
-
- constructor(props) {
- super(props);
-
- 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] });
-
- };
-
- componentDidMount() {
- 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(
- "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/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"
- onChange={this.onFileChange}
- label=".pcap/.pcapng"
- 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>
- <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="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
deleted file mode 100644
index e327b8c..0000000
--- a/frontend/src/views/Upload.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@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;
- }
-}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-11-22 11:24:23 +0000