{% extends 'layout.html' %}
{% block title %}Event Log{%endblock%}
{% block title_html %}
    <h1 class="page-title"><a href="{% url 'system' %}">System</a> Event Log</h1>
{% endblock %}
{% block content %}

    <table class="event-log primary-table" data-url="{{url}}">
        <thead>
            <th>
                Timestamp
                (Your Time)
            </th>
            <th>Level</th>
            <th>Module</th>
            <th>Message</th>
        </thead>
        <tbody class="event-records">
        </tbody>
        <tfoot>
            <td colspan="3" class="status-text">Loading...</td>
        </tfoot>
    </table>
    
{% endblock %}
{% block page_templates %}
    <table>
        <tr class="event">
            <td class="created" data-field="created"></td>
            <td class="level" data-field="levelname"></td>
            <td class="log-name" data-field="name"></td>
            <td class="message" data-field="msg"></td>
        </tr>
    </table>
    <div class="message-with-expand">
        <div><span class="show-traceback fa fa-search-plus" title="Click to show/hide detailed error message"></span> <span class="message"></span></div>
        <div class="traceback hidden"></div>
    </div>
{% endblock %}
{% block page_styles %}
<style type="text/css">
    .created {
        white-space: pre;
    }
    .event-log th, .event-log td {
        padding: .25em;
    }
    .event td {
        vertical-align: top;
    }
    .event.WARNING .level {
        color: #770000;
    }
    .event.ERROR .level {
        color: red;
    }
    .traceback {
        white-space: pre-wrap;
        background-color: white;
        padding: .25em;
        margin: .25em;
        border: thin #777 solid;
        max-width: 50em;
        overflow: auto;
    }
</style>
{% endblock %}
{% block page_scripts %}
<script type="text/javascript">
$(document).ready( function() {
    $('.event-log').each( function() {
        var log_table = $(this);
        var log_records = log_table.find( '.event-records' );
        var log_template = $('.templates .event' )
        var expand_template = $('.templates .message-with-expand' );
        var status = log_table.find( '.status-text' );
        var latest = function() {
            var events = log_table.find( '.event' );
            if (events.length) {
                return events.first().data( 'event' ).created;
            } else {
                return 0;
            }
        };
        var refresh = function() {
            status.text( 'Loading events' );
            $.ajax({
                url: log_table.attr( 'data-url' ),
                type: 'GET',
                dataType: 'text',
                success: function(data,xhr) {
                    var last_ts = latest()
                    if (data) {
                        $.map( data.split('\n'), function( text ) {
                            if (! text.length ) {
                                return ;
                            }
                            try {
                                row = JSON.parse( text );
                            } catch (e) {
                                if (console) {
                                    console.log( 'Unable to parse as JSON: '+ text );
                                }
                                return;
                            }
                            if (! row ) {
                                console.log( 'Unparsed: '+ text );
                                return
                            }
                            if (row.created > last_ts) {
                                var display = log_template.clone();
                                var created = new Date(row.created * 1000);
                                display.data( 'event', row );
                                display.find( '.created').text( created.toString( 'yyyy-MM-dd HH:mm' ));
                                display.find( '.level' ).text( row.levelname );
                                display.addClass( row.levelname );
                                display.find( '.log-name' ).text( row.name );
                                if (row.traceback) {
                                    var expander = expand_template.clone();
                                    expander.find( '.message' ).text( row.msg );
                                    expander.find( '.show-traceback' ).click( function(evt) {
                                        expander.find('.traceback').toggle();
                                        evt.stopPropagation();
                                    });
                                    expander.find( '.traceback' ).text( row.traceback );
                                    display.find( '.message' ).append( expander );
                                } else {
                                    display.find( '.message' ).text( row.msg );
                                }
                                log_records.prepend( display );
                                last_ts = row.created;
                            }
                        });
                    }
                    status.text( 'Loaded events' )
                },
                error: function(jqXHR, textStatus, errorThrown){
                    status.text( 'Failure loading events: '+textStatus )
                }
            });
        };
        refresh();
        var timer = window.setInterval( refresh, 5*1000 );
    });
});    
</script>
{% endblock %}