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 {
   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                 body {
  19                         background-color: #ededed;
  20                         color: #313739;
  21                         font: message-box;
  22                         margin: 5em;
  23                 }
  24                 td.timestamp {
  25                         text-align: right;
  26                         border-right: 1px dotted lightgrey;
  27                         padding-right: 5px;
  28                 }
  29                 td.process {
  30                         border-right: 1px dotted lightgrey;
  31                         padding-left: 5px;
  32                         padding-right: 5px;
  33                 }
  34                 td.message {
  35                         padding-left: 5px;
  36                 }
  37                 td.message-error {
  38                         padding-left: 5px;
  39                         color: red;
  40                         font-weight: bold;
  41                 }
  42                 td.message-highlight {
  43                         padding-left: 5px;
  44                         font-weight: bold;
  45                 }
  46                 table#tablelogs {
  47                         border-collapse:collapse;
  48                 }
  49         </style>
  50 </head>
  51
  52 <body>
  53         <!-- TODO:
  54
  55                 - show red lines for reboots
  56                 - show contents of entries -->
  57
  58         <h1 id="title"></h1>
  59
  60         <div id="os"></div>
  61         <div id="virtualization"></div>
  62         <div id="cutoff"></div>
  63         <div id="machine"></div>
  64         <div id="usage"></div>
  65         <div id="showing"></div>
  66
  67         <div id="divlogs"><table id="tablelogs"></table></div>
  68
  69         <form>
  70                 <input id="head" type="button" value="|&lt;" onclick="entriesLoadHead();"/>
  71                 <input id="previous" type="button" value="&lt;&lt;" onclick="entriesLoadPrevious();"/>
  72                 <input id="next" type="button" value="&gt;&gt;" onclick="entriesLoadNext();"/>
  73                 <input id="tail" type="button" value="&gt;|" onclick="entriesLoadTail();"/>
  74                 &nbsp;&nbsp;&nbsp;&nbsp;
  75                 <input id="more" type="button" value="More" onclick="entriesMore();"/>
  76                 <input id="less" type="button" value="Less" onclick="entriesLess();"/>
  77         </form>
  78
  79         <script type="text/javascript">
  80                 var first_cursor = null;
  81                 var last_cursor = null;
  82
  83                 function setCookie(name, value, msec) {
  84                         var d = new Date();
  85                         d.setMilliseconds(d.getMilliseconds() + msec);
  86                         var v = escape(value) + "; expires=" + d.toUTCString();
  87                         document.cookie = name + "=" + value;
  88                 }
  89
  90                 function getCookie(name) {
  91                         var i, l;
  92                         l = document.cookie.split(";");
  93                         for (i in l) {
  94                                 var x, y, j;
  95                                 j = l[i].indexOf("=");
  96                                 x = l[i].substr(0, j);
  97                                 y = l[i].substr(j+1);
  98                                 if (x == name)
  99                                         return unescape(y);
 100                         }
 101                         return null;
 102                 }
 103
 104                 function getNEntries() {
 105                         var n;
 106                         n = getCookie("n_entries");
 107                         if (n == null)
 108                                 return 50;
 109                         return parseInt(n);
 110                 }
 111
 112                 function showNEntries(n) {
 113                         var showing = document.getElementById("showing");
 114                         showing.innerHTML = "Showing <b>" + n.toString() + "</b> entries.";
 115                 }
 116
 117                 function setNEntries(n) {
 118                         if (n < 10)
 119                                 n = 10;
 120                         else if (n > 1000)
 121                                 n = 1000;
 122
 123                         setCookie("n_entries", n.toString(), 30*24*60*60*1000);
 124                         showNEntries(n);
 125                 }
 126
 127                 function machineLoad() {
 128                         var request = new XMLHttpRequest();
 129                         request.open("GET", "/machine");
 130                         request.onreadystatechange = machineOnResult;
 131                         request.setRequestHeader("Accept", "application/json");
 132                         request.send(null);
 133                 }
 134
 135                 function formatBytes(u) {
 136                         if (u >= 1024*1024*1024*1024)
 137                                 return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
 138                         else if (u >= 1024*1024*1024)
 139                                 return (u/1024/1024/1024).toFixed(1) + " GiB";
 140                         else if (u >= 1024*1024)
 141                                 return (u/1024/1024).toFixed(1) + " MiB";
 142                         else if (u >= 1024)
 143                                 return (u/1024).toFixed(1) + " KiB";
 144                         else
 145                                 return u.toString() + " B";
 146                 }
 147
 148                 function machineOnResult(event) {
 149                         if ((event.currentTarget.readyState != 4) ||
 150                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 151                                 return;
 152
 153                         var d = JSON.parse(event.currentTarget.responseText);
 154
 155                         var title = document.getElementById("title");
 156                         title.innerHTML = 'Journal of ' + d.hostname;
 157                         document.title = 'Journal of ' + d.hostname;
 158
 159                         var machine = document.getElementById("machine");
 160                         machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
 161
 162                         var cutoff = document.getElementById("cutoff");
 163                         var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
 164                         var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
 165                         cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
 166
 167                         var usage = document.getElementById("usage");
 168                         usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
 169
 170                         var os = document.getElementById("os");
 171                         os.innerHTML = 'Operating system is <b>' + d.os_pretty_name + '</b>.';
 172
 173                         var virtualization = document.getElementById("virtualization");
 174                         virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + d.virtualization + "</b>.";
 175                 }
 176
 177                 function entriesLoad(range) {
 178                         var request = new XMLHttpRequest();
 179                         request.open("GET", "/entries");
 180                         request.onreadystatechange = entriesOnResult;
 181                         request.setRequestHeader("Accept", "application/json");
 182                         request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
 183                         request.send(null);
 184                 }
 185
 186                 function entriesLoadNext() {
 187                         if (last_cursor == null)
 188                                 entriesLoad("");
 189                         else
 190                                 entriesLoad(last_cursor + ":1");
 191                 }
 192
 193                 function entriesLoadPrevious() {
 194                         if (first_cursor == null)
 195                                 entriesLoad("");
 196                         else
 197                                 entriesLoad(first_cursor + ":-" + getNEntries().toString());
 198                 }
 199
 200                 function entriesLoadHead() {
 201                         entriesLoad("");
 202                 }
 203
 204                 function entriesLoadTail() {
 205                         entriesLoad(":-" + getNEntries().toString());
 206                 }
 207
 208                 function entriesOnResult(event) {
 209
 210                         if ((event.currentTarget.readyState != 4) ||
 211                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 212                                 return;
 213
 214                         var logs = document.getElementById("tablelogs");
 215
 216                         var lc = null;
 217                         var fc = null;
 218
 219                         var i;
 220                         var l = event.currentTarget.responseText.split('\n');
 221
 222                         if (l.length <= 1) {
 223                                 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
 224                                 return;
 225                         }
 226
 227                         var buf = '';
 228
 229                         for (i in l) {
 230
 231                                 if (l[i] == '')
 232                                         continue;
 233
 234                                 var d = JSON.parse(l[i]);
 235                                 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
 236                                         continue;
 237
 238                                 if (fc == null)
 239                                         fc = d.__CURSOR;
 240                                 lc = d.__CURSOR;
 241
 242                                 var priority;
 243                                 if (d.PRIORITY != undefined)
 244                                         priority = parseInt(d.PRIORITY);
 245                                 else
 246                                         priority = 6;
 247
 248                                 if (priority <= 3)
 249                                         clazz = "message-error";
 250                                 else if (priority <= 5)
 251                                         clazz = "message-highlight";
 252                                 else
 253                                         clazz = "message";
 254
 255                                 buf += '<tr><td class="timestamp">';
 256
 257                                 if (d.__REALTIME_TIMESTAMP != undefined) {
 258                                         var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
 259                                         buf += timestamp.toLocaleString();
 260                                 }
 261
 262                                 buf += '</td><td class="process">';
 263
 264                                 if (d.SYSLOG_IDENTIFIER != undefined)
 265                                         buf += d.SYSLOG_IDENTIFIER;
 266                                 else if (d._COMM != undefined)
 267                                         buf += d._COMM;
 268
 269                                 if (d._PID != undefined)
 270                                         buf += "[" + d._PID + "]";
 271                                 else if (d.SYSLOG_PID != undefined)
 272                                         buf += "[" + d.SYSLOG_PID + "]";
 273
 274                                 buf += '</td><td class="' + clazz + '">';
 275
 276                                 if (d.MESSAGE == null)
 277                                         buf += "[blob data]";
 278                                 else if (d.MESSAGE instanceof Array)
 279                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
 280                                 else
 281                                         buf += d.MESSAGE;
 282
 283                                 buf += '</td></tr>';
 284                         }
 285
 286                         logs.innerHTML = buf + '</tbody>';
 287
 288                         if (fc != null)
 289                                 first_cursor = fc;
 290                         if (lc != null)
 291                                 last_cursor = lc;
 292                 }
 293
 294                 function entriesMore() {
 295                         setNEntries(getNEntries() + 10);
 296                         entriesLoad("");
 297                 }
 298
 299                 function entriesLess() {
 300                         setNEntries(getNEntries() - 10);
 301                         entriesLoad("");
 302                 }
 303
 304                 machineLoad();
 305                 entriesLoad("");
 306                 showNEntries(getNEntries());
 307         </script>
 308 </body>
 309 </html>