<style type="text/css">
div#divlogs, div#diventry {
font-family: monospace;
- font-size: 8pt;
+ font-size: 7pt;
background-color: #ffffff;
padding: 1em;
margin: 2em 0em;
background-color: #ededed;
color: #313739;
font: message-box;
- margin: 5em;
+ margin: 3em;
}
td.timestamp {
text-align: right;
text-align: center;
font-size: 7pt;
color: #818789;
- padding-top: 50px;
+ padding-top: 2em;
}
- .key {
+ span.key {
font-weight: bold;
color: #313739;
}
+ div#buttonnav {
+ text-align: center;
+ }
+ button {
+ font-size: 18pt;
+ font-weight: bold;
+ width: 2em;
+ height: 2em;
+ }
+ div#filternav {
+ text-align: center;
+ }
+ select {
+ width: 50em;
+ }
</style>
</head>
<body>
<!-- TODO:
- live display
- - localstorage
- show red lines for reboots -->
<h1 id="title"></h1>
<div id="usage"></div>
<div id="showing"></div>
+ <div id="filternav">
+ <select id="filter" onchange="onFilterChange(this);" onfocus="onFilterFocus(this);">
+ <option>No filter</option>
+ </select>
+
+ <input id="boot" type="checkbox" onchange="onBootChange(this);">Only current boot</input>
+ </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="previous" type="button" value="<<" onclick="entriesLoadPrevious();"/>
- <input id="next" type="button" value=">>" onclick="entriesLoadNext();"/>
- <input id="tail" type="button" value=">|" onclick="entriesLoadTail();"/>
+ <div id="buttonnav">
+ <button id="head" onclick="entriesLoadHead();" title="First Page">⇤</button>
+ <button id="previous" type="button" onclick="entriesLoadPrevious();" title="Previous Page"/>←</button>
+ <button id="next" type="button" onclick="entriesLoadNext();" title="Next Page"/>→</button>
+ <button id="tail" type="button" onclick="entriesLoadTail();" title="Last Page"/>⇥</button>
- <input id="more" type="button" value="More" onclick="entriesMore();"/>
- <input id="less" type="button" value="Less" onclick="entriesLess();"/>
- </form>
+ <button id="more" type="button" onclick="entriesMore();" title="More Entries"/>+</button>
+ <button id="less" type="button" onclick="entriesLess();" title="Fewer Entries"/>-</button>
+ </div>
<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">←, k, BACKSPACE</span>: Previous Page
+ <span class="key">→, j, SPACE</span>: Next Page
<span class="key">G</span>: Last Page
<span class="key">+</span>: More entries
<span class="key">-</span>: Fewer entries
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");
+ n = localStorage["n_entries"];
if (n == null)
return 50;
- return parseInt(n);
+ n = parseInt(n);
+ if (n < 10)
+ return 10;
+ if (n > 1000)
+ return 1000;
+ return n;
}
function showNEntries(n) {
function setNEntries(n) {
if (n < 10)
- n = 10;
- else if (n > 1000)
- n = 1000;
-
- setCookie("n_entries", n.toString(), 30*24*60*60*1000);
+ return 10;
+ if (n > 1000)
+ return 1000;
+ localStorage["n_entries"] = n.toString();
showNEntries(n);
}
}
function entriesLoad(range) {
+
+ if (range == null)
+ range = localStorage["cursor"] + ":0";
+ if (range == null)
+ range = "";
+
+ var url = "/entries";
+
+ if (localStorage["filter"] != "" && localStorage["filter"] != null) {
+ url += "?_SYSTEMD_UNIT=" + escape(localStorage["filter"]);
+
+ if (localStorage["boot"] == "1")
+ url += "&boot";
+ } else {
+ if (localStorage["boot"] == "1")
+ url += "?boot";
+ }
+
var request = new XMLHttpRequest();
- request.open("GET", "/entries");
+ request.open("GET", url);
request.onreadystatechange = entriesOnResult;
request.setRequestHeader("Accept", "application/json");
request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
var lc = null;
var fc = null;
- var i;
- var l = event.currentTarget.responseText.split('\n');
+ var i, l = event.currentTarget.responseText.split('\n');
if (l.length <= 1) {
logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
else if (d.SYSLOG_PID != undefined)
buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
- buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + lc + '\');">';
+ buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + d.__CURSOR + '\');">';
if (d.MESSAGE == null)
buf += "[blob data]";
logs.innerHTML = '<tbody>' + buf + '</tbody>';
- if (fc != null)
+ if (fc != null) {
first_cursor = fc;
+ localStorage["cursor"] = fc;
+ }
if (lc != null)
last_cursor = lc;
}
}
}
+ function onMouseWheel(event) {
+ if (event.detail < 0 || event.wheelDelta > 0)
+ entriesLoadPrevious();
+ else
+ entriesLoadNext();
+ }
+
+ function onResultFilterFocus(event) {
+ if ((event.currentTarget.readyState != 4) ||
+ (event.currentTarget.status != 200 && event.currentTarget.status != 0))
+ return;
+
+ f = document.getElementById("filter");
+
+ var l = event.currentTarget.responseText.split('\n');
+ var buf = '<option>No filter</option>';
+ var j = -1;
+
+ for (i in l) {
+
+ if (l[i] == '')
+ continue;
+
+ var d = JSON.parse(l[i]);
+ if (d._SYSTEMD_UNIT == undefined)
+ continue;
+
+ buf += '<option value="' + escape(d._SYSTEMD_UNIT) + '">' + escapeHTML(d._SYSTEMD_UNIT) + '</option>';
+
+ if (d._SYSTEMD_UNIT == localStorage["filter"])
+ j = i;
+ }
+
+ if (j < 0) {
+ if (localStorage["filter"] != null && localStorage["filter"] != "") {
+ buf += '<option value="' + escape(localStorage["filter"]) + '">' + escapeHTML(localStorage["filter"]) + '</option>';
+ j = i + 1;
+ } else
+ j = 0;
+ }
+
+ f.innerHTML = buf;
+ f.selectedIndex = j;
+ }
+
+ function onFilterFocus(w) {
+ var request = new XMLHttpRequest();
+ request.open("GET", "/fields/_SYSTEMD_UNIT");
+ request.onreadystatechange = onResultFilterFocus;
+ request.setRequestHeader("Accept", "application/json");
+ request.send(null);
+ }
+
+ function onFilterChange(w) {
+ if (w.selectedIndex <= 0)
+ localStorage["filter"] = "";
+ else
+ localStorage["filter"] = unescape(w.options[w.selectedIndex].value);
+
+ entriesLoadHead();
+ }
+
+ function onBootChange(w) {
+ localStorage["boot"] = w.checked ? "1" : "0";
+ entriesLoadHead();
+ }
+
+ function initFilter() {
+ f = document.getElementById("filter");
+
+ var buf = '<option>No filter</option>';
+
+ var filter = localStorage["filter"];
+ if (filter != null && filter != "") {
+ buf += '<option value="' + escape(filter) + '">' + escapeHTML(filter) + '</option>';
+ j = 1;
+ } else
+ j = 0;
+
+ f.innerHTML = buf;
+ f.selectedIndex = j;
+ }
+
+ function installHandlers() {
+ document.onkeyup = onKeyUp;
+
+ logs = document.getElementById("divlogs");
+ logs.addEventListener("mousewheel", onMouseWheel, false);
+ logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
+ }
+
machineLoad();
- entriesLoad("");
+ entriesLoad(null);
showNEntries(getNEntries());
- document.onkeyup = onKeyUp;
+ initFilter();
+ installHandlers();
</script>
</body>
</html>
~ianmdlvl / elogind.git / blobdiff