chiark / gitweb /
~ianmdlvl / elogind.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
journal: add keyboard navigation to browse.html
[elogind.git] / src / journal / browse.html
diff --git a/src/journal/browse.html b/src/journal/browse.html
index 068b296da1f1a3a2da6fd0d0c68e9eb76ee7d6f8..5a161a13fbaa8985afefcdbad45da394d4becae9 100644 (file)
--- a/src/journal/browse.html
+++ b/src/journal/browse.html
@@ -76,14 +76,24 @@
                 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>
 
@@ -108,6 +118,15 @@
                 <input id="less" type="button" value="Less" onclick="entriesLess();"/>
         </form>
 
+        <div id="keynav">
+                <span class="key">&#8594;, j, SPACE</span>: Next Page &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">&#8592;, k, BACKSPACE</span>: Previous Page &nbsp;&nbsp;&nbsp;&nbsp;
+                <span class="key">g</span>: First 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;
@@ -177,6 +196,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))
@@ -185,8 +208,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>.';
@@ -200,10 +223,10 @@
                         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) {
@@ -294,14 +317,14 @@
                                 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 + '"><a href="#entry" onclick="onMessageClick(\'' + lc + '\');">';
 
@@ -310,7 +333,7 @@
                                 else if (d.MESSAGE instanceof Array)
                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
                                 else
-                                        buf += d.MESSAGE;
+                                        buf += escapeHTML(d.MESSAGE);
 
                                 buf += '</a></td></tr>';
                         }
@@ -341,15 +364,21 @@
                         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>';
-                        }
+                                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>';
                 }
 
@@ -362,9 +391,38 @@
                         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;
+                        }
+                }
+
                 machineLoad();
                 entriesLoad("");
                 showNEntries(getNEntries());
+                document.onkeyup = onKeyUp;
         </script>
 </body>
 </html>
Unnamed repository; edit this file 'description' to name the repository.