chiark / gitweb /
~ianmdlvl / elogind.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
journal: add mousewheel scrolling to browse.html
[elogind.git] / src / journal / browse.html
diff --git a/src/journal/browse.html b/src/journal/browse.html
index 362611b1c22a3aa26b79648e99d259ae74af1b21..d5e0717c539a202ae72b29c80c1966f12a3bb8cf 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;
@@ -189,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>.';
@@ -204,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) {
@@ -298,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 + '\');">';
 
@@ -345,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>';
                 }
 
@@ -366,9 +391,49 @@
                         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>
Unnamed repository; edit this file 'description' to name the repository.