Implement timeline

2 files changed, 56 insertions, 64 deletions

diff --git a/frontend/src/components/filters/FiltersDefinitions.js b/frontend/src/components/filters/FiltersDefinitions.js
index 02ccb42..d4f2912 100644
--- a/frontend/src/components/filters/FiltersDefinitions.js
+++ b/frontend/src/components/filters/FiltersDefinitions.js
@@ -1,12 +1,4 @@
-import {
-    cleanNumber,
-    timestampToTime,
-    timeToTimestamp,
-    validate24HourTime,
-    validateIpAddress,
-    validateMin,
-    validatePort
-} from "../../utils";
+import {cleanNumber, validateIpAddress, validateMin, validatePort} from "../../utils";
 import StringConnectionsFilter from "./StringConnectionsFilter";
 import React from "react";
 import RulesConnectionsFilter from "./RulesConnectionsFilter";
@@ -22,69 +14,69 @@ export const filtersDefinitions = {
                                            replaceFunc={cleanNumber}
                                            validateFunc={validatePort}
                                            key="service_port_filter"
-                                           width={200} />,
-    matched_rules: <RulesConnectionsFilter />,
+                                           width={200}/>,
+    matched_rules: <RulesConnectionsFilter/>,
     client_address: <StringConnectionsFilter filterName="client_address"
                                              defaultFilterValue="all_addresses"
                                              validateFunc={validateIpAddress}
                                              key="client_address_filter"
-                                             width={320} />,
+                                             width={320}/>,
     client_port: <StringConnectionsFilter filterName="client_port"
                                           defaultFilterValue="all_ports"
                                           replaceFunc={cleanNumber}
                                           validateFunc={validatePort}
                                           key="client_port_filter"
-                                          width={200} />,
+                                          width={200}/>,
     min_duration: <StringConnectionsFilter filterName="min_duration"
                                            defaultFilterValue="0"
                                            replaceFunc={cleanNumber}
                                            validateFunc={validateMin(0)}
                                            key="min_duration_filter"
-                                           width={200} />,
+                                           width={200}/>,
     max_duration: <StringConnectionsFilter filterName="max_duration"
                                            defaultFilterValue="∞"
                                            replaceFunc={cleanNumber}
                                            key="max_duration_filter"
-                                           width={200} />,
+                                           width={200}/>,
     min_bytes: <StringConnectionsFilter filterName="min_bytes"
                                         defaultFilterValue="0"
                                         replaceFunc={cleanNumber}
                                         validateFunc={validateMin(0)}
                                         key="min_bytes_filter"
-                                        width={200} />,
+                                        width={200}/>,
     max_bytes: <StringConnectionsFilter filterName="max_bytes"
                                         defaultFilterValue="∞"
                                         replaceFunc={cleanNumber}
                                         key="max_bytes_filter"
-                                        width={200} />,
-    started_after: <StringConnectionsFilter filterName="started_after"
-                                            defaultFilterValue="00:00:00"
-                                            validateFunc={validate24HourTime}
-                                            encodeFunc={timeToTimestamp}
-                                            decodeFunc={timestampToTime}
-                                            key="started_after_filter"
-                                            width={200} />,
-    started_before: <StringConnectionsFilter filterName="started_before"
-                                             defaultFilterValue="00:00:00"
-                                             validateFunc={validate24HourTime}
-                                             encodeFunc={timeToTimestamp}
-                                             decodeFunc={timestampToTime}
-                                             key="started_before_filter"
-                                             width={200} />,
-    closed_after: <StringConnectionsFilter filterName="closed_after"
-                                           defaultFilterValue="00:00:00"
-                                           validateFunc={validate24HourTime}
-                                           encodeFunc={timeToTimestamp}
-                                           decodeFunc={timestampToTime}
-                                           key="closed_after_filter"
-                                           width={200} />,
-    closed_before: <StringConnectionsFilter filterName="closed_before"
-                                            defaultFilterValue="00:00:00"
-                                            validateFunc={validate24HourTime}
-                                            encodeFunc={timeToTimestamp}
-                                            decodeFunc={timestampToTime}
-                                            key="closed_before_filter"
-                                            width={200} />,
-    marked: <BooleanConnectionsFilter filterName={"marked"} />,
-    hidden: <BooleanConnectionsFilter filterName={"hidden"} />
+                                        width={200}/>,
+    // started_after: <StringConnectionsFilter filterName="started_after"
+    //                                         defaultFilterValue="00:00:00"
+    //                                         validateFunc={validate24HourTime}
+    //                                         encodeFunc={timeToTimestamp}
+    //                                         decodeFunc={timestampToTime}
+    //                                         key="started_after_filter"
+    //                                         width={230} />,
+    // started_before: <StringConnectionsFilter filterName="started_before"
+    //                                          defaultFilterValue="00:00:00"
+    //                                          validateFunc={validate24HourTime}
+    //                                          encodeFunc={timeToTimestamp}
+    //                                          decodeFunc={timestampToTime}
+    //                                          key="started_before_filter"
+    //                                          width={230} />,
+    // closed_after: <StringConnectionsFilter filterName="closed_after"
+    //                                        defaultFilterValue="00:00:00"
+    //                                        validateFunc={validate24HourTime}
+    //                                        encodeFunc={timeToTimestamp}
+    //                                        decodeFunc={timestampToTime}
+    //                                        key="closed_after_filter"
+    //                                        width={230} />,
+    // closed_before: <StringConnectionsFilter filterName="closed_before"
+    //                                         defaultFilterValue="00:00:00"
+    //                                         validateFunc={validate24HourTime}
+    //                                         encodeFunc={timeToTimestamp}
+    //                                         decodeFunc={timestampToTime}
+    //                                         key="closed_before_filter"
+    //                                         width={230} />,
+    marked: <BooleanConnectionsFilter filterName={"marked"}/>,
+    // hidden: <BooleanConnectionsFilter filterName={"hidden"} />
 };
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>