mirror of
https://github.com/jokob-sk/NetAlertX.git
synced 2026-04-05 17:51:25 -07:00
feat(api): Enhance session events API with pagination, sorting, and filtering
- Added support for pagination (page and limit) in the session events endpoint. - Implemented sorting functionality based on specified columns and directions. - Introduced free-text search capability for session events. - Updated SQL queries to retrieve all events and added a new SQL constant for events. - Refactored GraphQL types and helpers to support new plugin and event queries. - Created new GraphQL resolvers for plugins and events with pagination and filtering. - Added comprehensive tests for new GraphQL endpoints and session events functionality.
This commit is contained in:
Jokob @NetAlertX
111
front/events.php
111
front/events.php
@@ -105,21 +105,64 @@ function main() {
|
||||
$('#period').val(period);
|
||||
initializeDatatable();
|
||||
getEventsTotals();
|
||||
getEvents(eventsType);
|
||||
getEvents(eventsType); // triggers first serverSide draw
|
||||
}
|
||||
|
||||
/* ---------------- Initialize DataTable ---------------- */
|
||||
function initializeDatatable() {
|
||||
const table = $('#tableEvents').DataTable({
|
||||
paging: true,
|
||||
const apiBase = getApiBase();
|
||||
const apiToken = getSetting("API_TOKEN");
|
||||
|
||||
$('#tableEvents').DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
paging: true,
|
||||
lengthChange: true,
|
||||
lengthMenu: getLengthMenu(getSetting("UI_DEFAULT_PAGE_SIZE")),
|
||||
searching: true,
|
||||
ordering: true,
|
||||
info: true,
|
||||
autoWidth: false,
|
||||
order: [[0, "desc"], [3, "desc"], [5, "desc"]],
|
||||
pageLength: tableRows,
|
||||
lengthMenu: getLengthMenu(getSetting("UI_DEFAULT_PAGE_SIZE")),
|
||||
searching: true,
|
||||
ordering: true,
|
||||
info: true,
|
||||
autoWidth: false,
|
||||
order: [[0, "desc"]],
|
||||
pageLength: tableRows,
|
||||
|
||||
ajax: function (dtRequest, callback) {
|
||||
const page = Math.floor(dtRequest.start / dtRequest.length) + 1;
|
||||
const limit = dtRequest.length;
|
||||
const search = dtRequest.search?.value || '';
|
||||
const sortCol = dtRequest.order?.length ? dtRequest.order[0].column : 0;
|
||||
const sortDir = dtRequest.order?.length ? dtRequest.order[0].dir : 'desc';
|
||||
|
||||
const url = `${apiBase}/sessions/session-events`
|
||||
+ `?type=${encodeURIComponent(eventsType)}`
|
||||
+ `&period=${encodeURIComponent(period)}`
|
||||
+ `&page=${page}`
|
||||
+ `&limit=${limit}`
|
||||
+ `&sortCol=${sortCol}`
|
||||
+ `&sortDir=${sortDir}`
|
||||
+ (search ? `&search=${encodeURIComponent(search)}` : '');
|
||||
|
||||
$.ajax({
|
||||
url,
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
headers: { "Authorization": `Bearer ${apiToken}` },
|
||||
success: function (response) {
|
||||
callback({
|
||||
data: response.data || [],
|
||||
recordsTotal: response.total || 0,
|
||||
recordsFiltered: response.recordsFiltered || 0
|
||||
});
|
||||
hideSpinner();
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error fetching session events:", status, error, xhr.responseText);
|
||||
callback({ data: [], recordsTotal: 0, recordsFiltered: 0 });
|
||||
hideSpinner();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
columnDefs: [
|
||||
{ targets: [0,5,6,7,8,10,11,12,13], visible: false },
|
||||
{ targets: [7], orderData: [8] },
|
||||
@@ -131,14 +174,14 @@ function initializeDatatable() {
|
||||
{ targets: [3], createdCell: (td, cellData) => $(td).html(localizeTimestamp(cellData)) },
|
||||
{ targets: [4,5,6,7], createdCell: (td, cellData) => $(td).html(translateHTMLcodes(cellData)) }
|
||||
],
|
||||
processing: true, // Shows "processing" overlay
|
||||
|
||||
language: {
|
||||
processing: '<table><td width="130px" align="middle"><?= lang("Events_Loading"); ?></td><td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td></table>',
|
||||
emptyTable: 'No data',
|
||||
lengthMenu: "<?= lang('Events_Tablelenght'); ?>",
|
||||
search: "<?= lang('Events_Searchbox'); ?>: ",
|
||||
paginate: { next: "<?= lang('Events_Table_nav_next'); ?>", previous: "<?= lang('Events_Table_nav_prev'); ?>" },
|
||||
info: "<?= lang('Events_Table_info'); ?>"
|
||||
search: "<?= lang('Events_Searchbox'); ?>: ",
|
||||
paginate: { next: "<?= lang('Events_Table_nav_next'); ?>", previous: "<?= lang('Events_Table_nav_prev'); ?>" },
|
||||
info: "<?= lang('Events_Table_info'); ?>"
|
||||
}
|
||||
});
|
||||
|
||||
@@ -179,53 +222,33 @@ function getEventsTotals() {
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- Fetch events and reload DataTable ---------------- */
|
||||
/* ---------------- Switch event type and reload DataTable ---------------- */
|
||||
function getEvents(type) {
|
||||
eventsType = type;
|
||||
const table = $('#tableEvents').DataTable();
|
||||
|
||||
// Event type config: title, color, session columns visibility
|
||||
const config = {
|
||||
all: {title: 'Events_Shortcut_AllEvents', color: 'aqua', sesionCols: false},
|
||||
sessions: {title: 'Events_Shortcut_Sessions', color: 'green', sesionCols: true},
|
||||
missing: {title: 'Events_Shortcut_MissSessions', color: 'yellow', sesionCols: true},
|
||||
voided: {title: 'Events_Shortcut_VoidSessions', color: 'yellow', sesionCols: false},
|
||||
new: {title: 'Events_Shortcut_NewDevices', color: 'yellow', sesionCols: false},
|
||||
down: {title: 'Events_Shortcut_DownAlerts', color: 'red', sesionCols: false}
|
||||
all: {title: 'Events_Shortcut_AllEvents', color: 'aqua', sesionCols: false},
|
||||
sessions: {title: 'Events_Shortcut_Sessions', color: 'green', sesionCols: true},
|
||||
missing: {title: 'Events_Shortcut_MissSessions', color: 'yellow', sesionCols: true},
|
||||
voided: {title: 'Events_Shortcut_VoidSessions', color: 'yellow', sesionCols: false},
|
||||
new: {title: 'Events_Shortcut_NewDevices', color: 'yellow', sesionCols: false},
|
||||
down: {title: 'Events_Shortcut_DownAlerts', color: 'red', sesionCols: false}
|
||||
}[type] || {title: 'Events_Shortcut_Events', color: '', sesionCols: false};
|
||||
|
||||
// Update title and color
|
||||
$('#tableEventsTitle').attr('class', 'box-title text-' + config.color).html(getString(config.title));
|
||||
$('#tableEventsBox').attr('class', 'box box-' + config.color);
|
||||
|
||||
// Toggle columns visibility
|
||||
// Toggle column visibility
|
||||
table.column(3).visible(!config.sesionCols);
|
||||
table.column(4).visible(!config.sesionCols);
|
||||
table.column(5).visible(config.sesionCols);
|
||||
table.column(6).visible(config.sesionCols);
|
||||
table.column(7).visible(config.sesionCols);
|
||||
|
||||
// Build API URL
|
||||
const apiBase = getApiBase();
|
||||
const apiToken = getSetting("API_TOKEN");
|
||||
const url = `${apiBase}/sessions/session-events?type=${encodeURIComponent(type)}&period=${encodeURIComponent(period)}`;
|
||||
|
||||
table.clear().draw(); // Clear old rows
|
||||
|
||||
showSpinner()
|
||||
|
||||
$.ajax({
|
||||
url,
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
headers: { "Authorization": `Bearer ${apiToken}` },
|
||||
beforeSend: showSpinner, // Show spinner during fetch
|
||||
complete: hideSpinner, // Hide spinner after fetch
|
||||
success: response => {
|
||||
const data = Array.isArray(response) ? response : response.data || [];
|
||||
table.rows.add(data).draw();
|
||||
},
|
||||
error: (xhr, status, error) => console.error("Error fetching session events:", status, error, xhr.responseText)
|
||||
});
|
||||
showSpinner();
|
||||
table.ajax.reload(null, true); // reset to page 1
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user