fix(journal-gatewayd): use relative urls (not starting with '/')
[thirdparty/systemd.git] / src / journal-remote / browse.html
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">
7                 div#divlogs, div#diventry {
8                         font-family: monospace;
9                         font-size: 7pt;
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                 }
18                 div#diventry {
19                         display: none;
20                 }
21                 div#divlogs {
22                         display: block;
23                 }
24                 body {
25                         background-color: #ededed;
26                         color: #313739;
27                         font: message-box;
28                         margin: 3em;
29                 }
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                 }
43                 td.message > a:link, td.message > a:visited {
44                         text-decoration: none;
45                         color: #313739;
46                 }
47                 td.message-error {
48                         padding-left: 5px;
49                         color: red;
50                         font-weight: bold;
51                 }
52                 td.message-error > a:link, td.message-error > a:visited {
53                         text-decoration: none;
54                         color: red;
55                 }
56                 td.message-highlight {
57                         padding-left: 5px;
58                         font-weight: bold;
59                 }
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;
78                 }
79                 div#keynav {
80                         text-align: center;
81                         font-size: 7pt;
82                         color: #818789;
83                         padding-top: 2em;
84                 }
85                 span.key {
86                         font-weight: bold;
87                         color: #313739;
88                 }
89                 div#buttonnav {
90                         text-align: center;
91                 }
92                 button {
93                         font-size: 18pt;
94                         font-weight: bold;
95                         width: 2em;
96                         height: 2em;
97                 }
98                 div#filternav {
99                         text-align: center;
100                 }
101                 select {
102                         width: 50em;
103                 }
104         </style>
105 </head>
106
107 <body>
108         <!-- TODO:
109                 - live display
110                 - show red lines for reboots -->
111
112         <h1 id="title"></h1>
113
114         <div id="os"></div>
115         <div id="virtualization"></div>
116         <div id="cutoff"></div>
117         <div id="machine"></div>
118         <div id="usage"></div>
119         <div id="showing"></div>
120
121         <div id="filternav">
122                 <select id="filter" onchange="onFilterChange(this);" onfocus="onFilterFocus(this);">
123                         <option>No filter</option>
124                 </select>
125                 &nbsp;&nbsp;&nbsp;&nbsp;
126                 <input id="boot" type="checkbox" onchange="onBootChange(this);">Only current boot</input>
127         </div>
128
129         <div id="divlogs"><table id="tablelogs"></table></div>
130         <a name="entry"></a>
131         <div id="diventry"><table id="tableentry"></table></div>
132
133         <div id="buttonnav">
134                 <button id="head" onclick="entriesLoadHead();" title="First Page">&#8676;</button>
135                 <button id="previous" type="button" onclick="entriesLoadPrevious();" title="Previous Page"/>&#8592;</button>
136                 <button id="next" type="button" onclick="entriesLoadNext();" title="Next Page"/>&#8594;</button>
137                 <button id="tail" type="button" onclick="entriesLoadTail();" title="Last Page"/>&#8677;</button>
138                 &nbsp;&nbsp;&nbsp;&nbsp;
139                 <button id="more" type="button" onclick="entriesMore();" title="More Entries"/>+</button>
140                 <button id="less" type="button" onclick="entriesLess();" title="Fewer Entries"/>-</button>
141         </div>
142
143         <div id="keynav">
144                 <span class="key">g</span>: First Page &nbsp;&nbsp;&nbsp;&nbsp;
145                 <span class="key">&#8592;, k, BACKSPACE</span>: Previous Page &nbsp;&nbsp;&nbsp;&nbsp;
146                 <span class="key">&#8594;, j, SPACE</span>: Next Page &nbsp;&nbsp;&nbsp;&nbsp;
147                 <span class="key">G</span>: Last Page &nbsp;&nbsp;&nbsp;&nbsp;
148                 <span class="key">+</span>: More entries &nbsp;&nbsp;&nbsp;&nbsp;
149                 <span class="key">-</span>: Fewer entries
150         </div>
151
152         <script type="text/javascript">
153                 var first_cursor = null;
154                 var last_cursor = null;
155
156                 function getNEntries() {
157                         var n;
158                         n = localStorage["n_entries"];
159                         if (n == null)
160                                 return 50;
161                         n = parseInt(n);
162                         if (n < 10)
163                                 return 10;
164                         if (n > 1000)
165                                 return 1000;
166                         return n;
167                 }
168
169                 function showNEntries(n) {
170                         var showing = document.getElementById("showing");
171                         showing.innerHTML = "Showing <b>" + n.toString() + "</b> entries.";
172                 }
173
174                 function setNEntries(n) {
175                         if (n < 10)
176                                 return 10;
177                         if (n > 1000)
178                                 return 1000;
179                         localStorage["n_entries"] = n.toString();
180                         showNEntries(n);
181                 }
182
183                 function machineLoad() {
184                         var request = new XMLHttpRequest();
185                         request.open("GET", "machine");
186                         request.onreadystatechange = machineOnResult;
187                         request.setRequestHeader("Accept", "application/json");
188                         request.send(null);
189                 }
190
191                 function formatBytes(u) {
192                         if (u >= 1024*1024*1024*1024)
193                                 return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
194                         else if (u >= 1024*1024*1024)
195                                 return (u/1024/1024/1024).toFixed(1) + " GiB";
196                         else if (u >= 1024*1024)
197                                 return (u/1024/1024).toFixed(1) + " MiB";
198                         else if (u >= 1024)
199                                 return (u/1024).toFixed(1) + " KiB";
200                         else
201                                 return u.toString() + " B";
202                 }
203
204                 function escapeHTML(s) {
205                         return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
206                 }
207
208                 function machineOnResult(event) {
209                         if ((event.currentTarget.readyState != 4) ||
210                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
211                                 return;
212
213                         var d = JSON.parse(event.currentTarget.responseText);
214
215                         var title = document.getElementById("title");
216                         title.innerHTML = 'Journal of ' + escapeHTML(d.hostname);
217                         document.title = 'Journal of ' + escapeHTML(d.hostname);
218
219                         var machine = document.getElementById("machine");
220                         machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
221
222                         var cutoff = document.getElementById("cutoff");
223                         var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
224                         var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
225                         cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
226
227                         var usage = document.getElementById("usage");
228                         usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
229
230                         var os = document.getElementById("os");
231                         os.innerHTML = 'Operating system is <b>' + escapeHTML(d.os_pretty_name) + '</b>.';
232
233                         var virtualization = document.getElementById("virtualization");
234                         virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + escapeHTML(d.virtualization) + "</b>.";
235                 }
236
237                 function entriesLoad(range) {
238
239                         if (range == null) {
240                                 if (localStorage["cursor"] != null && localStorage["cursor"] != "")
241                                         range = localStorage["cursor"] + ":0";
242                                 else
243                                         range = "";
244                         }
245
246                         var url = "entries";
247
248                         if (localStorage["filter"] != "" && localStorage["filter"] != null) {
249                                 url += "?_SYSTEMD_UNIT=" + escape(localStorage["filter"]);
250
251                                 if (localStorage["boot"] == "1")
252                                         url += "&boot";
253                         } else {
254                                 if (localStorage["boot"] == "1")
255                                         url += "?boot";
256                         }
257
258                         var request = new XMLHttpRequest();
259                         request.open("GET", url);
260                         request.onreadystatechange = entriesOnResult;
261                         request.setRequestHeader("Accept", "application/json");
262                         request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
263                         request.send(null);
264                 }
265
266                 function entriesLoadNext() {
267                         if (last_cursor == null)
268                                 entriesLoad("");
269                         else
270                                 entriesLoad(last_cursor + ":1");
271                 }
272
273                 function entriesLoadPrevious() {
274                         if (first_cursor == null)
275                                 entriesLoad("");
276                         else
277                                 entriesLoad(first_cursor + ":-" + getNEntries().toString());
278                 }
279
280                 function entriesLoadHead() {
281                         entriesLoad("");
282                 }
283
284                 function entriesLoadTail() {
285                         entriesLoad(":-" + getNEntries().toString());
286                 }
287
288                 function entriesOnResult(event) {
289
290                         if ((event.currentTarget.readyState != 4) ||
291                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
292                                 return;
293
294                         var logs = document.getElementById("tablelogs");
295
296                         var lc = null;
297                         var fc = null;
298
299                         var i, l = event.currentTarget.responseText.split('\n');
300
301                         if (l.length <= 1) {
302                                 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
303                                 return;
304                         }
305
306                         var buf = '';
307
308                         for (i in l) {
309                                 if (l[i] == '')
310                                         continue;
311
312                                 var d = JSON.parse(l[i]);
313                                 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
314                                         continue;
315
316                                 if (fc == null)
317                                         fc = d.__CURSOR;
318                                 lc = d.__CURSOR;
319
320                                 var priority;
321                                 if (d.PRIORITY != undefined)
322                                         priority = parseInt(d.PRIORITY);
323                                 else
324                                         priority = 6;
325
326                                 var clazz;
327                                 if (priority <= 3)
328                                         clazz = "message-error";
329                                 else if (priority <= 5)
330                                         clazz = "message-highlight";
331                                 else
332                                         clazz = "message";
333
334                                 buf += '<tr><td class="timestamp">';
335
336                                 if (d.__REALTIME_TIMESTAMP != undefined) {
337                                         var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
338                                         buf += timestamp.toLocaleString();
339                                 }
340
341                                 buf += '</td><td class="process">';
342
343                                 if (d.SYSLOG_IDENTIFIER != undefined)
344                                         buf += escapeHTML(d.SYSLOG_IDENTIFIER);
345                                 else if (d._COMM != undefined)
346                                         buf += escapeHTML(d._COMM);
347
348                                 if (d._PID != undefined)
349                                         buf += "[" + escapeHTML(d._PID) + "]";
350                                 else if (d.SYSLOG_PID != undefined)
351                                         buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
352
353                                 buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + d.__CURSOR + '\');">';
354
355                                 if (d.MESSAGE == null)
356                                         buf += "[blob data]";
357                                 else if (d.MESSAGE instanceof Array)
358                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
359                                 else
360                                         buf += escapeHTML(d.MESSAGE);
361
362                                 buf += '</a></td></tr>';
363                         }
364
365                         logs.innerHTML = '<tbody>' + buf + '</tbody>';
366
367                         if (fc != null) {
368                                 first_cursor = fc;
369                                 localStorage["cursor"] = fc;
370                         }
371                         if (lc != null)
372                                 last_cursor = lc;
373                 }
374
375                 function entriesMore() {
376                         setNEntries(getNEntries() + 10);
377                         entriesLoad(first_cursor);
378                 }
379
380                 function entriesLess() {
381                         setNEntries(getNEntries() - 10);
382                         entriesLoad(first_cursor);
383                 }
384
385                 function onResultMessageClick(event) {
386                         if ((event.currentTarget.readyState != 4) ||
387                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
388                                 return;
389
390                         var d = JSON.parse(event.currentTarget.responseText);
391
392                         document.getElementById("diventry").style.display = "block";
393                         var entry = document.getElementById("tableentry");
394
395                         var buf = "";
396                         for (var key in d) {
397                                 var data = d[key];
398
399                                 if (data == null)
400                                         data = "[blob data]";
401                                 else if (data instanceof Array)
402                                         data = "[" + formatBytes(data.length) + " blob data]";
403                                 else
404                                         data = escapeHTML(data);
405
406                                 buf += '<tr><td class="field">' + key + '</td><td class="data">' + data + '</td></tr>';
407                         }
408                         entry.innerHTML = '<tbody>' + buf + '</tbody>';
409                 }
410
411                 function onMessageClick(t) {
412                         var request = new XMLHttpRequest();
413                         request.open("GET", "entries?discrete");
414                         request.onreadystatechange = onResultMessageClick;
415                         request.setRequestHeader("Accept", "application/json");
416                         request.setRequestHeader("Range", "entries=" + t + ":0:1");
417                         request.send(null);
418                 }
419
420                 function onKeyUp(event) {
421                         switch (event.keyCode) {
422                                 case 8:
423                                 case 37:
424                                 case 75:
425                                         entriesLoadPrevious();
426                                         break;
427                                 case 32:
428                                 case 39:
429                                 case 74:
430                                         entriesLoadNext();
431                                         break;
432
433                                 case 71:
434                                         if (event.shiftKey)
435                                                 entriesLoadTail();
436                                         else
437                                                 entriesLoadHead();
438                                         break;
439                                 case 171:
440                                         entriesMore();
441                                         break;
442                                 case 173:
443                                         entriesLess();
444                                         break;
445                         }
446                 }
447
448                 function onMouseWheel(event) {
449                         if (event.detail < 0 || event.wheelDelta > 0)
450                                 entriesLoadPrevious();
451                         else
452                                 entriesLoadNext();
453                 }
454
455                 function onResultFilterFocus(event) {
456                         if ((event.currentTarget.readyState != 4) ||
457                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
458                                 return;
459
460                         var f = document.getElementById("filter");
461
462                         var l = event.currentTarget.responseText.split('\n');
463                         var buf = '<option>No filter</option>';
464                         var j = -1;
465
466                         for (i in l) {
467
468                                 if (l[i] == '')
469                                       continue;
470
471                                 var d = JSON.parse(l[i]);
472                                 if (d._SYSTEMD_UNIT == undefined)
473                                       continue;
474
475                                 buf += '<option value="' + escape(d._SYSTEMD_UNIT) + '">' + escapeHTML(d._SYSTEMD_UNIT) + '</option>';
476
477                                 if (d._SYSTEMD_UNIT == localStorage["filter"])
478                                         j = i;
479                         }
480
481                         if (j < 0) {
482                                 if (localStorage["filter"] != null && localStorage["filter"] != "") {
483                                           buf += '<option value="' + escape(localStorage["filter"]) + '">' + escapeHTML(localStorage["filter"]) + '</option>';
484                                           j = i + 1;
485                                 } else
486                                           j = 0;
487                         }
488
489                         f.innerHTML = buf;
490                         f.selectedIndex = j;
491                 }
492
493                 function onFilterFocus(w) {
494                         var request = new XMLHttpRequest();
495                         request.open("GET", "fields/_SYSTEMD_UNIT");
496                         request.onreadystatechange = onResultFilterFocus;
497                         request.setRequestHeader("Accept", "application/json");
498                         request.send(null);
499                 }
500
501                 function onFilterChange(w) {
502                         if (w.selectedIndex <= 0)
503                                 localStorage["filter"] = "";
504                         else
505                                 localStorage["filter"] = unescape(w.options[w.selectedIndex].value);
506
507                         entriesLoadHead();
508                 }
509
510                 function onBootChange(w) {
511                         localStorage["boot"] = w.checked ? "1" : "0";
512                         entriesLoadHead();
513                 }
514
515                 function initFilter() {
516                         var f = document.getElementById("filter");
517
518                         var buf = '<option>No filter</option>';
519
520                         var filter = localStorage["filter"];
521                         var j;
522                         if (filter != null && filter != "") {
523                                 buf += '<option value="' + escape(filter) + '">' + escapeHTML(filter) + '</option>';
524                                 j = 1;
525                         } else
526                                 j = 0;
527
528                         f.innerHTML = buf;
529                         f.selectedIndex = j;
530                 }
531
532                 function installHandlers() {
533                         document.onkeyup = onKeyUp;
534
535                         var logs = document.getElementById("divlogs");
536                         logs.addEventListener("mousewheel", onMouseWheel, false);
537                         logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
538                 }
539
540                 machineLoad();
541                 entriesLoad(null);
542                 showNEntries(getNEntries());
543                 initFilter();
544                 installHandlers();
545         </script>
546 </body>
547 </html>