126 lines
4.1 KiB
JavaScript
126 lines
4.1 KiB
JavaScript
/*
|
|
* Copyright 2014 Mirantis, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License"); you may
|
|
* not use this file except in compliance with the License. You may obtain
|
|
* a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
* License for the specific language governing permissions and limitations
|
|
* under the License.
|
|
**/
|
|
import _ from 'underscore';
|
|
import i18n from 'i18n';
|
|
import React from 'react';
|
|
import utils from 'utils';
|
|
import models from 'models';
|
|
import {ShowNodeInfoDialog} from 'views/dialogs';
|
|
import {backboneMixin} from 'component_mixins';
|
|
|
|
var NotificationsPage, Notification;
|
|
|
|
NotificationsPage = React.createClass({
|
|
mixins: [backboneMixin('notifications')],
|
|
statics: {
|
|
title: i18n('notifications_page.title'),
|
|
navbarActiveElement: null,
|
|
breadcrumbsPath: [['home', '#'], 'notifications'],
|
|
fetchData() {
|
|
var notifications = app.notifications;
|
|
return notifications.fetch().then(() =>
|
|
({notifications: notifications})
|
|
);
|
|
}
|
|
},
|
|
checkDateIsToday(date) {
|
|
var today = new Date();
|
|
var day = _.padLeft(today.getDate(), 2, '0');
|
|
var month = _.padLeft(today.getMonth() + 1, 2, '0');
|
|
return [day, month, today.getFullYear()].join('-') === date;
|
|
},
|
|
render() {
|
|
var notificationGroups = this.props.notifications.groupBy('date');
|
|
return (
|
|
<div className='notifications-page'>
|
|
<div className='page-title'>
|
|
<h1 className='title'>{i18n('notifications_page.title')}</h1>
|
|
</div>
|
|
<div className='content-box'>
|
|
{_.map(notificationGroups, (notifications, date) => {
|
|
return (
|
|
<div className='row notification-group' key={date}>
|
|
<div className='title col-xs-12'>
|
|
{this.checkDateIsToday(date) ? i18n('notifications_page.today') : date}
|
|
</div>
|
|
{_.map(notifications, (notification) => {
|
|
return <Notification
|
|
key={notification.id}
|
|
notification={notification}
|
|
/>;
|
|
})}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
Notification = React.createClass({
|
|
mixins: [backboneMixin('notification')],
|
|
showNodeInfo(id) {
|
|
var node = new models.Node({id: id});
|
|
node.fetch();
|
|
ShowNodeInfoDialog.show({node: node});
|
|
},
|
|
markAsRead() {
|
|
var notification = this.props.notification;
|
|
notification.toJSON = () => notification.pick('id', 'status');
|
|
notification.save({status: 'read'});
|
|
},
|
|
onNotificationClick() {
|
|
if (this.props.notification.get('status') == 'unread') {
|
|
this.markAsRead();
|
|
}
|
|
var nodeId = this.props.notification.get('node_id');
|
|
if (nodeId) {
|
|
this.showNodeInfo(nodeId);
|
|
}
|
|
},
|
|
render() {
|
|
var topic = this.props.notification.get('topic');
|
|
var notificationClasses = {
|
|
'col-xs-12 notification': true,
|
|
'text-danger': topic == 'error',
|
|
'text-warning': topic == 'warning',
|
|
unread: this.props.notification.get('status') == 'unread'
|
|
};
|
|
var iconClass = {
|
|
error: 'glyphicon-exclamation-sign',
|
|
warning: 'glyphicon-warning-sign',
|
|
discover: 'glyphicon-bell'
|
|
}[topic] || 'glyphicon-info-sign';
|
|
return (
|
|
<div className={utils.classNames(notificationClasses)} onClick={this.onNotificationClick}>
|
|
<div className='notification-time'>{this.props.notification.get('time')}</div>
|
|
<div className='notification-type'><i className={'glyphicon ' + iconClass} /></div>
|
|
<div className='notification-message'>
|
|
<span
|
|
className={this.props.notification.get('node_id') && 'btn btn-link'}
|
|
dangerouslySetInnerHTML={{
|
|
__html: utils.urlify(this.props.notification.escape('message'))
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
export default NotificationsPage;
|