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 escapeHTML(s) {
 181                         return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 182                 }
 183
 184                 function machineOnResult(event) {
 185                         if ((event.currentTarget.readyState != 4) ||
 186                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 187                                 return;
 188
 189                         var d = JSON.parse(event.currentTarget.responseText);
 190
 191                         var title = document.getElementById("title");
 192                         title.innerHTML = 'Journal of ' + d.hostname;
 193                         document.title = 'Journal of ' + d.hostname;
 194
 195                         var machine = document.getElementById("machine");
 196                         machine.innerHTML = 'Machine ID is <b>' + d.machine_id + '</b>, current boot ID is <b>' + d.boot_id + '</b>.';
 197
 198                         var cutoff = document.getElementById("cutoff");
 199                         var from = new Date(parseInt(d.cutoff_from_realtime) / 1000);
 200                         var to = new Date(parseInt(d.cutoff_to_realtime) / 1000);
 201                         cutoff.innerHTML = 'Journal begins at <b>' + from.toLocaleString() + '</b> and ends at <b>' + to.toLocaleString() + '</b>.';
 202
 203                         var usage = document.getElementById("usage");
 204                         usage.innerHTML = 'Disk usage is <b>' + formatBytes(parseInt(d.usage)) + '</b>.';
 205
 206                         var os = document.getElementById("os");
 207                         os.innerHTML = 'Operating system is <b>' + d.os_pretty_name + '</b>.';
 208
 209                         var virtualization = document.getElementById("virtualization");
 210                         virtualization.innerHTML = d.virtualization == "bare" ? "Running on <b>bare metal</b>." : "Running on virtualization <b>" + d.virtualization + "</b>.";
 211                 }
 212
 213                 function entriesLoad(range) {
 214                         var request = new XMLHttpRequest();
 215                         request.open("GET", "/entries");
 216                         request.onreadystatechange = entriesOnResult;
 217                         request.setRequestHeader("Accept", "application/json");
 218                         request.setRequestHeader("Range", "entries=" + range + ":" + getNEntries().toString());
 219                         request.send(null);
 220                 }
 221
 222                 function entriesLoadNext() {
 223                         if (last_cursor == null)
 224                                 entriesLoad("");
 225                         else
 226                                 entriesLoad(last_cursor + ":1");
 227                 }
 228
 229                 function entriesLoadPrevious() {
 230                         if (first_cursor == null)
 231                                 entriesLoad("");
 232                         else
 233                                 entriesLoad(first_cursor + ":-" + getNEntries().toString());
 234                 }
 235
 236                 function entriesLoadHead() {
 237                         entriesLoad("");
 238                 }
 239
 240                 function entriesLoadTail() {
 241                         entriesLoad(":-" + getNEntries().toString());
 242                 }
 243
 244                 function entriesOnResult(event) {
 245
 246                         if ((event.currentTarget.readyState != 4) ||
 247                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 248                                 return;
 249
 250                         var logs = document.getElementById("tablelogs");
 251
 252                         var lc = null;
 253                         var fc = null;
 254
 255                         var i;
 256                         var l = event.currentTarget.responseText.split('\n');
 257
 258                         if (l.length <= 1) {
 259                                 logs.innerHTML = '<tbody><tr><td colspan="3"><i>No further entries...</i></td></tr></tbody>';
 260                                 return;
 261                         }
 262
 263                         var buf = '';
 264
 265                         for (i in l) {
 266
 267                                 if (l[i] == '')
 268                                         continue;
 269
 270                                 var d = JSON.parse(l[i]);
 271                                 if (d.MESSAGE == undefined || d.__CURSOR == undefined)
 272                                         continue;
 273
 274                                 if (fc == null)
 275                                         fc = d.__CURSOR;
 276                                 lc = d.__CURSOR;
 277
 278                                 var priority;
 279                                 if (d.PRIORITY != undefined)
 280                                         priority = parseInt(d.PRIORITY);
 281                                 else
 282                                         priority = 6;
 283
 284                                 if (priority <= 3)
 285                                         clazz = "message-error";
 286                                 else if (priority <= 5)
 287                                         clazz = "message-highlight";
 288                                 else
 289                                         clazz = "message";
 290
 291                                 buf += '<tr><td class="timestamp">';
 292
 293                                 if (d.__REALTIME_TIMESTAMP != undefined) {
 294                                         var timestamp = new Date(parseInt(d.__REALTIME_TIMESTAMP) / 1000);
 295                                         buf += timestamp.toLocaleString();
 296                                 }
 297
 298                                 buf += '</td><td class="process">';
 299
 300                                 if (d.SYSLOG_IDENTIFIER != undefined)
 301                                         buf += d.SYSLOG_IDENTIFIER;
 302                                 else if (d._COMM != undefined)
 303                                         buf += d._COMM;
 304
 305                                 if (d._PID != undefined)
 306                                         buf += "[" + d._PID + "]";
 307                                 else if (d.SYSLOG_PID != undefined)
 308                                         buf += "[" + d.SYSLOG_PID + "]";
 309
 310                                 buf += '</td><td class="' + clazz + '"><a href="#entry" onclick="onMessageClick(\'' + lc + '\');">';
 311
 312                                 if (d.MESSAGE == null)
 313                                         buf += "[blob data]";
 314                                 else if (d.MESSAGE instanceof Array)
 315                                         buf += "[" + formatBytes(d.MESSAGE.length) + " blob data]";
 316                                 else
 317                                         buf += escapeHTML(d.MESSAGE);
 318
 319                                 buf += '</a></td></tr>';
 320                         }
 321
 322                         logs.innerHTML = '<tbody>' + buf + '</tbody>';
 323
 324                         if (fc != null)
 325                                 first_cursor = fc;
 326                         if (lc != null)
 327                                 last_cursor = lc;
 328                 }
 329
 330                 function entriesMore() {
 331                         setNEntries(getNEntries() + 10);
 332                         entriesLoad(first_cursor);
 333                 }
 334
 335                 function entriesLess() {
 336                         setNEntries(getNEntries() - 10);
 337                         entriesLoad(first_cursor);
 338                 }
 339
 340                 function onResultMessageClick(event) {
 341                         if ((event.currentTarget.readyState != 4) ||
 342                                 (event.currentTarget.status != 200 && event.currentTarget.status != 0))
 343                                 return;
 344
 345                         var d = JSON.parse(event.currentTarget.responseText);
 346
 347                         document.getElementById("diventry").style.display = "block";
 348
 349                         entry = document.getElementById("tableentry");
 350
 351                         var buf = "";
 352
 353                         for (var key in d){
 354                                 buf += '<tr><td class="field">' + key + '</td><td class="data">' + d[key] + '</td></tr>';
 355                         }
 356
 357                         entry.innerHTML = '<tbody>' + buf + '</tbody>';
 358                 }
 359
 360                 function onMessageClick(t) {
 361                         var request = new XMLHttpRequest();
 362                         request.open("GET", "/entries?discrete");
 363                         request.onreadystatechange = onResultMessageClick;
 364                         request.setRequestHeader("Accept", "application/json");
 365                         request.setRequestHeader("Range", "entries=" + t + ":0:1");
 366                         request.send(null);
 367                 }
 368
 369                 machineLoad();
 370                 entriesLoad("");
 371                 showNEntries(getNEntries());
 372         </script>
 373 </body>
 374 </html>