logs/index.php

   1 <?php
   2 require_once "../inc/common.php";
   3 require_once "../inc/header.php";
   4 ?>
   5 <h4>Log viewer</h4>
   6
   7         <!-- The log table -->
   8         <form method="post">
   9         <table id="data_list" class="table-striped display nowrap" style="width:100%">
  10         <thead>
  11                 <th scope="col">Time</th>
  12                 <th scope="col">Level</th>
  13                 <th scope="col">Subsystem</th>
  14                 <th scope="col">Event</th>
  15                 <th scope="col">Message</th>
  16         </thead>
  17         </table>
  18         </form>
  19
  20 <script>
  21 let data_list_table = null;
  22
  23 function level2color(level)
  24 {
  25         if (level == 'info')
  26                 return 'green';
  27         if (level == 'warn')
  28                 return 'orange';
  29         if ((level == 'error') || (level == 'fatal'))
  30                 return 'red';
  31 }
  32
  33 function log_colorizer(data, type, row)
  34 {
  35         if (type == 'display')
  36         {
  37                 var color = level2color(row['Level']);
  38                 data = '<span style="color: '+color+'">' + data + '</span>';
  39         }
  40         return data;
  41 }
  42
  43 function log_timestamp(data, type, row)
  44 {
  45         if (type == 'display')
  46         {
  47                 return moment.utc(data).local().format('HH:mm:ss');
  48         }
  49         return data;
  50 }
  51
  52 function resize_check()
  53 {
  54         if (window.innerWidth < 900)
  55         {
  56                 data_list_table.column(1).visible(false); // level
  57                 data_list_table.column(2).visible(false); // subsystem
  58                 data_list_table.column(3).visible(false); // event
  59         } else
  60         if (window.innerWidth < 1250)
  61         {
  62                 data_list_table.column(1).visible(true);  // level
  63                 data_list_table.column(2).visible(false); // subsystem
  64                 data_list_table.column(3).visible(false); // event
  65         } else
  66         if (window.innerWidth < 1450)
  67         {
  68                 data_list_table.column(1).visible(true);  // level
  69                 data_list_table.column(2).visible(true);  // subsystem
  70                 data_list_table.column(3).visible(false); // event
  71         } else
  72         {
  73                 data_list_table.column(1).visible(true);  // level
  74                 data_list_table.column(2).visible(true);  // subsystem
  75                 data_list_table.column(3).visible(true); // event
  76         }
  77         data_list_table.rows().invalidate('data').draw(false);
  78 }
  79
  80 function log_text(data, type, row)
  81 {
  82         var esc = function (t) {
  83             return ('' + t)
  84                 .replace(/&/g, '&amp;')
  85                 .replace(/</g, '&lt;')
  86                 .replace(/>/g, '&gt;')
  87                 .replace(/"/g, '&quot;');
  88         };
  89
  90         if (type != 'display')
  91                 return data;
  92
  93         var color = level2color(row['Level']);
  94         var cutoff;
  95         if (window.innerWidth < 500)
  96                 cutoff = 35;
  97         else if (window.innerWidth < 1000)
  98                 cutoff = 75;
  99         else if (window.innerWidth < 1750)
 100                 cutoff = 100
 101         else
 102                 cutoff = 125;
 103
 104         if (data.length > cutoff)
 105         {
 106                 // stolen from ellipsis
 107                 var shortened = data.substr(0, cutoff - 1);
 108                 data = '<span class="ellipsis" style="color: '+color+'" title="' +
 109                     esc(data) +
 110                     '">' +
 111                     shortened +
 112                     '&#8230;</span>';
 113         } else {
 114                 // otherwise just like log_colorizer...
 115                 data = '<span style="color: '+color+'">' + data + '</span>';
 116         }
 117         return data;
 118 }
 119
 120 $(document).ready( function () {
 121         args = {
 122                 //'responsive': true,
 123                 'fixedHeader': {
 124                         header: true,
 125                         headerOffset: 53
 126                 },
 127                 'columns': [
 128                         { 'data': 'Time', 'responsivePriority': 1, 'render': log_timestamp },
 129                         { 'data': 'Level', 'responsivePriority': 3, 'className':'virtuallink', 'render': log_colorizer },
 130                         { 'data': 'Subsystem', 'responsivePriority': 4, 'render': log_colorizer },
 131                         { 'data': 'Event', 'responsivePriority': 5, 'render': log_colorizer },
 132                         //{ 'data': 'Message', 'responsivePriority': 2, 'render': DataTable.render.ellipsis(100, false) },
 133                         { 'data': 'Message', 'responsivePriority': 2, 'render': log_text },
 134                 ],
 135                 'pageLength':100,
 136                 'order':[[0,'desc']],
 137         };
 138
 139         /* Only show filter pane on desktop */
 140         if (window.innerWidth > 8000)
 141         {
 142                 args['dom'] = 'Pfrtip';
 143                 args['searchPanes'] = {
 144                         'initCollapsed': 'true',
 145                         'columns': [1,2,3],
 146                         'dtOpts': {
 147                                 select: { style: 'multi'},
 148                                 order: [[ 1, "desc" ]]
 149                         },
 150                 }
 151         }
 152
 153         data_list_table = $('#data_list').DataTable(args);
 154
 155         resize_check();
 156         window.addEventListener('resize', resize_check);
 157
 158         StartLogStream('<?php echo get_config('base_url'); ?>api/log.php');
 159 } );
 160 </script>
 161
 162 <?php require_once '../inc/footer.php'; ?>