2012-09-28 02:59:10 +04:00
<!DOCTYPE html>
< html >
< head >
< title > Journal< / title >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< style type = "text/css" >
2012-10-11 00:39:45 +04:00
div#divlogs, div#diventry {
2012-09-28 02:59:10 +04:00
font-family: monospace;
font-size: 8pt;
background-color: #ffffff;
padding: 1em;
margin: 2em 0em;
border-radius: 10px 10px 10px 10px;
border: 1px solid threedshadow;
white-space: nowrap;
overflow-x: scroll;
}
2012-10-11 00:39:45 +04:00
div#diventry {
display: none;
}
div#divlogs {
display: block;
}
2012-09-28 02:59:10 +04:00
body {
background-color: #ededed;
color: #313739;
font: message-box;
margin: 5em;
}
2012-10-10 04:41:27 +04:00
td.timestamp {
text-align: right;
border-right: 1px dotted lightgrey;
padding-right: 5px;
}
td.process {
border-right: 1px dotted lightgrey;
padding-left: 5px;
padding-right: 5px;
}
td.message {
padding-left: 5px;
}
2012-10-11 00:39:45 +04:00
td.message > a:link, td.message > a:visited {
text-decoration: none;
color: #313739;
}
2012-10-10 04:41:27 +04:00
td.message-error {
padding-left: 5px;
2012-09-28 02:59:10 +04:00
color: red;
font-weight: bold;
}
2012-10-11 00:39:45 +04:00
td.message-error > a:link, td.message-error > a:visited {
text-decoration: none;
color: red;
}
2012-10-10 04:41:27 +04:00
td.message-highlight {
padding-left: 5px;
2012-09-28 02:59:10 +04:00
font-weight: bold;
}
2012-10-11 00:39:45 +04:00
td.message-highlight > a:link, td.message-highlight > a:visited {
text-decoration: none;
color: #313739;
}
td > a:hover, td > a:active {
text-decoration: underline;
color: #c13739;
}
table#tablelogs, table#tableentry {
border-collapse: collapse;
}
td.field {
text-align: right;
border-right: 1px dotted lightgrey;
padding-right: 5px;
}
td.data {
padding-left: 5px;
2012-10-10 04:41:27 +04:00
}
2012-10-11 01:49:21 +04:00
div#keynav {
text-align: center;
font-size: 7pt;
color: #818789;
padding-top: 50px;
}
.key {
font-weight: bold;
color: #313739;
}
2012-09-28 02:59:10 +04:00
< / style >
< / head >
< body >
<!-- TODO:
2012-10-11 01:14:32 +04:00
- live display
- localstorage
- show red lines for reboots -->
2012-09-28 02:59:10 +04:00
< h1 id = "title" > < / h1 >
< div id = "os" > < / div >
< div id = "virtualization" > < / div >
< div id = "cutoff" > < / div >
< div id = "machine" > < / div >
< div id = "usage" > < / div >
< div id = "showing" > < / div >
2012-10-10 04:41:27 +04:00
< div id = "divlogs" > < table id = "tablelogs" > < / table > < / div >
2012-10-11 00:39:45 +04:00
< a name = "entry" > < / a >
< div id = "diventry" > < table id = "tableentry" > < / table > < / div >
2012-09-28 02:59:10 +04:00
< form >
< input id = "head" type = "button" value = "|<" onclick = "entriesLoadHead();" / >
< input id = "previous" type = "button" value = "<<" onclick = "entriesLoadPrevious();" / >
< input id = "next" type = "button" value = ">>" onclick = "entriesLoadNext();" / >
< input id = "tail" type = "button" value = ">|" onclick = "entriesLoadTail();" / >
< input id = "more" type = "button" value = "More" onclick = "entriesMore();" / >
< input id = "less" type = "button" value = "Less" onclick = "entriesLess();" / >
< / form >
2012-10-11 01:49:21 +04:00
< div id = "keynav" >
< span class = "key" > → , j, SPACE< / span > : Next Page
< span class = "key" > ← , k, BACKSPACE< / span > : Previous Page
< span class = "key" > g< / span > : First Page
< span class = "key" > G< / span > : Last Page
< span class = "key" > +< / span > : More entries
< span class = "key" > -< / span > : Fewer entries
< / div >
2012-09-28 02:59:10 +04:00
< script type = "text/javascript" >
var first_cursor = null;
var last_cursor = null;
function setCookie(name, value, msec) {
var d = new Date();
d.setMilliseconds(d.getMilliseconds() + msec);
var v = escape(value) + "; expires=" + d.toUTCString();
document.cookie = name + "=" + value;
}
function getCookie(name) {
var i, l;
l = document.cookie.split(";");
for (i in l) {
var x, y, j;
j = l[i].indexOf("=");
x = l[i].substr(0, j);
y = l[i].substr(j+1);
if (x == name)
return unescape(y);
}
return null;
}
function getNEntries() {
var n;
n = getCookie("n_entries");
if (n == null)
return 50;
return parseInt(n);
}
function showNEntries(n) {
var showing = document.getElementById("showing");
showing.innerHTML = "Showing < b > " + n.toString() + "< / b > entries.";
}
function setNEntries(n) {
if (n < 10 )
n = 10;
else if (n > 1000)
n = 1000;
setCookie("n_entries", n.toString(), 30*24*60*60*1000);
showNEntries(n);
}
function machineLoad() {
var request = new XMLHttpRequest();
request.open("GET", "/machine");
request.onreadystatechange = machineOnResult;
request.setRequestHeader("Accept", "application/json");
request.send(null);
}
function formatBytes(u) {
if (u >= 1024*1024*1024*1024)
return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
else if (u >= 1024*1024*1024)
return (u/1024/1024/1024).toFixed(1) + " GiB";
else if (u >= 1024*1024)
return (u/1024/1024).toFixed(1) + " MiB";
else if (u >= 1024)
return (u/1024).toFixed(1) + " KiB";
else
return u.toString() + " B";
}
2012-10-11 01:00:25 +04:00
function escapeHTML(s) {
return s.replace(/& /g, "& ").replace(/< /g, "< ").replace(/>/g, "> ");
}
2012-09-28 02:59:10 +04:00
function machineOnResult(event) {
if ((event.currentTarget.readyState != 4) ||
(event.currentTarget.status != 200 & & event.currentTarget.status != 0))
return;
var d = JSON.parse(event.currentTarget.responseText);
var title = document.getElementById("title");
2012-10-11 01:14:32 +04:00
title.innerHTML = 'Journal of ' + escapeHTML(d.hostname);
document.title = 'Journal of ' + escapeHTML(d.hostname);
2012-09-28 02:59:10 +04:00
var machine = document.getElementById("machine");
machine.innerHTML = 'Machine ID is < b > ' + d.machine_id + '< / b > , current boot ID is < b > ' + d.boot_id + '< / b > .';
var cutoff = document.getElementById("cutoff");
var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
cutoff.innerHTML = 'Journal begins at < b > ' + from.toLocaleString() + '< / b > and ends at < b > ' + to.toLocaleString() + '< / b > .';
var usage = document.getElementById("usage");
usage.innerHTML = 'Disk usage is < b > ' + formatBytes(parseInt(d.usage)) + '< / b > .';
var os = document.getElementById("os");
2012-10-11 01:14:32 +04:00
os.innerHTML = 'Operating system is < b > ' + escapeHTML(d.os_pretty_name) + '< / b > .';
2012-09-28 02:59:10 +04:00
var virtualization = document.getElementById("virtualization");
2012-10-11 01:14:32 +04:00
virtualization.innerHTML = d.virtualization == "bare" ? "Running on < b > bare metal< / b > ." : "Running on virtualization < b > " + escapeHTML(d.virtualization) + "< / b > .";
2012-09-28 02:59:10 +04:00
}
function entriesLoad(range) {
var request = new XMLHttpRequest();
request.open("GET", "/entries");
request.onreadystatechange = entriesOnResult;
request.setRequestHeader("Accept", "application/json");
request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
request.send(null);
}
function entriesLoadNext() {
if (last_cursor == null)
entriesLoad("");
else
entriesLoad(last_cursor + ":1");
}
function entriesLoadPrevious() {
if (first_cursor == null)
entriesLoad("");
else
entriesLoad(first_cursor + ":-" + getNEntries().toString());
}
function entriesLoadHead() {
entriesLoad("");
}
function entriesLoadTail() {
entriesLoad(":-" + getNEntries().toString());
}
function entriesOnResult(event) {
if ((event.currentTarget.readyState != 4) ||
(event.currentTarget.status != 200 & & event.currentTarget.status != 0))
return;
2012-10-10 04:41:27 +04:00
var logs = document.getElementById("tablelogs");
2012-09-28 02:59:10 +04:00
var lc = null;
var fc = null;
var i;
var l = event.currentTarget.responseText.split('\n');
if (l.length < = 1) {
2012-10-10 04:41:27 +04:00
logs.innerHTML = '< tbody > < tr > < td colspan = "3" > < i > No further entries...< / i > < / td > < / tr > < / tbody > ';
2012-09-28 02:59:10 +04:00
return;
}
2012-10-10 04:41:27 +04:00
var buf = '';
2012-09-28 02:59:10 +04:00
for (i in l) {
if (l[i] == '')
continue;
var d = JSON.parse(l[i]);
if (d.MESSAGE == undefined || d.__CURSOR == undefined)
continue;
if (fc == null)
fc = d.__CURSOR;
lc = d.__CURSOR;
var priority;
if (d.PRIORITY != undefined)
priority = parseInt(d.PRIORITY);
else
priority = 6;
if (priority < = 3)
2012-10-10 04:41:27 +04:00
clazz = "message-error";
2012-09-28 02:59:10 +04:00
else if (priority < = 5)
2012-10-10 04:41:27 +04:00
clazz = "message-highlight";
2012-09-28 02:59:10 +04:00
else
2012-10-10 04:41:27 +04:00
clazz = "message";
buf += '< tr > < td class = "timestamp" > ';
if (d.__REALTIME_TIMESTAMP != undefined) {
var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
buf += timestamp.toLocaleString();
}
2012-09-28 02:59:10 +04:00
2012-10-10 04:41:27 +04:00
buf += '< / td > < td class = "process" > ';
2012-09-28 02:59:10 +04:00
if (d.SYSLOG_IDENTIFIER != undefined)
2012-10-11 01:14:32 +04:00
buf += escapeHTML(d.SYSLOG_IDENTIFIER);
2012-09-28 02:59:10 +04:00
else if (d._COMM != undefined)
2012-10-11 01:14:32 +04:00
buf += escapeHTML(d._COMM);
2012-09-28 02:59:10 +04:00
if (d._PID != undefined)
2012-10-11 01:14:32 +04:00
buf += "[" + escapeHTML(d._PID) + "]";
2012-09-28 02:59:10 +04:00
else if (d.SYSLOG_PID != undefined)
2012-10-11 01:14:32 +04:00
buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
2012-10-10 04:41:27 +04:00
2012-10-11 00:39:45 +04:00
buf += '< / td > < td class = "' + clazz + '" > < a href = "#entry" onclick = "onMessageClick(\'' + lc + '\');" > ';
2012-09-28 02:59:10 +04:00
if (d.MESSAGE == null)
2012-10-10 04:41:27 +04:00
buf += "[blob data]";
2012-09-28 02:59:10 +04:00
else if (d.MESSAGE instanceof Array)
2012-10-10 04:41:27 +04:00
buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
2012-09-28 02:59:10 +04:00
else
2012-10-11 01:00:25 +04:00
buf += escapeHTML(d.MESSAGE);
2012-09-28 02:59:10 +04:00
2012-10-11 00:39:45 +04:00
buf += '< / a > < / td > < / tr > ';
2012-09-28 02:59:10 +04:00
}
2012-10-11 00:39:45 +04:00
logs.innerHTML = '< tbody > ' + buf + '< / tbody > ';
2012-10-10 04:41:27 +04:00
2012-09-28 02:59:10 +04:00
if (fc != null)
first_cursor = fc;
if (lc != null)
last_cursor = lc;
}
function entriesMore() {
setNEntries(getNEntries() + 10);
2012-10-11 00:39:45 +04:00
entriesLoad(first_cursor);
2012-09-28 02:59:10 +04:00
}
function entriesLess() {
setNEntries(getNEntries() - 10);
2012-10-11 00:39:45 +04:00
entriesLoad(first_cursor);
}
function onResultMessageClick(event) {
if ((event.currentTarget.readyState != 4) ||
(event.currentTarget.status != 200 & & event.currentTarget.status != 0))
return;
var d = JSON.parse(event.currentTarget.responseText);
document.getElementById("diventry").style.display = "block";
entry = document.getElementById("tableentry");
var buf = "";
for (var key in d){
2012-10-11 01:14:32 +04:00
var data = d[key];
2012-10-11 00:39:45 +04:00
2012-10-11 01:14:32 +04:00
if (data == null)
data = "[blob data]";
else if (data instanceof Array)
data = "[" + formatBytes(data.length) + " blob data]";
else
data = escapeHTML(data);
buf += '< tr > < td class = "field" > ' + key + '< / td > < td class = "data" > ' + data + '< / td > < / tr > ';
}
2012-10-11 00:39:45 +04:00
entry.innerHTML = '< tbody > ' + buf + '< / tbody > ';
}
function onMessageClick(t) {
var request = new XMLHttpRequest();
request.open("GET", "/entries?discrete");
request.onreadystatechange = onResultMessageClick;
request.setRequestHeader("Accept", "application/json");
request.setRequestHeader("Range", "entries=" + t + ":0:1");
request.send(null);
2012-09-28 02:59:10 +04:00
}
2012-10-11 01:49:21 +04:00
function onKeyUp(event) {
switch (event.keyCode) {
case 8:
case 37:
case 75:
entriesLoadPrevious();
break;
case 32:
case 39:
case 74:
entriesLoadNext();
break;
case 71:
if (event.shiftKey)
entriesLoadTail();
else
entriesLoadHead();
break;
case 171:
entriesMore();
break;
case 173:
entriesLess();
break;
}
}
2012-10-11 01:59:29 +04:00
function onMouseWheel(event) {
if (event.detail < 0 | | event . wheelDelta > 0)
entriesLoadPrevious();
else
entriesLoadNext();
}
2012-09-28 02:59:10 +04:00
machineLoad();
entriesLoad("");
showNEntries(getNEntries());
2012-10-11 01:49:21 +04:00
document.onkeyup = onKeyUp;
2012-10-11 01:59:29 +04:00
logs = document.getElementById("tablelogs");
logs.addEventListener("mousewheel", onMouseWheel, false);
logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
2012-09-28 02:59:10 +04:00
< / script >
< / body >
< / html >
