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                                 range = localStorage["cursor"] + ":0";
 241                         if (range == null)
 242                                 range = "";
 243
 244                         var url = "/entries";
 245
 246                         if (localStorage["filter"] != "" && localStorage["filter"] != null) {
 247                                 url += "?_SYSTEMD_UNIT=" + escape(localStorage["filter"]);
 248
 249                                 if (localStorage["boot"] == "1")
 250                                         url += "&boot";
 251                         } else {
 252                                 if (localStorage["boot"] == "1")
 253                                         url += "?boot";
 254                         }
 255
 256                         var request = new XMLHttpRequest();
 257                         request.open("GET", url);
 258                         request.onreadystatechange = entriesOnResult;
 259                         request.setRequestHeader("Accept", "application/json");
 260                         request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
 261                         request.send(null);
 262                 }
 263
 264                 function entriesLoadNext() {
 265                         if (last_cursor == null)
 266                                 entriesLoad("");
 267                         else
 268                                 entriesLoad(last_cursor + ":1");
 269                 }
 270
 271                 function entriesLoadPrevious() {
 272                         if (first_cursor == null)
 273                                 entriesLoad("");
 274                         else
 275                                 entriesLoad(first_cursor + ":-" + getNEntries().toString());
 276                 }
 277
 278                 function entriesLoadHead() {
 279                         entriesLoad("");
 280                 }
 281
 282                 function entriesLoadTail() {
 283                         entriesLoad(":-" + getNEntries().toString());
 284                 }
 285
 286                 function entriesOnResult(event) {
 287
 288                         if ((event.currentTarget.readyState != 4) ||
 289                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 290                                 return;
 291
 292                         var logs = document.getElementById("tablelogs");
 293
 294                         var lc = null;
 295                         var fc = null;
 296
 297                         var i, l = event.currentTarget.responseText.split('\n');
 298
 299                         if (l.length <= 1) {
 300                                 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
 301                                 return;
 302                         }
 303
 304                         var buf = '';
 305
 306                         for (i in l) {
 307
 308                                 if (l[i] == '')
 309                                         continue;
 310
 311                                 var d = JSON.parse(l[i]);
 312                                 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
 313                                         continue;
 314
 315                                 if (fc == null)
 316                                         fc = d.__CURSOR;
 317                                 lc = d.__CURSOR;
 318
 319                                 var priority;
 320                                 if (d.PRIORITY != undefined)
 321                                         priority = parseInt(d.PRIORITY);
 322                                 else
 323                                         priority = 6;
 324
 325                                 if (priority <= 3)
 326                                         clazz = "message-error";
 327                                 else if (priority <= 5)
 328                                         clazz = "message-highlight";
 329                                 else
 330                                         clazz = "message";
 331
 332                                 buf += '<tr><td class="timestamp">';
 333
 334                                 if (d.__REALTIME_TIMESTAMP != undefined) {
 335                                         var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
 336                                         buf += timestamp.toLocaleString();
 337                                 }
 338
 339                                 buf += '</td><td class="process">';
 340
 341                                 if (d.SYSLOG_IDENTIFIER != undefined)
 342                                         buf += escapeHTML(d.SYSLOG_IDENTIFIER);
 343                                 else if (d._COMM != undefined)
 344                                         buf += escapeHTML(d._COMM);
 345
 346                                 if (d._PID != undefined)
 347                                         buf += "[" + escapeHTML(d._PID) + "]";
 348                                 else if (d.SYSLOG_PID != undefined)
 349                                         buf += "[" + escapeHTML(d.SYSLOG_PID) + "]";
 350
 351                                 buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + d.__CURSOR + '\');">';
 352
 353                                 if (d.MESSAGE == null)
 354                                         buf += "[blob data]";
 355                                 else if (d.MESSAGE instanceof Array)
 356                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
 357                                 else
 358                                         buf += escapeHTML(d.MESSAGE);
 359
 360                                 buf += '</a></td></tr>';
 361                         }
 362
 363                         logs.innerHTML = '<tbody>' + buf + '</tbody>';
 364
 365                         if (fc != null) {
 366                                 first_cursor = fc;
 367                                 localStorage["cursor"] = fc;
 368                         }
 369                         if (lc != null)
 370                                 last_cursor = lc;
 371                 }
 372
 373                 function entriesMore() {
 374                         setNEntries(getNEntries() + 10);
 375                         entriesLoad(first_cursor);
 376                 }
 377
 378                 function entriesLess() {
 379                         setNEntries(getNEntries() - 10);
 380                         entriesLoad(first_cursor);
 381                 }
 382
 383                 function onResultMessageClick(event) {
 384                         if ((event.currentTarget.readyState != 4) ||
 385                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 386                                 return;
 387
 388                         var d = JSON.parse(event.currentTarget.responseText);
 389
 390                         document.getElementById("diventry").style.display = "block";
 391                         entry = document.getElementById("tableentry");
 392
 393                         var buf = "";
 394                         for (var key in d) {
 395                                 var data = d[key];
 396
 397                                 if (data == null)
 398                                         data = "[blob data]";
 399                                 else if (data instanceof Array)
 400                                         data = "[" + formatBytes(data.length) + " blob data]";
 401                                 else
 402                                         data = escapeHTML(data);
 403
 404                                 buf += '<tr><td class="field">' + key + '</td><td class="data">' + data + '</td></tr>';
 405                         }
 406                         entry.innerHTML = '<tbody>' + buf + '</tbody>';
 407                 }
 408
 409                 function onMessageClick(t) {
 410                         var request = new XMLHttpRequest();
 411                         request.open("GET", "/entries?discrete");
 412                         request.onreadystatechange = onResultMessageClick;
 413                         request.setRequestHeader("Accept", "application/json");
 414                         request.setRequestHeader("Range", "entries=" + t + ":0:1");
 415                         request.send(null);
 416                 }
 417
 418                 function onKeyUp(event) {
 419                         switch (event.keyCode) {
 420                                 case 8:
 421                                 case 37:
 422                                 case 75:
 423                                         entriesLoadPrevious();
 424                                         break;
 425                                 case 32:
 426                                 case 39:
 427                                 case 74:
 428                                         entriesLoadNext();
 429                                         break;
 430
 431                                 case 71:
 432                                         if (event.shiftKey)
 433                                                 entriesLoadTail();
 434                                         else
 435                                                 entriesLoadHead();
 436                                         break;
 437                                 case 171:
 438                                         entriesMore();
 439                                         break;
 440                                 case 173:
 441                                         entriesLess();
 442                                         break;
 443                         }
 444                 }
 445
 446                 function onMouseWheel(event) {
 447                         if (event.detail < 0 || event.wheelDelta > 0)
 448                                 entriesLoadPrevious();
 449                         else
 450                                 entriesLoadNext();
 451                 }
 452
 453                 function onResultFilterFocus(event) {
 454                         if ((event.currentTarget.readyState != 4) ||
 455                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 456                                 return;
 457
 458                         f = document.getElementById("filter");
 459
 460                         var l = event.currentTarget.responseText.split('\n');
 461                         var buf = '<option>No filter</option>';
 462                         var j = -1;
 463
 464                         for (i in l) {
 465
 466                                 if (l[i] == '')
 467                                       continue;
 468
 469                                 var d = JSON.parse(l[i]);
 470                                 if (d._SYSTEMD_UNIT == undefined)
 471                                       continue;
 472
 473                                 buf += '<option value="' + escape(d._SYSTEMD_UNIT) + '">' + escapeHTML(d._SYSTEMD_UNIT) + '</option>';
 474
 475                                 if (d._SYSTEMD_UNIT == localStorage["filter"])
 476                                         j = i;
 477                         }
 478
 479                         if (j < 0) {
 480                                 if (localStorage["filter"] != null && localStorage["filter"] != "") {
 481                                           buf += '<option value="' + escape(localStorage["filter"]) + '">' + escapeHTML(localStorage["filter"]) + '</option>';
 482                                           j = i + 1;
 483                                 } else
 484                                           j = 0;
 485                         }
 486
 487                         f.innerHTML = buf;
 488                         f.selectedIndex = j;
 489                 }
 490
 491                 function onFilterFocus(w) {
 492                         var request = new XMLHttpRequest();
 493                         request.open("GET", "/fields/_SYSTEMD_UNIT");
 494                         request.onreadystatechange = onResultFilterFocus;
 495                         request.setRequestHeader("Accept", "application/json");
 496                         request.send(null);
 497                 }
 498
 499                 function onFilterChange(w) {
 500                         if (w.selectedIndex <= 0)
 501                                 localStorage["filter"] = "";
 502                         else
 503                                 localStorage["filter"] = unescape(w.options[w.selectedIndex].value);
 504
 505                         entriesLoadHead();
 506                 }
 507
 508                 function onBootChange(w) {
 509                         localStorage["boot"] = w.checked ? "1" : "0";
 510                         entriesLoadHead();
 511                 }
 512
 513                 function initFilter() {
 514                         f = document.getElementById("filter");
 515
 516                         var buf = '<option>No filter</option>';
 517
 518                         var filter = localStorage["filter"];
 519                         if (filter != null && filter != "") {
 520                                 buf += '<option value="' + escape(filter) + '">' + escapeHTML(filter) + '</option>';
 521                                 j = 1;
 522                         } else
 523                                 j = 0;
 524
 525                         f.innerHTML = buf;
 526                         f.selectedIndex = j;
 527                 }
 528
 529                 function installHandlers() {
 530                         document.onkeyup = onKeyUp;
 531
 532                         logs = document.getElementById("divlogs");
 533                         logs.addEventListener("mousewheel", onMouseWheel, false);
 534                         logs.addEventListener("DOMMouseScroll", onMouseWheel, false);
 535                 }
 536
 537                 machineLoad();
 538                 entriesLoad(null);
 539                 showNEntries(getNEntries());
 540                 initFilter();
 541                 installHandlers();
 542         </script>
 543 </body>
 544 </html>