Brent Russell

Tailjs

A way to follow a log in a web browser with JavaScript

Tailjs uses JavaScript to display the tail of a file. The tail command is not actually ran from JavaScript, that would be an amatuer move alllowing people to run their own commands. The result of the tail command is generated with php, python, ruby, node,js or other backend language that simply runs the tail command against a file. That command could be edited to use awk, sed, grep, sort and much more. Fork it on GitHub, or jump down to the bottom of this page to see the demo.

PHP:

<?php
$filename = __DIR__.'/tailjs.log';
$output = shell_exec('exec tail -n25 ' . $filename);  // only print last 25 lines of the log
echo str_replace(PHP_EOL, '<br />', $output);   // add html breaks at EOL
?>

JavaScript:

Requires jQuery so make sure you put that in the header of your page.


$(document).ready(function(){
	let refreshTime = 1000;
	let logUpdaterHandle;

	/* Extend jQuery to have toggleText which will check for one passed variable and return the other passed */
	$.fn.extend({
		toggleText: function(a, b){
			return this.val(this.val() == b ? a : b);
		}
	});

	function updateFeed(){
		$.get("tailjsLog.php").done(function(data){
			$('#feed').html(data);
		});
		logUpdaterHandle = setTimeout(updateFeed, refreshTime);
	}

	$('#logControl').on('click', function(){
		$("#logControl").toggleText('Pause', 'Start');
		if($("#logControl").val() == 'Start'){
			clearTimeout(logUpdaterHandle);
		}else{
			updateFeed();		}
	});

	$('.colorBox').on('click',function() {
		let classList = this.className.split(/\s+/);
		if(classList[1]){
			$('#feed').removeClass("feedDefaultColor whiteBox blueBox greenBox purpleBox yellowBox redBox orangeBox");
			$('#feed').addClass(classList[1]);
			$('#feed').css("background-color", "#333");
		}
	});
	updateFeed()
});

CSS3:

Requires Bootstrap 3 or above so make sure you put your css just before the body close tag.


.colorBox{
	cursor:pointer;
	width:25px;
	height:25px;
	display:inline-block;
}

.whiteBox{background-color:#fff;color:#fff;}
.blueBox{background-color:#32adff;color:#32adff;}
.greenBox{background-color:#19E200;color:#19E200;}
.purpleBox{background-color:#dc60ff;color:#dc60ff;}
.yellowBox{background-color:#ffe900;color:#ffe900;}
.redBox{background-color:#ff1414;color:#ff1414;}
.orangeBox{background-color:#ffa814;color:#ffa814;}

.boxBorder{
	border:1px solid #ccc;
}

.feedBox{
	font-size:0.8em;
	padding:2px 2px 2px 4px;
	background-color:#333; 
	margin-bottom:15px;
}
.feedDefaultColor{
	color:#19E200;
}

HTML5: