chiark / gitweb /
journal: properly escape HTML entities in browse.html
[elogind.git] / src / journal / browse.html
index b901d7a908064f76ca077a4569101088e0350239..362611b1c22a3aa26b79648e99d259ae74af1b21 100644 (file)
@@ -4,7 +4,7 @@
         <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;
                         background-color: #ffffff;
                         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;
                 }
-
-                .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;
+                }
         </style>
 </head>
 
 <body>
         <!-- TODO:
 
-                - seek to back properly
-                - handle seek before front properly
                 - show red lines for reboots
                 - show contents of entries -->
 
@@ -49,7 +94,9 @@
         <div id="usage"></div>
         <div id="showing"></div>
 
-        <div id="logs"></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="|&lt;" onclick="entriesLoadHead();"/>
                                 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))
                                 (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 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] == '')
                                         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">';
 
-                                var line = '<div class="' + clazz + '">';
+                                if (d.__REALTIME_TIMESTAMP != undefined) {
+                                        var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
+                                        buf += timestamp.toLocaleString();
+                                }
+
+                                buf += '</td><td class="process">';
 
                                 if (d.SYSLOG_IDENTIFIER != undefined)
-                                        line += d.SYSLOG_IDENTIFIER;
+                                        buf += d.SYSLOG_IDENTIFIER;
                                 else if (d._COMM != undefined)
-                                        line += d._COMM;
+                                        buf += d._COMM;
 
                                 if (d._PID != undefined)
-                                        line += "[" + d._PID + "]";
+                                        buf += "[" + d._PID + "]";
                                 else if (d.SYSLOG_PID != undefined)
-                                        line += "[" + d.SYSLOG_PID + "]";
+                                        buf += "[" + d.SYSLOG_PID + "]";
+
+                                buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + lc + '\');">';
 
                                 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>';
                         }
 
+                        logs.innerHTML = '<tbody>' + buf + '</tbody>';
+
                         if (fc != null)
                                 first_cursor = fc;
                         if (lc != null)
 
                 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){
+                                buf += '<tr><td class="field">' + key + '</td><td class="data">' + d[key] + '</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);
                 }
 
                 machineLoad();