]> git.ipfire.org Git - thirdparty/systemd.git/blame - src/journal/browse.html
journal: use localstorage instead of cookies in browse.html and store where the curre...
[thirdparty/systemd.git] / src / journal / browse.html
CommitLineData
bf5542f8
LP
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Journal</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <style type="text/css">
c6511e85 7 div#divlogs, div#diventry {
bf5542f8
LP
8 font-family: monospace;
9 font-size: 8pt;
10 background-color: #ffffff;
11 padding: 1em;
12 margin: 2em 0em;
13 border-radius: 10px 10px 10px 10px;
14 border: 1px solid threedshadow;
15 white-space: nowrap;
16 overflow-x: scroll;
17 }
c6511e85
LP
18 div#diventry {
19 display: none;
20 }
21 div#divlogs {
22 display: block;
23 }
bf5542f8
LP
24 body {
25 background-color: #ededed;
26 color: #313739;
27 font: message-box;
28 margin: 5em;
29 }
1dac8b79
LP
30 td.timestamp {
31 text-align: right;
32 border-right: 1px dotted lightgrey;
33 padding-right: 5px;
34 }
35 td.process {
36 border-right: 1px dotted lightgrey;
37 padding-left: 5px;
38 padding-right: 5px;
39 }
40 td.message {
41 padding-left: 5px;
42 }
c6511e85
LP
43 td.message > a:link, td.message > a:visited {
44 text-decoration: none;
45 color: #313739;
46 }
1dac8b79
LP
47 td.message-error {
48 padding-left: 5px;
bf5542f8
LP
49 color: red;
50 font-weight: bold;
51 }
c6511e85
LP
52 td.message-error > a:link, td.message-error > a:visited {
53 text-decoration: none;
54 color: red;
55 }
1dac8b79
LP
56 td.message-highlight {
57 padding-left: 5px;
bf5542f8
LP
58 font-weight: bold;
59 }
c6511e85
LP
60 td.message-highlight > a:link, td.message-highlight > a:visited {
61 text-decoration: none;
62 color: #313739;
63 }
64 td > a:hover, td > a:active {
65 text-decoration: underline;
66 color: #c13739;
67 }
68 table#tablelogs, table#tableentry {
69 border-collapse: collapse;
70 }
71 td.field {
72 text-align: right;
73 border-right: 1px dotted lightgrey;
74 padding-right: 5px;
75 }
76 td.data {
77 padding-left: 5px;
1dac8b79 78 }
6d5f2f58
LP
79 div#keynav {
80 text-align: center;
81 font-size: 7pt;
82 color: #818789;
74bee4e3 83 padding-top: 2em;
6d5f2f58
LP
84 }
85 .key {
86 font-weight: bold;
87 color: #313739;
88 }
74bee4e3
LP
89 form {
90 text-align: center;
91 }
92 input {
93 font-size: 10pt;
94 font-weight: bold;
95 }
bf5542f8
LP
96 </style>
97</head>
98
99<body>
100 <!-- TODO:
6c69cd86 101 - live display
6c69cd86 102 - show red lines for reboots -->
bf5542f8
LP
103
104 <h1 id="title"></h1>
105
106 <div id="os"></div>
107 <div id="virtualization"></div>
108 <div id="cutoff"></div>
109 <div id="machine"></div>
110 <div id="usage"></div>
111 <div id="showing"></div>
112
1dac8b79 113 <div id="divlogs"><table id="tablelogs"></table></div>
c6511e85
LP
114 <a name="entry"></a>
115 <div id="diventry"><table id="tableentry"></table></div>
bf5542f8
LP
116
117 <form>
118 <input id="head" type="button" value="|&lt;" onclick="entriesLoadHead();"/>
119 <input id="previous" type="button" value="&lt;&lt;" onclick="entriesLoadPrevious();"/>
120 <input id="next" type="button" value="&gt;&gt;" onclick="entriesLoadNext();"/>
121 <input id="tail" type="button" value="&gt;|" onclick="entriesLoadTail();"/>
122 &nbsp;&nbsp;&nbsp;&nbsp;
123 <input id="more" type="button" value="More" onclick="entriesMore();"/>
124 <input id="less" type="button" value="Less" onclick="entriesLess();"/>
125 </form>
126
6d5f2f58 127 <div id="keynav">
6d5f2f58 128 <span class="key">g</span>: First Page &nbsp;&nbsp;&nbsp;&nbsp;
74bee4e3
LP
129 <span class="key">&#8592;, k, BACKSPACE</span>: Previous Page &nbsp;&nbsp;&nbsp;&nbsp;
130 <span class="key">&#8594;, j, SPACE</span>: Next Page &nbsp;&nbsp;&nbsp;&nbsp;
6d5f2f58
LP
131 <span class="key">G</span>: Last Page &nbsp;&nbsp;&nbsp;&nbsp;
132 <span class="key">+</span>: More entries &nbsp;&nbsp;&nbsp;&nbsp;
133 <span class="key">-</span>: Fewer entries
134 </div>
135
bf5542f8
LP
136 <script type="text/javascript">
137 var first_cursor = null;
138 var last_cursor = null;
139
bf5542f8
LP
140 function getNEntries() {
141 var n;
04909b0f 142 n = localStorage["n_entries"];
bf5542f8
LP
143 if (n == null)
144 return 50;
04909b0f
LP
145 n = parseInt(n);
146 if (n < 10)
147 return 10;
148 if (n > 1000)
149 return 1000;
150 return n;
bf5542f8
LP
151 }
152
153 function showNEntries(n) {
154 var showing = document.getElementById("showing");
155 showing.innerHTML = "Showing <b>" + n.toString() + "</b> entries.";
156 }
157
158 function setNEntries(n) {
04909b0f 159 localStorage["n_entries"] = n.toString();
bf5542f8
LP
160 showNEntries(n);
161 }
162
163 function machineLoad() {
164 var request = new XMLHttpRequest();
165 request.open("GET", "/machine");
166 request.onreadystatechange = machineOnResult;
167 request.setRequestHeader("Accept", "application/json");
168 request.send(null);
169 }
170
171 function formatBytes(u) {
172 if (u >= 1024*1024*1024*1024)
173 return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
174 else if (u >= 1024*1024*1024)
175 return (u/1024/1024/1024).toFixed(1) + " GiB";
176 else if (u >= 1024*1024)
177 return (u/1024/1024).toFixed(1) + " MiB";
178 else if (u >= 1024)
179 return (u/1024).toFixed(1) + " KiB";
180 else
181 return u.toString() + " B";
182 }
183
522795e0
MM
184 function escapeHTML(s) {
185 return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
186 }
187
bf5542f8
LP
188 function machineOnResult(event) {
189 if ((event.currentTarget.readyState != 4) ||
190 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
191 return;
192
193 var d = JSON.parse(event.currentTarget.responseText);
194
195 var title = document.getElementById("title");
6c69cd86
LP
196 title.innerHTML = 'Journal of ' + escapeHTML(d.hostname);
197 document.title = 'Journal of ' + escapeHTML(d.hostname);
bf5542f8
LP
198
199 var machine = document.getElementById("machine");
200 machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
201
202 var cutoff = document.getElementById("cutoff");
203 var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
204 var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
205 cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
206
207 var usage = document.getElementById("usage");
208 usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
209
210 var os = document.getElementById("os");
6c69cd86 211 os.innerHTML = 'Operating system is <b>' + escapeHTML(d.os_pretty_name) + '</b>.';
bf5542f8
LP
212
213 var virtualization = document.getElementById("virtualization");
6c69cd86 214 virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + escapeHTML(d.virtualization) + "</b>.";
bf5542f8
LP
215 }
216
217 function entriesLoad(range) {
04909b0f
LP
218
219 if (range == null)
220 range = localStorage["cursor"];
221 if (range == null)
222 range = "";
223
bf5542f8
LP
224 var request = new XMLHttpRequest();
225 request.open("GET", "/entries");
226 request.onreadystatechange = entriesOnResult;
227 request.setRequestHeader("Accept", "application/json");
228 request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
229 request.send(null);
230 }
231
232 function entriesLoadNext() {
233 if (last_cursor == null)
234 entriesLoad("");
235 else
236 entriesLoad(last_cursor + ":1");
237 }
238
239 function entriesLoadPrevious() {
240 if (first_cursor == null)
241 entriesLoad("");
242 else
243 entriesLoad(first_cursor + ":-" + getNEntries().toString());
244 }
245
246 function entriesLoadHead() {
247 entriesLoad("");
248 }
249
250 function entriesLoadTail() {
251 entriesLoad(":-" + getNEntries().toString());
252 }
253
254 function entriesOnResult(event) {
255
256 if ((event.currentTarget.readyState != 4) ||
257 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
258 return;
259
1dac8b79 260 var logs = document.getElementById("tablelogs");
bf5542f8
LP
261
262 var lc = null;
263 var fc = null;
264
265 var i;
266 var l = event.currentTarget.responseText.split('\n');
267
268 if (l.length <= 1) {
1dac8b79 269 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
bf5542f8
LP
270 return;
271 }
272
1dac8b79
LP
273 var buf = '';
274
bf5542f8
LP
275 for (i in l) {
276
277 if (l[i] == '')
278 continue;
279
280 var d = JSON.parse(l[i]);
281 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
282 continue;
283
284 if (fc == null)
285 fc = d.__CURSOR;
286 lc = d.__CURSOR;
287
288 var priority;
289 if (d.PRIORITY != undefined)
290 priority = parseInt(d.PRIORITY);
291 else
292 priority = 6;
293
294 if (priority <= 3)
1dac8b79 295 clazz = "message-error";
bf5542f8 296 else if (priority <= 5)
1dac8b79 297 clazz = "message-highlight";
bf5542f8 298 else
1dac8b79
LP
299 clazz = "message";
300
301 buf += '<tr><td class="timestamp">';
302
303 if (d.__REALTIME_TIMESTAMP != undefined) {
304 var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
305 buf += timestamp.toLocaleString();
306 }
bf5542f8 307
1dac8b79 308 buf += '</td><td class="process">';
bf5542f8
LP
309
310 if (d.SYSLOG_IDENTIFIER != undefined)
6c69cd86 311 buf += escapeHTML(d.SYSLOG_IDENTIFIER);
bf5542f8 312 else if (d._COMM != undefined)
6c69cd86 313 buf += escapeHTML(d._COMM);
bf5542f8
LP
314
315 if (d._PID != undefined)
6c69cd86 316 buf += "[" + escapeHTML(d._PID) + "]";
bf5542f8 317 else if (d.SYSLOG_PID != undefined)
6c69cd86 318 buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
1dac8b79 319
04909b0f 320 buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + d.__CURSOR + '\');">';
bf5542f8
LP
321
322 if (d.MESSAGE == null)
1dac8b79 323 buf += "[blob data]";
bf5542f8 324 else if (d.MESSAGE instanceof Array)
1dac8b79 325 buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
bf5542f8 326 else
522795e0 327 buf += escapeHTML(d.MESSAGE);
bf5542f8 328
c6511e85 329 buf += '</a></td></tr>';
bf5542f8
LP
330 }
331
c6511e85 332 logs.innerHTML = '<tbody>' + buf + '</tbody>';
1dac8b79 333
04909b0f 334 if (fc != null) {
bf5542f8 335 first_cursor = fc;
04909b0f
LP
336 localStorage["cursor"] = fc;
337 }
bf5542f8
LP
338 if (lc != null)
339 last_cursor = lc;
340 }
341
342 function entriesMore() {
343 setNEntries(getNEntries() + 10);
c6511e85 344 entriesLoad(first_cursor);
bf5542f8
LP
345 }
346
347 function entriesLess() {
348 setNEntries(getNEntries() - 10);
c6511e85
LP
349 entriesLoad(first_cursor);
350 }
351
352 function onResultMessageClick(event) {
353 if ((event.currentTarget.readyState != 4) ||
354 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
355 return;
356
357 var d = JSON.parse(event.currentTarget.responseText);
358
359 document.getElementById("diventry").style.display = "block";
c6511e85
LP
360 entry = document.getElementById("tableentry");
361
362 var buf = "";
c6511e85 363 for (var key in d){
6c69cd86 364 var data = d[key];
c6511e85 365
6c69cd86
LP
366 if (data == null)
367 data = "[blob data]";
368 else if (data instanceof Array)
369 data = "[" + formatBytes(data.length) + " blob data]";
370 else
371 data = escapeHTML(data);
372
373 buf += '<tr><td class="field">' + key + '</td><td class="data">' + data + '</td></tr>';
374 }
c6511e85
LP
375 entry.innerHTML = '<tbody>' + buf + '</tbody>';
376 }
377
378 function onMessageClick(t) {
379 var request = new XMLHttpRequest();
380 request.open("GET", "/entries?discrete");
381 request.onreadystatechange = onResultMessageClick;
382 request.setRequestHeader("Accept", "application/json");
383 request.setRequestHeader("Range", "entries=" + t + ":0:1");
384 request.send(null);
bf5542f8
LP
385 }
386
6d5f2f58
LP
387 function onKeyUp(event) {
388 switch (event.keyCode) {
389 case 8:
390 case 37:
391 case 75:
392 entriesLoadPrevious();
393 break;
394 case 32:
395 case 39:
396 case 74:
397 entriesLoadNext();
398 break;
399
400 case 71:
401 if (event.shiftKey)
402 entriesLoadTail();
403 else
404 entriesLoadHead();
405 break;
406 case 171:
407 entriesMore();
408 break;
409 case 173:
410 entriesLess();
411 break;
412 }
413 }
414
19f8efac
KS
415 function onMouseWheel(event) {
416 if (event.detail < 0 || event.wheelDelta > 0)
417 entriesLoadPrevious();
418 else
419 entriesLoadNext();
420 }
421
bf5542f8 422 machineLoad();
04909b0f 423 entriesLoad(null);
bf5542f8 424 showNEntries(getNEntries());
6d5f2f58 425 document.onkeyup = onKeyUp;
19f8efac
KS
426
427 logs = document.getElementById("tablelogs");
428 logs.addEventListener("mousewheel", onMouseWheel, false);
429 logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
bf5542f8
LP
430 </script>
431</body>
432</html>