Frontend refactor: checkpoint

2 files changed, 25 insertions, 14 deletions

diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js
index a582d02..d36792e 100644
--- a/frontend/src/components/filters/FiltersDefinitions.js
+++ b/frontend/src/components/filters/FiltersDefinitions.js
@@ -21,49 +21,60 @@ export const filtersDefinitions = {
     service_port: <StringConnectionsFilter filterName="service_port"
                                            defaultFilterValue="all_ports"
                                            replaceFunc={cleanNumber}
-                                           validateFunc={validatePort}/>,
+                                           validateFunc={validatePort}
+                                           key="service_port_filter" />,
     matched_rules: <RulesConnectionsFilter />,
     client_address: <StringConnectionsFilter filterName="client_address"
                                              defaultFilterValue="all_addresses"
-                                             validateFunc={validateIpAddress} />,
+                                             validateFunc={validateIpAddress}
+                                             key="client_address_filter" />,
     client_port: <StringConnectionsFilter filterName="client_port"
                                           defaultFilterValue="all_ports"
                                           replaceFunc={cleanNumber}
-                                          validateFunc={validatePort}/>,
+                                          validateFunc={validatePort}
+                                          key="client_port_filter" />,
     min_duration: <StringConnectionsFilter filterName="min_duration"
                                            defaultFilterValue="0"
                                            replaceFunc={cleanNumber}
-                                           validateFunc={validateMin(0)}/>,
+                                           validateFunc={validateMin(0)}
+                                           key="min_duration_filter" />,
     max_duration: <StringConnectionsFilter filterName="max_duration"
                                            defaultFilterValue="∞"
-                                           replaceFunc={cleanNumber} />,
+                                           replaceFunc={cleanNumber}
+                                           key="max_duration_filter" />,
     min_bytes: <StringConnectionsFilter filterName="min_bytes"
                                         defaultFilterValue="0"
                                         replaceFunc={cleanNumber}
-                                        validateFunc={validateMin(0)} />,
+                                        validateFunc={validateMin(0)}
+                                        key="min_bytes_filter" />,
     max_bytes: <StringConnectionsFilter filterName="max_bytes"
                                         defaultFilterValue="∞"
-                                        replaceFunc={cleanNumber} />,
+                                        replaceFunc={cleanNumber}
+                                        key="max_bytes_filter" />,
     started_after: <StringConnectionsFilter filterName="started_after"
                                             defaultFilterValue="00:00:00"
                                             validateFunc={validate24HourTime}
                                             encodeFunc={timeToTimestamp}
-                                            decodeFunc={timestampToTime} />,
+                                            decodeFunc={timestampToTime}
+                                            key="started_after_filter" />,
     started_before: <StringConnectionsFilter filterName="started_before"
                                              defaultFilterValue="00:00:00"
                                              validateFunc={validate24HourTime}
                                              encodeFunc={timeToTimestamp}
-                                             decodeFunc={timestampToTime} />,
+                                             decodeFunc={timestampToTime}
+                                             key="started_before_filter" />,
     closed_after: <StringConnectionsFilter filterName="closed_after"
                                            defaultFilterValue="00:00:00"
                                            validateFunc={validate24HourTime}
                                            encodeFunc={timeToTimestamp}
-                                           decodeFunc={timestampToTime} />,
+                                           decodeFunc={timestampToTime}
+                                           key="closed_after_filter" />,
     closed_before: <StringConnectionsFilter filterName="closed_before"
                                             defaultFilterValue="00:00:00"
                                             validateFunc={validate24HourTime}
                                             encodeFunc={timeToTimestamp}
-                                            decodeFunc={timestampToTime} />,
+                                            decodeFunc={timestampToTime}
+                                            key="closed_before_filter" />,
     marked: <BooleanConnectionsFilter filterName={"marked"} />,
     hidden: <BooleanConnectionsFilter filterName={"hidden"} />
 };
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 358085f..621b6d6 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -3,7 +3,7 @@ import {withRouter} from "react-router-dom";
 import {Redirect} from "react-router";
 import './RulesConnectionsFilter.scss';
 import ReactTags from 'react-tag-autocomplete';
-import axios from 'axios';
+import backend from "../../backend";
 
 const classNames = require('classnames');
 
@@ -24,8 +24,8 @@ class RulesConnectionsFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         let activeRules = params.getAll("matched_rules") || [];
 
-        axios.get("/api/rules").then(res => {
-            let rules = res.data.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
+        backend.get("/api/rules").then(res => {
+            let rules = res.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
             activeRules = rules.filter(rule => activeRules.some(id => rule.id === id));
             this.setState({rules, activeRules, mounted: true});
         });