{% extends 'base_software.html' %}

{% block title %}
<center>
    <h4><b>System Logs&nbsp;</b>
    <a href="{{ url_for('log.download_system_logs') }}">
        <img title="Download System Logs" src="/static/download.png">
    </a></h4>
</center>
{% endblock %}

{% block head %}
<script>
    $(function() {
        var use_utc_timezone = "{{ system_option.use_utc_timezone }}" == 'True';
        $("#datatable").dataTable({
            "order": [
                [2, "desc"]
            ],
            "columnDefs": [ {
                "targets": 0,
                "data": 'severity'
            }, {
                "targets": 1,
                "data": 'message'
            }, {
                "targets": 2,
                "data": 'created_time',
                "render": function(data, type, row) {
                    return getDateStringfromUTCString(data, use_utc_timezone);
                }
            }, {
                "targets": 3,
                "data": 'id',
                "render": function(data, type, row) {
                    return '<a class="show-system-log" system-log-id="' + data + '" href="javascript://">' +
                           '<img src="/static/file.png" title="debug trace"></a>';
                }
            }, ],
            "ajax": {
                "url": "{{ url_for('log.api_get_system_logs') }}",
            }
        });

        // Use delegate pattern for event
        $("#datatable").on("click", ".show-system-log", function() {
            display_trace_dialog($(this).attr('system-log-id'));
        });

        function display_trace_dialog(id) {
            $('#trace-content').html('');
            $.ajax({
                url: "/log/api/logs/" + id + "/trace",
                dataType: 'json',
                success: function(response) {
                    $.each(response, function(index, element) {
                        $('#trace-dialog-title').html(element[0].severity + ': ' + element[0].message + ' - ' +
                            getDateStringfromUTCString(element[0].created_time, use_utc_timezone));
                        $('#trace-content').html(newline2linebreak(element[0].trace));
                    });
                }
            });

            $('#display-trace-dialog').modal({show: true})
        }
    });

</script>

<style>
    .modal-dialog {
        width: 900px;
    }
</style>
{% endblock %}

{% block main %}
<div id="display-trace-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4>
                    <center><span id="trace-dialog-title"></span></center>
                </h4>
            </div>
            <div class="modal-body">
                <div id="trace-content" style="height:450px; overflow-y:scroll; overflow-y:scroll; word-wrap:break-word;">
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<div class="container" style="margin-top: 10px">
    <table cellspacing="0" class="display table" id="datatable">
        <thead>
            <tr>
                <th>Severity</th>
                <th>Message</th>
                <th>Created Time</th>
                <th>Trace</th>
            </tr>
        </thead>
    </table>
</div>
{% endblock %}