diff options
Diffstat (limited to 'frontend/src/components/Notifications.jsx')
-rw-r--r-- | frontend/src/components/Notifications.jsx | 147 |
1 files changed, 0 insertions, 147 deletions
diff --git a/frontend/src/components/Notifications.jsx b/frontend/src/components/Notifications.jsx deleted file mode 100644 index 5afdb7b..0000000 --- a/frontend/src/components/Notifications.jsx +++ /dev/null @@ -1,147 +0,0 @@ -/* - * 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; |