Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
177 lines (151 sloc) 3.66 KB
<!-- quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>logtail</title>
<script type="text/javascript">
var lastSource;
var linesAdded = 0;
function init() {
console.log("init");
var wsUri = "ws://localhost:9090/websocket";
window.websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { console.log("ws connected"); };
websocket.onclose = function(evt) { console.warn("ws closed"); };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { console.warn("ws error"); };
}
function onMessage(evt) {
console.log(evt.data);
var j = JSON.parse(evt.data);
switch(j.type) {
case 'line':
handleLine(j);
break;
case 'sources':
handleSources(j);
break;
}
}
function handleSources(j) {
var sources = j.list;
console.log("Sources:", sources);
var sid=0;
for(var s in sources) {
sid++;
var checkid = 'source-'+sid;
var cb = document.createElement('input');
cb.type = 'checkbox';
cb.value = s;
cb.id = checkid;
cb.checked = !!sources[s];
var label = document.createElement("label");
label.htmlFor = checkid;
label.appendChild( document.createTextNode(s) );
cb.onclick = function() {
var msg = {
type: (this.checked ? 'subscribe' : 'unsubscribe'),
path: this.value
}
websocket.send(JSON.stringify(msg));
};
var sp = document.createElement('span');
sp.className = 'item';
sp.appendChild(cb);
sp.appendChild(label);
document.getElementById("sourcelist").appendChild(sp);
}
}
function handleLine(j) {
if( lastSource != j.source ) {
writeSourceHeader(j.source);
lastSource = j.source;
}
appendLine( j.line, 'line');
}
function writeSourceHeader(source) {
console.log("source change", source);
var line = "Source: "+source;
appendLine( line, 'source' );
}
function appendLine(line, classname) {
linesAdded ++;
e = document.createElement("div");
if(linesAdded % 2 == 0) classname += ' alt';
e.className = classname;
e.innerText = line;
document.getElementById('container').appendChild(e);
window.scrollTo(0, document.body.scrollHeight);
}
function doSend(message) {
console.log("sending", message);
websocket.send(message);
}
window.addEventListener("load", init, false);
</script>
<style type='text/css'>
.alt {
background-color:#f0f0f0;
}
body
{
margin: 0;
padding: 8em 0 0 0;
color: #000;
background: #fff;
font-size: 1em;
}
div#fixedbox
{
overflow: auto;
width: 100%;
height: 8em;
position: absolute;
top: 0;
left: 0;
color: #000;
background: #ddd;
padding:10px;
}
div#fixedbox h1 {
padding:0; margin:0;
}
div#fixedbox span.item {
padding-right: 5px;
}
div#content
{
padding: 1em;
}
div.source {
font-weight: bold;
}
@media screen
{
body>div#fixedbox
{
position: fixed;
}
/* Very ugly fix for page anchors */
ol>li#dog3
{
margin-top: -8em;
padding-top: 8em;
}
}
</style>
</head>
<body>
<div id='content'>
<pre id="container">
</pre>
</div>
<div id='fixedbox'>
<h1>logtail</h1>
For debugging, I suggest something like: <code>watch -n5 '`date` &gt;&gt; /tmp/logtail.txt'</code>
<div id="sourcelist">
</div>
</div>
<a href="https://github.com/RJ/logtail"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
</body>
</html>