<title>Journal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
- div#divlogs {
+ div#divlogs, div#diventry {
font-family: monospace;
font-size: 8pt;
background-color: #ffffff;
white-space: nowrap;
overflow-x: scroll;
}
+ div#diventry {
+ display: none;
+ }
+ div#divlogs {
+ display: block;
+ }
body {
background-color: #ededed;
color: #313739;
td.message {
padding-left: 5px;
}
+ td.message > a:link, td.message > a:visited {
+ text-decoration: none;
+ color: #313739;
+ }
td.message-error {
padding-left: 5px;
color: red;
font-weight: bold;
}
+ td.message-error > a:link, td.message-error > a:visited {
+ text-decoration: none;
+ color: red;
+ }
td.message-highlight {
padding-left: 5px;
font-weight: bold;
}
- table#tablelogs {
- border-collapse:collapse;
+ 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;
+ }
+ div#keynav {
+ text-align: center;
+ font-size: 7pt;
+ color: #818789;
+ padding-top: 50px;
+ }
+ .key {
+ font-weight: bold;
+ color: #313739;
}
</style>
</head>
<body>
<!-- TODO:
-
- - show red lines for reboots
- - show contents of entries -->
+ - live display
+ - localstorage
+ - show red lines for reboots -->
<h1 id="title"></h1>
<div id="showing"></div>
<div id="divlogs"><table id="tablelogs"></table></div>
+ <a name="entry"></a>
+ <div id="diventry"><table id="tableentry"></table></div>
<form>
<input id="head" type="button" value="|<" onclick="entriesLoadHead();"/>
<input id="less" type="button" value="Less" onclick="entriesLess();"/>
</form>
+ <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>
+
<script type="text/javascript">
var first_cursor = null;
var last_cursor = null;
return u.toString() + " B";
}
+ function escapeHTML(s) {
+ return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
+ }
+
function machineOnResult(event) {
if ((event.currentTarget.readyState != 4) ||
(event.currentTarget.status != 200 && event.currentTarget.status != 0))
var d = JSON.parse(event.currentTarget.responseText);
var title = document.getElementById("title");
- title.innerHTML = 'Journal of ' + d.hostname;
- document.title = 'Journal of ' + d.hostname;
+ title.innerHTML = 'Journal of ' + escapeHTML(d.hostname);
+ document.title = 'Journal of ' + escapeHTML(d.hostname);
var machine = document.getElementById("machine");
machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
var os = document.getElementById("os");
- os.innerHTML = 'Operating system is <b>' + d.os_pretty_name + '</b>.';
+ os.innerHTML = 'Operating system is <b>' + escapeHTML(d.os_pretty_name) + '</b>.';
var virtualization = document.getElementById("virtualization");
- virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + d.virtualization + "</b>.";
+ virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + escapeHTML(d.virtualization) + "</b>.";
}
function entriesLoad(range) {
buf += '</td><td class="process">';
if (d.SYSLOG_IDENTIFIER != undefined)
- buf += d.SYSLOG_IDENTIFIER;
+ buf += escapeHTML(d.SYSLOG_IDENTIFIER);
else if (d._COMM != undefined)
- buf += d._COMM;
+ buf += escapeHTML(d._COMM);
if (d._PID != undefined)
- buf += "[" + d._PID + "]";
+ buf += "[" + escapeHTML(d._PID) + "]";
else if (d.SYSLOG_PID != undefined)
- buf += "[" + d.SYSLOG_PID + "]";
+ buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
- buf += '</td><td class="' + clazz + '">';
+ buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + lc + '\');">';
if (d.MESSAGE == null)
buf += "[blob data]";
else if (d.MESSAGE instanceof Array)
buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
else
- buf += d.MESSAGE;
+ buf += escapeHTML(d.MESSAGE);
- buf += '</td></tr>';
+ buf += '</a></td></tr>';
}
- logs.innerHTML = buf + '</tbody>';
+ logs.innerHTML = '<tbody>' + buf + '</tbody>';
if (fc != null)
first_cursor = fc;
function entriesMore() {
setNEntries(getNEntries() + 10);
- entriesLoad("");
+ entriesLoad(first_cursor);
}
function entriesLess() {
setNEntries(getNEntries() - 10);
- entriesLoad("");
+ 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){
+ var data = d[key];
+
+ 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>';
+ }
+ 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);
+ }
+
+ 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;
+ }
+ }
+
+ function onMouseWheel(event) {
+ if (event.detail < 0 || event.wheelDelta > 0)
+ entriesLoadPrevious();
+ else
+ entriesLoadNext();
}
machineLoad();
entriesLoad("");
showNEntries(getNEntries());
+ document.onkeyup = onKeyUp;
+
+ logs = document.getElementById("tablelogs");
+ logs.addEventListener("mousewheel", onMouseWheel, false);
+ logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
</script>
</body>
</html>
~ianmdlvl / elogind.git / blobdiff