3 * Copyright 2016 RIFT.IO Inc
5 * Licensed under the Apache License, Version 2.0 (the "License");
6 * you may not use this file except in compliance with the License.
7 * You may obtain a copy of the License at
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Unless required by applicable law or agreed to in writing, software
12 * distributed under the License is distributed on an "AS IS" BASIS,
13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 * See the License for the specific language governing permissions and
15 * limitations under the License.
20 * EventCenter module to display a list of events from the system
21 * @module framework/widgets/skyquake_container/EventCenter
22 * @author Kiran Kashalkar <kiran.kashalkar@riftio.com>
26 import React from 'react';
27 import { Link } from 'react-router';
28 import Utils from 'utils/utils.js';
29 import Crouton from 'react-crouton';
30 import TreeView from 'react-treeview';
31 import _isEqual from 'lodash/isEqual';
32 import _merge from 'lodash/merge';
33 import _indexOf from 'lodash/indexOf';
34 import '../../../node_modules/react-treeview/react-treeview.css';
35 import './eventCenter.scss';
37 export default class EventCenter extends React.Component {
41 this.state.isOpen = false;
44 componentWillReceiveProps(props) {
47 let notificationList = sessionStorage.getItem('notificationList');
48 let latestNotification = sessionStorage.getItem('latestNotification');
50 if (props.newNotificationEvent && props.newNotificationMsg) {
51 if (latestNotification) {
52 latestNotification = JSON.parse(latestNotification);
53 if (!_isEqual(props.newNotificationMsg, latestNotification)) {
54 stateObject.newNotificationEvent = props.newNotificationEvent;
55 stateObject.newNotificationMsg = props.newNotificationMsg;
56 sessionStorage.setItem('latestNotification', JSON.stringify(stateObject.newNotificationMsg));
58 stateObject.newNotificationEvent = false;
59 stateObject.newNotificationMsg = null;
62 stateObject.newNotificationEvent = true;
63 stateObject.newNotificationMsg = props.newNotificationMsg;
64 sessionStorage.setItem('latestNotification', JSON.stringify(stateObject.newNotificationMsg));
67 stateObject.newNotificationEvent = false;
68 stateObject.newNotificationMsg = null;
71 if (notificationList) {
72 stateObject.notifications = _merge(notificationList, props.notifications);
74 stateObject.notifications = props.notifications;
76 sessionStorage.setItem('notifications', JSON.stringify(stateObject.notifications));
77 this.setState(stateObject);
80 newNotificationReset = () => {
82 newNotificationEvent: false
86 onClickToggleOpenClose(event) {
87 this.props.onToggle();
89 isOpen: !this.state.isOpen
92 constructTree(details) {
94 for (let key in details) {
95 if (typeof(details[key]) == "object") {
97 <TreeView key={key} nodeLabel={key}>
98 {this.constructTree(details[key])}
103 markup.push((<div key={key} className="info">{key} = {details[key].toString()}</div>));
109 getNotificationFields(notification) {
110 let notificationFields = {};
113 notificationFields.source = notification.source;
114 notificationFields.eventTime = notification.eventTime;
116 Object.keys(notification).map((notificationKey) => {
117 if (_indexOf(['source', 'eventTime'], notificationKey) == -1) {
118 notificationFields.eventKey = notificationKey;
119 notificationFields.details = notification[notificationFields.eventKey];
124 return notificationFields;
129 let displayNotifications = [];
130 let displayNotificationsTableHead = null;
132 if (this.state.notifications && this.state.notifications.length > 0) {
133 displayNotificationsTableHead = (
135 <tr key='header' className='header'>
136 <th className='source column'> Source Event Stream </th>
137 <th className='timestamp column'> Timestamp </th>
138 <th className='event column'> Event </th>
139 <th className='details column'> Details </th>
145 this.state.notifications && this.state.notifications.map((notification, notifIndex) => {
146 let notificationFields = {};
148 notificationFields = this.getNotificationFields(notification);
150 displayNotifications.push(
151 <tr key={notifIndex} className='notificationItem'>
152 <td className='source column'> {notificationFields.source} </td>
153 <td className='timestamp column'> {notificationFields.eventTime} </td>
154 <td className='event column'> {notificationFields.eventKey} </td>
155 <td className='details column'>
156 <TreeView key={notifIndex + '-detail'} nodeLabel='Event Details'>
157 {this.constructTree(notificationFields.details)}
164 let openedClassName = this.state.isOpen ? 'open' : 'closed';
166 <div className={'eventCenter ' + openedClassName}>
168 <div className='notification'>
171 message={this.getNotificationFields(this.state.newNotificationMsg).eventKey +
172 ' notification received. Check Event Center for more details.'}
174 hidden={!(this.state.newNotificationEvent && this.state.newNotificationMsg)}
175 onDismiss={this.newNotificationReset}
176 timeout={this.props.dismissTimeout}
179 <h1 className='title' data-open-close-icon={this.state.isOpen ? 'open' : 'closed'}
180 onClick={this.onClickToggleOpenClose.bind(this)}>
183 <div className='notificationListBody'>
184 <table className='notificationList'>
185 {displayNotificationsTableHead}
187 {displayNotifications}
198 EventCenter.defaultProps = {