2 files changed, 16 insertions, 9 deletions
diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index e0e942a..96f2235 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -23,6 +23,7 @@ import {dateTimeToTime, durationBetween, formatSize} from "../../utils";
 import ButtonField from "../fields/ButtonField";
 import LinkPopover from "./LinkPopover";
 import TextField from "../fields/TextField";
+import dispatcher from "../../dispatcher";
 
 const classNames = require('classnames');
 
@@ -99,7 +100,8 @@ class Connection extends Component {
                 <td>
                     <span className="connection-service">
                         <ButtonField small fullSpan color={serviceColor} name={serviceName}
-                                     onClick={() => this.props.addServicePortFilter(conn["port_dst"])}/>
+                                     onClick={() => dispatcher.dispatch("connections_filters",
+                                         {"service_port": conn["port_dst"].toString()})}/>
                     </span>
                 </td>
                 <td className="clickable" onClick={this.props.onSelected}>{conn["ip_src"]}</td>
diff --git a/frontend/src/components/objects/ConnectionMatchedRules.js b/frontend/src/components/objects/ConnectionMatchedRules.js
index 73d5c5d..92bde49 100644
--- a/frontend/src/components/objects/ConnectionMatchedRules.js
+++ b/frontend/src/components/objects/ConnectionMatchedRules.js
@@ -18,20 +18,25 @@
 import React, {Component} from 'react';
 import './ConnectionMatchedRules.scss';
 import ButtonField from "../fields/ButtonField";
+import dispatcher from "../../dispatcher";
+import {withRouter} from "react-router-dom";
 
 class ConnectionMatchedRules extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-        };
-    }
+    onMatchedRulesSelected = (id) => {
+        const params = new URLSearchParams(this.props.location.search);
+        const rules = params.getAll("matched_rules");
+        if (!rules.includes(id)) {
+            rules.push(id);
+            dispatcher.dispatch("connections_filters",{"matched_rules": rules});
+        }
+    };
 
     render() {
         const matchedRules = this.props.matchedRules.map(mr => {
             const rule = this.props.rules.find(r => r.id === mr);
-            return <ButtonField key={mr} onClick={() => this.props.addMatchedRulesFilter(rule.id)} name={rule.name}
-                                color={rule.color} small />;
+            return <ButtonField key={mr} onClick={() => this.onMatchedRulesSelected(rule.id)} name={rule.name}
+                                color={rule.color} small/>;
         });
 
         return (
@@ -43,4 +48,4 @@ class ConnectionMatchedRules extends Component {
     }
 }
 
-export default ConnectionMatchedRules;
+export default withRouter(ConnectionMatchedRules);