Add delete button to rules pane.

Format go files via `go fmt`.

1 files changed, 109 insertions, 97 deletions

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 <http://www.gnu.org/licenses/>.
  */
 
-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) =>
             <tr key={r.id} onClick={() => {
                 this.reset();
-                this.setState({selectedRule: _.cloneDeep(r)});
-            }} className={classNames("row-small", "row-clickable", {"row-selected": rule.id === r.id})}>
-                <td><CopyLinkPopover text={r["id"].substring(0, 8)} value={r["id"]}/></td>
+                this.setState({ selectedRule: _.cloneDeep(r) });
+            }} className={classNames("row-small", "row-clickable", { "row-selected": rule.id === r.id })}>
+                <td><CopyLinkPopover text={r["id"].substring(0, 8)} value={r["id"]} /></td>
                 <td>{r["name"]}</td>
-                <td><ButtonField name={r["color"]} color={r["color"]} small/></td>
+                <td><ButtonField name={r["color"]} color={r["color"]} small /></td>
                 <td>{r["notes"]}</td>
             </tr>
         );
 
         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 ?
             <tr key={"new_pattern"}>
-                <td style={{"width": "500px"}}>
+                <td style={{ "width": "500px" }}>
                     <InputField small active={this.state.patternRegexFocused} value={pattern.regex}
-                                onChange={(v) => {
-                                    this.updateParam(() => pattern.regex = v);
-                                    this.setState({patternRegexFocused: pattern.regex === ""});
-                                }}/>
+                        onChange={(v) => {
+                            this.updateParam(() => pattern.regex = v);
+                            this.setState({ patternRegexFocused: pattern.regex === "" });
+                        }} />
                 </td>
                 <td><CheckField small checked={pattern.flags["caseless"]}
-                                onChange={(v) => this.updateParam(() => pattern.flags["caseless"] = v)}/></td>
+                    onChange={(v) => this.updateParam(() => pattern.flags["caseless"] = v)} /></td>
                 <td><CheckField small checked={pattern.flags["dot_all"]}
-                                onChange={(v) => this.updateParam(() => pattern.flags["dot_all"] = v)}/></td>
+                    onChange={(v) => this.updateParam(() => pattern.flags["dot_all"] = v)} /></td>
                 <td><CheckField small checked={pattern.flags["multi_line"]}
-                                onChange={(v) => this.updateParam(() => pattern.flags["multi_line"] = v)}/></td>
+                    onChange={(v) => this.updateParam(() => pattern.flags["multi_line"] = v)} /></td>
                 <td><CheckField small checked={pattern.flags["utf_8_mode"]}
-                                onChange={(v) => this.updateParam(() => pattern.flags["utf_8_mode"] = v)}/></td>
+                    onChange={(v) => this.updateParam(() => pattern.flags["utf_8_mode"] = v)} /></td>
                 <td><CheckField small checked={pattern.flags["unicode_property"]}
-                                onChange={(v) => this.updateParam(() => pattern.flags["unicode_property"] = v)}/></td>
-                <td style={{"width": "70px"}}>
+                    onChange={(v) => this.updateParam(() => pattern.flags["unicode_property"] = v)} /></td>
+                <td style={{ "width": "70px" }}>
                     <NumericField small value={pattern["min_occurrences"]}
-                                  active={this.state.patternOccurrencesFocused}
-                                  onChange={(v) => this.updateParam(() => pattern["min_occurrences"] = v)}/>
+                        active={this.state.patternOccurrencesFocused}
+                        onChange={(v) => this.updateParam(() => pattern["min_occurrences"] = v)} />
                 </td>
-                <td style={{"width": "70px"}}>
+                <td style={{ "width": "70px" }}>
                     <NumericField small value={pattern["max_occurrences"]}
-                                  active={this.state.patternOccurrencesFocused}
-                                  onChange={(v) => this.updateParam(() => pattern["max_occurrences"] = v)}/>
+                        active={this.state.patternOccurrencesFocused}
+                        onChange={(v) => this.updateParam(() => pattern["max_occurrences"] = v)} />
                 </td>
                 <td><ChoiceField inline small keys={[0, 1, 2]} values={["both", "c->s", "s->c"]}
-                                 value={this.directions[pattern.direction]}
-                                 onChange={(v) => this.updateParam(() => pattern.direction = v)}/></td>
+                    value={this.directions[pattern.direction]}
+                    onChange={(v) => this.updateParam(() => pattern.direction = v)} /></td>
                 <td>{this.state.selectedPattern == null ?
-                    <ButtonField variant="green" small name="add" inline rounded onClick={() => this.addPattern(p)}/> :
+                    <ButtonField variant="green" small name="add" inline rounded onClick={() => this.addPattern(p)} /> :
                     <ButtonField variant="green" small name="save" inline rounded
-                                 onClick={() => this.updatePattern(p)}/>}
+                        onClick={() => this.updatePattern(p)} />}
                 </td>
             </tr>
             :
@@ -312,7 +323,7 @@ class RulesPane extends Component {
                 <td>{p["max_occurrences"]}</td>
                 <td>{this.directions[p.direction]}</td>
                 {!isUpdate && <td><ButtonField variant="blue" small rounded name="edit"
-                                               onClick={() => this.editPattern(p)}/></td>}
+                    onClick={() => this.editPattern(p)} /></td>}
             </tr>
         );
 
@@ -322,24 +333,24 @@ class RulesPane extends Component {
                     <div className="section-header">
                         <span className="api-request">GET /api/rules</span>
                         {this.state.rulesStatusCode &&
-                        <span className="api-response"><LinkPopover text={this.state.rulesStatusCode}
-                                                                    content={this.state.rulesResponse}
-                                                                    placement="left"/></span>}
+                            <span className="api-response"><LinkPopover text={this.state.rulesStatusCode}
+                                content={this.state.rulesResponse}
+                                placement="left" /></span>}
                     </div>
 
                     <div className="section-content">
                         <div className="section-table">
                             <Table borderless size="sm">
                                 <thead>
-                                <tr>
-                                    <th>id</th>
-                                    <th>name</th>
-                                    <th>color</th>
-                                    <th>notes</th>
-                                </tr>
+                                    <tr>
+                                        <th>id</th>
+                                        <th>name</th>
+                                        <th>color</th>
+                                        <th>notes</th>
+                                    </tr>
                                 </thead>
                                 <tbody>
-                                {rules}
+                                    {rules}
                                 </tbody>
                             </Table>
                         </div>
@@ -352,8 +363,8 @@ class RulesPane extends Component {
                             {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"}
                         </span>
                         <span className="api-response"><LinkPopover text={this.state.ruleStatusCode}
-                                                                    content={this.state.ruleResponse}
-                                                                    placement="left"/></span>
+                            content={this.state.ruleResponse}
+                            placement="left" /></span>
                     </div>
 
                     <div className="section-content">
@@ -361,42 +372,42 @@ class RulesPane extends Component {
                             <Row>
                                 <Col>
                                     <InputField name="name" inline value={rule.name}
-                                                onChange={(v) => this.updateParam((r) => r.name = v)}
-                                                error={this.state.ruleNameError}/>
+                                        onChange={(v) => this.updateParam((r) => r.name = v)}
+                                        error={this.state.ruleNameError} />
                                     <ColorField inline value={rule.color} error={this.state.ruleColorError}
-                                                onChange={(v) => this.updateParam((r) => r.color = v)}/>
+                                        onChange={(v) => this.updateParam((r) => r.color = v)} />
                                     <TextField name="notes" rows={2} value={rule.notes}
-                                               onChange={(v) => this.updateParam((r) => r.notes = v)}/>
+                                        onChange={(v) => this.updateParam((r) => r.notes = v)} />
                                 </Col>
 
-                                <Col style={{"paddingTop": "6px"}}>
+                                <Col style={{ "paddingTop": "6px" }}>
                                     <span>filters:</span>
                                     <NumericField name="service_port" inline value={rule.filter["service_port"]}
-                                                  onChange={(v) => 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} />
                                     <NumericField name="client_port" inline value={rule.filter["client_port"]}
-                                                  onChange={(v) => 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} />
                                     <InputField name="client_address" value={rule.filter["client_address"]}
-                                                error={this.state.ruleClientAddressError} readonly={isUpdate}
-                                                onChange={(v) => this.updateParam((r) => r.filter["client_address"] = v)}/>
+                                        error={this.state.ruleClientAddressError} readonly={isUpdate}
+                                        onChange={(v) => this.updateParam((r) => r.filter["client_address"] = v)} />
                                 </Col>
 
-                                <Col style={{"paddingTop": "11px"}}>
+                                <Col style={{ "paddingTop": "11px" }}>
                                     <NumericField name="min_duration" inline value={rule.filter["min_duration"]}
-                                                  error={this.state.ruleDurationError} readonly={isUpdate}
-                                                  onChange={(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)} />
                                     <NumericField name="max_duration" inline value={rule.filter["max_duration"]}
-                                                  error={this.state.ruleDurationError} readonly={isUpdate}
-                                                  onChange={(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)} />
                                     <NumericField name="min_bytes" inline value={rule.filter["min_bytes"]}
-                                                  error={this.state.ruleBytesError} readonly={isUpdate}
-                                                  onChange={(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)} />
                                     <NumericField name="max_bytes" inline value={rule.filter["max_bytes"]}
-                                                  error={this.state.ruleBytesError} readonly={isUpdate}
-                                                  onChange={(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)} />
                                 </Col>
                             </Row>
                         </Container>
@@ -404,32 +415,33 @@ class RulesPane extends Component {
                         <div className="section-table">
                             <Table borderless size="sm">
                                 <thead>
-                                <tr>
-                                    <th>regex</th>
-                                    <th>!Aa</th>
-                                    <th>.*</th>
-                                    <th>\n+</th>
-                                    <th>UTF8</th>
-                                    <th>Uni_</th>
-                                    <th>min</th>
-                                    <th>max</th>
-                                    <th>direction</th>
-                                    {!isUpdate && <th>actions</th>}
-                                </tr>
+                                    <tr>
+                                        <th>regex</th>
+                                        <th>!Aa</th>
+                                        <th>.*</th>
+                                        <th>\n+</th>
+                                        <th>UTF8</th>
+                                        <th>Uni_</th>
+                                        <th>min</th>
+                                        <th>max</th>
+                                        <th>direction</th>
+                                        {!isUpdate && <th>actions</th>}
+                                    </tr>
                                 </thead>
                                 <tbody>
-                                {patterns}
+                                    {patterns}
                                 </tbody>
                             </Table>
                             {this.state.rulePatternsError != null &&
-                            <span className="table-error">error: {this.state.rulePatternsError}</span>}
+                                <span className="table-error">error: {this.state.rulePatternsError}</span>}
                         </div>
                     </div>
 
                     <div className="section-footer">
-                        {<ButtonField variant="red" name="cancel" bordered onClick={this.reset}/>}
+                        {<ButtonField variant="red" name="cancel" bordered onClick={this.reset} />}
                         <ButtonField variant={isUpdate ? "blue" : "green"} name={isUpdate ? "update_rule" : "add_rule"}
-                                     bordered onClick={isUpdate ? this.updateRule : this.addRule}/>
+                            bordered onClick={isUpdate ? this.updateRule : this.addRule} />
+                        <ButtonField variant="red" name="delete_rule" bordered onClick={this.deleteRule} />
                     </div>
                 </div>
             </div>