diff options
Diffstat (limited to 'web/react/components/access_history_modal.jsx')
| -rw-r--r-- | web/react/components/access_history_modal.jsx | 64 |
1 files changed, 39 insertions, 25 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index 462f046f6..16768a119 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -3,7 +3,8 @@ var UserStore = require('../stores/user_store.jsx'); var AsyncClient = require('../utils/async_client.jsx'); -var Utils = require('../utils/utils.jsx'); +var LoadingScreen = require('./loading_screen.jsx'); +var utils = require('../utils/utils.jsx'); function getStateFromStoresForAudits() { return { @@ -14,23 +15,28 @@ function getStateFromStoresForAudits() { module.exports = React.createClass({ componentDidMount: function() { UserStore.addAuditsChangeListener(this._onChange); - AsyncClient.getAudits(); + $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) { + AsyncClient.getAudits(); + }); var self = this; $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { - self.setState({ moreInfo: [] }); + self.setState({moreInfo: []}); }); }, componentWillUnmount: function() { UserStore.removeAuditsChangeListener(this._onChange); }, _onChange: function() { - this.setState(getStateFromStoresForAudits()); + var newState = getStateFromStoresForAudits(); + if (!utils.areStatesEqual(newState.audits, this.state.audits)) { + this.setState(newState); + } }, handleMoreInfo: function(index) { var newMoreInfo = this.state.moreInfo; newMoreInfo[index] = true; - this.setState({ moreInfo: newMoreInfo }); + this.setState({moreInfo: newMoreInfo}); }, getInitialState: function() { var initialState = getStateFromStoresForAudits(); @@ -51,24 +57,28 @@ module.exports = React.createClass({ newDate = (<div> {currentHistoryDate.toDateString()} </div>); } + if (!currentAudit.session_id && currentAudit.action.search('/users/login') !== -1) { + currentAudit.session_id = 'N/A (Login attempt)'; + } + accessList[i] = ( - <div className="access-history__table"> - <div className="access__date">{newDate}</div> - <div className="access__report"> - <div className="report__time">{newHistoryDate.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'})}</div> - <div className="report__info"> - <div>{"IP: " + currentAudit.ip_address}</div> - { this.state.moreInfo[i] ? + <div className='access-history__table'> + <div className='access__date'>{newDate}</div> + <div className='access__report'> + <div className='report__time'>{newHistoryDate.toLocaleTimeString(navigator.language, {hour: '2-digit', minute: '2-digit'})}</div> + <div className='report__info'> + <div>{'IP: ' + currentAudit.ip_address}</div> + {this.state.moreInfo[i] ? <div> - <div>{"Session ID: " + currentAudit.session_id}</div> - <div>{"URL: " + currentAudit.action.replace("/api/v1", "")}</div> + <div>{'Session ID: ' + currentAudit.session_id}</div> + <div>{'URL: ' + currentAudit.action.replace(/\/api\/v[1-9]/, '')}</div> </div> : - <a href="#" className="theme" onClick={this.handleMoreInfo.bind(this, i)}>More info</a> + <a href='#' className='theme' onClick={this.handleMoreInfo.bind(this, i)}>More info</a> } </div> {i < this.state.audits.length - 1 ? - <div className="divider-light"/> + <div className='divider-light'/> : null } @@ -79,17 +89,21 @@ module.exports = React.createClass({ return ( <div> - <div className="modal fade" ref="modal" id="access-history" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog modal-lg"> - <div className="modal-content"> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" id="myModalLabel">Access History</h4> + <div className='modal fade' ref='modal' id='access-history' tabIndex='-1' role='dialog' aria-hidden='true'> + <div className='modal-dialog modal-lg'> + <div className='modal-content'> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> + <h4 className='modal-title' id='myModalLabel'>Access History</h4> </div> - <div ref="modalBody" className="modal-body"> - <form role="form"> - { accessList } + <div ref='modalBody' className='modal-body'> + {!this.state.audits.loading ? + <form role='form'> + {accessList} </form> + : + <LoadingScreen /> + } </div> </div> </div> |