Adding Logs for Request Status in Open Event Web app
Open Event Web app handles multiple requests from the client using task queue, every request from client is put in the job queue and handled one at a time. The only log shown to client was either ‘waiting’ or ‘processing’, so we need to show additional logs like request waiting number as well. The logs are shown in real time using sockets.
How to add logs?
The logs of any request are shown to the client in real time using socket emit and listener events. Whenever any data is to be displayed inside the logs, the server emits an event with the data. The socket listens to the event and appends the data received to the logs section of the view.
Creating helper for emitting data
The helper function named ‘logger’ is created which emits the event ‘buildLog’ whenever it is called with the data being passed as arguments. Every time a message is passed to this procedure, it adds it to array of objects containing the data.
'use strict'; // eslint-disable-next-line no-var var exports = module.exports = {}; const buildLog = []; let obj = {}; let emit, largeMsg, message; exports.addLog = function(type, smallMessage, socket, largeMessage) { if (typeof largeMessage === 'undefined') { largeMsg = smallMessage; } buildLog.push({'type': type, 'smallMessage': smallMessage, 'largeMessage': largeMsg}); message = largeMsg.toString(); obj = {'type': type, 'smallMessage': smallMessage, 'largeMessage': message}; emit = false; if (socket.constructor.name === 'Socket') { emit = true; } if (emit) { socket.emit('buildLog', obj); } };
Updating logs in real time
The helper created above emits the event ‘buildLog’, the socket on listening this event appends the data inside logs division with the data received from the helper while emitting the event.
socket.on('buildLog', function(data) { const spanElem = $('<span></span>'); // will contain the info about type of statement const spanMess = $('<span></span>'); // will contain the actual message const aElem = $('<button></button>'); // Button to view the detailed error log const divElem = $('
‘
); // Contain the detailed error log const paragraph = $('<p></p>'); // Contain the whole statement //Code for styling the logs division .... .... divElem.text(data.largeMessage); paragraph.append(aElem); paragraph.append(divElem); updateStatusAnimate(data.smallMessage, 200, 'red'); $('#btnGenerate').prop('disabled', false); $('input[ type = "radio" ]').attr('disabled', false); $('#email').prop('disabled', false); } $('#buildLog').append(paragraph); $('#buildLog').scrollTop($('#buildLog')[0].scrollHeight); }); });
Add request waiting number
Whenever a new request is received from the client the server emits the event ‘waiting’ if any other job is currently being processed. The helper above is used to add request waiting number to the logs.
const jobs = await queue.getJobs('waiting', {start: 0, end: 25}); const activeJob = await queue.getJobs('active', {start: 0, end: 25}); const jobIds = jobs.map((currJob) => currJob.id); if (jobIds.indexOf(currJobId) !== -1) { socket.emit('waiting'); logger.addLog('Info', 'Request waiting number: ' + (currJobId - activeJob[0].id), socket); }
Add status in logs
On listening the event named ‘waiting’ the status is updated to ‘waiting’ in the view and is shown to the client.
socket.on('waiting', function() { updateStatusAnimate('Request status: Waiting'); });
Update request waiting number
Whenever a job is started being processed from the queue, the waiting number of all the requests in the ready queue is updated. The socket connection for corresponding request is obtained from the main socket object(socketObj) which updates whenever a new request comes from the client.
const jobs = new Promise(function(resolve) { resolve(queue.getJobs('waiting', {start: 0, end: 25})); }); generator.createDistDir(job.data, socketObj[processId], done); jobs.then(function(waitingJobs) { waitingJobs.forEach(function(waitingJob) { logger.addLog('Info', 'Request waiting number: ' + (waitingJob.id - job.id), socketObj[waitingJob.id]); }); });
Resources
- Open Event Webapp Repository: https://github.com/fossasia/open-event-webapp
- Pull Request: https://github.com/fossasia/open-event-webapp/pull/1981
- Issue : https://github.com/fossasia/open-event-webapp/issues/1980
You must be logged in to post a comment.