From b8fc6a8c023dc6808362e38179d7ee9338802ca7 Mon Sep 17 00:00:00 2001 From: fabrixxm <fabrix.xm@gmail.com> Date: Sat, 27 Mar 2021 18:36:55 +0100 Subject: [PATCH] Advanced log view: Frio version Show log event details in a modal dialog --- view/theme/frio/css/style.css | 14 +++ view/theme/frio/js/module/admin/logs/view.js | 41 ++++++++ view/theme/frio/templates/admin/logs/view.tpl | 93 +++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 view/theme/frio/js/module/admin/logs/view.js create mode 100755 view/theme/frio/templates/admin/logs/view.tpl diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index ba15534d5e..1bf908e1da 100644 --- 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 index 0000000000..fc19af28a2 --- /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 index 0000000000..99a96befd5 --- /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">×</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 --> -- 2.39.5