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                 div#keynav {
  80                         text-align: center;
  81                         font-size: 7pt;
  82                         color: #818789;
  83                         padding-top: 2em;
  84                 }
  85                 .key {
  86                         font-weight: bold;
  87                         color: #313739;
  88                 }
  89                 form {
  90                         text-align: center;
  91                 }
  92                 input {
  93                         font-size: 18pt;
  94                         font-weight: bold;
  95                 }
  96         </style>
  97 </head>
  98
  99 <body>
 100         <!-- TODO:
 101                 - live display
 102                 - show red lines for reboots -->
 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
 113         <div id="divlogs"><table id="tablelogs"></table></div>
 114         <a name="entry"></a>
 115         <div id="diventry"><table id="tableentry"></table></div>
 116
 117         <form>
 118                 <input id="head" type="button" value="&#8676;" onclick="entriesLoadHead();" title="First Page"/>
 119                 <input id="previous" type="button" value="&#8592;" onclick="entriesLoadPrevious();" title="Previous Page"/>
 120                 <input id="next" type="button" value="&#8594;" onclick="entriesLoadNext();" title="Next Page"/>
 121                 <input id="tail" type="button" value="&#8677;" onclick="entriesLoadTail();" title="Last Page"/>
 122                 &nbsp;&nbsp;&nbsp;&nbsp;
 123                 <input id="more" type="button" value="+" onclick="entriesMore();" title="More Entries"/>
 124                 <input id="less" type="button" value="-" onclick="entriesLess();" title="Fewer Entries"/>
 125         </form>
 126
 127         <div id="keynav">
 128                 <span class="key">g</span>: First Page &nbsp;&nbsp;&nbsp;&nbsp;
 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;
 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
 136         <script type="text/javascript">
 137                 var first_cursor = null;
 138                 var last_cursor = null;
 139
 140                 function getNEntries() {
 141                         var n;
 142                         n = window.localStorage["n_entries"];
 143                         if (n == null)
 144                                 return 50;
 145                         n = parseInt(n);
 146                         if (n < 10)
 147                                 return 10;
 148                         if (n > 1000)
 149                                 return 1000;
 150                         return n;
 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) {
 159                         if (n < 10)
 160                                 return 10;
 161                         if (n > 1000)
 162                                 return 1000;
 163                         window.localStorage["n_entries"] = n.toString();
 164                         showNEntries(n);
 165                 }
 166
 167                 function machineLoad() {
 168                         var request = new XMLHttpRequest();
 169                         request.open("GET", "/machine");
 170                         request.onreadystatechange = machineOnResult;
 171                         request.setRequestHeader("Accept", "application/json");
 172                         request.send(null);
 173                 }
 174
 175                 function formatBytes(u) {
 176                         if (u >= 1024*1024*1024*1024)
 177                                 return (u/1024/1024/1024/1024).toFixed(1) + " TiB";
 178                         else if (u >= 1024*1024*1024)
 179                                 return (u/1024/1024/1024).toFixed(1) + " GiB";
 180                         else if (u >= 1024*1024)
 181                                 return (u/1024/1024).toFixed(1) + " MiB";
 182                         else if (u >= 1024)
 183                                 return (u/1024).toFixed(1) + " KiB";
 184                         else
 185                                 return u.toString() + " B";
 186                 }
 187
 188                 function escapeHTML(s) {
 189                         return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 190                 }
 191
 192                 function machineOnResult(event) {
 193                         if ((event.currentTarget.readyState != 4) ||
 194                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 195                                 return;
 196
 197                         var d = JSON.parse(event.currentTarget.responseText);
 198
 199                         var title = document.getElementById("title");
 200                         title.innerHTML = 'Journal of ' + escapeHTML(d.hostname);
 201                         document.title = 'Journal of ' + escapeHTML(d.hostname);
 202
 203                         var machine = document.getElementById("machine");
 204                         machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
 205
 206                         var cutoff = document.getElementById("cutoff");
 207                         var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
 208                         var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
 209                         cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
 210
 211                         var usage = document.getElementById("usage");
 212                         usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
 213
 214                         var os = document.getElementById("os");
 215                         os.innerHTML = 'Operating system is <b>' + escapeHTML(d.os_pretty_name) + '</b>.';
 216
 217                         var virtualization = document.getElementById("virtualization");
 218                         virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + escapeHTML(d.virtualization) + "</b>.";
 219                 }
 220
 221                 function entriesLoad(range) {
 222
 223                         if (range == null)
 224                                 range = window.localStorage["cursor"] + ":0";
 225                         if (range == null)
 226                                 range = "";
 227
 228                         var request = new XMLHttpRequest();
 229                         request.open("GET", "/entries");
 230                         request.onreadystatechange = entriesOnResult;
 231                         request.setRequestHeader("Accept", "application/json");
 232                         request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
 233                         request.send(null);
 234                 }
 235
 236                 function entriesLoadNext() {
 237                         if (last_cursor == null)
 238                                 entriesLoad("");
 239                         else
 240                                 entriesLoad(last_cursor + ":1");
 241                 }
 242
 243                 function entriesLoadPrevious() {
 244                         if (first_cursor == null)
 245                                 entriesLoad("");
 246                         else
 247                                 entriesLoad(first_cursor + ":-" + getNEntries().toString());
 248                 }
 249
 250                 function entriesLoadHead() {
 251                         entriesLoad("");
 252                 }
 253
 254                 function entriesLoadTail() {
 255                         entriesLoad(":-" + getNEntries().toString());
 256                 }
 257
 258                 function entriesOnResult(event) {
 259
 260                         if ((event.currentTarget.readyState != 4) ||
 261                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 262                                 return;
 263
 264                         var logs = document.getElementById("tablelogs");
 265
 266                         var lc = null;
 267                         var fc = null;
 268
 269                         var i;
 270                         var l = event.currentTarget.responseText.split('\n');
 271
 272                         if (l.length <= 1) {
 273                                 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
 274                                 return;
 275                         }
 276
 277                         var buf = '';
 278
 279                         for (i in l) {
 280
 281                                 if (l[i] == '')
 282                                         continue;
 283
 284                                 var d = JSON.parse(l[i]);
 285                                 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
 286                                         continue;
 287
 288                                 if (fc == null)
 289                                         fc = d.__CURSOR;
 290                                 lc = d.__CURSOR;
 291
 292                                 var priority;
 293                                 if (d.PRIORITY != undefined)
 294                                         priority = parseInt(d.PRIORITY);
 295                                 else
 296                                         priority = 6;
 297
 298                                 if (priority <= 3)
 299                                         clazz = "message-error";
 300                                 else if (priority <= 5)
 301                                         clazz = "message-highlight";
 302                                 else
 303                                         clazz = "message";
 304
 305                                 buf += '<tr><td class="timestamp">';
 306
 307                                 if (d.__REALTIME_TIMESTAMP != undefined) {
 308                                         var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
 309                                         buf += timestamp.toLocaleString();
 310                                 }
 311
 312                                 buf += '</td><td class="process">';
 313
 314                                 if (d.SYSLOG_IDENTIFIER != undefined)
 315                                         buf += escapeHTML(d.SYSLOG_IDENTIFIER);
 316                                 else if (d._COMM != undefined)
 317                                         buf += escapeHTML(d._COMM);
 318
 319                                 if (d._PID != undefined)
 320                                         buf += "[" + escapeHTML(d._PID) + "]";
 321                                 else if (d.SYSLOG_PID != undefined)
 322                                         buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
 323
 324                                 buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + d.__CURSOR + '\');">';
 325
 326                                 if (d.MESSAGE == null)
 327                                         buf += "[blob data]";
 328                                 else if (d.MESSAGE instanceof Array)
 329                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
 330                                 else
 331                                         buf += escapeHTML(d.MESSAGE);
 332
 333                                 buf += '</a></td></tr>';
 334                         }
 335
 336                         logs.innerHTML = '<tbody>' + buf + '</tbody>';
 337
 338                         if (fc != null) {
 339                                 first_cursor = fc;
 340                                 window.localStorage["cursor"] = fc;
 341                         }
 342                         if (lc != null)
 343                                 last_cursor = lc;
 344                 }
 345
 346                 function entriesMore() {
 347                         setNEntries(getNEntries() + 10);
 348                         entriesLoad(first_cursor);
 349                 }
 350
 351                 function entriesLess() {
 352                         setNEntries(getNEntries() - 10);
 353                         entriesLoad(first_cursor);
 354                 }
 355
 356                 function onResultMessageClick(event) {
 357                         if ((event.currentTarget.readyState != 4) ||
 358                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 359                                 return;
 360
 361                         var d = JSON.parse(event.currentTarget.responseText);
 362
 363                         document.getElementById("diventry").style.display = "block";
 364                         entry = document.getElementById("tableentry");
 365
 366                         var buf = "";
 367                         for (var key in d){
 368                                 var data = d[key];
 369
 370                                 if (data == null)
 371                                         data = "[blob data]";
 372                                 else if (data instanceof Array)
 373                                         data = "[" + formatBytes(data.length) + " blob data]";
 374                                 else
 375                                         data = escapeHTML(data);
 376
 377                                 buf += '<tr><td class="field">' + key + '</td><td class="data">' + data + '</td></tr>';
 378                         }
 379                         entry.innerHTML = '<tbody>' + buf + '</tbody>';
 380                 }
 381
 382                 function onMessageClick(t) {
 383                         var request = new XMLHttpRequest();
 384                         request.open("GET", "/entries?discrete");
 385                         request.onreadystatechange = onResultMessageClick;
 386                         request.setRequestHeader("Accept", "application/json");
 387                         request.setRequestHeader("Range", "entries=" + t + ":0:1");
 388                         request.send(null);
 389                 }
 390
 391                 function onKeyUp(event) {
 392                         switch (event.keyCode) {
 393                                 case 8:
 394                                 case 37:
 395                                 case 75:
 396                                         entriesLoadPrevious();
 397                                         break;
 398                                 case 32:
 399                                 case 39:
 400                                 case 74:
 401                                         entriesLoadNext();
 402                                         break;
 403
 404                                 case 71:
 405                                         if (event.shiftKey)
 406                                                 entriesLoadTail();
 407                                         else
 408                                                 entriesLoadHead();
 409                                         break;
 410                                 case 171:
 411                                         entriesMore();
 412                                         break;
 413                                 case 173:
 414                                         entriesLess();
 415                                         break;
 416                         }
 417                 }
 418
 419                 function onMouseWheel(event) {
 420                         if (event.detail < 0 || event.wheelDelta > 0)
 421                                 entriesLoadPrevious();
 422                         else
 423                                 entriesLoadNext();
 424                 }
 425
 426                 machineLoad();
 427                 entriesLoad(null);
 428                 showNEntries(getNEntries());
 429                 document.onkeyup = onKeyUp;
 430
 431                 logs = document.getElementById("divlogs");
 432                 logs.addEventListener("mousewheel", onMouseWheel, false);
 433                 logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
 434         </script>
 435 </body>
 436 </html>