From d5f94b76986615b255b77b2a7b7ed336e5ad4838 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 7 Oct 2020 14:58:48 +0200
Subject: Implement notifications

---
 frontend/src/views/App.js           | 43 ++++++++++++++++------------
 frontend/src/views/Connections.js   | 57 ++++++++++++++++++++++++-------------
 frontend/src/views/Connections.scss |  3 +-
 frontend/src/views/Footer.js        | 20 ++++++-------
 4 files changed, 71 insertions(+), 52 deletions(-)

(limited to 'frontend/src/views')

diff --git a/frontend/src/views/App.js b/frontend/src/views/App.js
index 00d9110..c14b7f5 100644
--- a/frontend/src/views/App.js
+++ b/frontend/src/views/App.js
@@ -5,18 +5,22 @@ import MainPane from "../components/panels/MainPane";
 import Footer from "./Footer";
 import {BrowserRouter as Router} from "react-router-dom";
 import Filters from "./Filters";
-import backend from "../backend";
 import ConfigurationPane from "../components/panels/ConfigurationPane";
-import log from "../log";
+import Notifications from "../components/Notifications";
+import dispatcher from "../dispatcher";
 
 class App extends Component {
 
     state = {};
 
     componentDidMount() {
-        backend.get("/api/services").then(_ => {
-            log.debug("Caronte is already configured. Loading main..");
-            this.setState({configured: true});
+        dispatcher.register("notifications", payload => {
+            if (payload.event === "connected") {
+                this.setState({
+                    connected: true,
+                    configured: payload.message["is_configured"]
+                });
+            }
         });
 
         setInterval(() => {
@@ -36,19 +40,22 @@ class App extends Component {
 
         return (
             <div className="main">
-                <Router>
-                    <div className="main-header">
-                        <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/>
-                    </div>
-                    <div className="main-content">
-                        {this.state.configured ? <MainPane/> :
-                            <ConfigurationPane onConfigured={() => this.setState({configured: true})}/>}
-                        {modal}
-                    </div>
-                    <div className="main-footer">
-                        {this.state.configured && <Footer/>}
-                    </div>
-                </Router>
+                <Notifications/>
+                {this.state.connected &&
+                    <Router>
+                        <div className="main-header">
+                            <Header onOpenFilters={() => this.setState({filterWindowOpen: true})}/>
+                        </div>
+                        <div className="main-content">
+                            {this.state.configured ? <MainPane/> :
+                                <ConfigurationPane onConfigured={() => this.setState({configured: true})}/>}
+                            {modal}
+                        </div>
+                        <div className="main-footer">
+                            {this.state.configured && <Footer/>}
+                        </div>
+                    </Router>
+                }
             </div>
         );
     }
diff --git a/frontend/src/views/Connections.js b/frontend/src/views/Connections.js
index fe655b3..bd631a2 100644
--- a/frontend/src/views/Connections.js
+++ b/frontend/src/views/Connections.js
@@ -6,9 +6,9 @@ import {Redirect} from 'react-router';
 import {withRouter} from "react-router-dom";
 import backend from "../backend";
 import ConnectionMatchedRules from "../components/ConnectionMatchedRules";
-import dispatcher from "../globals";
 import log from "../log";
 import ButtonField from "../components/fields/ButtonField";
+import dispatcher from "../dispatcher";
 
 class Connections extends Component {
 
@@ -17,8 +17,6 @@ class Connections extends Component {
         connections: [],
         firstConnection: null,
         lastConnection: null,
-        flagRule: null,
-        rules: null,
         queryString: null
     };
 
@@ -41,14 +39,24 @@ class Connections extends Component {
             // TODO: scroll to initial connection
         }
 
-        dispatcher.register((payload) => {
-            if (payload.actionType === "timeline-update") {
-                this.connectionsListRef.current.scrollTop = 0;
-                this.loadConnections({
-                    started_after: Math.round(payload.from.getTime() / 1000),
-                    started_before: Math.round(payload.to.getTime() / 1000),
-                    limit: this.maxConnections
-                }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`));
+        dispatcher.register("timeline_updates", payload => {
+            this.connectionsListRef.current.scrollTop = 0;
+            this.loadConnections({
+                started_after: Math.round(payload.from.getTime() / 1000),
+                started_before: Math.round(payload.to.getTime() / 1000),
+                limit: this.maxConnections
+            }).then(() => log.info(`Loading connections between ${payload.from} and ${payload.to}`));
+        });
+
+        dispatcher.register("notifications", payload => {
+            if (payload.event === "rules.new" || payload.event === "rules.edit") {
+                this.loadRules().then(() => log.debug("Loaded connection rules after notification update"));
+            }
+        });
+
+        dispatcher.register("notifications", payload => {
+            if (payload.event === "services.edit") {
+                this.loadServices().then(() => log.debug("Services reloaded after notification update"));
             }
         });
     }
@@ -116,6 +124,13 @@ class Connections extends Component {
         }
 
         this.setState({loading: true});
+        if (!this.state.rules) {
+            await this.loadRules();
+        }
+        if (!this.state.services) {
+            await this.loadServices();
+        }
+
         let res = (await backend.get(`${url}?${urlParams}`)).json;
 
         let connections = this.state.connections;
@@ -154,28 +169,29 @@ class Connections extends Component {
             }
         }
 
-        let rules = this.state.rules;
-        if (rules == null) {
-            rules = (await backend.get("/api/rules")).json;
-        }
-
         this.setState({
             loading: false,
             connections: connections,
-            rules: rules,
             firstConnection: firstConnection,
             lastConnection: lastConnection
         });
 
         if (firstConnection != null && lastConnection != null) {
-            dispatcher.dispatch({
-                actionType: "connections-update",
+            dispatcher.dispatch("connection_updates", {
                 from: new Date(lastConnection["started_at"]),
                 to: new Date(firstConnection["started_at"])
             });
         }
     }
 
+    loadRules = async () => {
+        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}));
+    };
+
     render() {
         let redirect;
         let queryString = this.state.queryString !== null ? this.state.queryString : "";
@@ -222,7 +238,8 @@ class Connections extends Component {
                                                     selected={this.state.selected === c.id}
                                                     onMarked={marked => c.marked = marked}
                                                     onEnabled={enabled => c.hidden = !enabled}
-                                                    addServicePortFilter={this.addServicePortFilter}/>,
+                                                    addServicePortFilter={this.addServicePortFilter}
+                                                    services={this.state.services}/>,
                                     c.matched_rules.length > 0 &&
                                     <ConnectionMatchedRules key={c.id + "_m"} matchedRules={c.matched_rules}
                                                             rules={this.state.rules}
diff --git a/frontend/src/views/Connections.scss b/frontend/src/views/Connections.scss
index 9e2b6ba..de06096 100644
--- a/frontend/src/views/Connections.scss
+++ b/frontend/src/views/Connections.scss
@@ -3,7 +3,6 @@
 .connections-container {
   position: relative;
   height: 100%;
-  padding: 10px;
   background-color: $color-primary-3;
 
   .connections {
@@ -21,7 +20,7 @@
       top: 0;
       padding: 5px;
       border: none;
-      background-color: $color-primary-2;
+      background-color: $color-primary-3;
     }
 
     &:hover::-webkit-scrollbar-thumb {
diff --git a/frontend/src/views/Footer.js b/frontend/src/views/Footer.js
index ad1e4f7..dcf9cf8 100644
--- a/frontend/src/views/Footer.js
+++ b/frontend/src/views/Footer.js
@@ -13,9 +13,9 @@ import {
 import {TimeRange, TimeSeries} from "pondjs";
 import backend from "../backend";
 import ChoiceField from "../components/fields/ChoiceField";
-import dispatcher from "../globals";
 import {withRouter} from "react-router-dom";
 import log from "../log";
+import dispatcher from "../dispatcher";
 
 
 class Footer extends Component {
@@ -39,15 +39,12 @@ class Footer extends Component {
     componentDidMount() {
         const filteredPort = this.filteredPort();
         this.setState({filteredPort});
-        this.loadStatistics(this.state.metric, filteredPort).then(() =>
-            log.debug("Statistics loaded after mount"));
-
-        dispatcher.register((payload) => {
-            if (payload.actionType === "connections-update") {
-                this.setState({
-                    selection: new TimeRange(payload.from, payload.to),
-                });
-            }
+        this.loadStatistics(this.state.metric, filteredPort).then(() => log.debug("Statistics loaded after mount"));
+
+        dispatcher.register("connection_updates", payload => {
+            this.setState({
+                selection: new TimeRange(payload.from, payload.to),
+            });
         });
     }
 
@@ -109,8 +106,7 @@ class Footer extends Component {
             clearTimeout(this.selectionTimeout);
         }
         this.selectionTimeout = setTimeout(() => {
-            dispatcher.dispatch({
-                actionType: "timeline-update",
+            dispatcher.dispatch("timeline_updates", {
                 from: timeRange.begin(),
                 to: timeRange.end()
             });
-- 
cgit v1.2.3-70-g09d2