X-Git-Url: http://www.chiark.greenend.org.uk/ucgi/~ianmdlvl/git?a=blobdiff_plain;f=src%2Fjournal%2Fbrowse.html;h=3594f70c8728c3919fdda83d141783b728352ffb;hb=13b84ec7df103ce388910a2b868fe1668c1e27ef;hp=b901d7a908064f76ca077a4569101088e0350239;hpb=bf5542f891893a1c38900bb4470ce2dadf57a29a;p=elogind.git

diff --git a/src/journal/browse.html b/src/journal/browse.html
index b901d7a90..3594f70c8 100644
--- a/src/journal/browse.html
+++ b/src/journal/browse.html
@@ -4,9 +4,9 @@
         <title>Journal</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <style type="text/css">
-                div#logs {
+                div#divlogs, div#diventry {
                         font-family: monospace;
-                        font-size: 8pt;
+                        font-size: 7pt;
                         background-color: #ffffff;
                         padding: 1em;
                         margin: 2em 0em;
@@ -15,30 +15,99 @@
                         white-space: nowrap;
                         overflow-x: scroll;
                 }
+                div#diventry {
+                        display: none;
+                }
+                div#divlogs {
+                        display: block;
+                }
                 body {
                         background-color: #ededed;
                         color: #313739;
                         font: message-box;
-                        margin: 5em;
+                        margin: 3em;
                 }
-
-                .log-error {
+                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;
+                }
+                td.message > a:link, td.message > a:visited {
+                        text-decoration: none;
+                        color: #313739;
+                }
+                td.message-error {
+                        padding-left: 5px;
                         color: red;
                         font-weight: bold;
                 }
-                .log-highlight {
+                td.message-error > a:link, td.message-error > a:visited {
+                        text-decoration: none;
+                        color: red;
+                }
+                td.message-highlight {
+                        padding-left: 5px;
                         font-weight: bold;
                 }
+                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: 2em;
+                }
+                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:
-
-                - seek to back properly
-                - handle seek before front properly
-                - show red lines for reboots
-                - show contents of entries -->
+                - live display
+                - show red lines for reboots -->
 
         <h1 id="title"></h1>
 
@@ -49,49 +118,52 @@
         <div id="usage"></div>
         <div id="showing"></div>
 
-        <div id="logs"></div>
-
-        <form>
-                <input id="head" type="button" value="|&lt;" onclick="entriesLoadHead();"/>
-                <input id="previous" type="button" value="&lt;&lt;" onclick="entriesLoadPrevious();"/>
-                <input id="next" type="button" value="&gt;&gt;" onclick="entriesLoadNext();"/>
-                <input id="tail" type="button" value="&gt;|" onclick="entriesLoadTail();"/>
+        <div id="filternav">
+                <select id="filter" onchange="onFilterChange(this);" onfocus="onFilterFocus(this);">
+                        <option>No filter</option>
+                </select>
+                &nbsp;&nbsp;&nbsp;&nbsp;
+                <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>
+
+        <div id="buttonnav">
+                <button id="head" onclick="entriesLoadHead();" title="First Page">&#8676;</button>
+                <button id="previous" type="button" onclick="entriesLoadPrevious();" title="Previous Page"/>&#8592;</button>
+                <button id="next" type="button" onclick="entriesLoadNext();" title="Next Page"/>&#8594;</button>
+                <button id="tail" type="button" onclick="entriesLoadTail();" title="Last Page"/>&#8677;</button>
                 &nbsp;&nbsp;&nbsp;&nbsp;
-                <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">g</span>: First Page &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">&#8592;, k, BACKSPACE</span>: Previous Page &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">&#8594;, j, SPACE</span>: Next Page &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">G</span>: Last Page &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">+</span>: More entries &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">-</span>: Fewer entries
+        </div>
 
         <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");
+                        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) {
@@ -101,11 +173,10 @@
 
                 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);
                 }
 
@@ -130,6 +201,10 @@
                                 return u.toString() + " B";
                 }
 
+                function escapeHTML(s) {
+                        return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+                }
+
                 function machineOnResult(event) {
                         if ((event.currentTarget.readyState != 4) ||
                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
@@ -138,8 +213,8 @@
                         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>.';
@@ -153,15 +228,33 @@
                         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) {
+
+                        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());
@@ -196,20 +289,20 @@
                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
                                 return;
 
-                        var logs = document.getElementById("logs");
-                        logs.innerHTML = "";
+                        var logs = document.getElementById("tablelogs");
 
                         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 = "<i>No further entries...</i>";
+                                logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
                                 return;
                         }
 
+                        var buf = '';
+
                         for (i in l) {
 
                                 if (l[i] == '')
@@ -230,53 +323,222 @@
                                         priority = 6;
 
                                 if (priority <= 3)
-                                        clazz = "log-error";
+                                        clazz = "message-error";
                                 else if (priority <= 5)
-                                        clazz = "log-highlight";
+                                        clazz = "message-highlight";
                                 else
-                                        clazz = "log-normal";
+                                        clazz = "message";
+
+                                buf += '<tr><td class="timestamp">';
+
+                                if (d.__REALTIME_TIMESTAMP != undefined) {
+                                        var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
+                                        buf += timestamp.toLocaleString();
+                                }
 
-                                var line = '<div class="' + clazz + '">';
+                                buf += '</td><td class="process">';
 
                                 if (d.SYSLOG_IDENTIFIER != undefined)
-                                        line += d.SYSLOG_IDENTIFIER;
+                                        buf += escapeHTML(d.SYSLOG_IDENTIFIER);
                                 else if (d._COMM != undefined)
-                                        line += d._COMM;
+                                        buf += escapeHTML(d._COMM);
 
                                 if (d._PID != undefined)
-                                        line += "[" + d._PID + "]";
+                                        buf += "[" + escapeHTML(d._PID) + "]";
                                 else if (d.SYSLOG_PID != undefined)
-                                        line += "[" + d.SYSLOG_PID + "]";
+                                        buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
+
+                                buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + d.__CURSOR + '\');">';
 
                                 if (d.MESSAGE == null)
-                                        line += ": [blob data]</div>";
+                                        buf += "[blob data]";
                                 else if (d.MESSAGE instanceof Array)
-                                        line += ": [" + formatBytes(d.MESSAGE.length) + " blob data]</div>";
+                                        buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
                                 else
-                                        line += ": " + d.MESSAGE + "</div>";
+                                        buf += escapeHTML(d.MESSAGE);
 
-                                logs.innerHTML += line;
+                                buf += '</a></td></tr>';
                         }
 
-                        if (fc != null)
+                        logs.innerHTML = '<tbody>' + buf + '</tbody>';
+
+                        if (fc != null) {
                                 first_cursor = fc;
+                                localStorage["cursor"] = fc;
+                        }
                         if (lc != null)
                                 last_cursor = lc;
                 }
 
                 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();
+                }
+
+                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());
+                initFilter();
+                installHandlers();
         </script>
 </body>
 </html>