pbca26
8 years ago
45 changed files with 40 additions and 1637 deletions
@ -1,61 +0,0 @@ |
|||
import { LOG_GUI_HTTP } from '../storeType'; |
|||
import { triggerToaster } from '../actionCreators'; |
|||
import Config from '../../config'; |
|||
|
|||
export function logGuiHttp(payload) { |
|||
return dispatch => { |
|||
dispatch(guiLogState(payload)); |
|||
|
|||
// disabled for now
|
|||
/*return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/guilog`, {
|
|||
method: 'POST', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
body: JSON.stringify(payload), |
|||
}) |
|||
.catch(function(error) { |
|||
console.log(error); |
|||
dispatch(triggerToaster('logGuiHttp', 'Error', 'error')); |
|||
}) |
|||
.then(response => response.json())*/ |
|||
} |
|||
} |
|||
|
|||
export function getAgamaLog(type) { |
|||
return dispatch => { |
|||
return fetch(`http://127.0.0.1:${Config.agamaPort}/shepherd/getlog?type=${type}`, { |
|||
method: 'GET', |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
}, |
|||
}) |
|||
.catch(function(error) { |
|||
console.log(error); |
|||
dispatch( |
|||
triggerToaster( |
|||
'getAgamaLog', |
|||
'Error', |
|||
'error' |
|||
) |
|||
); |
|||
}) |
|||
.then(response => response.json()) |
|||
} |
|||
} |
|||
|
|||
export function guiLogState(logData) { |
|||
return { |
|||
type: LOG_GUI_HTTP, |
|||
timestamp: logData.timestamp, |
|||
log: { |
|||
timestamp: logData.timestamp, |
|||
function: logData.function, |
|||
httpMethod: logData.type, |
|||
url: logData.url, |
|||
payload: logData.payload, |
|||
status: logData.status, |
|||
response: logData.response, |
|||
} |
|||
} |
|||
} |
|||
@ -1,122 +0,0 @@ |
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { sortByDate } from '../../../util/sort'; |
|||
import Config from '../../../config'; |
|||
import { |
|||
NotificationsByTypeRender, |
|||
NotificationsModalRender, |
|||
NotificationsRender |
|||
} from './notifications.render'; |
|||
|
|||
class Notifications extends React.Component { |
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
displayModal: false, |
|||
calls: { |
|||
total: 0, |
|||
error: 0, |
|||
success: 0, |
|||
pending: 0, |
|||
}, |
|||
activeTab: 2, |
|||
guiLog: null, |
|||
debug: Config.debug, |
|||
}; |
|||
this.toggleNotificationsModal = this.toggleNotificationsModal.bind(this); |
|||
} |
|||
|
|||
openTab(tab) { |
|||
this.setState(Object.assign({}, this.state, { |
|||
activeTab: tab, |
|||
})); |
|||
} |
|||
|
|||
componentWillReceiveProps(props) { |
|||
// get total number of calls per type
|
|||
if (this.props.Dashboard && |
|||
this.props.Dashboard.guiLog) { |
|||
const _guiLog = this.props.Dashboard.guiLog; |
|||
let _callsLength = { |
|||
total: Object.keys(_guiLog).length, |
|||
error: 0, |
|||
success: 0, |
|||
pending: 0, |
|||
} |
|||
let guiLogToArray = []; |
|||
|
|||
for (let timestamp in _guiLog) { |
|||
guiLogToArray.push(_guiLog[timestamp]); |
|||
_callsLength[_guiLog[timestamp].status]++; |
|||
} |
|||
|
|||
this.setState(Object.assign({}, this.state, { |
|||
calls: { |
|||
total: _callsLength.total, |
|||
error: _callsLength.error, |
|||
success: _callsLength.success, |
|||
pending: _callsLength.pending, |
|||
}, |
|||
guiLog: guiLogToArray, |
|||
})); |
|||
} |
|||
} |
|||
|
|||
renderNotificationsByType(type) { |
|||
// get total number of calls per type
|
|||
if (this.state.guiLog && |
|||
this.state.guiLog.length) { |
|||
let _guiLog = this.state.guiLog; |
|||
let items = []; |
|||
_guiLog = sortByDate(_guiLog); |
|||
|
|||
for (let i = 0; i < _guiLog.length; i++) { |
|||
if (_guiLog[i].status === type) { |
|||
const _logItem = _guiLog[i]; |
|||
|
|||
items.push( |
|||
NotificationsByTypeRender.call( |
|||
this, |
|||
_logItem, |
|||
type, |
|||
i |
|||
) |
|||
); |
|||
} |
|||
} |
|||
|
|||
return items; |
|||
} |
|||
} |
|||
|
|||
renderNotificationsModal() { |
|||
if (this.state.displayModal) { |
|||
return NotificationsModalRender.call(this); |
|||
} |
|||
|
|||
return null; |
|||
} |
|||
|
|||
toggleNotificationsModal() { |
|||
this.setState(Object.assign({}, this.state, { |
|||
displayModal: !this.state.displayModal, |
|||
})); |
|||
} |
|||
|
|||
render() { |
|||
return NotificationsRender.call(this); |
|||
} |
|||
} |
|||
|
|||
const mapStateToProps = (state) => { |
|||
return { |
|||
Dashboard: { |
|||
guiLog: state.Dashboard.guiLog, |
|||
activeHandle: state.Dashboard.activeHandle, |
|||
} |
|||
}; |
|||
|
|||
}; |
|||
|
|||
export default connect(mapStateToProps)(Notifications); |
|||
|
|||
@ -1,116 +0,0 @@ |
|||
import React from 'react'; |
|||
import { |
|||
secondsToString |
|||
} from '../../../util/time'; |
|||
import { translate } from '../../../translate/translate'; |
|||
|
|||
export const NotificationsByTypeRender = function(logItem, type, index) { |
|||
return ( |
|||
<div key={ logItem.timestamp }> |
|||
<div>{ index + 1 }.</div> |
|||
<div> |
|||
<strong>Time:</strong> { secondsToString(logItem.timestamp, true, true) } |
|||
</div> |
|||
<div> |
|||
<strong>GUI Function:</strong> { logItem.function } |
|||
</div> |
|||
<div> |
|||
<strong>HTTP:</strong> { logItem.httpMethod.toUpperCase() } |
|||
</div> |
|||
<div> |
|||
<strong>URL:</strong> { logItem.url } |
|||
</div> |
|||
<div> |
|||
<strong>Payload:</strong> { JSON.stringify(logItem.payload, null, '\t') } |
|||
</div> |
|||
<div className={ type !== 'pending' ? '' : 'hide' }> |
|||
<strong>Response:</strong> { JSON.stringify(logItem.response, null, '\t') } |
|||
</div> |
|||
<hr /> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export const NotificationsModalRender = function() { |
|||
return ( |
|||
<div onKeyDown={ (event) => this.handleKeydown(event) }> |
|||
<div className="modal show notifications-modal"> |
|||
<div className="modal-dialog modal-center modal-lg"> |
|||
<div className="modal-content"> |
|||
<div className="modal-body modal-body-container"> |
|||
<div className="panel nav-tabs-horizontal"> |
|||
<ul className="nav nav-tabs nav-tabs-line"> |
|||
<li className={ this.state.activeTab === 0 ? 'active' : 'pointer' }> |
|||
<a onClick={ () => this.openTab(0) }> |
|||
<i className="icon fa fa-thumbs-o-up"></i> Success ({ this.state.calls.success }) |
|||
</a> |
|||
</li> |
|||
<li className={ this.state.activeTab === 1 ? 'active' : 'pointer' }> |
|||
<a onClick={ () => this.openTab(1) }> |
|||
<i className="icon fa fa-exclamation-triangle"></i> Error ({ this.state.calls.error }) |
|||
</a> |
|||
</li> |
|||
<li className={ this.state.activeTab === 2 ? 'active' : 'pointer' }> |
|||
<a onClick={ () => this.openTab(2) }> |
|||
<i className="icon fa fa-clock-o"></i> Pending ({ this.state.calls.pending }) |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
<div className="panel-body panel-body-container"> |
|||
<div className="tab-content"> |
|||
<div className={ 'tab-pane' + (this.state.activeTab === 0 ? ' active' : '') }> |
|||
{ this.renderNotificationsByType('success') } |
|||
</div> |
|||
<div className={ 'tab-pane' + (this.state.activeTab === 1 ? ' active' : '') }> |
|||
{ this.renderNotificationsByType('error') } |
|||
</div> |
|||
<div className={ 'tab-pane' + (this.state.activeTab === 2 ? ' active' : '') }> |
|||
{ this.renderNotificationsByType('pending') } |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="modal-footer"> |
|||
<button |
|||
type="button" |
|||
className="btn btn-default" |
|||
onClick={ this.toggleNotificationsModal }> |
|||
{ translate('INDEX.CLOSE') } |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="modal-backdrop show in"></div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export const NotificationsRender = function() { |
|||
return ( |
|||
<div> |
|||
<div |
|||
className={ 'notifications-badge' + (this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? ' stick-to-top' : '') } |
|||
onClick={ this.state.debug ? this.toggleNotificationsModal : null }> |
|||
<span className={ this.state.debug ? 'badge success' : 'hide' }> |
|||
{ this.state.calls.success } |
|||
</span> |
|||
<span className={ this.state.debug ? 'badge error' : 'hide' }> |
|||
{ this.state.calls.error } |
|||
</span> |
|||
<span className={ this.state.debug ? 'badge pending' : 'hide' }> |
|||
{ this.state.calls.pending } |
|||
</span> |
|||
<div className={ 'spinner' + (this.state.calls.pending === 0 ? ' spinner-hide' : '') }> |
|||
<div className="rect1"></div> |
|||
<div className="rect2"></div> |
|||
<div className="rect3"></div> |
|||
<div className="rect4"></div> |
|||
<div className="rect5"></div> |
|||
</div> |
|||
</div> |
|||
{ this.renderNotificationsModal() } |
|||
</div> |
|||
); |
|||
}; |
|||
@ -1,26 +0,0 @@ |
|||
import { |
|||
SERVICE_ERROR |
|||
} from '../actions/storeType'; |
|||
|
|||
export function Errors(state = { |
|||
errors: {}, |
|||
}, action) { |
|||
switch (action.type) { |
|||
case SERVICE_ERROR: |
|||
let _errors = Object.assign({}, state); |
|||
|
|||
if (_errors[action.apiMethod]) { |
|||
_errors[action.apiMethod]++; |
|||
} else { |
|||
_errors[action.apiMethod] = 1; |
|||
} |
|||
|
|||
return Object.assign({}, state, { |
|||
errors: _errors, |
|||
}); |
|||
default: |
|||
return state; |
|||
} |
|||
} |
|||
|
|||
export default Errors; |
|||
Loading…
Reference in new issue