bazarr/views/systemlogs.html

240 lines
9.8 KiB
HTML

{% extends '_main.html' %}
{% block title %}Logs - Bazarr{% endblock %}
{% block page_head %}
<style>
.dropdown-item-checked::before {
position: absolute;
left: .1rem;
content: '✓';
font-weight: 900;
}
.table tbody tr {
cursor: pointer;
}
td.dt-nowrap {
white-space: nowrap;
}
</style>
{% endblock page_head %}
{% block bcleft %}
<div class="">
<button class="btn btn-outline" id="refresh_button">
<div><i class="fas fa-sync align-top text-themecolor text-center font-20" aria-hidden="true"></i></div>
<div class="align-bottom text-themecolor small text-center">Refresh</div>
</button>
<button class="btn btn-outline" id="download_button">
<div><i class="fas fa-download align-top text-themecolor text-center font-20" aria-hidden="true"></i></div>
<div class="align-bottom text-themecolor small text-center">Download</div>
</button>
<button class="btn btn-outline" id="empty_button">
<div><i class="fas fa-trash align-top text-themecolor text-center font-20" aria-hidden="true"></i></div>
<div class="align-bottom text-themecolor small text-center">Empty</div>
</button>
</div>
{% endblock bcleft %}
{% block bcright %}
<div class="d-flex m-t-5 justify-content-end">
<div class="dropdown">
<button type="button" class="btn btn-outline" data-toggle="dropdown">
<i class="fas fa-filter align-top text-themecolor text-center font-20" aria-hidden="true"></i>
<div class="align-bottom text-themecolor small text-center">Filter</div>
</button>
<div id="filter_menu" class="dropdown-menu dropdown-menu-right">
<a href="" class="dropdown-item filter_log dropdown-item-checked" data-level="ALL"><i class="far fa-circle" style="color: black;"></i> All</a>
<div class="dropdown-divider"></div>
<a href="" class="dropdown-item filter_log" data-level="INFO"><i class="fas fa-info-circle" style="color: #1e90ff;"></i> Info</a>
<a href="" class="dropdown-item filter_log" data-level="WARNING"><i class="fas fa-exclamation-circle" style="color: yellow;"></i> Warning</a>
<a href="" class="dropdown-item filter_log" data-level="ERROR"><i class="fas fa-bug" style="color: red;"></i> Error</a>
<a href="" class="dropdown-item filter_log" data-level="DEBUG"><i class="fas fa-bug" style="color: black;"></i> Debug</a>
</div>
</div>
</div>
{% endblock bcright %}
{% block body %}
<div class="container-fluid">
<table id="logs" class="table table-striped" style="width:100%">
<thead>
<tr>
<th></th>
<th></th>
<th>Message</th>
<th>Time</th>
<th></th>
</tr>
</thead>
</table>
</div>
<div id="logsModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Details</h4><br>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<h5>Message</h5>
<figure class="highlight"><pre><code class="zmdi-language-python-alt" role="alert" id="logs_message_span"></code></pre></figure>
<h5 id="except_tag">Exception</h5>
<figure class="highlight"><pre><code class="zmdi-language-python-alt" role="alert" id="logs_exception_span"></code></pre></figure>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endblock body %}
{% block tail %}
<script>
$(document).ready(function () {
var table = $('#logs').DataTable( {
language: {
zeroRecords: 'No entries found in logs matching this log level.',
processing: "Loading Logs..."
},
paging: true,
lengthChange: false,
pageLength: {{ settings.general.page_size }},
searching: true,
search: {
regex: true
},
ordering: false,
processing: true,
serverSide: false,
ajax: "{{ url_for('api.systemlogs') }}",
columns: [
{
data: 1,
render: function (data) {
return $.trim(data);
}
},
{ data: 1,
render: function (data) {
var icon;
switch ($.trim(data)) {
case 'INFO':
icon = '"fas fa-info-circle" style="color: #1e90ff;"';
break;
case 'WARNING':
icon = '"fas fa-exclamation-circle text-warning"';
break;
case 'ERROR':
icon = '"fas fa-bug" style="color: red;"';
break;
case 'DEBUG':
icon = '"fas fa-bug" style="color: black;"';
}
return '<i class=' + icon + '></i>';
}
},
{ data: 3,
render: function (data) {
return $.trim(data);
}
},
{ data: 0,
render: function (data) {
return '<div class="description" data-toggle="tooltip" data-title="' + $.trim(data) + '">' + moment($.trim(data), "DD/MM/YYYY hh:mm:ss").fromNow() + '</div>'
}
},
{ data: 4,
render: function (data) {
return $.trim(data);
}
}
],
columnDefs: [
{
"targets": [ 0 ],
"visible": false,
"searchable": true
},
{
"targets": [ 3 ],
"className": "dt-nowrap"
},
{
"targets": [ 4 ],
"visible": false,
"searchable": false
}
]
});
$('#refresh_button').on('click', function() {
table.ajax.reload();
table.columns.adjust().draw(false);
})
$('#download_button').on('click', function(e) {
e.preventDefault();
window.location.href = "{{ url_for('download_log') }}";
})
$('#empty_button').on('click', function() {
$.ajax({
url: "{{ url_for('emptylog') }}"
}).done(function () {
table.ajax.reload();
table.columns.adjust().draw(false);
})
})
$('.filter_log').on( 'click', function (e) {
e.preventDefault();
$('.filter_log').removeClass('dropdown-item-checked');
$(this).addClass('dropdown-item-checked');
if ($(this).data('level') === 'INFO') {
table.column(0).search('INFO|WARNING|ERROR|DEBUG', true, false).draw();
} else if ($(this).data('level') === 'WARNING') {
table.column(0).search('WARNING|ERROR|DEBUG', true, false).draw();
} else if ($(this).data('level') === 'ERROR') {
table.column(0).search('ERROR|DEBUG', true, false).draw();
} else if ($(this).data('level') === 'DEBUG') {
table.column(0).search('DEBUG', true, false).draw();
} else if ($(this).data('level') === 'ALL') {
table.column(0).search('').draw();
}
});
$('#logs').on('click', 'tr', function() {
var data = table.row( this ).data();
$("#logs_message_span").html(data[3]);
let exception = data[4];
exception = exception.replace(/'/g,"");
exception = exception.replace(/\\n\s\s\s\s/g, "\\n&emsp;&emsp;");
exception = exception.replace(/\\n\s\s/g, "\\n&emsp;");
exception = exception.replace(/\\n/g, "<br />");
$("#logs_exception_span").html(exception);
if (exception.length > 1) {
$('#except_tag').show();
$('#logs_exception_span').parent().parent().show();
} else {
$('#except_tag').hide();
$('#logs_exception_span').parent().parent().hide();
}
$('#logsModal')
.modal({
focus: false
});
});
})
</script>
{% endblock tail %}