@ -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')
.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);
$('.modal')
.modal( {
autofocus: false
});
$('.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 ) } } );
});
$('.menu .item')
.tab();
$('#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  ");
exception = exception.replace(/\\n\s\s/g, "\\n ");
exception = exception.replace(/\\n/g, "<br />");
$("#exception").html(exception);
$('#modal').modal('show');
});
</script>
Louis Vézina
6 years ago