chiark / gitweb /
068b296da1f1a3a2da6fd0d0c68e9eb76ee7d6f8
[elogind.git] / src / journal / 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: 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                 }
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: 5em;
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         </style>
80 </head>
81
82 <body>
83         <!-- TODO:
84
85                 - show red lines for reboots
86                 - show contents of entries -->
87
88         <h1 id="title"></h1>
89
90         <div id="os"></div>
91         <div id="virtualization"></div>
92         <div id="cutoff"></div>
93         <div id="machine"></div>
94         <div id="usage"></div>
95         <div id="showing"></div>
96
97         <div id="divlogs"><table id="tablelogs"></table></div>
98         <a name="entry"></a>
99         <div id="diventry"><table id="tableentry"></table></div>
100
101         <form>
102                 <input id="head" type="button" value="|&lt;" onclick="entriesLoadHead();"/>
103                 <input id="previous" type="button" value="&lt;&lt;" onclick="entriesLoadPrevious();"/>
104                 <input id="next" type="button" value="&gt;&gt;" onclick="entriesLoadNext();"/>
105                 <input id="tail" type="button" value="&gt;|" onclick="entriesLoadTail();"/>
106                 &nbsp;&nbsp;&nbsp;&nbsp;
107                 <input id="more" type="button" value="More" onclick="entriesMore();"/>
108                 <input id="less" type="button" value="Less" onclick="entriesLess();"/>
109         </form>
110
111         <script type="text/javascript">
112                 var first_cursor = null;
113                 var last_cursor = null;
114
115                 function setCookie(name, value, msec) {
116                         var d = new Date();
117                         d.setMilliseconds(d.getMilliseconds() + msec);
118                         var v = escape(value) + "; expires=" + d.toUTCString();
119                         document.cookie = name + "=" + value;
120                 }
121
122                 function getCookie(name) {
123                         var i, l;
124                         l = document.cookie.split(";");
125                         for (i in l) {
126                                 var x, y, j;
127                                 j = l[i].indexOf("=");
128                                 x = l[i].substr(0, j);
129                                 y = l[i].substr(j+1);
130                                 if (x == name)
131                                         return unescape(y);
132                         }
133                         return null;
134                 }
135
136                 function getNEntries() {
137                         var n;
138                         n = getCookie("n_entries");
139                         if (n == null)
140                                 return 50;
141                         return parseInt(n);
142                 }
143
144                 function showNEntries(n) {
145                         var showing = document.getElementById("showing");
146                         showing.innerHTML = "Showing <b>" + n.toString() + "</b> entries.";
147                 }
148
149                 function setNEntries(n) {
150                         if (n < 10)
151                                 n = 10;
152                         else if (n > 1000)
153                                 n = 1000;
154
155                         setCookie("n_entries", n.toString(), 30*24*60*60*1000);
156                         showNEntries(n);
157                 }
158
159                 function machineLoad() {
160                         var request = new XMLHttpRequest();
161                         request.open("GET", "/machine");
162                         request.onreadystatechange = machineOnResult;
163                         request.setRequestHeader("Accept", "application/json");
164                         request.send(null);
165                 }
166
167                 function formatBytes(u) {
168                         if (u >= 1024*1024*1024*1024)
169                                 return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
170                         else if (u >= 1024*1024*1024)
171                                 return (u/1024/1024/1024).toFixed(1) + " GiB";
172                         else if (u >= 1024*1024)
173                                 return (u/1024/1024).toFixed(1) + " MiB";
174                         else if (u >= 1024)
175                                 return (u/1024).toFixed(1) + " KiB";
176                         else
177                                 return u.toString() + " B";
178                 }
179
180                 function machineOnResult(event) {
181                         if ((event.currentTarget.readyState != 4) ||
182                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
183                                 return;
184
185                         var d = JSON.parse(event.currentTarget.responseText);
186
187                         var title = document.getElementById("title");
188                         title.innerHTML = 'Journal of ' + d.hostname;
189                         document.title = 'Journal of ' + d.hostname;
190
191                         var machine = document.getElementById("machine");
192                         machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
193
194                         var cutoff = document.getElementById("cutoff");
195                         var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
196                         var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
197                         cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
198
199                         var usage = document.getElementById("usage");
200                         usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
201
202                         var os = document.getElementById("os");
203                         os.innerHTML = 'Operating system is <b>' + d.os_pretty_name + '</b>.';
204
205                         var virtualization = document.getElementById("virtualization");
206                         virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + d.virtualization + "</b>.";
207                 }
208
209                 function entriesLoad(range) {
210                         var request = new XMLHttpRequest();
211                         request.open("GET", "/entries");
212                         request.onreadystatechange = entriesOnResult;
213                         request.setRequestHeader("Accept", "application/json");
214                         request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
215                         request.send(null);
216                 }
217
218                 function entriesLoadNext() {
219                         if (last_cursor == null)
220                                 entriesLoad("");
221                         else
222                                 entriesLoad(last_cursor + ":1");
223                 }
224
225                 function entriesLoadPrevious() {
226                         if (first_cursor == null)
227                                 entriesLoad("");
228                         else
229                                 entriesLoad(first_cursor + ":-" + getNEntries().toString());
230                 }
231
232                 function entriesLoadHead() {
233                         entriesLoad("");
234                 }
235
236                 function entriesLoadTail() {
237                         entriesLoad(":-" + getNEntries().toString());
238                 }
239
240                 function entriesOnResult(event) {
241
242                         if ((event.currentTarget.readyState != 4) ||
243                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
244                                 return;
245
246                         var logs = document.getElementById("tablelogs");
247
248                         var lc = null;
249                         var fc = null;
250
251                         var i;
252                         var l = event.currentTarget.responseText.split('\n');
253
254                         if (l.length <= 1) {
255                                 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
256                                 return;
257                         }
258
259                         var buf = '';
260
261                         for (i in l) {
262
263                                 if (l[i] == '')
264                                         continue;
265
266                                 var d = JSON.parse(l[i]);
267                                 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
268                                         continue;
269
270                                 if (fc == null)
271                                         fc = d.__CURSOR;
272                                 lc = d.__CURSOR;
273
274                                 var priority;
275                                 if (d.PRIORITY != undefined)
276                                         priority = parseInt(d.PRIORITY);
277                                 else
278                                         priority = 6;
279
280                                 if (priority <= 3)
281                                         clazz = "message-error";
282                                 else if (priority <= 5)
283                                         clazz = "message-highlight";
284                                 else
285                                         clazz = "message";
286
287                                 buf += '<tr><td class="timestamp">';
288
289                                 if (d.__REALTIME_TIMESTAMP != undefined) {
290                                         var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
291                                         buf += timestamp.toLocaleString();
292                                 }
293
294                                 buf += '</td><td class="process">';
295
296                                 if (d.SYSLOG_IDENTIFIER != undefined)
297                                         buf += d.SYSLOG_IDENTIFIER;
298                                 else if (d._COMM != undefined)
299                                         buf += d._COMM;
300
301                                 if (d._PID != undefined)
302                                         buf += "[" + d._PID + "]";
303                                 else if (d.SYSLOG_PID != undefined)
304                                         buf += "[" + d.SYSLOG_PID + "]";
305
306                                 buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + lc + '\');">';
307
308                                 if (d.MESSAGE == null)
309                                         buf += "[blob data]";
310                                 else if (d.MESSAGE instanceof Array)
311                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
312                                 else
313                                         buf += d.MESSAGE;
314
315                                 buf += '</a></td></tr>';
316                         }
317
318                         logs.innerHTML = '<tbody>' + buf + '</tbody>';
319
320                         if (fc != null)
321                                 first_cursor = fc;
322                         if (lc != null)
323                                 last_cursor = lc;
324                 }
325
326                 function entriesMore() {
327                         setNEntries(getNEntries() + 10);
328                         entriesLoad(first_cursor);
329                 }
330
331                 function entriesLess() {
332                         setNEntries(getNEntries() - 10);
333                         entriesLoad(first_cursor);
334                 }
335
336                 function onResultMessageClick(event) {
337                         if ((event.currentTarget.readyState != 4) ||
338                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
339                                 return;
340
341                         var d = JSON.parse(event.currentTarget.responseText);
342
343                         document.getElementById("diventry").style.display = "block";
344
345                         entry = document.getElementById("tableentry");
346
347                         var buf = "";
348
349                         for (var key in d){
350                                 buf += '<tr><td class="field">' + key + '</td><td class="data">' + d[key] + '</td></tr>';
351                         }
352
353                         entry.innerHTML = '<tbody>' + buf + '</tbody>';
354                 }
355
356                 function onMessageClick(t) {
357                         var request = new XMLHttpRequest();
358                         request.open("GET", "/entries?discrete");
359                         request.onreadystatechange = onResultMessageClick;
360                         request.setRequestHeader("Accept", "application/json");
361                         request.setRequestHeader("Range", "entries=" + t + ":0:1");
362                         request.send(null);
363                 }
364
365                 machineLoad();
366                 entriesLoad("");
367                 showNEntries(getNEntries());
368         </script>
369 </body>
370 </html>