Yaydoc, our automatic documentation generation and deployment project, at the crux of it consists of bash scripts. These bash scripts perform various actions, including documentation generation, deployment to Github and deployment to Heroku.
Since the inception of the User Interface of the Web UI, we have been spitting out the output of the bash script directly to the console output block without any filter. We understand that the output contains a lot of jargon that provides no essential information to the user. Hence, to improve the user experience of our platform, we decided to separate the Detailed logs and show only basic logs outlining the flow of the processes.
To implement this, we append all the logs to a unique file, sending only basic logs to stdout and stderr. Since we attend to store logs and display them in the console block of Web UI simultaneously we use the tee
command, piping it with echo commands.
function print_log { if [ -n “$LOGFILE” ]; then echo -e $1 | tee -a ${LOGFILE} else echo -e $1 fi }
${LOGFILE}
is a unique file that has the same name as the preview directory and the compressed repository. After storing the logs in the file, the contents of the file are outputted using the cat
command and is then shown to the user in a modal which is after the Detailed Logs button is clicked.
$(“#btnLogs”).click(function () { socket.emit(‘retrieve-detailed-logs’, data); .... }); socket.on(‘retrieve-detailed-logs’, function (data) { var process = spawn(‘cat’, [‘temp/’+data.email+’/’+data.uniqueId+’.txt’]); process.stdout.setEncoding(‘utf-8’); process.stdout.on(‘data’, function (data)) { socket.emit(‘file-content’, data); } });
To keep the indentation of the logs, we display the content inside the HTML pre tags. Along with displaying the detailed logs, we also let our two additional functionalities. These are ‘Copy to Clipboard’ and ‘Download as text file’. The ‘copy to clipboard’ functionality is achieved using the clipboard.js jQuery library while the `Download` functionality is achieved using res.download(file)
function of ExpressJS response.
socket.on(‘file-content’, function (data) { new Clipboard(‘#copy-button’); $(‘#detailed-logs’).html(data); $(‘#detailed-logs-modal’).modal(‘show’); });
Resources:
- https://clipboardjs.com – A modern approach to copy text to clipboard
- https://socket.io/ – The fastest and most reliable real-time engine