From b2632528a8a74505fc399e30df2ce6f5fe89363b Mon Sep 17 00:00:00 2001 From: VaiTon Date: Sat, 29 Apr 2023 17:15:10 +0200 Subject: Add delete button to rules pane. Format go files via `go fmt`. --- frontend/src/components/panels/RulesPane.js | 206 +++++++++++++++------------- 1 file changed, 109 insertions(+), 97 deletions(-) (limited to 'frontend') diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js index dd1765d..771c764 100644 --- a/frontend/src/components/panels/RulesPane.js +++ b/frontend/src/components/panels/RulesPane.js @@ -15,8 +15,8 @@ * along with this program. If not, see . */ -import React, {Component} from "react"; -import {Col, Container, Row} from "react-bootstrap"; +import React, { Component } from "react"; +import { Col, Container, Row } from "react-bootstrap"; import Table from "react-bootstrap/Table"; import backend from "../../backend"; import dispatcher from "../../dispatcher"; @@ -103,31 +103,42 @@ class RulesPane extends Component { }; loadRules = () => { - backend.get("/api/rules").then((res) => this.setState({rules: res.json, rulesStatusCode: res.status})) - .catch((res) => this.setState({rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json)})); + backend.get("/api/rules").then((res) => this.setState({ rules: res.json, rulesStatusCode: res.status })) + .catch((res) => this.setState({ rulesStatusCode: res.status, rulesResponse: JSON.stringify(res.json) })); }; addRule = () => { if (this.validateRule(this.state.newRule)) { backend.post("/api/rules", this.state.newRule).then((res) => { this.reset(); - this.setState({ruleStatusCode: res.status}); + this.setState({ ruleStatusCode: res.status }); this.loadRules(); }).catch((res) => { - this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); + this.setState({ ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json) }); }); } }; + deleteRule = () => { + const rule = this.state.selectedRule; + backend.delete(`/api/rules/${rule.id}`).then((res) => { + this.reset(); + this.setState({ ruleStatusCode: res.status }); + this.loadRules(); + }).catch((res) => { + this.setState({ ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json) }); + }); + } + updateRule = () => { const rule = this.state.selectedRule; if (this.validateRule(rule)) { backend.put(`/api/rules/${rule.id}`, rule).then((res) => { this.reset(); - this.setState({ruleStatusCode: res.status}); + this.setState({ ruleStatusCode: res.status }); this.loadRules(); }).catch((res) => { - this.setState({ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json)}); + this.setState({ ruleStatusCode: res.status, ruleResponse: JSON.stringify(res.json) }); }); } }; @@ -135,35 +146,35 @@ class RulesPane extends Component { validateRule = (rule) => { let valid = true; if (rule.name.length < 3) { - this.setState({ruleNameError: "name.length < 3"}); + this.setState({ ruleNameError: "name.length < 3" }); valid = false; } if (!validation.isValidColor(rule.color)) { - this.setState({ruleColorError: "color is not hexcolor"}); + this.setState({ ruleColorError: "color is not hexcolor" }); valid = false; } if (!validation.isValidPort(rule.filter["service_port"])) { - this.setState({ruleServicePortError: "service_port > 65565"}); + this.setState({ ruleServicePortError: "service_port > 65565" }); valid = false; } if (!validation.isValidPort(rule.filter["client_port"])) { - this.setState({ruleClientPortError: "client_port > 65565"}); + this.setState({ ruleClientPortError: "client_port > 65565" }); valid = false; } if (!validation.isValidAddress(rule.filter["client_address"])) { - this.setState({ruleClientAddressError: "client_address is not ip_address"}); + this.setState({ ruleClientAddressError: "client_address is not ip_address" }); valid = false; } if (rule.filter["min_duration"] > rule.filter["max_duration"]) { - this.setState({ruleDurationError: "min_duration > max_dur."}); + this.setState({ ruleDurationError: "min_duration > max_dur." }); valid = false; } if (rule.filter["min_bytes"] > rule.filter["max_bytes"]) { - this.setState({ruleBytesError: "min_bytes > max_bytes"}); + this.setState({ ruleBytesError: "min_bytes > max_bytes" }); valid = false; } if (rule.patterns.length < 1) { - this.setState({rulePatternsError: "patterns.length < 1"}); + this.setState({ rulePatternsError: "patterns.length < 1" }); valid = false; } @@ -198,7 +209,7 @@ class RulesPane extends Component { updateParam = (callback) => { const updatedRule = this.currentRule(); callback(updatedRule); - this.setState({newRule: updatedRule}); + this.setState({ newRule: updatedRule }); }; currentRule = () => this.state.selectedRule != null ? this.state.selectedRule : this.state.newRule; @@ -210,7 +221,7 @@ class RulesPane extends Component { const newPattern = _.cloneDeep(this.emptyPattern); this.currentRule().patterns.push(pattern); - this.setState({newPattern}); + this.setState({ newPattern }); }; editPattern = (pattern) => { @@ -233,11 +244,11 @@ class RulesPane extends Component { let valid = true; if (pattern.regex === "") { valid = false; - this.setState({patternRegexFocused: true}); + this.setState({ patternRegexFocused: true }); } if (pattern["min_occurrences"] > pattern["max_occurrences"]) { valid = false; - this.setState({patternOccurrencesFocused: true}); + this.setState({ patternOccurrencesFocused: true }); } return valid; }; @@ -250,54 +261,54 @@ class RulesPane extends Component { let rules = this.state.rules.map((r) => { this.reset(); - this.setState({selectedRule: _.cloneDeep(r)}); - }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}> - + this.setState({ selectedRule: _.cloneDeep(r) }); + }} className={classNames("row-small", "row-clickable", { "row-selected": rule.id === r.id })}> + {r["name"]} - + {r["notes"]} ); let patterns = (this.state.selectedPattern == null && !isUpdate ? - rule.patterns.concat(this.state.newPattern) : - rule.patterns + rule.patterns.concat(this.state.newPattern) : + rule.patterns ).map((p) => p === pattern ? - + { - this.updateParam(() => pattern.regex = v); - this.setState({patternRegexFocused: pattern.regex === ""}); - }}/> + onChange={(v) => { + this.updateParam(() => pattern.regex = v); + this.setState({ patternRegexFocused: pattern.regex === "" }); + }} /> this.updateParam(() => pattern.flags["caseless"] = v)}/> + onChange={(v) => this.updateParam(() => pattern.flags["caseless"] = v)} /> this.updateParam(() => pattern.flags["dot_all"] = v)}/> + onChange={(v) => this.updateParam(() => pattern.flags["dot_all"] = v)} /> this.updateParam(() => pattern.flags["multi_line"] = v)}/> + onChange={(v) => this.updateParam(() => pattern.flags["multi_line"] = v)} /> this.updateParam(() => pattern.flags["utf_8_mode"] = v)}/> + onChange={(v) => this.updateParam(() => pattern.flags["utf_8_mode"] = v)} /> this.updateParam(() => pattern.flags["unicode_property"] = v)}/> - + onChange={(v) => this.updateParam(() => pattern.flags["unicode_property"] = v)} /> + this.updateParam(() => pattern["min_occurrences"] = v)}/> + active={this.state.patternOccurrencesFocused} + onChange={(v) => this.updateParam(() => pattern["min_occurrences"] = v)} /> - + this.updateParam(() => pattern["max_occurrences"] = v)}/> + active={this.state.patternOccurrencesFocused} + onChange={(v) => this.updateParam(() => pattern["max_occurrences"] = v)} /> s", "s->c"]} - value={this.directions[pattern.direction]} - onChange={(v) => this.updateParam(() => pattern.direction = v)}/> + value={this.directions[pattern.direction]} + onChange={(v) => this.updateParam(() => pattern.direction = v)} /> {this.state.selectedPattern == null ? - this.addPattern(p)}/> : + this.addPattern(p)} /> : this.updatePattern(p)}/>} + onClick={() => this.updatePattern(p)} />} : @@ -312,7 +323,7 @@ class RulesPane extends Component { {p["max_occurrences"]} {this.directions[p.direction]} {!isUpdate && this.editPattern(p)}/>} + onClick={() => this.editPattern(p)} />} ); @@ -322,24 +333,24 @@ class RulesPane extends Component {
GET /api/rules {this.state.rulesStatusCode && - } + }
- - - - - - + + + + + + - {rules} + {rules}
idnamecolornotes
idnamecolornotes
@@ -352,8 +363,8 @@ class RulesPane extends Component { {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"} + content={this.state.ruleResponse} + placement="left" />
@@ -361,42 +372,42 @@ class RulesPane extends Component { this.updateParam((r) => r.name = v)} - error={this.state.ruleNameError}/> + onChange={(v) => this.updateParam((r) => r.name = v)} + error={this.state.ruleNameError} /> this.updateParam((r) => r.color = v)}/> + onChange={(v) => this.updateParam((r) => r.color = v)} /> this.updateParam((r) => r.notes = v)}/> + onChange={(v) => this.updateParam((r) => r.notes = v)} /> - + filters: this.updateParam((r) => r.filter["service_port"] = v)} - min={0} max={65565} error={this.state.ruleServicePortError} - readonly={isUpdate}/> + onChange={(v) => this.updateParam((r) => r.filter["service_port"] = v)} + min={0} max={65565} error={this.state.ruleServicePortError} + readonly={isUpdate} /> this.updateParam((r) => r.filter["client_port"] = v)} - min={0} max={65565} error={this.state.ruleClientPortError} - readonly={isUpdate}/> + onChange={(v) => this.updateParam((r) => r.filter["client_port"] = v)} + min={0} max={65565} error={this.state.ruleClientPortError} + readonly={isUpdate} /> this.updateParam((r) => r.filter["client_address"] = v)}/> + error={this.state.ruleClientAddressError} readonly={isUpdate} + onChange={(v) => this.updateParam((r) => r.filter["client_address"] = v)} /> - + this.updateParam((r) => r.filter["min_duration"] = v)}/> + error={this.state.ruleDurationError} readonly={isUpdate} + onChange={(v) => this.updateParam((r) => r.filter["min_duration"] = v)} /> this.updateParam((r) => r.filter["max_duration"] = v)}/> + error={this.state.ruleDurationError} readonly={isUpdate} + onChange={(v) => this.updateParam((r) => r.filter["max_duration"] = v)} /> this.updateParam((r) => r.filter["min_bytes"] = v)}/> + error={this.state.ruleBytesError} readonly={isUpdate} + onChange={(v) => this.updateParam((r) => r.filter["min_bytes"] = v)} /> this.updateParam((r) => r.filter["max_bytes"] = v)}/> + error={this.state.ruleBytesError} readonly={isUpdate} + onChange={(v) => this.updateParam((r) => r.filter["max_bytes"] = v)} /> @@ -404,32 +415,33 @@ class RulesPane extends Component {
- - - - - - - - - - - {!isUpdate && } - + + + + + + + + + + + {!isUpdate && } + - {patterns} + {patterns}
regex!Aa.*\n+UTF8Uni_minmaxdirectionactions
regex!Aa.*\n+UTF8Uni_minmaxdirectionactions
{this.state.rulePatternsError != null && - error: {this.state.rulePatternsError}} + error: {this.state.rulePatternsError}}
- {} + {} + bordered onClick={isUpdate ? this.updateRule : this.addRule} /> +
-- cgit v1.2.3-70-g09d2