vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 09:36:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

v2.70

Browse Source
This commit is contained in:
pucherot
2021-02-01 21:30:51 +01:00
parent da454c0762
commit d5a236f793
24 changed files with 2011 additions and 1662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
front/events.php
View File

@@ -1,4 +1,12 @@
<!-- ----------------------------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------
# Pi.Alert
# Open Source Network Guard / WIFI & LAN intrusion detector
#
# events.php - Front module. Events page
#-------------------------------------------------------------------------------
# Puche 2021 pi.alert.application@gmail.com GNU GPLv3
#--------------------------------------------------------------------------- -->
<?php
require 'php/templates/header.php';
?>
@@ -13,9 +21,8 @@
</h1>
<!-- period selector -->
<span class="breadcrumb text-gray50">
Events period:
<select id="period" onchange="javascript: periodChanged();">
<span class="breadcrumb" style="top: 0px;">
<select class="form-control" id="period" onchange="javascript: periodChanged();">
<option value="1 day">Today</option>
<option value="7 days">Last Week</option>
<option value="1 month" selected>Last Month</option>
@@ -23,126 +30,81 @@
<option value="100 years">All info</option>
</select>
</span>
</section>
<!-- Main content ---------------------------------------------------------- -->
<section class="content">
<!-- top small box --------------------------------------------------------- -->
<div class="row">
<!-- top small box --------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: queryList('all');">
<a href="#" onclick="javascript: getEvents('all');">
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
<div class="inner">
<h3 id="eventsAll"> -- </h3>
</div>
<div class="icon">
<i class="fa fa-bolt text-aqua-20"></i>
</div>
<div class="small-box-footer">
All events <i class="fa fa-arrow-circle-right"></i>
</div>
<div class="inner"> <h3 id="eventsAll"> -- </h3> </div>
<div class="icon"> <i class="fa fa-bolt text-aqua-20"></i> </div>
<div class="small-box-footer"> All events <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box --------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: queryList('sessions');">
<a href="#" onclick="javascript: getEvents('sessions');">
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
<div class="inner">
<h3 id="eventsSessions"> -- </h3>
</div>
<div class="icon">
<i class="fa fa-plug text-green-20"></i>
</div>
<div class="small-box-footer">
Sessions <i class="fa fa-arrow-circle-right"></i>
</div>
<div class="inner"> <h3 id="eventsSessions"> -- </h3> </div>
<div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
<div class="small-box-footer"> Sessions <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box --------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: queryList('missing');">
<a href="#" onclick="javascript: getEvents('missing');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner">
<h3 id="eventsMissing"> -- </h3>
</div>
<div class="icon">
<i class="fa fa-exchange text-yellow-20"></i>
</div>
<div class="small-box-footer">
Missing Sessions <i class="fa fa-arrow-circle-right"></i>
</div>
<div class="inner"> <h3 id="eventsMissing"> -- </h3> </div>
<div class="icon"> <i class="fa fa-exchange text-yellow-20"></i> </div>
<div class="small-box-footer"> Missing Sessions <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box --------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: queryList('voided');">
<a href="#" onclick="javascript: getEvents('voided');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner">
<h3 id="eventsVoided"> -- </h3>
</div>
<div class="icon text-aqua-20">
<i class="fa fa-exclamation-circle text-yellow-20"></i>
</div>
<div class="small-box-footer">
Voided Sessions <i class="fa fa-arrow-circle-right"></i>
</div>
<div class="inner"> <h3 id="eventsVoided"> -- </h3> </div>
<div class="icon text-aqua-20"> <i class="fa fa-exclamation-circle text-yellow-20"></i> </div>
<div class="small-box-footer"> Voided Sessions <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box --------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: queryList('new');">
<a href="#" onclick="javascript: getEvents('new');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner">
<h3 id="eventsNewDevices"> -- </h3>
</div>
<div class="icon">
<i class="ion ion-plus-round text-yellow-20"></i>
</div>
<div class="small-box-footer">
New Devices <i class="fa fa-arrow-circle-right"></i>
</div>
<div class="inner"> <h3 id="eventsNewDevices"> -- </h3> </div>
<div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
<div class="small-box-footer"> New Devices <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box --------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: queryList('down');">
<a href="#" onclick="javascript: getEvents('down');">
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
<div class="inner">
<h3 id="eventsDown"> -- </h3>
</div>
<div class="icon">
<i class="fa fa-warning text-red-20"></i>
</div>
<div class="small-box-footer">
Down Alerts <i class="fa fa-arrow-circle-right"></i>
</div>
<div class="inner"> <h3 id="eventsDown"> -- </h3> </div>
<div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
<div class="small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -154,10 +116,13 @@
<div class="row">
<div class="col-xs-12">
<div id="tableEventsBox" class="box">
<!-- box-header -->
<div class="box-header">
<h3 id="tableEventsTitle" class="box-title text-gray">Events</h3>
</div>
<!-- /.box-header -->
<!-- table -->
<div class="box-body table-responsive">
<table id="tableEvents" class="table table-bordered table-hover table-striped ">
<thead>
@@ -179,6 +144,7 @@
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
@@ -208,86 +174,113 @@
<!-- page script ----------------------------------------------------------- -->
<script>
var parPeriod = 'Front_Events_Period';
var parTableRows = 'Front_Events_Rows';
// -----------------------------------------------------------------------------
var eventsType = '';
var period = '';
var eventsType = 'all';
var period = '';
var tableRows = 10;
// Initialize MAC
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.has ('status') == true) {
eventsType = urlParams.get ('type');
} else {
eventsType = 'all';
}
// Initialize components
$(function () {
initializeDatatable();
periodChanged();
});
// Read parameters & Initialize components
main();
// -----------------------------------------------------------------------------
function periodChanged () {
// Requery totals and list
queryTotals();
queryList (eventsType);
function main () {
// get parameter value
$.get('php/server/parameters.php?action=get&parameter='+ parPeriod, function(data) {
var result = JSON.parse(data);
if (result) {
period = result;
$('#period').val(period);
}
// get parameter value
$.get('php/server/parameters.php?action=get&parameter='+ parTableRows, function(data) {
var result = JSON.parse(data);
if (Number.isInteger (result) ) {
tableRows = result;
}
// Initialize components
initializeDatatable();
// query data
getEventsTotals();
getEvents (eventsType);
});
});
}
// -----------------------------------------------------------------------------
function initializeDatatable () {
$('#tableEvents').DataTable({
'paging' : true,
'lengthChange': true,
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
'paging' : true,
'lengthChange' : true,
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
'order' : [[0,"desc"], [3,"desc"], [5,"desc"]],
// Parameters
'pageLength' : tableRows,
'columnDefs' : [
{visible: false, targets: [0,5,6,7,8,10] },
{className: 'text-center', targets: [] },
{orderData: [8], targets: 7 },
{orderData: [10], targets: 9 },
{visible: false, targets: [0,5,6,7,8,10] },
{className: 'text-center', targets: [] },
{orderData: [8], targets: 7 },
{orderData: [10], targets: 9 },
// Device Name
{targets: [1],
"createdCell": function (td, cellData, rowData, row, col) {
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[13]+ '&period='+ period +'" class="">'+ cellData +'</a></b>');
} },
// Device Name
{targets: [1],
"createdCell": function (td, cellData, rowData, row, col) {
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[13] +'" class="">'+ cellData +'</a></b>');
} },
// Replace HTML codes
{targets: [3,4,5,6,7],
"createdCell": function (td, cellData, rowData, row, col) {
$(td).html (translateHTMLcodes (cellData));
} }
// Replace HTML codes
{targets: [3,4,5,6,7],
"createdCell": function (td, cellData, rowData, row, col) {
$(td).html (translateHTMLcodes (cellData));
} }
],
// Processing
'processing' : true,
'language' : {
processing: '<table><td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>',
emptyTable: 'No data'
}
});
// Save Parameter rows when changed
$('#tableEvents').on( 'length.dt', function ( e, settings, len ) {
setParameter (parTableRows, len);
} );
};
// -----------------------------------------------------------------------------
function queryTotals () {
// debugTimer();
function periodChanged () {
// Save Parameter Period
period = $('#period').val();
setParameter (parPeriod, period);
// Requery totals and events
getEventsTotals();
getEvents (eventsType);
}
// -----------------------------------------------------------------------------
function getEventsTotals () {
// stop timer
stopTimerRefreshData();
// period
period = document.getElementById('period').value;
// get totals and put in boxes
$.get('php/server/events.php?action=totals&period='+ period, function(data) {
$.get('php/server/events.php?action=getEventsTotals&period='+ period, function(data) {
var totalsEvents = JSON.parse(data);
$('#eventsAll').html (totalsEvents[0].toLocaleString());
@@ -296,57 +289,32 @@ function queryTotals () {
$('#eventsVoided').html (totalsEvents[3].toLocaleString());
$('#eventsNewDevices').html (totalsEvents[4].toLocaleString());
$('#eventsDown').html (totalsEvents[5].toLocaleString());
});
// Timer for refresh data
newTimerRefreshData (queryTotals);
// Timer for refresh data
newTimerRefreshData (getEventsTotals);
});
}
// -----------------------------------------------------------------------------
function queryList (p_eventsType) {
// Save status and period selected
function getEvents (p_eventsType) {
// Save status selected
eventsType = p_eventsType;
period = document.getElementById('period').value;
// Define color & title for the status selected
sesionCols = false;
switch (eventsType) {
case 'all':
tableTitle = 'All Events';
color = 'aqua';
break;
case 'sessions':
tableTitle = 'Sessions';
color = 'green';
sesionCols = true;
break;
case 'missing':
tableTitle = 'Missing Events';
color = 'yellow';
sesionCols = true;
break;
case 'voided':
tableTitle = 'Voided Events';
color = 'yellow';
break;
case 'new':
tableTitle = 'New Devices Events';
color = 'yellow';
break;
case 'down':
tableTitle = 'Down Alerts';
color = 'red';
break;
default:
tableTitle = 'Events';
boxClass = '';
break;
case 'all': tableTitle = 'All Events'; color = 'aqua'; sesionCols = false; break;
case 'sessions': tableTitle = 'Sessions'; color = 'green'; sesionCols = true; break;
case 'missing': tableTitle = 'Missing Events'; color = 'yellow'; sesionCols = true; break;
case 'voided': tableTitle = 'Voided Events'; color = 'yellow'; sesionCols = false; break;
case 'new': tableTitle = 'New Devices Events'; color = 'yellow'; sesionCols = false; break;
case 'down': tableTitle = 'Down Alerts'; color = 'red'; sesionCols = false; break;
default: tableTitle = 'Events'; boxClass = ''; sesionCols = false; break;
}
// Set title and color
document.getElementById('tableEventsTitle').className = 'box-title text-' + color;
document.getElementById('tableEventsBox').className = 'box box-' + color;
$('#tableEventsTitle')[0].className = 'box-title text-' + color;
$('#tableEventsBox')[0].className = 'box box-' + color;
$('#tableEventsTitle').html (tableTitle);
// Coluumns Visibility
@@ -360,7 +328,7 @@ function queryList (p_eventsType) {
$('#tableEvents').DataTable().clear();
$('#tableEvents').DataTable().draw();
$('#tableEvents').DataTable().order ([0,"desc"], [3,"desc"], [5,"desc"]);
$('#tableEvents').DataTable().ajax.url('php/server/events.php?action=list&type=' + eventsType +'&period='+ period ).load();
$('#tableEvents').DataTable().ajax.url('php/server/events.php?action=getEvents&type=' + eventsType +'&period='+ period ).load();
};
</script>