Switched log viewer to Ajax DataTables with filtering.

This commit is contained in:
Louis Vézina 2019-03-25 00:02:14 -04:00
parent 96fa041e9c
commit f4e22c76cb
3 changed files with 4768 additions and 113 deletions

View File

@ -1644,14 +1644,6 @@ def system():
throttled_providers = list_throttled_providers()
i = 0
with open(os.path.join(args.config_dir, 'log', 'bazarr.log')) as f:
for i, l in enumerate(f, 1):
pass
row_count = i
page_size = int(settings.general.page_size)
max_page = int(math.ceil(row_count / (page_size + 0.0)))
with open(os.path.join(args.config_dir, 'config', 'releases.txt'), 'r') as f:
releases = ast.literal_eval(f.read())
@ -1675,34 +1667,27 @@ def system():
except:
pass
page_size = int(settings.general.page_size)
return template('system', bazarr_version=bazarr_version,
sonarr_version=sonarr_version, radarr_version=radarr_version,
operating_system=platform.platform(), python_version=platform.python_version(),
config_dir=args.config_dir, bazarr_dir=os.path.normcase(os.getcwd()),
base_url=base_url, task_list=task_list, row_count=row_count, max_page=max_page, page_size=page_size,
releases=releases, current_port=settings.general.port, throttled_providers=throttled_providers)
base_url=base_url, task_list=task_list, page_size=page_size, releases=releases,
current_port=settings.general.port, throttled_providers=throttled_providers)
@route(base_url + 'logs/<level>/<page:int>')
@route(base_url + 'logs')
@custom_auth_basic(check_credentials)
def get_logs(level, page):
def get_logs():
authorize()
page_size = int(settings.general.page_size)
begin = (page * page_size) - page_size
end = (page * page_size) - 1
logs_complete = []
logs = []
for line in reversed(open(os.path.join(args.config_dir, 'log', 'bazarr.log')).readlines()):
lin = []
lin = line.split('|')
if 'ALL' in level or level is None:
logs_complete.append(line.rstrip())
else:
if level in lin[1]:
logs_complete.append(line.rstrip())
logs = logs_complete[begin:end]
logs.append(lin)
return template('logs', logs=logs, base_url=base_url, current_port=settings.general.port)
return dict(data=logs)
@route(base_url + 'execute/<taskid>')

4602
static/moment/moment.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -4,7 +4,12 @@
<script src="{{base_url}}static/jquery/jquery-latest.min.js"></script>
<script src="{{base_url}}static/semantic/semantic.min.js"></script>
<script src="{{base_url}}static/jquery/tablesort.js"></script>
<script src="{{base_url}}static/datatables/jquery.dataTables.min.js"></script>
<script src="{{base_url}}static/datatables/dataTables.semanticui.min.js"></script>
<script src="{{base_url}}static/moment/moment.js"></script>
<link rel="stylesheet" href="{{base_url}}static/semantic/semantic.min.css">
<link rel="stylesheet" type="text/css" href="{{base_url}}static/datatables/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="{{base_url}}static/datatables/semanticui.min.css"/>
<link rel="apple-touch-icon" sizes="120x120" href="{{base_url}}static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{base_url}}static/favicon-32x32.png">
@ -29,14 +34,14 @@
margin-bottom: 3em;
padding: 1em;
}
#logs {
margin-top: 4em;
}
.fast.backward, .backward, .forward, .fast.forward {
cursor: pointer;
}
.fast.backward, .backward, .forward, .fast.forward { pointer-events: auto; }
.fast.backward.disabled, .backward.disabled, .forward.disabled, .fast.forward.disabled { pointer-events: none; }
.dataTables_filter{
display:none;
}
</style>
</head>
<body>
@ -104,51 +109,33 @@
<div class="left floatedcolumn">
<div class="ui basic buttons">
<button id="refresh_log" class="ui button"><i class="refresh icon"></i>Refresh current page</button>
</div>
</div>
<div class="right floated right aligned column">
<div class="ui basic buttons">
<button id="download_log" class="ui button"><i class="download icon"></i>Download log file</button>
<button id="empty_log" class="ui button"><i class="download icon"></i>Empty log file</button>
<button id="empty_log" class="ui button"><i class="trash icon"></i>Empty log file</button>
</div>
</div>
</div>
<div class="two column row">
<div class="right floated right aligned column">
<label>Log level filter:</label>
<select name="level" id="level" class="ui floated selection dropdown">
<option value="ALL">All</option>
<option value="WARNING">WARNING</option>
<option value="INFO">INFO</option>
<option value="ERROR">ERROR</option>
<option value="DEBUG">DEBUG</option>
</select>
<div class="ui basic icon buttons">
<button class="ui active button filter_log" id="all_log" data-level="ALL"><i class="circle outline icon"></i></button>
<button class="ui button filter_log" id="info_log" data-level="INFO"><i class="blue info circle icon"></i></button>
<button class="ui button filter_log" id="warning_log" data-level="WARNING"><i class="yellow warning circle icon"></i></button>
<button class="ui button filter_log" id="error_log" data-level="ERROR"><i class="red bug icon"></i></button>
</div>
</div>
</div>
</div>
<div class="content">
<div id="logs"></div>
%try: page_size
%except NameError: page_size = "25"
%end
%if page_size != -1:
<div class="ui grid">
<div class="three column row">
<div class="column"></div>
<div class="center aligned column">
<i class="fast backward icon"></i>
<i class="backward icon"></i>
<span id="page"></span> / {{max_page}}
<i class="forward icon"></i>
<i class="fast forward icon"></i>
</div>
<div class="right floated right aligned column">Total records: {{row_count}}</div>
</div>
</div>
%end
<table id="logs" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th class="collapsing"></th>
<th style="text-align: left;">Message:</th>
<th style="text-align: left;">Time:</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="ui bottom attached tab segment" data-tab="providers">
@ -337,64 +324,43 @@
%end
</div>
</div>
<div id="modal" class="ui small modal">
<i class="close icon"></i>
<div class="header">
<div>Details</div>
</div>
<div class="content">
Message
<div id='message' class="ui segment">
<p></p>
</div>
Exception
<div id='exception' class="ui segment">
<p></p>
</div>
</div>
<div class="actions">
<button class="ui cancel button" >Close</button>
</div>
</div>
% include('footer.tpl')
</body>
</html>
<script>
$('.menu .item')
$('.modal')
.modal({
autofocus: false
});
$('.menu .item')
.tab();
function loadURL(level, page) {
$.ajax({
url: "{{base_url}}logs/" + level + "/" + page,
beforeSend: function() { $('#loader').addClass('active'); },
complete: function() { $('#loader').removeClass('active'); },
cache: false
}).done(function(data) {
$("#logs").html(data);
});
current_page = page;
$('#level').on('change', function() {
current_level = $('#level option:checked').val();
});
$("#page").text(current_page);
if (current_page == 1) {
$(".backward, .fast.backward").addClass("disabled");
}
if (current_page == {{int(max_page)}}) {
$(".forward, .fast.forward").addClass("disabled");
}
if (current_page > 1 && current_page < {{int(max_page)}}) {
$(".backward, .fast.backward").removeClass("disabled");
$(".forward, .fast.forward").removeClass("disabled");
}
}
loadURL('ALL', 1);
$('.backward').on('click', function(){
loadURL(current_level, current_page - 1);
});
$('.fast.backward').on('click', function(){
loadURL(current_level, 1);
});
$('.forward').on('click', function(){
loadURL(current_level, current_page + 1);
});
$('.fast.forward').on('click', function(){
loadURL(current_level, {{int(max_page)}});
});
$('#refresh_log').on('click', function(){
loadURL(current_level, current_page);
});
$('#level').on('change', function(){
loadURL(current_level, current_page);
table.ajax.reload();
});
$('#download_log').on('click', function(){
@ -413,7 +379,7 @@
})
});
$('a:not(.tabs), button:not(.cancel, #download_log), #restart').on('click', function(){
$('a:not(.tabs), button:not(.cancel, #download_log, .filter_log, #refresh_log), #restart').on('click', function(){
$('#loader').addClass('active');
});
@ -476,4 +442,106 @@
}
});
}
var table = $('#logs').DataTable( {
destroy: true,
language: {
loadingRecords: '<br><div class="ui active inverted dimmer" style="width: 95%;"><div class="ui centered inline loader"></div></div><br>',
zeroRecords: 'No entries found in logs matching this log level.'
},
paging: true,
lengthChange: false,
pageLength: {{page_size}},
searching: true,
search: {
regex: true
},
ordering: false,
processing: false,
serverSide: false,
ajax: {
url: '{{base_url}}logs',
dataSrc: 'data'
},
drawCallback: function(settings) {
$('.inline.dropdown').dropdown();
},
columns: [
{
data: 1,
render: function (data, type, row) {
return $.trim(data);
}
},
{ data: 1,
render: function ( data, type, row ) {
var icon;
switch ($.trim(data)) {
case 'INFO':
icon = 'blue info circle icon';
break;
case 'WARNING':
icon = 'yellow warning circle icon';
break;
case 'ERROR':
icon = 'red bug icon';
break;
case 'DEBUG':
icon = 'bug icon';
}
return '<i class="' + icon + '"></i>';
}
},
{ data: 3,
render: function ( data, type, row ) {
return $.trim(data);
}
},
{ data: 0,
render: function ( data, type, row ) {
//return $.trim(data);
return moment($.trim(data), "DD/MM/YYYY hh:mm:ss").fromNow();
}
},
{ data: 4,
render: function ( data, type, row ) {
return $.trim(data);
}
}
],
columnDefs: [
{
"targets": [ 0 ],
"visible": false,
"searchable": true
}
]
} );
$('.filter_log').on( 'click', function () {
$('.filter_log').removeClass('active');
$(this).addClass('active');
if ( $(this).data('level') === 'INFO') {
table.column( 0 ).search( 'INFO|WARNING|ERROR', true, false).draw();
} else if ( $(this).data('level') === 'WARNING') {
table.column( 0 ).search( 'WARNING|ERROR', true, false ).draw();
} else if ( $(this).data('level') === 'ERROR') {
table.column( 0 ).search( 'ERROR', true, false ).draw();
} else if ( $(this).data('level') === 'ALL') {
table.column(0).search('').draw();
}
} );
$('#logs').on('click', 'tr', function(event) {
var data = table.row( this ).data();
$("#message").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 />");
$("#exception").html(exception);
$('#modal').modal('show');
});
</script>