Add MainPane

1 files changed, 67 insertions, 32 deletions

diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index 1017a42..ad681a2 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -30,49 +30,84 @@ class Notifications extends Component {
     };
 
     componentDidMount() {
-        dispatcher.register("notifications", notification => {
+        dispatcher.register("notifications", n => this.notificationHandler(n));
+    }
+
+    notificationHandler = (n) => {
+        switch (n.event) {
+            case "connected":
+                n.title = "connected";
+                n.description = `number of active clients: ${n.message["connected_clients"]}`;
+                return this.pushNotification(n);
+            case "services.edit":
+                n.title = "services updated";
+                n.description = `updated "${n.message["name"]}" on port ${n.message["port"]}`;
+                n.variant = "blue";
+                return this.pushNotification(n);
+            case "rules.new":
+                n.title = "rules updated";
+                n.description = `new rule added: ${n.message["name"]}`;
+                n.variant = "green";
+                return this.pushNotification(n);
+            case "rules.edit":
+                n.title = "rules updated";
+                n.description = `existing rule updated: ${n.message["name"]}`;
+                n.variant = "blue";
+                return this.pushNotification(n);
+            default:
+                return;
+        }
+    };
+
+    pushNotification = (notification) => {
+        const notifications = this.state.notifications;
+        notifications.push(notification);
+        this.setState({notifications});
+        setTimeout(() => {
             const notifications = this.state.notifications;
-            notifications.push(notification);
+            notification.open = true;
             this.setState({notifications});
-            setTimeout(() => {
-                const notifications = this.state.notifications;
-                notification.open = true;
-                this.setState({notifications});
-            }, 100);
+        }, 100);
 
-            const hideHandle = setTimeout(() => {
-                const notifications = _.without(this.state.notifications, notification);
-                const closedNotifications = this.state.closedNotifications.concat([notification]);
-                notification.closed = true;
-                this.setState({notifications, closedNotifications});
-            }, 5000);
+        const hideHandle = setTimeout(() => {
+            const notifications = _.without(this.state.notifications, notification);
+            const closedNotifications = this.state.closedNotifications.concat([notification]);
+            notification.closed = true;
+            this.setState({notifications, closedNotifications});
+        }, 5000);
 
-            const removeHandle = setTimeout(() => {
-                const closedNotifications = _.without(this.state.closedNotifications, notification);
-                this.setState({closedNotifications});
-            }, 6000);
+        const removeHandle = setTimeout(() => {
+            const closedNotifications = _.without(this.state.closedNotifications, notification);
+            this.setState({closedNotifications});
+        }, 6000);
 
-            notification.onClick = () => {
-                clearTimeout(hideHandle);
-                clearTimeout(removeHandle);
-                const notifications = _.without(this.state.notifications, notification);
-                this.setState({notifications});
-            };
-        });
-    }
+        notification.onClick = () => {
+            clearTimeout(hideHandle);
+            clearTimeout(removeHandle);
+            const notifications = _.without(this.state.notifications, notification);
+            this.setState({notifications});
+        };
+    };
 
     render() {
         return (
             <div className="notifications">
                 <div className="notifications-list">
                     {
-                        this.state.closedNotifications.concat(this.state.notifications).map(n =>
-                            <div className={classNames("notification", {"notification-closed": n.closed},
-                                {"notification-open": n.open})} onClick={n.onClick}>
-                                <h3 className="notification-title">{n.event}</h3>
-                                <span className="notification-description">{JSON.stringify(n.message)}</span>
-                            </div>
-                        )
+                        this.state.closedNotifications.concat(this.state.notifications).map(n => {
+                            const notificationClassnames = {
+                                "notification": true,
+                                "notification-closed": n.closed,
+                                "notification-open": n.open
+                            };
+                            if (n.variant) {
+                                notificationClassnames[`notification-${n.variant}`] = true;
+                            }
+                            return <div className={classNames(notificationClassnames)} onClick={n.onClick}>
+                                <h3 className="notification-title">{n.title}</h3>
+                                <pre className="notification-description">{n.description}</pre>
+                            </div>;
+                        })
                     }
                 </div>
             </div>