Advanced log view: Frio version

Show log event details in a modal dialog

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index ba15534d5ef5cafa89e7f5d17efda5178f36f2a2..1bf908e1da7f83876e065c0a5462a423644223d4 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -84,6 +84,20 @@ blockquote {
        overflow: hidden !important;
 }
 
+/**
+ * details tag
+ */
+details {
+       padding: .5em .5em 0;
+}
+details details {
+       padding-left: .5em;
+}
+details summary {
+       font-weight: bold;
+       display: list-item;
+}
+
 /**
  * mobile aside
  */

diff --git a/view/theme/frio/js/module/admin/logs/view.js b/view/theme/frio/js/module/admin/logs/view.js
new file mode 100644 (file)
index 0000000..fc19af2
--- /dev/null
+++ b/view/theme/frio/js/module/admin/logs/view.js
@@ -0,0 +1,41 @@
+$(function(){
+       $(".log-event").on("click", function(ev) {
+               var $modal = $("#logdetail");
+               var tr = $modal.find(".main-data tbody tr")[0];
+               tr.innerHTML = ev.currentTarget.innerHTML;
+
+               var data = JSON.parse(ev.currentTarget.dataset.source);
+               $modal.find(".source-data td").each(function(i,elm){
+                       var k = elm.dataset.value;
+                       elm.innerText = data[k];
+               });
+
+               var elm = $modal.find(".event-data")[0];
+               elm.innerHTML = "";
+               var data = ev.currentTarget.dataset.data;
+               if (data !== "") {
+                       elm.innerHTML = "<h3>Data</h3>";
+                       data = JSON.parse(data);
+                       elm.innerHTML += recursive_details("", data);
+               }
+
+               $modal.modal({})
+       })
+
+       function recursive_details(s, data, lev=0) {
+               for(var k in data) {
+                       if (data.hasOwnProperty(k)) {
+                               var v = data[k];
+                               var open = lev > 1 ? "" : "open";
+                               s += "<details " + open + "><summary>" + k + "</summary>";
+                               if (typeof v === 'object' && v !== null) {
+                                       s = recursive_details(s, v, lev+1);
+                               } else {
+                                       s +=  $("<pre>").text(v)[0].outerHTML;
+                               }
+                               s += "</details>";
+                       }
+               }
+               return s;
+       }
+});

diff --git a/view/theme/frio/templates/admin/logs/view.tpl b/view/theme/frio/templates/admin/logs/view.tpl
new file mode 100755 (executable)
index 0000000..99a96be
--- /dev/null
+++ b/view/theme/frio/templates/admin/logs/view.tpl
@@ -0,0 +1,93 @@
+<div id="adminpage">
+       <h1>{{$title}} - {{$page}}</h1>
+
+       <h3>{{$logname}}</h3>
+       {{if $error }}
+               <div id="admin-error-message-wrapper" class="alert alert-warning">
+                       <p>{{$error nofilter}}</p>
+               </div>
+               {{else}}
+               <table class="table table-hover">
+                       <thead>
+                               <tr>
+                                       <th>Date</th>
+                                       <th>Level</th>
+                                       <th>Context</th>
+                                       <th>Message</th>
+                               </tr>
+                       </thead>
+                       <tbody>
+                               {{foreach $data as $row}}
+                               <tr id="ev-{{$row->id}}" class="log-event"
+                                       data-data="{{$row->data}}" data-source="{{$row->source}}">
+                                       <td>{{$row->date}}</td>
+                                       <td class="
+                                               {{if $row->level == "CRITICAL"}}bg-danger
+                                               {{elseif $row->level == "ERROR"}}bg-danger
+                                               {{elseif $row->level == "WARNING"}}bg-warinig
+                                               {{elseif $row->level == "NOTICE"}}bg-info
+                                               {{elseif $row->level == "DEBUG"}}text-muted
+                                               {{/if}}
+                                          ">{{$row->level}}</td>
+                                       <td>{{$row->context}}</td>
+                                       <td style="width:80%">{{$row->message}}</td>
+                               </tr>
+                               {{/foreach}}
+                       </tbody>
+               </table>
+               {{/if}}
+</div>
+
+<div id="logdetail" class="modal fade" tabindex="-1" role="dialog">
+       <div class="modal-dialog modal-lg" style="width:90%" role="document">
+               <div class="modal-content">
+                       <div class="modal-header">
+                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                               <h4 class="modal-title">Event details</h4>
+                       </div>
+                       <div class="modal-body">
+                               <table class="table main-data">
+                                       <thead>
+                                               <tr>
+                                                       <th>Date</th>
+                                                       <th>Level</th>
+                                                       <th>Context</th>
+                                                       <th>Message</th>
+                                               </tr>
+                                       </thead>
+                                       <tbody><tr></tr></tbody>
+                               </table>
+                               <table class="table source-data">
+                                       <thead>
+                                               <tr>
+                                                       <th>File</th>
+                                                       <th>Line</th>
+                                                       <th>Function</th>
+                                                       <th>UID</th>
+                                                       <th>Process ID</th>
+                                               </tr>
+                                       </thead>
+                                       <tbody>
+                                               <tr>
+                                                       <td data-value="file"></td>
+                                                       <td data-value="line"></td>
+                                                       <td data-value="function" style="width:70%"></td>
+                                                       <td data-value="uid"></td>
+                                                       <td data-value="process_id"></td>
+                                               </tr>
+                                       </tbody>
+                               </table>
+
+
+                               <div class="event-source">
+                               </div>
+                               <div class="event-data">
+                               </div>
+
+                       </div>
+                       <div class="modal-footer">
+                               <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
+                       </div>
+               </div><!-- /.modal-content -->
+       </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->