From 1412a34f64e234dbc7d4e6815b841699f4dd104a Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Sun, 27 Sep 2020 17:48:38 +0200 Subject: Add other custom fields --- frontend/src/components/panels/PcapPane.js | 110 ++++++++++++------ frontend/src/components/panels/RulePane.js | 166 +++++++++++++++++++++++++++ frontend/src/components/panels/RulePane.scss | 16 +++ 3 files changed, 255 insertions(+), 37 deletions(-) create mode 100644 frontend/src/components/panels/RulePane.js create mode 100644 frontend/src/components/panels/RulePane.scss (limited to 'frontend/src/components/panels') diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js index 701edf2..7e0fa6c 100644 --- a/frontend/src/components/panels/PcapPane.js +++ b/frontend/src/components/panels/PcapPane.js @@ -3,7 +3,7 @@ import './PcapPane.scss'; import Table from "react-bootstrap/Table"; import backend from "../../backend"; import {createCurlCommand, formatSize, timestampToTime2} from "../../utils"; -import {Button, Col, Container, Form, Row} from "react-bootstrap"; +import {Button, Col, Container, Row} from "react-bootstrap"; import InputField from "../fields/InputField"; import CheckField from "../fields/CheckField"; import TextField from "../fields/TextField"; @@ -15,45 +15,48 @@ class PcapPane extends Component { this.state = { sessions: [], - isFileValid: true, - isFileFocused: false, - selectedFile: null, + isUploadFileValid: true, + isUploadFileFocused: false, + uploadSelectedFile: null, uploadFlushAll: false, uploadStatusCode: null, - uploadOutput: null + uploadOutput: null, + isFileValid: true, + isFileFocused: false, + fileValue: "", + fileFlushAll: false, + fileStatusCode: null, + fileOutput: null, + deleteOriginalFile: false }; - - this.loadSessions = this.loadSessions.bind(this); - this.handleFileChange = this.handleFileChange.bind(this); - this.handleUploadPcap = this.handleUploadPcap.bind(this); } componentDidMount() { this.loadSessions(); } - loadSessions() { - backend.get("/api/pcap/sessions").then(res => this.setState({sessions: res})); - } + loadSessions = () => { + backend.getJson("/api/pcap/sessions").then(res => this.setState({sessions: res})); + }; - handleFileChange(file) { + handleUploadFileChange = (file) => { this.setState({ - isFileValid: file != null && file.type.endsWith("pcap"), - isFileFocused: false, - selectedFile: file + isUploadFileValid: file != null && file.type.endsWith("pcap"), + isUploadFileFocused: false, + uploadSelectedFile: file }); - } + }; - handleUploadPcap() { - if (this.state.selectedFile == null || !this.state.isFileValid) { - this.setState({isFileFocused: true}); + handleUploadPcap = () => { + if (this.state.uploadSelectedFile == null || !this.state.isUploadFileValid) { + this.setState({isUploadFileFocused: true}); return; } const formData = new FormData(); formData.append( "file", - this.state.selectedFile + this.state.uploadSelectedFile ); backend.postFile("/api/pcap/upload", formData).then(response => @@ -62,7 +65,33 @@ class PcapPane extends Component { uploadOutput: JSON.stringify(result) })) ); - } + }; + + handleFileChange = (file) => { + this.setState({ + isFileValid: file !== "" && file.endsWith("pcap"), + isFileFocused: false, + fileValue: file + }); + }; + + handleProcessPcap = () => { + if (this.state.fileValue === "" || !this.state.isFileValid) { + this.setState({isFileFocused: true}); + return; + } + + backend.post("/api/pcap/file", { + file: this.state.fileValue, + flush_all: this.state.fileFlushAll, + delete_original_file: this.state.deleteOriginalFile + }).then(response => + response.json().then(result => this.setState({ + fileStatusCode: response.status + " " + response.statusText, + fileOutput: JSON.stringify(result) + })) + ); + }; render() { let sessions = this.state.sessions.map(s => @@ -82,7 +111,7 @@ class PcapPane extends Component { const uploadOutput = this.state.uploadOutput != null ? this.state.uploadOutput : createCurlCommand("pcap/upload", "POST", null, { - file: "@" + ((this.state.selectedFile != null && this.state.isFileValid) ? this.state.selectedFile.name : + file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ? this.state.uploadSelectedFile.name : "invalid.pcap"), flush_all: this.state.uploadFlushAll }) @@ -120,17 +149,17 @@ class PcapPane extends Component {
- +
POST /api/pcap/upload {this.state.uploadStatusCode}
- +
@@ -148,24 +177,31 @@ class PcapPane extends Component {
POST /api/pcap/file - + {this.state.fileStatusCode}
- + + +
+
+ this.setState({uploadFlushAll: v})}/> + this.setState({uploadFlushAll: v})}/> +
+ +
+ +
- -
-
- ); } } diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js new file mode 100644 index 0000000..fbc8785 --- /dev/null +++ b/frontend/src/components/panels/RulePane.js @@ -0,0 +1,166 @@ +import React, {Component} from 'react'; +import './RulePane.scss'; +import Table from "react-bootstrap/Table"; +import {Button, Col, Container, Row} from "react-bootstrap"; +import InputField from "../fields/InputField"; +import CheckField from "../fields/CheckField"; +import TextField from "../fields/TextField"; +import backend from "../../backend"; +import NumericField from "../fields/extensions/NumericField"; +import ColorField from "../fields/extensions/ColorField"; +import ChoiceField from "../fields/ChoiceField"; +import ButtonField from "../fields/ButtonField"; + +class RulePane extends Component { + + constructor(props) { + super(props); + + this.state = { + rules: [], + }; + } + + componentDidMount() { + this.loadRules(); + } + + loadRules = () => { + backend.getJson("/api/rules").then(res => this.setState({rules: res})); + }; + + + render() { + let rules = this.state.rules.map(r => + + {r["id"].substring(0, 8)} + {r["name"]} + {r["notes"]} + {/*{((new Date(s["completed_at"]) - new Date(s["started_at"])) / 1000).toFixed(3)}s*/} + {/*{formatSize(s["size"])}*/} + {/*{s["processed_packets"]}*/} + {/*{s["invalid_packets"]}*/} + {/*undefined*/} + {/*download*/} + {/**/} + + ); + + return ( +
+
+
+ GET /api/rules + 200 OK +
+ +
+ + + + + + + + + + {rules} + +
idnamenotes
+
+
+ +
+
+ POST /api/rules + +
+ +
+ + + + + this.setState({test1: e})} inline /> + + + + +
filters:
+ this.setState({test: e})} validate={(e) => e%2 === 0} /> + + + + + + + + + + + + + + + +
+ +
+ +
+ + + +
+ + patterns: +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
regexAa.*\n+UTF8Uni_minmaxdirectionactions
s", "s->c"]} value="both" />
+
+ + +
+ +
+ +
+
+ + +
+ ); + } + +} + +export default RulePane; diff --git a/frontend/src/components/panels/RulePane.scss b/frontend/src/components/panels/RulePane.scss new file mode 100644 index 0000000..b030c6a --- /dev/null +++ b/frontend/src/components/panels/RulePane.scss @@ -0,0 +1,16 @@ + +.rule-pane { + .post-rules-actions { + display: flex; + + .rules-options { + flex: 1; + } + + button { + margin-left: 10px; + } + } + + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2