Implement timeline

1 files changed, 17 insertions, 17 deletions

diff --git a/frontend/src/components/panels/MainPane.js b/frontend/src/components/panels/MainPane.js
index 3202d6d..bd25e0c 100644
--- a/frontend/src/components/panels/MainPane.js
+++ b/frontend/src/components/panels/MainPane.js
@@ -8,24 +8,23 @@ import PcapPane from "./PcapPane";
 import backend from "../../backend";
 import RulePane from "./RulePane";
 import ServicePane from "./ServicePane";
+import log from "../../log";
 
 class MainPane extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            selectedConnection: null,
-            loading: false
-        };
-    }
+    state = {};
 
     componentDidMount() {
         const match = this.props.location.pathname.match(/^\/connections\/([a-f0-9]{24})$/);
         if (match != null) {
-            this.setState({loading: true});
+            this.loading = true;
             backend.get(`/api/connections/${match[1]}`)
-                .then(res => this.setState({selectedConnection: res.json, loading: false}))
-                .catch(error => console.log(error));
+                .then(res => {
+                    this.loading = false;
+                    this.setState({selectedConnection: res.json});
+                    log.debug(`Initial connection ${match[1]} loaded`);
+                })
+                .catch(error => log.error("Error loading initial connection", error));
         }
     }
 
@@ -34,18 +33,19 @@ class MainPane extends Component {
             <div className="main-pane">
                 <div className="pane connections-pane">
                     {
-                        !this.state.loading &&
+                        !this.loading &&
                         <Connections onSelected={(c) => this.setState({selectedConnection: c})}
-                                     initialConnection={this.state.selectedConnection} />
+                                     initialConnection={this.state.selectedConnection}/>
                     }
                 </div>
                 <div className="pane details-pane">
                     <Switch>
-                        <Route path="/pcaps" children={<PcapPane />} />
-                        <Route path="/rules" children={<RulePane />} />
-                        <Route path="/services" children={<ServicePane />} />
-                        <Route exact path="/connections/:id" children={<ConnectionContent connection={this.state.selectedConnection} />} />
-                        <Route children={<ConnectionContent />} />
+                        <Route path="/pcaps" children={<PcapPane/>}/>
+                        <Route path="/rules" children={<RulePane/>}/>
+                        <Route path="/services" children={<ServicePane/>}/>
+                        <Route exact path="/connections/:id"
+                               children={<ConnectionContent connection={this.state.selectedConnection}/>}/>
+                        <Route children={<ConnectionContent/>}/>
                     </Switch>
                 </div>
             </div>