Frontend to jsx

1 files changed, 147 insertions, 0 deletions

diff --git a/frontend/src/components/Notifications.jsx b/frontend/src/components/Notifications.jsx
new file mode 100644
index 0000000..5afdb7b
--- /dev/null
+++ b/frontend/src/components/Notifications.jsx
@@ -0,0 +1,147 @@
+/*
+ * 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/>.
+ */
+
+import React, { Component } from "react";
+import dispatcher from "../dispatcher";
+import { randomClassName } from "../utils";
+import "./Notifications.scss";
+import _ from "lodash";
+import classNames from "classnames";
+
+class Notifications extends Component {
+  state = {
+    notifications: [],
+    closedNotifications: [],
+  };
+
+  componentDidMount() {
+    dispatcher.register("notifications", this.handleNotifications);
+  }
+
+  componentWillUnmount() {
+    dispatcher.unregister(this.handleNotifications);
+  }
+
+  handleNotifications = (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);
+      case "pcap.completed":
+        n.title = "new pcap analyzed";
+        n.description = `${n.message["processed_packets"]} packets processed`;
+        n.variant = "blue";
+        return this.pushNotification(n);
+      case "timeline.range.large":
+        n.title = "timeline cropped";
+        n.description = `the maximum range is 24h`;
+        n.variant = "red";
+        return this.pushNotification(n);
+      default:
+        return null;
+    }
+  };
+
+  pushNotification = (notification) => {
+    const notifications = this.state.notifications;
+    notification.id = randomClassName();
+    notifications.push(notification);
+    this.setState({ notifications });
+    setTimeout(() => {
+      const notifications = this.state.notifications;
+      notification.open = true;
+      this.setState({ notifications });
+    }, 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 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 });
+    };
+  };
+
+  render() {
+    return (
+      <div className="notifications">
+        <div className="notifications-list">
+          {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
+                  key={n.id}
+                  className={classNames(notificationClassnames)}
+                  onClick={n.onClick}
+                >
+                  <h3 className="notification-title">{n.title}</h3>
+                  <pre className="notification-description">
+                    {n.description}
+                  </pre>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Notifications;