Commit 25546afb authored by Maxime Chaillet's avatar Maxime Chaillet

auto refresh event list when the checkbox is clicked.

parent a176e28a
......@@ -85,7 +85,7 @@ class EventListMenu extends React.Component {
<EventListMenuButton text='PDF' glyph='download' tooltipText='Download as PDF' isEnabled={!(isNewEventVisible === undefined || isNewEventVisible === true || numberOfMatchingEventsFound === 0)} />
</NavItem>
<NavItem eventKey={5} className="logbookNavItem">
<NewlyAvailableEventsDialogue latestEvents={this.props.periodicdata} eventCountSinceLastRefresh={this.props.eventCountSinceLastRefresh} onIconClicked={this.props.getEvents} />
<NewlyAvailableEventsDialogue isEventListAutorefreshEnabled={this.props.isEventListAutorefreshEnabled} latestEvents={this.props.periodicdata} eventCountSinceLastRefresh={this.props.eventCountSinceLastRefresh} onIconClicked={this.props.getEvents} />
</NavItem>
</Nav>
......
......@@ -5,13 +5,23 @@ import { Glyphicon } from 'react-bootstrap';
class NewlyAvailableEventsDialogue extends React.Component {
render() {
let { eventCountSinceLastRefresh, onIconClicked, latestEvents } = this.props;
let newEventCountSinceLastRefresh = 0;
if (latestEvents && latestEvents.data && eventCountSinceLastRefresh) {
newEventCountSinceLastRefresh = (latestEvents.data.length < eventCountSinceLastRefresh) ? 0 : latestEvents.data.length - eventCountSinceLastRefresh
if (this.props.isEventListAutorefreshEnabled === true) {
return <div className='btn btn-sm' style={{ color: '#888888' }}> Auto refreshing ...</div>
}
else {
let { eventCountSinceLastRefresh, onIconClicked, latestEvents } = this.props;
let newEventCountSinceLastRefresh = 0;
if (latestEvents && latestEvents.data && eventCountSinceLastRefresh) {
newEventCountSinceLastRefresh = (latestEvents.data.length < eventCountSinceLastRefresh) ? 0 : latestEvents.data.length - eventCountSinceLastRefresh
}
if (newEventCountSinceLastRefresh > 0) {
return (<div className='btn btn-sm' style={{ color: '#888888' }}> {newEventCountSinceLastRefresh
} new log(s) arrived. <Glyphicon onClick={onIconClicked} glyph='refresh' /> </div>)
}
return null;
}
return (<div className='btn btn-sm' style={{ color: '#888888' }}> {newEventCountSinceLastRefresh
} new logs arrived. <Glyphicon onClick={onIconClicked} glyph='refresh' /> </div>)
}
}
......
......@@ -35,7 +35,9 @@ export function GUI_CONFIG() {
/* Default tag color used in the logbook when tag color is not set */
DEFAULT_TAG_COLOR: "#a6bded",
/* Whehter event list refreshed automaticcaly or not by default. */
/* Whether event list refreshed automatically or not by default. */
AUTOREFRESH_EVENTLIST: false,
/* the delay between 2 refreshments of event list. (in milliseconds)*/
AUTOREFRESH_DELAY: 3000,
}
}
\ No newline at end of file
......@@ -50,6 +50,7 @@ export class LogbookContainer extends React.Component {
this.isAppProperlyConfigured = this.isAppProperlyConfigured.bind(this);
this.onEventsReceptionFailure = this.onEventsReceptionFailure.bind(this);
this.onEventUpdated = this.onEventUpdated.bind(this);
this.onNewEventsReceived = this.onNewEventsReceived.bind(this);
this.onNewEventUploaded = this.onNewEventUploaded.bind(this);
this.onPageClicked = this.onPageClicked.bind(this);
this.reverseEventsSortingByCreationDate = this.reverseEventsSortingByCreationDate.bind(this);
......@@ -81,8 +82,9 @@ export class LogbookContainer extends React.Component {
<PeriodicRefresher
initialValue={this.state.pageEvents.length}
intervalInMilliSeconds={1000}
isEnabled={this.state.isEventListAutorefreshEnabled}
intervalInMilliSeconds={GUI_CONFIG().AUTOREFRESH_DELAY}
isEnabled={true}
onCallbackSuccess={this.onNewEventsReceived}
periodicCallback={(onSuccess, onFailure) => getEventsByInvestigationIdRequest(user.sessionId, investigationId, GUI_CONFIG().EVENTS_PER_DOWNLOAD, 0, selectionFilter.find, GUI_CONFIG().DEFAULT_SORTING_FILTER, onSuccess, onFailure)}>
<EventListMenu
availableTags={this.props.availableTags}
......@@ -196,7 +198,14 @@ export class LogbookContainer extends React.Component {
this.setState({ eventBeingEdited: event });
}
/**
* Callback triggered periodically by the periodicRefresher
*/
onNewEventsReceived() {
if (this.state.isEventListAutorefreshEnabled === true) {
this.getEvents(0, getSelectionFiltersBySearchCriteria(this.state.userSearchCriteria, this.state.view), true);
}
}
/** Callback function triggered when the user starts a new search
* @param {Array} searchCriteria the search criteria as provided by the search component
......
......@@ -9,7 +9,10 @@ class PeriodicRefresher extends React.Component {
data: this.props.initialValue
};
this.intervalId = null;
this.setRepetition = this.setRepetition.bind(this);
this.onSuccess = this.onSuccess.bind(this);
this.onFailure = this.onFailure.bind(this);
if (this.props.isEnabled === true) { this.setRepetition() };
}
......@@ -21,12 +24,16 @@ class PeriodicRefresher extends React.Component {
componentDidUpdate() {
if (this.props.isEnabled !== undefined) {
if (this.props.isEnabled === true) { this.setRepetition() }
else { clearInterval(this.intervalId) }
else {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
}
onSuccess(data) {
this.setState({ data: data })
this.props.onCallbackSuccess()
}
onFailure() {
......@@ -34,7 +41,9 @@ class PeriodicRefresher extends React.Component {
}
setRepetition() {
this.intervalId = setInterval(() => { return this.props.periodicCallback(this.onSuccess, this.onFailure) }, this.props.intervalInMilliSeconds);
if (this.intervalId === null) {
this.intervalId = setInterval(() => { return this.props.periodicCallback(this.onSuccess, this.onFailure) }, this.props.intervalInMilliSeconds);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment