From a30815021e61023f996b1450ddcd9164a6e18bef Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 8 Oct 2020 17:07:07 +0200
Subject: Add header license to all files

---
 rules_manager.go | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

(limited to 'rules_manager.go')

diff --git a/rules_manager.go b/rules_manager.go
index a5dc7ce..636fc74 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -1,3 +1,20 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
 package main
 
 import (
-- 
cgit v1.2.3-70-g09d2


From 09cb0a1518feb2221ccd8c10dced859c010e9991 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Mon, 12 Oct 2020 21:33:40 +0200
Subject: Add rules statistics

---
 connection_handler.go               | 22 ++++++++++++++--------
 frontend/src/components/Timeline.js | 32 +++++++++++++++++---------------
 rules_manager.go                    | 28 ++++++++++++++++++----------
 statistics_controller.go            | 27 +++++++++++++++++++++------
 4 files changed, 70 insertions(+), 39 deletions(-)

(limited to 'rules_manager.go')

diff --git a/connection_handler.go b/connection_handler.go
index 6b2b411..4e92ccf 100644
--- a/connection_handler.go
+++ b/connection_handler.go
@@ -256,16 +256,22 @@ func (ch *connectionHandlerImpl) UpdateStatistics(connection Connection) {
 	}
 	servicePort := connection.DestinationPort
 
+	updateDocument := UnorderedDocument{
+		fmt.Sprintf("connections_per_service.%d", servicePort):  1,
+		fmt.Sprintf("client_bytes_per_service.%d", servicePort): connection.ClientBytes,
+		fmt.Sprintf("server_bytes_per_service.%d", servicePort): connection.ServerBytes,
+		fmt.Sprintf("total_bytes_per_service.%d", servicePort):  connection.ClientBytes + connection.ServerBytes,
+		fmt.Sprintf("duration_per_service.%d", servicePort):     duration.Milliseconds(),
+	}
+
+	for _, ruleID := range connection.MatchedRules {
+		updateDocument[fmt.Sprintf("matched_rules.%s", ruleID.Hex())] = 1
+	}
+
 	var results interface{}
 	if _, err := ch.Storage().Update(Statistics).Upsert(&results).
-		Filter(OrderedDocument{{"_id", time.Unix(rangeStart*60, 0)}}).OneComplex(UnorderedDocument{
-		"$inc": UnorderedDocument{
-			fmt.Sprintf("connections_per_service.%d", servicePort):  1,
-			fmt.Sprintf("client_bytes_per_service.%d", servicePort): connection.ClientBytes,
-			fmt.Sprintf("server_bytes_per_service.%d", servicePort): connection.ServerBytes,
-			fmt.Sprintf("duration_per_service.%d", servicePort):     duration.Milliseconds(),
-		},
-	}); err != nil {
+		Filter(OrderedDocument{{"_id", time.Unix(rangeStart*60, 0)}}).
+		OneComplex(UnorderedDocument{"$inc": updateDocument}); err != nil {
 		log.WithError(err).WithField("connection", connection).Error("failed to update connection statistics")
 	}
 }
diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js
index 615203f..6b8806f 100644
--- a/frontend/src/components/Timeline.js
+++ b/frontend/src/components/Timeline.js
@@ -102,23 +102,24 @@ class Timeline extends Component {
         ports.forEach(s => urlParams.append("ports", s));
 
         const metrics = (await backend.get("/api/statistics?" + urlParams)).json;
+        if (metrics.length === 0) {
+            return;
+        }
+
         const zeroFilledMetrics = [];
         const toTime = m => new Date(m["range_start"]).getTime();
-
-        if (metrics.length > 0) {
-            let i = 0;
-            for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) {
-                if (interval === toTime(metrics[i])) {
-                    const m = metrics[i++];
-                    m["range_start"] = new Date(m["range_start"]);
-                    zeroFilledMetrics.push(m);
-                } else {
-                    const m = {};
-                    m["range_start"] = new Date(interval);
-                    m[metric] = {};
-                    ports.forEach(p => m[metric][p] = 0);
-                    zeroFilledMetrics.push(m);
-                }
+        let i = 0;
+        for (let interval = toTime(metrics[0]); interval <= toTime(metrics[metrics.length - 1]); interval += minutes) {
+            if (interval === toTime(metrics[i])) {
+                const m = metrics[i++];
+                m["range_start"] = new Date(m["range_start"]);
+                zeroFilledMetrics.push(m);
+            } else {
+                const m = {};
+                m["range_start"] = new Date(interval);
+                m[metric] = {};
+                ports.forEach(p => m[metric][p] = 0);
+                zeroFilledMetrics.push(m);
             }
         }
 
@@ -127,6 +128,7 @@ class Timeline extends Component {
             columns: ["time"].concat(ports),
             points: zeroFilledMetrics.map(m => [m["range_start"]].concat(ports.map(p => m[metric][p] || 0)))
         });
+
         const start = series.range().begin();
         const end = series.range().end();
         start.setTime(start.getTime() - minutes);
diff --git a/rules_manager.go b/rules_manager.go
index 636fc74..0e6c3d1 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -121,16 +121,24 @@ func LoadRulesManager(storage Storage, flagRegex string) (RulesManager, error) {
 
 	// if there are no rules in database (e.g. first run), set flagRegex as first rule
 	if len(rulesManager.rules) == 0 {
-		if _, err := rulesManager.AddRule(context.Background(), Rule{
-			Name:  "flag",
-			Color: "#E53935",
-			Notes: "Mark connections where the flag is stolen",
-			Patterns: []Pattern{
-				{Regex: flagRegex, Direction: DirectionToClient},
-			},
-		}); err != nil {
-			return nil, err
-		}
+		go func() {
+			_, _ = rulesManager.AddRule(context.Background(), Rule{
+				Name:  "flag_out",
+				Color: "#e53935",
+				Notes: "Mark connections where the flags are stolen",
+				Patterns: []Pattern{
+					{Regex: flagRegex, Direction: DirectionToClient, Flags: RegexFlags{Utf8Mode: true}},
+				},
+			})
+			_, _ = rulesManager.AddRule(context.Background(), Rule{
+				Name:  "flag_in",
+				Color: "#43A047",
+				Notes: "Mark connections where the flags are placed",
+				Patterns: []Pattern{
+					{Regex: flagRegex, Direction: DirectionToServer, Flags: RegexFlags{Utf8Mode: true}},
+				},
+			})
+		}()
 	} else {
 		if err := rulesManager.generateDatabase(rules[len(rules)-1].ID); err != nil {
 			return nil, err
diff --git a/statistics_controller.go b/statistics_controller.go
index 1714c0b..57c7d95 100644
--- a/statistics_controller.go
+++ b/statistics_controller.go
@@ -29,26 +29,29 @@ type StatisticRecord struct {
 	ConnectionsPerService map[uint16]int   `json:"connections_per_service,omitempty" bson:"connections_per_service"`
 	ClientBytesPerService map[uint16]int   `json:"client_bytes_per_service,omitempty" bson:"client_bytes_per_service"`
 	ServerBytesPerService map[uint16]int   `json:"server_bytes_per_service,omitempty" bson:"server_bytes_per_service"`
+	TotalBytesPerService  map[uint16]int   `json:"total_bytes_per_service,omitempty" bson:"total_bytes_per_service"`
 	DurationPerService    map[uint16]int64 `json:"duration_per_service,omitempty" bson:"duration_per_service"`
+	MatchedRules          map[RowID]int64  `json:"matched_rules,omitempty" bson:"matched_rules"`
 }
 
 type StatisticsFilter struct {
 	RangeFrom time.Time `form:"range_from"`
 	RangeTo   time.Time `form:"range_to"`
 	Ports     []uint16  `form:"ports"`
+	RulesIDs  []RowID   `form:"rules_ids"`
 	Metric    string    `form:"metric"`
 }
 
 type StatisticsController struct {
-	storage Storage
-	metrics []string
+	storage         Storage
+	servicesMetrics []string
 }
 
 func NewStatisticsController(storage Storage) StatisticsController {
 	return StatisticsController{
 		storage: storage,
-		metrics: []string{"connections_per_service", "client_bytes_per_service",
-			"server_bytes_per_service", "duration_per_service"},
+		servicesMetrics: []string{"connections_per_service", "client_bytes_per_service",
+			"server_bytes_per_service", "total_bytes_per_service", "duration_per_service"},
 	}
 }
 
@@ -62,19 +65,31 @@ func (sc *StatisticsController) GetStatistics(context context.Context, filter St
 		query = query.Filter(OrderedDocument{{"_id", UnorderedDocument{"$gt": filter.RangeTo}}})
 	}
 	for _, port := range filter.Ports {
-		for _, metric := range sc.metrics {
+		for _, metric := range sc.servicesMetrics {
 			if filter.Metric == "" || filter.Metric == metric {
 				query = query.Projection(OrderedDocument{{fmt.Sprintf("%s.%d", metric, port), 1}})
 			}
 		}
+
 	}
 	if filter.Metric != "" && len(filter.Ports) == 0 {
-		for _, metric := range sc.metrics {
+		for _, metric := range sc.servicesMetrics {
 			if filter.Metric == metric {
 				query = query.Projection(OrderedDocument{{metric, 1}})
 			}
 		}
 	}
+	for _, ruleID := range filter.RulesIDs {
+		if filter.Metric == "" || filter.Metric == "matched_rules" {
+			query = query.Projection(OrderedDocument{{fmt.Sprintf("matched_rules.%s", ruleID.Hex()), 1}})
+		}
+
+	}
+	if filter.Metric != "" && len(filter.RulesIDs) == 0 {
+		if filter.Metric == "matched_rules" {
+			query = query.Projection(OrderedDocument{{"matched_rules", 1}})
+		}
+	}
 
 	if err := query.All(&statisticRecords); err != nil {
 		log.WithError(err).WithField("filter", filter).Error("failed to retrieve statistics")
-- 
cgit v1.2.3-70-g09d2


From af087d327d065c92d454c4e6391a0040d8d527b9 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Thu, 15 Oct 2020 17:40:03 +0200
Subject: Fix rules manager tests

---
 application_router_test.go |  2 +-
 rules_manager.go           | 46 +++++++++++++++++++++++-----------------------
 rules_manager_test.go      | 15 +++++++++------
 3 files changed, 33 insertions(+), 30 deletions(-)

(limited to 'rules_manager.go')

diff --git a/application_router_test.go b/application_router_test.go
index ec6d151..27c3651 100644
--- a/application_router_test.go
+++ b/application_router_test.go
@@ -109,7 +109,7 @@ func TestRulesApi(t *testing.T) {
 	var rules []Rule
 	assert.Equal(t, http.StatusOK, w.Code)
 	assert.NoError(t, json.Unmarshal(w.Body.Bytes(), &rules))
-	assert.Len(t, rules, 3)
+	assert.Len(t, rules, 4)
 
 	toolkit.wrapper.Destroy(t)
 }
diff --git a/rules_manager.go b/rules_manager.go
index 0e6c3d1..327e4ec 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -121,24 +121,22 @@ func LoadRulesManager(storage Storage, flagRegex string) (RulesManager, error) {
 
 	// if there are no rules in database (e.g. first run), set flagRegex as first rule
 	if len(rulesManager.rules) == 0 {
-		go func() {
-			_, _ = rulesManager.AddRule(context.Background(), Rule{
-				Name:  "flag_out",
-				Color: "#e53935",
-				Notes: "Mark connections where the flags are stolen",
-				Patterns: []Pattern{
-					{Regex: flagRegex, Direction: DirectionToClient, Flags: RegexFlags{Utf8Mode: true}},
-				},
-			})
-			_, _ = rulesManager.AddRule(context.Background(), Rule{
-				Name:  "flag_in",
-				Color: "#43A047",
-				Notes: "Mark connections where the flags are placed",
-				Patterns: []Pattern{
-					{Regex: flagRegex, Direction: DirectionToServer, Flags: RegexFlags{Utf8Mode: true}},
-				},
-			})
-		}()
+		_, _ = rulesManager.AddRule(context.Background(), Rule{
+			Name:  "flag_out",
+			Color: "#e53935",
+			Notes: "Mark connections where the flags are stolen",
+			Patterns: []Pattern{
+				{Regex: flagRegex, Direction: DirectionToClient, Flags: RegexFlags{Utf8Mode: true}},
+			},
+		})
+		_, _ = rulesManager.AddRule(context.Background(), Rule{
+			Name:  "flag_in",
+			Color: "#43A047",
+			Notes: "Mark connections where the flags are placed",
+			Patterns: []Pattern{
+				{Regex: flagRegex, Direction: DirectionToServer, Flags: RegexFlags{Utf8Mode: true}},
+			},
+		})
 	} else {
 		if err := rulesManager.generateDatabase(rules[len(rules)-1].ID); err != nil {
 			return nil, err
@@ -348,11 +346,13 @@ func (rm *rulesManagerImpl) generateDatabase(version RowID) error {
 		return err
 	}
 
-	rm.databaseUpdated <- RulesDatabase{
-		database:     database,
-		databaseSize: len(rm.patterns),
-		version:      version,
-	}
+	go func() {
+		rm.databaseUpdated <- RulesDatabase{
+			database:     database,
+			databaseSize: len(rm.patterns),
+			version:      version,
+		}
+	}()
 
 	return nil
 }
diff --git a/rules_manager_test.go b/rules_manager_test.go
index dded096..215e601 100644
--- a/rules_manager_test.go
+++ b/rules_manager_test.go
@@ -31,7 +31,8 @@ func TestAddAndGetAllRules(t *testing.T) {
 	rulesManager, err := LoadRulesManager(wrapper.Storage, "FLAG{test}")
 	require.NoError(t, err)
 	impl := rulesManager.(*rulesManagerImpl)
-	checkVersion(t, rulesManager, impl.rulesByName["flag"].ID)
+	checkVersion(t, rulesManager, impl.rulesByName["flag_out"].ID)
+	checkVersion(t, rulesManager, impl.rulesByName["flag_in"].ID)
 	emptyRule := Rule{Name: "empty", Color: "#fff", Enabled: true}
 	emptyID, err := rulesManager.AddRule(wrapper.Context, emptyRule)
 	assert.NoError(t, err)
@@ -120,8 +121,8 @@ func TestAddAndGetAllRules(t *testing.T) {
 		assert.Equal(t, expected, impl.rulesByName[expected.Name])
 	}
 
-	assert.Len(t, impl.rules, 5)
-	assert.Len(t, impl.rulesByName, 5)
+	assert.Len(t, impl.rules, 6)
+	assert.Len(t, impl.rulesByName, 6)
 	assert.Len(t, impl.patterns, 5)
 	assert.Len(t, impl.patternsIds, 5)
 
@@ -135,8 +136,9 @@ func TestAddAndGetAllRules(t *testing.T) {
 	checkRule(rule2, []int{2, 3})
 	checkRule(rule3, []int{3, 4})
 
-	assert.Len(t, rulesManager.GetRules(), 5)
-	assert.ElementsMatch(t, []Rule{impl.rulesByName["flag"], emptyRule, rule1, rule2, rule3}, rulesManager.GetRules())
+	assert.Len(t, rulesManager.GetRules(), 6)
+	assert.ElementsMatch(t, []Rule{impl.rulesByName["flag_out"], impl.rulesByName["flag_in"], emptyRule,
+		rule1, rule2, rule3}, rulesManager.GetRules())
 
 	wrapper.Destroy(t)
 }
@@ -210,7 +212,8 @@ func TestFillWithMatchedRules(t *testing.T) {
 	rulesManager, err := LoadRulesManager(wrapper.Storage, "FLAG{test}")
 	require.NoError(t, err)
 	impl := rulesManager.(*rulesManagerImpl)
-	checkVersion(t, rulesManager, impl.rulesByName["flag"].ID)
+	checkVersion(t, rulesManager, impl.rulesByName["flag_out"].ID)
+	checkVersion(t, rulesManager, impl.rulesByName["flag_in"].ID)
 
 	emptyRule, err := rulesManager.AddRule(wrapper.Context, Rule{Name: "empty", Color: "#fff"})
 	require.NoError(t, err)
-- 
cgit v1.2.3-70-g09d2


From 5534413b3a3e6e783310be8147ac8340d3098a7e Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 15:09:05 +0200
Subject: Fix tests. General refactor

---
 application_context_test.go                        |   7 +
 connection_streams_controller.go                   |   4 +-
 frontend/src/backend.js                            |   2 +-
 frontend/src/components/Notifications.js           |   2 +-
 frontend/src/components/Notifications.scss         |   2 +-
 frontend/src/components/fields/ChoiceField.scss    |   4 +-
 frontend/src/components/fields/InputField.scss     |   8 +-
 frontend/src/components/fields/TagField.scss       |  26 ++--
 frontend/src/components/filters/AdvancedFilters.js |   2 +-
 .../components/filters/RulesConnectionsFilter.js   |  14 +-
 .../components/filters/StringConnectionsFilter.js  |   8 +-
 frontend/src/components/pages/ConfigurationPage.js |  18 +--
 frontend/src/components/panels/ConnectionsPane.js  |  11 +-
 frontend/src/components/panels/PcapsPane.js        |  10 +-
 frontend/src/components/panels/RulesPane.js        |  90 +++++++------
 frontend/src/components/panels/SearchPane.js       |  10 +-
 frontend/src/components/panels/StreamsPane.js      |   4 +-
 frontend/src/index.js                              |   3 -
 frontend/src/index.scss                            |   2 +
 frontend/src/log.js                                |   7 +-
 frontend/src/serviceWorker.js                      | 141 ---------------------
 frontend/src/setupTests.js                         |   5 -
 frontend/src/utils.js                              |   2 +-
 parsers/http_request_parser.go                     |  28 ++--
 parsers/http_response_parser.go                    |  12 +-
 parsers/parser.go                                  |   4 +-
 pcap_importer_test.go                              |   1 +
 rules_manager.go                                   |   4 +-
 scripts/generate_ping.py                           |   2 +-
 utils.go                                           |   8 +-
 30 files changed, 150 insertions(+), 291 deletions(-)
 delete mode 100644 frontend/src/serviceWorker.js
 delete mode 100644 frontend/src/setupTests.js

(limited to 'rules_manager.go')

diff --git a/application_context_test.go b/application_context_test.go
index a7f1a49..11d1ed4 100644
--- a/application_context_test.go
+++ b/application_context_test.go
@@ -35,6 +35,10 @@ func TestCreateApplicationContext(t *testing.T) {
 	assert.Nil(t, appContext.PcapImporter)
 	assert.Nil(t, appContext.RulesManager)
 
+	notificationController := NewNotificationController(appContext)
+	appContext.SetNotificationController(notificationController)
+	assert.Equal(t, notificationController, appContext.NotificationController)
+
 	config := Config{
 		ServerAddress: "10.10.10.10",
 		FlagRegex:     "FLAG{test}",
@@ -58,11 +62,14 @@ func TestCreateApplicationContext(t *testing.T) {
 
 	checkAppContext, err := CreateApplicationContext(wrapper.Storage, "test")
 	assert.NoError(t, err)
+	checkAppContext.SetNotificationController(notificationController)
+	checkAppContext.Configure()
 	assert.True(t, checkAppContext.IsConfigured)
 	assert.Equal(t, checkAppContext.Config, config)
 	assert.Equal(t, checkAppContext.Accounts, accounts)
 	assert.NotNil(t, checkAppContext.PcapImporter)
 	assert.NotNil(t, checkAppContext.RulesManager)
+	assert.Equal(t, notificationController, appContext.NotificationController)
 
 	wrapper.Destroy(t)
 }
diff --git a/connection_streams_controller.go b/connection_streams_controller.go
index eef1a2a..038c2c5 100644
--- a/connection_streams_controller.go
+++ b/connection_streams_controller.go
@@ -369,7 +369,7 @@ func decodePwntools(payload []byte, isClient bool, format string) string {
 
 	if isClient {
 		return fmt.Sprintf("p.send(%s)\n", content)
-	} else {
-		return fmt.Sprintf("p.recvuntil(%s)\n", content)
 	}
+
+	return fmt.Sprintf("p.recvuntil(%s)\n", content)
 }
diff --git a/frontend/src/backend.js b/frontend/src/backend.js
index cc8604a..dc5089f 100644
--- a/frontend/src/backend.js
+++ b/frontend/src/backend.js
@@ -17,7 +17,7 @@
 
 async function json(method, url, data, json, headers) {
     const options = {
-        method: method,
+        method,
         body: json != null ? JSON.stringify(json) : data,
         mode: "cors",
         cache: "no-cache",
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index 92731d9..a81eba1 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -67,7 +67,7 @@ class Notifications extends Component {
                 n.variant = "blue";
                 return this.pushNotification(n);
             default:
-                return;
+                return null;
         }
     };
 
diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss
index 98d228e..5852c7d 100644
--- a/frontend/src/components/Notifications.scss
+++ b/frontend/src/components/Notifications.scss
@@ -32,7 +32,7 @@
     }
 
     &.notification-open {
-      transform: translateX(0px);
+      transform: translateX(0);
     }
 
     &.notification-closed {
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
index c8c7ff1..85986af 100644
--- a/frontend/src/components/fields/ChoiceField.scss
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -27,8 +27,8 @@
     }
 
     .field-options {
-      position: absolute;
-      z-index: 20;
+      position: static;
+      z-index: 100;
       top: 35px;
       display: none;
       width: 100%;
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index e8ef46a..eafb2ab 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -47,15 +47,15 @@
       background-color: $color-primary-4 !important;
     }
 
+    .file-label::after {
+      background-color: $color-secondary-4 !important;
+    }
+
     .field-value input,
     .field-value .file-label {
       color: $color-primary-3 !important;
       background-color: $color-primary-4 !important;
     }
-
-    .file-label::after {
-      background-color: $color-secondary-4 !important;
-    }
   }
 
   &.field-invalid {
diff --git a/frontend/src/components/fields/TagField.scss b/frontend/src/components/fields/TagField.scss
index 737f11f..723e71f 100644
--- a/frontend/src/components/fields/TagField.scss
+++ b/frontend/src/components/fields/TagField.scss
@@ -10,6 +10,18 @@
     }
   }
 
+  .react-tags {
+    position: relative;
+    display: flex;
+    border-radius: 4px;
+    background-color: $color-primary-2;
+
+    &:focus-within,
+    &:focus-within .react-tags__search-input {
+      background-color: $color-primary-1;
+    }
+  }
+
   &.field-small {
     font-size: 0.8em;
   }
@@ -39,18 +51,6 @@
     }
   }
 
-  .react-tags {
-    position: relative;
-    display: flex;
-    border-radius: 4px;
-    background-color: $color-primary-2;
-
-    &:focus-within,
-    &:focus-within .react-tags__search-input {
-      background-color: $color-primary-1;
-    }
-  }
-
   .react-tags__selected {
     display: inline-block;
     flex: 0 1;
@@ -154,4 +154,4 @@
     cursor: auto;
     opacity: 0.5;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/filters/AdvancedFilters.js b/frontend/src/components/filters/AdvancedFilters.js
index 2b479ed..15667a5 100644
--- a/frontend/src/components/filters/AdvancedFilters.js
+++ b/frontend/src/components/filters/AdvancedFilters.js
@@ -33,7 +33,7 @@ class AdvancedFilters extends Component {
             const active = ["client_address", "client_port", "min_duration", "max_duration", "min_bytes", "max_bytes"]
                 .some(f => this.urlParams.has(f));
             if (this.state.active !== active) {
-                this.setState({active: active});
+                this.setState({active});
             }
         };
         dispatcher.register("connections_filters", this.connectionsFiltersCallback);
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 86eae7e..37d36b7 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -35,17 +35,17 @@ class RulesConnectionsFilter extends Component {
         const params = new URLSearchParams(this.props.location.search);
         let activeRules = params.getAll("matched_rules") || [];
 
-        backend.get("/api/rules").then(res => {
-            let rules = res.json.flatMap(rule => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
-            activeRules = rules.filter(rule => activeRules.some(id => rule.id === id));
+        backend.get("/api/rules").then((res) => {
+            let rules = res.json.flatMap((rule) => rule.enabled ? [{id: rule.id, name: rule.name}] : []);
+            activeRules = rules.filter((rule) => activeRules.some(id => rule.id === id));
             this.setState({rules, activeRules});
         });
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             if ("matched_rules" in payload && !_.isEqual(payload["matched_rules"].sort(), this.state.activeRules.sort())) {
-                const newRules = this.state.rules.filter(r => payload["matched_rules"].includes(r.id));
+                const newRules = this.state.rules.filter((r) => payload["matched_rules"].includes(r.id));
                 this.setState({
-                    activeRules: newRules.map(r => {
+                    activeRules: newRules.map((r) => {
                         return {id: r.id, name: r.name};
                     })
                 });
@@ -61,7 +61,7 @@ class RulesConnectionsFilter extends Component {
     onChange = (activeRules) => {
         if (!_.isEqual(activeRules.sort(), this.state.activeRules.sort())) {
             this.setState({activeRules});
-            dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map(r => r.id)});
+            dispatcher.dispatch("connections_filters", {"matched_rules": activeRules.map((r) => r.id)});
         }
     };
 
diff --git a/frontend/src/components/filters/StringConnectionsFilter.js b/frontend/src/components/filters/StringConnectionsFilter.js
index c3c5925..c5d7075 100644
--- a/frontend/src/components/filters/StringConnectionsFilter.js
+++ b/frontend/src/components/filters/StringConnectionsFilter.js
@@ -33,7 +33,7 @@ class StringConnectionsFilter extends Component {
         let params = new URLSearchParams(this.props.location.search);
         this.updateStateFromFilterValue(params.get(this.props.filterName));
 
-        this.connectionsFiltersCallback = payload => {
+        this.connectionsFiltersCallback = (payload) => {
             const name = this.props.filterName;
             if (name in payload && this.state.filterValue !== payload[name]) {
                 this.updateStateFromFilterValue(payload[name]);
@@ -56,7 +56,7 @@ class StringConnectionsFilter extends Component {
                 fieldValue = this.props.replaceFunc(fieldValue);
             }
             if (this.isValueValid(fieldValue)) {
-                this.setState({fieldValue, filterValue: filterValue});
+                this.setState({fieldValue, filterValue});
             } else {
                 this.setState({fieldValue, invalidValue: true});
             }
@@ -98,9 +98,9 @@ class StringConnectionsFilter extends Component {
             }
 
             this.setState({
-                fieldValue: fieldValue,
+                fieldValue,
                 timeoutHandle: setTimeout(() => {
-                    this.setState({filterValue: filterValue});
+                    this.setState({filterValue});
                     this.changeFilterValue(filterValue);
                 }, 500),
                 invalidValue: false
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 2bd2da7..4f0ce21 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -59,11 +59,11 @@ class ConfigurationPage extends Component {
 
     validateSettings = (settings) => {
         let valid = true;
-        if (!validation.isValidAddress(settings.config.server_address, true)) {
+        if (!validation.isValidAddress(settings.config["server_address"], true)) {
             this.setState({serverAddressError: "invalid ip_address"});
             valid = false;
         }
-        if (settings.config.flag_regex.length < 8) {
+        if (settings.config["flag_regex"].length < 8) {
             this.setState({flagRegexError: "flag_regex.length < 8"});
             valid = false;
         }
@@ -84,7 +84,7 @@ class ConfigurationPage extends Component {
             this.setState({
                 newUsername: "",
                 newPassword: "",
-                settings: settings
+                settings
             });
         } else {
             this.setState({
@@ -128,15 +128,15 @@ class ConfigurationPage extends Component {
                                 <Container className="p-0">
                                     <Row>
                                         <Col>
-                                            <InputField name="server_address" value={settings.config.server_address}
+                                            <InputField name="server_address" value={settings.config["server_address"]}
                                                         error={this.state.serverAddressError}
-                                                        onChange={(v) => this.updateParam((s) => s.config.server_address = v)}/>
-                                            <InputField name="flag_regex" value={settings.config.flag_regex}
-                                                        onChange={(v) => this.updateParam((s) => s.config.flag_regex = v)}
+                                                        onChange={(v) => this.updateParam((s) => s.config["server_address"] = v)}/>
+                                            <InputField name="flag_regex" value={settings.config["flag_regex"]}
+                                                        onChange={(v) => this.updateParam((s) => s.config["flag_regex"] = v)}
                                                         error={this.state.flagRegexError}/>
                                             <div style={{"marginTop": "10px"}}>
-                                                <CheckField checked={settings.config.auth_required} name="auth_required"
-                                                            onChange={(v) => this.updateParam((s) => s.config.auth_required = v)}/>
+                                                <CheckField checked={settings.config["auth_required"]} name="auth_required"
+                                                            onChange={(v) => this.updateParam((s) => s.config["auth_required"] = v)}/>
                                             </div>
 
                                         </Col>
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 23c6114..9418fad 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -178,7 +178,7 @@ class ConnectionsPane extends Component {
         let firstConnection = this.state.firstConnection;
         let lastConnection = this.state.lastConnection;
 
-        if (additionalParams !== undefined && additionalParams.from !== undefined && additionalParams.to === undefined) {
+        if (additionalParams && additionalParams.from && !additionalParams.to) {
             if (res.length > 0) {
                 if (!isInitial) {
                     res = res.slice(1);
@@ -194,7 +194,7 @@ class ConnectionsPane extends Component {
                     firstConnection = connections[0];
                 }
             }
-        } else if (additionalParams !== undefined && additionalParams.to !== undefined && additionalParams.from === undefined) {
+        } else if (additionalParams && additionalParams.to && !additionalParams.from) {
             if (res.length > 0) {
                 connections = res.slice(0, res.length - 1).concat(this.state.connections);
                 firstConnection = connections[0];
@@ -215,12 +215,7 @@ class ConnectionsPane extends Component {
             }
         }
 
-        this.setState({
-            loading: false,
-            connections: connections,
-            firstConnection: firstConnection,
-            lastConnection: lastConnection
-        });
+        this.setState({loading: false, connections, firstConnection, lastConnection});
 
         if (firstConnection != null && lastConnection != null) {
             dispatcher.dispatch("connection_updates", {
diff --git a/frontend/src/components/panels/PcapsPane.js b/frontend/src/components/panels/PcapsPane.js
index 64e7804..ddc5948 100644
--- a/frontend/src/components/panels/PcapsPane.js
+++ b/frontend/src/components/panels/PcapsPane.js
@@ -181,15 +181,15 @@ class PcapsPane extends Component {
         };
 
         const uploadCurlCommand = createCurlCommand("/pcap/upload", "POST", null, {
-            file: "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ?
+            "file": "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ?
                 this.state.uploadSelectedFile.name : "invalid.pcap"),
-            flush_all: this.state.uploadFlushAll
+            "flush_all": this.state.uploadFlushAll
         });
 
         const fileCurlCommand = createCurlCommand("/pcap/file", "POST", {
-            file: this.state.fileValue,
-            flush_all: this.state.processFlushAll,
-            delete_original_file: this.state.deleteOriginalFile
+            "file": this.state.fileValue,
+            "flush_all": this.state.processFlushAll,
+            "delete_original_file": this.state.deleteOriginalFile
         });
 
         return (
diff --git a/frontend/src/components/panels/RulesPane.js b/frontend/src/components/panels/RulesPane.js
index d872b47..0bbd407 100644
--- a/frontend/src/components/panels/RulesPane.js
+++ b/frontend/src/components/panels/RulesPane.js
@@ -142,23 +142,23 @@ class RulesPane extends Component {
             this.setState({ruleColorError: "color is not hexcolor"});
             valid = false;
         }
-        if (!validation.isValidPort(rule.filter.service_port)) {
+        if (!validation.isValidPort(rule.filter["service_port"])) {
             this.setState({ruleServicePortError: "service_port > 65565"});
             valid = false;
         }
-        if (!validation.isValidPort(rule.filter.client_port)) {
+        if (!validation.isValidPort(rule.filter["client_port"])) {
             this.setState({ruleClientPortError: "client_port > 65565"});
             valid = false;
         }
-        if (!validation.isValidAddress(rule.filter.client_address)) {
+        if (!validation.isValidAddress(rule.filter["client_address"])) {
             this.setState({ruleClientAddressError: "client_address is not ip_address"});
             valid = false;
         }
-        if (rule.filter.min_duration > rule.filter.max_duration) {
+        if (rule.filter["min_duration"] > rule.filter["max_duration"]) {
             this.setState({ruleDurationError: "min_duration > max_dur."});
             valid = false;
         }
-        if (rule.filter.min_bytes > rule.filter.max_bytes) {
+        if (rule.filter["min_bytes"] > rule.filter["max_bytes"]) {
             this.setState({ruleBytesError: "min_bytes > max_bytes"});
             valid = false;
         }
@@ -175,9 +175,9 @@ class RulesPane extends Component {
         const newPattern = _.cloneDeep(this.emptyPattern);
         this.setState({
             selectedRule: null,
-            newRule: newRule,
+            newRule,
             selectedPattern: null,
-            newPattern: newPattern,
+            newPattern,
             patternRegexFocused: false,
             patternOccurrencesFocused: false,
             ruleNameError: null,
@@ -210,9 +210,7 @@ class RulesPane extends Component {
 
         const newPattern = _.cloneDeep(this.emptyPattern);
         this.currentRule().patterns.push(pattern);
-        this.setState({
-            newPattern: newPattern
-        });
+        this.setState({newPattern});
     };
 
     editPattern = (pattern) => {
@@ -237,7 +235,7 @@ class RulesPane extends Component {
             valid = false;
             this.setState({patternRegexFocused: true});
         }
-        if (pattern.min_occurrences > pattern.max_occurrences) {
+        if (pattern["min_occurrences"] > pattern["max_occurrences"]) {
             valid = false;
             this.setState({patternOccurrencesFocused: true});
         }
@@ -273,25 +271,25 @@ class RulesPane extends Component {
                                     this.setState({patternRegexFocused: pattern.regex === ""});
                                 }}/>
                 </td>
-                <td><CheckField small checked={pattern.flags.caseless}
-                                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>
-                <td><CheckField small checked={pattern.flags.multi_line}
-                                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>
-                <td><CheckField small checked={pattern.flags.unicode_property}
-                                onChange={(v) => this.updateParam(() => pattern.flags.unicode_property = v)}/></td>
+                <td><CheckField small checked={pattern.flags["caseless"]}
+                                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>
+                <td><CheckField small checked={pattern.flags["multi_line"]}
+                                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>
+                <td><CheckField small checked={pattern.flags["unicode_property"]}
+                                onChange={(v) => this.updateParam(() => pattern.flags["unicode_property"] = v)}/></td>
                 <td style={{"width": "70px"}}>
-                    <NumericField small value={pattern.min_occurrences}
+                    <NumericField small value={pattern["min_occurrences"]}
                                   active={this.state.patternOccurrencesFocused}
-                                  onChange={(v) => this.updateParam(() => pattern.min_occurrences = v)}/>
+                                  onChange={(v) => this.updateParam(() => pattern["min_occurrences"] = v)}/>
                 </td>
                 <td style={{"width": "70px"}}>
-                    <NumericField small value={pattern.max_occurrences}
+                    <NumericField small value={pattern["max_occurrences"]}
                                   active={this.state.patternOccurrencesFocused}
-                                  onChange={(v) => this.updateParam(() => pattern.max_occurrences = v)}/>
+                                  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]}
@@ -305,13 +303,13 @@ class RulesPane extends Component {
             :
             <tr key={"new_pattern"} className="row-small">
                 <td>{p.regex}</td>
-                <td>{p.flags.caseless ? "yes" : "no"}</td>
-                <td>{p.flags.dot_all ? "yes" : "no"}</td>
-                <td>{p.flags.multi_line ? "yes" : "no"}</td>
-                <td>{p.flags.utf_8_mode ? "yes" : "no"}</td>
-                <td>{p.flags.unicode_property ? "yes" : "no"}</td>
-                <td>{p.min_occurrences}</td>
-                <td>{p.max_occurrences}</td>
+                <td>{p.flags["caseless"] ? "yes" : "no"}</td>
+                <td>{p.flags["dot_all"] ? "yes" : "no"}</td>
+                <td>{p.flags["multi_line"] ? "yes" : "no"}</td>
+                <td>{p.flags["utf_8_mode"] ? "yes" : "no"}</td>
+                <td>{p.flags["unicode_property"] ? "yes" : "no"}</td>
+                <td>{p["min_occurrences"]}</td>
+                <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>}
@@ -373,32 +371,32 @@ class RulesPane extends Component {
 
                                 <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)}
+                                    <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}/>
-                                    <NumericField name="client_port" inline value={rule.filter.client_port}
-                                                  onChange={(v) => this.updateParam((r) => r.filter.client_port = v)}
+                                    <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}/>
-                                    <InputField name="client_address" value={rule.filter.client_address}
+                                    <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)}/>
+                                                onChange={(v) => this.updateParam((r) => r.filter["client_address"] = v)}/>
                                 </Col>
 
                                 <Col style={{"paddingTop": "11px"}}>
-                                    <NumericField name="min_duration" inline value={rule.filter.min_duration}
+                                    <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)}/>
-                                    <NumericField name="max_duration" inline value={rule.filter.max_duration}
+                                                  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)}/>
-                                    <NumericField name="min_bytes" inline value={rule.filter.min_bytes}
+                                                  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)}/>
-                                    <NumericField name="max_bytes" inline value={rule.filter.max_bytes}
+                                                  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)}/>
+                                                  onChange={(v) => this.updateParam((r) => r.filter["max_bytes"] = v)}/>
                                 </Col>
                             </Row>
                         </Container>
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index d36e85e..776ebd0 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -70,20 +70,20 @@ class SearchPane extends Component {
 
     loadSearches = () => {
         backend.get("/api/searches")
-            .then(res => this.setState({searches: res.json, searchesStatusCode: res.status}))
-            .catch(res => this.setState({searchesStatusCode: res.status, searchesResponse: JSON.stringify(res.json)}));
+            .then((res) => this.setState({searches: res.json, searchesStatusCode: res.status}))
+            .catch((res) => this.setState({searchesStatusCode: res.status, searchesResponse: JSON.stringify(res.json)}));
     };
 
     performSearch = () => {
         const options = this.state.currentSearchOptions;
         this.setState({loading: true});
         if (this.validateSearch(options)) {
-            backend.post("/api/searches/perform", options).then(res => {
+            backend.post("/api/searches/perform", options).then((res) => {
                 this.reset();
                 this.setState({searchStatusCode: res.status, loading: false});
                 this.loadSearches();
                 this.viewSearch(res.json.id);
-            }).catch(res => {
+            }).catch((res) => {
                 this.setState({
                     searchStatusCode: res.status, searchResponse: JSON.stringify(res.json),
                     loading: false
@@ -168,7 +168,7 @@ class SearchPane extends Component {
     render() {
         const options = this.state.currentSearchOptions;
 
-        let searches = this.state.searches.map(s =>
+        let searches = this.state.searches.map((s) =>
             <tr key={s.id} className="row-small row-clickable">
                 <td>{s.id.substring(0, 8)}</td>
                 <td>{this.extractPattern(s["search_options"])}</td>
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index 41ab33d..1819fec 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -18,7 +18,7 @@
 import DOMPurify from "dompurify";
 import React, {Component} from "react";
 import {Row} from "react-bootstrap";
-import ReactJson from "react-json-view"
+import ReactJson from "react-json-view";
 import backend from "../../backend";
 import log from "../../log";
 import {downloadBlob, getHeaderValue} from "../../utils";
@@ -72,7 +72,7 @@ class StreamsPane extends Component {
 
     setFormat = (format) => {
         if (this.validFormats.includes(format)) {
-            this.setState({format: format});
+            this.setState({format});
         }
     };
 
diff --git a/frontend/src/index.js b/frontend/src/index.js
index d00df88..62cb974 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -21,7 +21,6 @@ import ReactDOM from "react-dom";
 import App from "./components/App";
 import "./index.scss";
 import notifications from "./notifications";
-import * as serviceWorker from "./serviceWorker";
 
 notifications.createWebsocket();
 
@@ -31,5 +30,3 @@ ReactDOM.render(
     // </React.StrictMode>,
     document.getElementById("root")
 );
-
-serviceWorker.unregister();
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index ea360be..1378d81 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -82,9 +82,11 @@ a {
   0% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.3;
   }
+
   100% {
     opacity: 1;
   }
diff --git a/frontend/src/log.js b/frontend/src/log.js
index 424e1b4..0afac47 100644
--- a/frontend/src/log.js
+++ b/frontend/src/log.js
@@ -16,9 +16,14 @@
  */
 
 const log = {
-    debug: (...obj) => console.info(...obj),
+    debug: (...obj) => isDevelopment() && console.info(...obj),
     info: (...obj) => console.info(...obj),
+    warn: (...obj) => console.warn(...obj),
     error: (...obj) => console.error(obj)
 };
 
+function isDevelopment() {
+    return !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
+}
+
 export default log;
diff --git a/frontend/src/serviceWorker.js b/frontend/src/serviceWorker.js
deleted file mode 100644
index a1f0ba8..0000000
--- a/frontend/src/serviceWorker.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
-    window.location.hostname === "localhost" ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === "[::1]" ||
-    // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-    if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
-        // The URL constructor is available in all browsers that support SW.
-        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
-        if (publicUrl.origin !== window.location.origin) {
-            // Our service worker won't work if PUBLIC_URL is on a different origin
-            // from what our page is served on. This might happen if a CDN is used to
-            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-            return;
-        }
-
-        window.addEventListener("load", () => {
-            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-            if (isLocalhost) {
-                // This is running on localhost. Let's check if a service worker still exists or not.
-                checkValidServiceWorker(swUrl, config);
-
-                // Add some additional logging to localhost, pointing developers to the
-                // service worker/PWA documentation.
-                navigator.serviceWorker.ready.then(() => {
-                    console.log(
-                        "This web app is being served cache-first by a service " +
-                        "worker. To learn more, visit https://bit.ly/CRA-PWA"
-                    );
-                });
-            } else {
-                // Is not localhost. Just register service worker
-                registerValidSW(swUrl, config);
-            }
-        });
-    }
-}
-
-function registerValidSW(swUrl, config) {
-    navigator.serviceWorker
-        .register(swUrl)
-        .then((registration) => {
-            registration.onupdatefound = () => {
-                const installingWorker = registration.installing;
-                if (installingWorker == null) {
-                    return;
-                }
-                installingWorker.onstatechange = () => {
-                    if (installingWorker.state === "installed") {
-                        if (navigator.serviceWorker.controller) {
-                            // At this point, the updated precached content has been fetched,
-                            // but the previous service worker will still serve the older
-                            // content until all client tabs are closed.
-                            console.log(
-                                "New content is available and will be used when all " +
-                                "tabs for this page are closed. See https://bit.ly/CRA-PWA."
-                            );
-
-                            // Execute callback
-                            if (config && config.onUpdate) {
-                                config.onUpdate(registration);
-                            }
-                        } else {
-                            // At this point, everything has been precached.
-                            // It's the perfect time to display a
-                            // "Content is cached for offline use." message.
-                            console.log("Content is cached for offline use.");
-
-                            // Execute callback
-                            if (config && config.onSuccess) {
-                                config.onSuccess(registration);
-                            }
-                        }
-                    }
-                };
-            };
-        })
-        .catch((error) => {
-            console.error("Error during service worker registration:", error);
-        });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-    // Check if the service worker can be found. If it can't reload the page.
-    fetch(swUrl, {
-        headers: {"Service-Worker": "script"},
-    })
-        .then((response) => {
-            // Ensure service worker exists, and that we really are getting a JS file.
-            const contentType = response.headers.get("content-type");
-            if (
-                response.status === 404 ||
-                (contentType != null && contentType.indexOf("javascript") === -1)
-            ) {
-                // No service worker found. Probably a different app. Reload the page.
-                navigator.serviceWorker.ready.then((registration) => {
-                    registration.unregister().then(() => {
-                        window.location.reload();
-                    });
-                });
-            } else {
-                // Service worker found. Proceed as normal.
-                registerValidSW(swUrl, config);
-            }
-        })
-        .catch(() => {
-            console.log(
-                "No internet connection found. App is running in offline mode."
-            );
-        });
-}
-
-export function unregister() {
-    if ("serviceWorker" in navigator) {
-        navigator.serviceWorker.ready
-            .then((registration) => {
-                registration.unregister();
-            })
-            .catch((error) => {
-                console.error(error.message);
-            });
-    }
-}
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
deleted file mode 100644
index 9b1d6d0..0000000
--- a/frontend/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
\ No newline at end of file
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 0f0927e..445e576 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -133,7 +133,7 @@ export function getHeaderValue(request, key) {
     if (request && request.headers) {
         return request.headers[Object.keys(request.headers).find((k) => k.toLowerCase() === key.toLowerCase())];
     }
-    return undefined;
+    return null;
 }
 
 export function downloadBlob(blob, fileName) {
diff --git a/parsers/http_request_parser.go b/parsers/http_request_parser.go
index 56093c9..d7ed81c 100644
--- a/parsers/http_request_parser.go
+++ b/parsers/http_request_parser.go
@@ -28,7 +28,7 @@ import (
 	"strings"
 )
 
-type HttpRequestMetadata struct {
+type HTTPRequestMetadata struct {
 	BasicMetadata
 	Method        string                         `json:"method"`
 	URL           string                         `json:"url"`
@@ -40,19 +40,19 @@ type HttpRequestMetadata struct {
 	FormData      map[string]string              `json:"form_data" binding:"omitempty"`
 	Body          string                         `json:"body" binding:"omitempty"`
 	Trailer       map[string]string              `json:"trailer" binding:"omitempty"`
-	Reproducers   HttpRequestMetadataReproducers `json:"reproducers"`
+	Reproducers   HTTPRequestMetadataReproducers `json:"reproducers"`
 }
 
-type HttpRequestMetadataReproducers struct {
+type HTTPRequestMetadataReproducers struct {
 	CurlCommand  string `json:"curl_command"`
 	RequestsCode string `json:"requests_code"`
 	FetchRequest string `json:"fetch_request"`
 }
 
-type HttpRequestParser struct {
+type HTTPRequestParser struct {
 }
 
-func (p HttpRequestParser) TryParse(content []byte) Metadata {
+func (p HTTPRequestParser) TryParse(content []byte) Metadata {
 	reader := bufio.NewReader(bytes.NewReader(content))
 	request, err := http.ReadRequest(reader)
 	if err != nil {
@@ -68,7 +68,7 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata {
 	_ = request.Body.Close()
 	_ = request.ParseForm()
 
-	return HttpRequestMetadata{
+	return HTTPRequestMetadata{
 		BasicMetadata: BasicMetadata{"http-request"},
 		Method:        request.Method,
 		URL:           request.URL.String(),
@@ -80,7 +80,7 @@ func (p HttpRequestParser) TryParse(content []byte) Metadata {
 		FormData:      JoinArrayMap(request.Form),
 		Body:          body,
 		Trailer:       JoinArrayMap(request.Trailer),
-		Reproducers: HttpRequestMetadataReproducers{
+		Reproducers: HTTPRequestMetadataReproducers{
 			CurlCommand:  curlCommand(content),
 			RequestsCode: requestsCode(request, body),
 			FetchRequest: fetchRequest(request, body),
@@ -92,17 +92,17 @@ func curlCommand(content []byte) string {
 	// a new reader is required because all the body is read before and GetBody() doesn't works
 	reader := bufio.NewReader(bytes.NewReader(content))
 	request, _ := http.ReadRequest(reader)
-	if command, err := http2curl.GetCurlCommand(request); err == nil {
+	command, err := http2curl.GetCurlCommand(request)
+	if err == nil {
 		return command.String()
-	} else {
-		return err.Error()
 	}
+	return err.Error()
 }
 
 func requestsCode(request *http.Request, body string) string {
 	var b strings.Builder
-	headers := toJson(JoinArrayMap(request.Header))
-	cookies := toJson(CookiesMap(request.Cookies()))
+	headers := toJSON(JoinArrayMap(request.Header))
+	cookies := toJSON(CookiesMap(request.Cookies()))
 
 	b.WriteString("import requests\n\nresponse = requests." + strings.ToLower(request.Method) + "(")
 	b.WriteString("\"" + request.URL.String() + "\"")
@@ -146,14 +146,14 @@ func fetchRequest(request *http.Request, body string) string {
 	data["method"] = request.Method
 	// TODO: mode
 
-	if jsonData := toJson(data); jsonData != "" {
+	if jsonData := toJSON(data); jsonData != "" {
 		return "fetch(\"" + request.URL.String() + "\", " + jsonData + ");"
 	} else {
 		return "invalid-request"
 	}
 }
 
-func toJson(obj interface{}) string {
+func toJSON(obj interface{}) string {
 	if buffer, err := json.MarshalIndent(obj, "", "\t"); err == nil {
 		return string(buffer)
 	} else {
diff --git a/parsers/http_response_parser.go b/parsers/http_response_parser.go
index e5ef1ac..e61fffd 100644
--- a/parsers/http_response_parser.go
+++ b/parsers/http_response_parser.go
@@ -26,7 +26,7 @@ import (
 	"net/http"
 )
 
-type HttpResponseMetadata struct {
+type HTTPResponseMetadata struct {
 	BasicMetadata
 	Status           string            `json:"status"`
 	StatusCode       int               `json:"status_code"`
@@ -40,10 +40,10 @@ type HttpResponseMetadata struct {
 	Trailer          map[string]string `json:"trailer" binding:"omitempty"`
 }
 
-type HttpResponseParser struct {
+type HTTPResponseParser struct {
 }
 
-func (p HttpResponseParser) TryParse(content []byte) Metadata {
+func (p HTTPResponseParser) TryParse(content []byte) Metadata {
 	reader := bufio.NewReader(bytes.NewReader(content))
 	response, err := http.ReadResponse(reader, nil)
 	if err != nil {
@@ -74,11 +74,11 @@ func (p HttpResponseParser) TryParse(content []byte) Metadata {
 	_ = response.Body.Close()
 
 	var location string
-	if locationUrl, err := response.Location(); err == nil {
-		location = locationUrl.String()
+	if locationURL, err := response.Location(); err == nil {
+		location = locationURL.String()
 	}
 
-	return HttpResponseMetadata{
+	return HTTPResponseMetadata{
 		BasicMetadata:    BasicMetadata{"http-response"},
 		Status:           response.Status,
 		StatusCode:       response.StatusCode,
diff --git a/parsers/parser.go b/parsers/parser.go
index a29b1ab..9aca3b6 100644
--- a/parsers/parser.go
+++ b/parsers/parser.go
@@ -30,8 +30,8 @@ type BasicMetadata struct {
 }
 
 var parsers = []Parser{	// order matter
-	HttpRequestParser{},
-	HttpResponseParser{},
+	HTTPRequestParser{},
+	HTTPResponseParser{},
 }
 
 func Parse(content []byte) Metadata {
diff --git a/pcap_importer_test.go b/pcap_importer_test.go
index 8940060..a47f2d9 100644
--- a/pcap_importer_test.go
+++ b/pcap_importer_test.go
@@ -127,6 +127,7 @@ func newTestPcapImporter(wrapper *TestStorageWrapper, serverAddress string) *Pca
 		mAssemblers: sync.Mutex{},
 		mSessions:   sync.Mutex{},
 		serverNet:   *ParseIPNet(serverAddress),
+		notificationController: NewNotificationController(nil),
 	}
 }
 
diff --git a/rules_manager.go b/rules_manager.go
index 327e4ec..a6d969f 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -328,10 +328,10 @@ func (rm *rulesManagerImpl) validateAndAddRuleLocal(rule *Rule) error {
 		duplicatePatterns[regex] = true
 	}
 
-	startId := len(rm.patterns)
+	startID := len(rm.patterns)
 	for id, pattern := range newPatterns {
 		rm.patterns = append(rm.patterns, pattern)
-		rm.patternsIds[pattern.String()] = uint(startId + id)
+		rm.patternsIds[pattern.String()] = uint(startID + id)
 	}
 
 	rm.rules[rule.ID] = *rule
diff --git a/scripts/generate_ping.py b/scripts/generate_ping.py
index 73454c1..0c06a9e 100755
--- a/scripts/generate_ping.py
+++ b/scripts/generate_ping.py
@@ -28,7 +28,7 @@ if __name__ == "__main__":
 
     port = 9999
     n = 10000
-    
+
     if sys.argv[1] == "server":
         # docker run -it --rm -p 9999:9999 -v "$PWD":/ping -w /ping python:3 python generate_ping.py server
         with socketserver.TCPServer(("0.0.0.0", port), PongHandler) as server:
diff --git a/utils.go b/utils.go
index 639fd94..e721d78 100644
--- a/utils.go
+++ b/utils.go
@@ -57,12 +57,12 @@ func CustomRowID(payload uint64, timestamp time.Time) RowID {
 	binary.BigEndian.PutUint32(key[0:4], uint32(timestamp.Unix()))
 	binary.BigEndian.PutUint64(key[4:12], payload)
 
-	if oid, err := primitive.ObjectIDFromHex(hex.EncodeToString(key[:])); err == nil {
+	oid, err := primitive.ObjectIDFromHex(hex.EncodeToString(key[:]))
+	if err == nil {
 		return oid
-	} else {
-		log.WithError(err).Warn("failed to create object id")
-		return primitive.NewObjectID()
 	}
+	log.WithError(err).Warn("failed to create object id")
+	return primitive.NewObjectID()
 }
 
 func NewRowID() RowID {
-- 
cgit v1.2.3-70-g09d2


From 79b8b2fa3e8563c986da8baa3a761f2d4f0c6f47 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Fri, 16 Oct 2020 19:05:44 +0200
Subject: Minor improvements

---
 application_router.go                              |  2 +-
 frontend/src/components/App.js                     | 29 ++++++++-----
 frontend/src/components/Header.js                  | 12 +++---
 frontend/src/components/fields/InputField.js       |  2 +-
 frontend/src/components/objects/CopyLinkPopover.js |  4 +-
 frontend/src/components/pages/ConfigurationPage.js | 12 ++++--
 .../src/components/pages/ConfigurationPage.scss    | 30 +++++++++----
 frontend/src/components/pages/MainPage.js          | 50 +++++++++++-----------
 frontend/src/components/panels/ConnectionsPane.js  |  4 +-
 frontend/src/components/panels/SearchPane.js       |  6 +--
 rules_manager.go                                   |  5 +++
 11 files changed, 93 insertions(+), 63 deletions(-)

(limited to 'rules_manager.go')

diff --git a/application_router.go b/application_router.go
index 656b63e..4048dc5 100644
--- a/application_router.go
+++ b/application_router.go
@@ -39,7 +39,7 @@ func CreateApplicationRouter(applicationContext *ApplicationContext,
 
 	router.Use(static.Serve("/", static.LocalFile("./frontend/build", true)))
 
-	for _, path := range []string{"/connections/:id", "/pcaps", "/rules", "/services", "/config"} {
+	for _, path := range []string{"/connections/:id", "/pcaps", "/rules", "/services", "/config", "/searches"} {
 		router.GET(path, func(c *gin.Context) {
 			c.File("./frontend/build/index.html")
 		})
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index e12a99d..96083cd 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -16,6 +16,7 @@
  */
 
 import React, {Component} from "react";
+import {BrowserRouter as Router} from "react-router-dom";
 import dispatcher from "../dispatcher";
 import Notifications from "./Notifications";
 import ConfigurationPage from "./pages/ConfigurationPage";
@@ -27,15 +28,7 @@ class App extends Component {
     state = {};
 
     componentDidMount() {
-        dispatcher.register("notifications", (payload) => {
-            if (payload.event === "connected") {
-                this.setState({
-                    connected: true,
-                    configured: payload.message["is_configured"],
-                    version: payload.message["version"]
-                });
-            }
-        });
+        dispatcher.register("notifications", this.handleNotifications);
 
         setInterval(() => {
             if (document.title.endsWith("❚")) {
@@ -46,16 +39,30 @@ class App extends Component {
         }, 500);
     }
 
+    componentWillUnmount() {
+        dispatcher.unregister(this.handleNotifications);
+    }
+
+    handleNotifications = (payload) => {
+        if (payload.event === "connected") {
+            this.setState({
+                connected: true,
+                configured: payload.message["is_configured"],
+                version: payload.message["version"]
+            });
+        }
+    };
+
     render() {
         return (
-            <>
+            <Router>
                 <Notifications/>
                 {this.state.connected ?
                     (this.state.configured ? <MainPage version={this.state.version}/> :
                         <ConfigurationPage onConfigured={() => this.setState({configured: true})}/>) :
                     <ServiceUnavailablePage/>
                 }
-            </>
+            </Router>
         );
     }
 }
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index ab16dd1..c46d768 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -27,6 +27,8 @@ import RulesConnectionsFilter from "./filters/RulesConnectionsFilter";
 import StringConnectionsFilter from "./filters/StringConnectionsFilter";
 import "./Header.scss";
 
+const classNames = require("classnames");
+
 class Header extends Component {
 
     componentDidMount() {
@@ -46,7 +48,7 @@ class Header extends Component {
         return (
             <header className="header container-fluid">
                 <div className="row">
-                    <div className="col-auto">
+                    <div className={classNames({"col-auto": this.props.configured, "col": !this.props.configured})}>
                         <h1 className="header-title type-wrap">
                             <Link to="/">
                                 <span style={{whiteSpace: "pre"}} ref={(el) => {
@@ -56,7 +58,7 @@ class Header extends Component {
                         </h1>
                     </div>
 
-                    <div className="col-auto">
+                    {this.props.configured && <div className="col-auto">
                         <div className="filters-bar">
                             <StringConnectionsFilter filterName="service_port"
                                                      defaultFilterValue="all_ports"
@@ -69,9 +71,9 @@ class Header extends Component {
                             <ExitSearchFilter/>
                             <AdvancedFilters onClick={this.props.onOpenFilters}/>
                         </div>
-                    </div>
+                    </div>}
 
-                    <div className="col">
+                    {this.props.configured && <div className="col">
                         <div className="header-buttons">
                             <Link to={"/searches" + this.props.location.search}>
                                 <ButtonField variant="pink" name="searches" bordered/>
@@ -89,7 +91,7 @@ class Header extends Component {
                                 <ButtonField variant="blue" name="config" bordered/>
                             </Link>
                         </div>
-                    </div>
+                    </div>}
                 </div>
             </header>
         );
diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js
index 823989d..e2ea020 100644
--- a/frontend/src/components/fields/InputField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -75,7 +75,7 @@ class InputField extends Component {
                                    aria-describedby={this.id} onChange={handler} {...inputProps}
                                    readOnly={this.props.readonly}/>
                         </div>
-                        {type !== "file" && value !== "" &&
+                        {type !== "file" && value !== "" && !this.props.readonly &&
                         <div className="field-clear">
                             <span onClick={() => handler(null)}>del</span>
                         </div>
diff --git a/frontend/src/components/objects/CopyLinkPopover.js b/frontend/src/components/objects/CopyLinkPopover.js
index fa9266f..b951603 100644
--- a/frontend/src/components/objects/CopyLinkPopover.js
+++ b/frontend/src/components/objects/CopyLinkPopover.js
@@ -37,10 +37,10 @@ class CopyLinkPopover extends Component {
     };
 
     render() {
-        const copyPopoverContent = <div style={{"width": "400px"}}>
+        const copyPopoverContent = <div style={{"width": "250px"}}>
             {this.state.copiedMessage ? <span><strong>Copied!</strong></span> :
                 <span>Click to <strong>copy</strong></span>}
-            <TextField readonly rows={1} value={this.props.value} textRef={this.copyTextarea}/>
+            <TextField readonly rows={2} value={this.props.value} textRef={this.copyTextarea}/>
         </div>;
 
         return (
diff --git a/frontend/src/components/pages/ConfigurationPage.js b/frontend/src/components/pages/ConfigurationPage.js
index 4f0ce21..8f9b68b 100644
--- a/frontend/src/components/pages/ConfigurationPage.js
+++ b/frontend/src/components/pages/ConfigurationPage.js
@@ -25,8 +25,10 @@ import ButtonField from "../fields/ButtonField";
 import CheckField from "../fields/CheckField";
 import InputField from "../fields/InputField";
 import TextField from "../fields/TextField";
+import Header from "../Header";
 import LinkPopover from "../objects/LinkPopover";
 import "../panels/common.scss";
+import "./common.scss";
 import "./ConfigurationPage.scss";
 
 class ConfigurationPage extends Component {
@@ -113,9 +115,13 @@ class ConfigurationPage extends Component {
         </tr>);
 
         return (
-            <div className="configuration-page">
-                <div className="pane">
-                    <div className="pane-container">
+            <div className="page configuration-page">
+                <div className="page-header">
+                    <Header />
+                </div>
+
+                <div className="page-content">
+                    <div className="pane-container configuration-pane">
                         <div className="pane-section">
                             <div className="section-header">
                                 <span className="api-request">POST /setup</span>
diff --git a/frontend/src/components/pages/ConfigurationPage.scss b/frontend/src/components/pages/ConfigurationPage.scss
index 4509865..4254547 100644
--- a/frontend/src/components/pages/ConfigurationPage.scss
+++ b/frontend/src/components/pages/ConfigurationPage.scss
@@ -1,18 +1,30 @@
 @import "../../colors";
 
 .configuration-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
   background-color: $color-primary-0;
 
-  .pane {
-    flex-basis: 900px;
-    margin-bottom: 200px;
+  .header-title {
+    margin: 50px auto;
   }
 
-  .pane-container {
-    padding-bottom: 1px;
+  .configuration-pane {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    padding-top: 100px;
+
+    .section-content {
+      background-color: $color-primary-3;
+      margin-top: 15px;
+    }
+
+    .section-table table {
+      background-color: red !important;
+    }
+
+    .section-footer {
+      background-color: $color-primary-3;
+    }
   }
 }
+
diff --git a/frontend/src/components/pages/MainPage.js b/frontend/src/components/pages/MainPage.js
index a542e3f..c4dcd20 100644
--- a/frontend/src/components/pages/MainPage.js
+++ b/frontend/src/components/pages/MainPage.js
@@ -16,7 +16,7 @@
  */
 
 import React, {Component} from "react";
-import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
+import {Route, Switch} from "react-router-dom";
 import Filters from "../dialogs/Filters";
 import Header from "../Header";
 import Connections from "../panels/ConnectionsPane";
@@ -42,34 +42,32 @@ class MainPage extends Component {
 
         return (
             <div className="page main-page">
-                <Router>
-                    <div className="page-header">
-                        <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/>
-                    </div>
-
-                    <div className="page-content">
-                        <div className="pane connections-pane">
-                            <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
-                        </div>
-                        <div className="pane details-pane">
-                            <Switch>
-                                <Route path="/searches" children={<SearchPane/>}/>
-                                <Route path="/pcaps" children={<PcapsPane/>}/>
-                                <Route path="/rules" children={<RulesPane/>}/>
-                                <Route path="/services" children={<ServicesPane/>}/>
-                                <Route exact path="/connections/:id"
-                                       children={<StreamsPane connection={this.state.selectedConnection}/>}/>
-                                <Route children={<MainPane version={this.props.version}/>}/>
-                            </Switch>
-                        </div>
+                <div className="page-header">
+                    <Header onOpenFilters={() => this.setState({filterWindowOpen: true})} configured={true}/>
+                </div>
 
-                        {modal}
+                <div className="page-content">
+                    <div className="pane connections-pane">
+                        <Connections onSelected={(c) => this.setState({selectedConnection: c})}/>
                     </div>
-
-                    <div className="page-footer">
-                        <Timeline/>
+                    <div className="pane details-pane">
+                        <Switch>
+                            <Route path="/searches" children={<SearchPane/>}/>
+                            <Route path="/pcaps" children={<PcapsPane/>}/>
+                            <Route path="/rules" children={<RulesPane/>}/>
+                            <Route path="/services" children={<ServicesPane/>}/>
+                            <Route exact path="/connections/:id"
+                                   children={<StreamsPane connection={this.state.selectedConnection}/>}/>
+                            <Route children={<MainPane version={this.props.version}/>}/>
+                        </Switch>
                     </div>
-                </Router>
+
+                    {modal}
+                </div>
+
+                <div className="page-footer">
+                    <Timeline/>
+                </div>
             </div>
         );
     }
diff --git a/frontend/src/components/panels/ConnectionsPane.js b/frontend/src/components/panels/ConnectionsPane.js
index 457c249..6418b3e 100644
--- a/frontend/src/components/panels/ConnectionsPane.js
+++ b/frontend/src/components/panels/ConnectionsPane.js
@@ -226,11 +226,11 @@ class ConnectionsPane extends Component {
     }
 
     loadRules = async () => {
-        return backend.get("/api/rules").then(res => this.setState({rules: res.json}));
+        return backend.get("/api/rules").then((res) => this.setState({rules: res.json}));
     };
 
     loadServices = async () => {
-        return backend.get("/api/services").then(res => this.setState({services: res.json}));
+        return backend.get("/api/services").then((res) => this.setState({services: res.json}));
     };
 
     render() {
diff --git a/frontend/src/components/panels/SearchPane.js b/frontend/src/components/panels/SearchPane.js
index 4c9f229..4ef5632 100644
--- a/frontend/src/components/panels/SearchPane.js
+++ b/frontend/src/components/panels/SearchPane.js
@@ -236,13 +236,13 @@ class SearchPane extends Component {
                                 })}
                                           name="terms" min={3} inline allowNew={true}
                                           readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
-                                          onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map(t => t.name))}/>
-                                <TagField tags={(options["text_search"]["excluded_terms"] || []).map(t => {
+                                          onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map((t) => t.name))}/>
+                                <TagField tags={(options["text_search"]["excluded_terms"] || []).map((t) => {
                                     return {name: t};
                                 })}
                                           name="excluded_terms" min={3} inline allowNew={true}
                                           readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
-                                          onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map(t => t.name))}/>
+                                          onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map((t) => t.name))}/>
 
                                 <span className="exclusive-separator">or</span>
 
diff --git a/rules_manager.go b/rules_manager.go
index a6d969f..5d6cded 100644
--- a/rules_manager.go
+++ b/rules_manager.go
@@ -24,6 +24,7 @@ import (
 	"github.com/flier/gohs/hyperscan"
 	"github.com/go-playground/validator/v10"
 	log "github.com/sirupsen/logrus"
+	"sort"
 	"sync"
 	"time"
 )
@@ -213,6 +214,10 @@ func (rm *rulesManagerImpl) GetRules() []Rule {
 		rules = append(rules, rule)
 	}
 
+	sort.Slice(rules, func(i, j int) bool {
+		return rules[i].ID.Timestamp().Before(rules[j].ID.Timestamp())
+	})
+
 	return rules
 }
 
-- 
cgit v1.2.3-70-g09d2