Add other custom fields

3 files changed, 32 insertions, 23 deletions

diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
index da8958b..f3fec64 100644
--- a/frontend/src/views/Connections.js
+++ b/frontend/src/views/Connections.js
@@ -25,21 +25,21 @@ class Connections extends Component {
         this.scrollBottomThreashold = 0.99999;
         this.maxConnections = 500;
         this.queryLimit = 50;
-
-        this.handleScroll = this.handleScroll.bind(this);
-        this.connectionSelected = this.connectionSelected.bind(this);
-        this.addServicePortFilter = this.addServicePortFilter.bind(this);
     }
 
     componentDidMount() {
         this.loadConnections({limit: this.queryLimit})
             .then(() => this.setState({loaded: true}));
+        if (this.props.initialConnection != null) {
+            this.setState({selected: this.props.initialConnection.id});
+            // TODO: scroll to initial connection
+        }
     }
 
-    connectionSelected(c) {
+    connectionSelected = (c) => {
         this.setState({selected: c.id});
         this.props.onSelected(c);
-    }
+    };
 
     componentDidUpdate(prevProps, prevState, snapshot) {
         if (this.state.loaded && prevProps.location.search !== this.props.location.search) {
@@ -49,7 +49,7 @@ class Connections extends Component {
         }
     }
 
-    handleScroll(e) {
+    handleScroll = (e) => {
         let relativeScroll = e.currentTarget.scrollTop / (e.currentTarget.scrollHeight - e.currentTarget.clientHeight);
         if (!this.state.loading && relativeScroll > this.scrollBottomThreashold) {
             this.loadConnections({from: this.state.lastConnection.id, limit: this.queryLimit,})
@@ -59,13 +59,13 @@ class Connections extends Component {
             this.loadConnections({to: this.state.firstConnection.id, limit: this.queryLimit,})
                 .then(() => console.log("Previous connections loaded"));
         }
-    }
+    };
 
-    addServicePortFilter(port) {
+    addServicePortFilter = (port) => {
         let urlParams = new URLSearchParams(this.props.location.search);
         urlParams.set("service_port", port);
         this.setState({queryString: "?" + urlParams});
-    }
+    };
 
     async loadConnections(params) {
         let url = "/api/connections";
@@ -75,7 +75,7 @@ class Connections extends Component {
         }
 
         this.setState({loading: true, prevParams: params});
-        let res = await backend.get(`${url}?${urlParams}`);
+        let res = await backend.getJson(`${url}?${urlParams}`);
 
         let connections = this.state.connections;
         let firstConnection = this.state.firstConnection;
@@ -115,7 +115,7 @@ class Connections extends Component {
         let flagRule = this.state.flagRule;
         let rules = this.state.rules;
         if (flagRule === null) {
-            rules = await backend.get("/api/rules");
+            rules = await backend.getJson("/api/rules");
             flagRule = rules.filter(rule => {
                 return rule.name === "flag";
             })[0];
diff --git a/frontend/src/views/Header.js b/frontend/src/views/Header.js
index e2d0e6a..a022636 100644
--- a/frontend/src/views/Header.js
+++ b/frontend/src/views/Header.js
@@ -72,7 +72,9 @@ class Header extends Component {
                             <Link to="/pcaps">
                                 <Button variant="purple">pcaps</Button>
                             </Link>
-                            <Button variant="deep-purple" onClick={this.props.onOpenRules}>rules</Button>
+                            <Link to="/rules">
+                                <Button variant="deep-purple">rules</Button>
+                            </Link>
                             <Button variant="indigo" onClick={this.props.onOpenServices}>services</Button>
                             <Button variant="blue" onClick={this.props.onOpenConfig}
 								disabled={false}>config</Button>
diff --git a/frontend/src/views/MainPane.js b/frontend/src/views/MainPane.js
index ce755d1..9d3f7b7 100644
--- a/frontend/src/views/MainPane.js
+++ b/frontend/src/views/MainPane.js
@@ -5,24 +5,25 @@ import ConnectionContent from "../components/ConnectionContent";
 import {Route, Switch, withRouter} from "react-router-dom";
 import PcapPane from "../components/panels/PcapPane";
 import backend from "../backend";
+import RulePane from "../components/panels/RulePane";
 
 class MainPane extends Component {
 
     constructor(props) {
         super(props);
         this.state = {
-            selectedConnection: null
+            selectedConnection: null,
+            loading: false
         };
     }
 
     componentDidMount() {
-        if ('id' in this.props.match.params) {
-            const id = this.props.match.params.id;
-            backend.get(`/api/connections/${id}`).then(res => {
-                if (res.status === 200) {
-                    this.setState({selectedConnection: res});
-                }
-            });
+        const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/);
+        if (match != null) {
+            this.setState({loading: true});
+            backend.getJson(`/api/connections/${match[1]}`)
+                .then(connection => this.setState({selectedConnection: connection, loading: false}))
+                .catch(error => console.log(error));
         }
     }
 
@@ -32,12 +33,18 @@ class MainPane extends Component {
                 <div className="container-fluid">
                     <div className="row">
                         <div className="col-md-6 pane">
-                            <Connections onSelected={(c) => this.setState({selectedConnection: c})} />
+                            {
+                                !this.state.loading &&
+                                    <Connections onSelected={(c) => this.setState({selectedConnection: c})}
+                                                 initialConnection={this.state.selectedConnection} />
+                            }
                         </div>
                         <div className="col-md-6 pl-0 pane">
                             <Switch>
                                 <Route path="/pcaps" children={<PcapPane />} />
-                                <Route children={<ConnectionContent connection={this.state.selectedConnection} />} />
+                                <Route path="/rules" children={<RulePane />} />
+                                <Route exact path="/connections/:id" children={<ConnectionContent connection={this.state.selectedConnection} />} />
+                                <Route children={<ConnectionContent />} />
                             </Switch>
                         </div>
                     </div>