gaseous-server/gaseous-server/wwwroot/pages/settings/logs.html

<div id="gametitle">
    <h1 id="gametitle_label">Logs</h1>
</div>

<table style="width: 960px; max-width: 960px;" cellspacing="0">
    <tr>
        <td>
            <input type="datetime-local" id="logs_startdate" style="width: 30%;" /> <input type="datetime-local" id="logs_enddate" style="width: 30%;" />
        </td>
        <td>
            <input type="checkbox" id="logs_type_info"><label for="logs_type_info">Information</label>
        </td>
        <td>
            <input type="checkbox" id="logs_type_warning"><label for="logs_type_warning">Warning</label>
        </td>
        <td>
            <input type="checkbox" id="logs_type_critical"><label for="logs_type_critical">Critical</label>
        </td>
    </tr>
    <tr>
        <td colspan="1">
            <input type="text" id="logs_textsearch" placeholder="Search" style="width: 75%;" />
        </td>
        <td colspan="3">
            <input type="text" id="logs_correlationid" placeholder="Correlation Id" style="width: 75%;" />
        </td>
    </tr>
    <tr>
        <td colspan="4" style="text-align: right;">
            <button onclick="loadLogs();">Search</button>
            <button onclick="resetFilters();">Reset</button>
        </td>
    </tr>
</table>

<!-- <a href="#" class="romlink" onclick="loadLogs();" style="float: right;"><img src="/images/refresh.svg" alt="Refresh" title="Refresh" class="banner_button_image" /></a> -->
<table id="settings_events_table" style="width: 960px; max-width: 960px;" cellspacing="0">
    
</table>

<div style="width: 960px; text-align: center;">
    <button value="Load More" onclick="loadLogs(lastStartIndex, currentPage);">Load More</button>
</div>

<script type="text/javascript">
    var lastStartIndex = 0;
    var currentPage = 1;
    var searchModel = {};

    var correlationIdParam = getQueryString('correlationid', 'string');
    if (correlationIdParam) {
        if (correlationIdParam.length > 0) {
            document.getElementById('logs_correlationid').value = correlationIdParam;
        }
    }

    function resetFilters() {
        document.getElementById('logs_startdate').value = '';
        document.getElementById('logs_enddate').value = '';
        document.getElementById('logs_type_info').checked = false;
        document.getElementById('logs_type_warning').checked = false;
        document.getElementById('logs_type_critical').checked = false;
        document.getElementById('logs_textsearch').value = '';
        document.getElementById('logs_correlationid').value = '';

        loadLogs();
    }

    function loadLogs(StartIndex, PageNumber) {
        var model = {}

        if (StartIndex && PageNumber) {
            currentPage += 1;

            // get saved search model
            model = searchModel;
            model.StartIndex = StartIndex;
            model.PageNumber = PageNumber;
        } else {
            currentPage = 1;

            // create search model
            var statusList = [];
            if (document.getElementById('logs_type_info').checked == true) { statusList.push(0); }
            if (document.getElementById('logs_type_warning').checked == true) { statusList.push(2); }
            if (document.getElementById('logs_type_critical').checked == true) { statusList.push(3); }
            var startDate = null;
            var startDateObj = document.getElementById('logs_startdate');
            if (startDateObj.value != null) { startDate = new Date(startDateObj.value); }
            var endDate = null;
            var endDateObj = document.getElementById('logs_enddate');
            if (endDateObj.value != null) { endDate = new Date(endDateObj.value); }
            var searchText = null;
            var searchTextObj = document.getElementById('logs_textsearch');
            if (searchTextObj.value != null) { searchText = searchTextObj.value; }
            var correlationId = null;
            var correlationIdTextObj = document.getElementById('logs_correlationid');
            if (correlationIdTextObj.value != null) { correlationId = correlationIdTextObj.value; }

            model = {
                "StartIndex": StartIndex,
                "PageNumber": PageNumber,
                "PageSize": 100,
                "Status": statusList,
                "StartDateTime": startDate,
                "EndDateTime": endDate,
                "SearchText": searchText,
                "CorrelationId": correlationId
            }
            searchModel = model;
        }

        console.log(model);

        ajaxCall(
            '/api/v1.1/Logs',
            'POST',
            function (result) {
                var newTable = document.getElementById('settings_events_table');
                if (currentPage == 1) {
                    newTable.innerHTML = '';
                
                    newTable.appendChild(
                        createTableRow(
                            true, 
                            [
                                //'Id',
                                ['Event Time', 'logs_table_cell_150px'],
                                ['Severity', 'logs_table_cell_150px'],
                                'Process',
                                'Message'
                            ],
                            '',
                            ''
                            )
                        );
                }

                for (var i = 0; i < result.length; i++) {
                    lastStartIndex = result[i].id;

                    var newRow = [
                        //result[i].id,
                        moment(result[i].eventTime).format("YYYY-MM-DD h:mm:ss a"),
                        result[i].eventType,
                        result[i].process,
                        result[i].message
                    ];

                    newTable.appendChild(createTableRow(false, newRow, 'logs_table_row_' + result[i].eventType, 'romcell logs_table_cell'));

                    if (result[i].exceptionValue) {
                        var exceptionString = "<h3>Exception</h3><pre class='logs_table_exception' style='width: 795px; word-wrap: break-word; overflow-wrap: break-word; overflow-y: scroll;'>" + syntaxHighlight(JSON.stringify(result[i].exceptionValue, null, 2)).replace(/\\n/g, "<br />    ") + "</pre>";
                        var exRow = document.createElement('tr');
                        var leadCell = document.createElement('td');
                        exRow.appendChild(leadCell);
                        var exCell = document.createElement('td');
                        exCell.colSpan = '3';
                        exCell.innerHTML = exceptionString;
                        exRow.appendChild(exCell);
                        newTable.appendChild(exRow);
                    }
                }
            },
            function (error) {

            },
            JSON.stringify(model)
        );
    }

    loadLogs();
</script>