filtres ok

This commit is contained in:
fra-2107
2024-11-25 18:11:38 -05:00
parent d4ae3c236b
commit f44281ce08
8 changed files with 312 additions and 113 deletions

13
web2/css/styles.css Normal file
View File

@ -0,0 +1,13 @@
html {
scroll-padding-top: 3.5rem;
}
header {
padding-top: 9rem;
padding-bottom: 6rem;
}
section {
padding-top: 9rem;
padding-bottom: 9rem;
}

19
web2/css/styles2.css Normal file
View File

@ -0,0 +1,19 @@
html {
scroll-padding-top: 3.5rem;
}
header {
padding-top: 5rem;
padding-bottom: 3rem;
}
section {
padding-top: 9rem;
padding-bottom: 9rem;
}
figcaption{
font-weight: lighter;
font-size: small;
font-style: italic;
}

102
web2/index.html Normal file
View File

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IDPS visualization</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"><!-- Core theme CSS (includes Bootstrap)-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="/css/styles.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
integrity="sha256-x3YZWtRjM8bJqf48dFAv/qmgL68SI4jqNWeSLMZaMGA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<script src="js/ajax.js" defer></script>
<script src="js/alerts.js" defer></script>
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container px-4"><a class="navbar-brand" href="#page-top">Alerts</a><button class="navbar-toggler"
type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span
class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<!-- TODO changer ? -->
<!-- <li class="nav-item"><a class="nav-link" href="/">Accueil</a></li>
<li class="nav-item"><a class="nav-link" href="#echouage">Liste des échouages</a></li>
<li class="nav-item"><a class="nav-link" href="add.php">Enregistrer un echouage</a></li>
<li class="nav-item"><a class="nav-link" href="stats.php">statistiques</a></li> -->
</ul>
</div>
</div>
</nav><!-- Header-->
<header class="bg-primary bg-gradient text-white">
<div class="container px-4 text-center">
<h1 class="fw-bolder">Alertes systemes</h1>
<p class="lead">meilleur outil de surveillance du monde</p>
<a class="btn btn-lg btn-light" href="#alertes">Alertes</a>
</div>
</header>
<section class="bg-light" id="alertes">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-10">
<h2>Liste des Attaques</h2>
<p class="lead">veuillez selectionner les filtres de recherche ou parcourez la liste ci-dessous</p>
<!-- ici les filtres -->
<!-- <form class="row g-3" method="POST"> -->
<div class="col-auto">
<select class="form-select" aria-label="Choisir un niveau d'alerte" name="event_gravite" id="risque-select">
<option selected value="">Niveau d'alerte</option>
</select>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Chosisir une device" name="device-select" id="device-select">
<option selected value="">Appareil de détection</option>
</select>
</div>
<div class="col-auto ms-auto me-0">
<button class="btn btn-primary mb-3" id="filter-button">Filtrer</button>
</div>
<table class="table table-striped">
<thead class="bg-primary text-white">
<tr>
<th scope="col" class="id"></th>
<th scope="col" class="Date">Date</th>
<th scope="col" class="label">Nom alerte</th>
<th scope="col" class="label">Appareil de détection</th>
<th scope="col" class="label">Adresse source</th>
<th scope="col" class="label">Adresse destination</th>
<th scope="col" class="label">Niveau d'alerte</th>
<th scope="col" class="label">Raison</th>
</tr>
</thead>
<tbody style="border: 1px solid black;" id="tab-alert">
</tbody>
</table>
</div>
</div>
</div>
</section>
<script src="" async defer></script>
</body>
</html>

86
web2/js/alerts.js Normal file
View File

@ -0,0 +1,86 @@
'use strict';
// initialisation
ajaxRequest('GET', 'php/request.php/alertes/', displayAlerts);
ajaxRequest('GET', 'php/request.php/devices/', fillSelectDevice);
fillSelectRisque();
// filtrage
$('#filter-button').click(() => {
const params = []; // Initialise le tableau des paramètres
const device = $('#device-select').val();
const alertlvl = $('#risque-select').val();
console.log("device =" + device);
console.log("alertlvl =" + alertlvl);
// Ajouter les paramètres uniquement s'ils sont définis
if (device) params.push(`device_product=${encodeURIComponent(device)}`);
if (alertlvl) params.push(`agent_severity=${encodeURIComponent(alertlvl)}`);
// Construire l'URL avec les paramètres
let url;
if (params.length) {
url = `php/request.php/alertes/?${params.join('&')}`;
console.log(url);
} else {
url = 'php/request.php/alertes/';
console.log(url);
}
// Effectuer la requête AJAX
ajaxRequest('GET', url, displayAlerts);
}
);
$('#tweets').on('click', '.mod', () => {
ajaxRequest('PUT', 'php/request.php/tweets/' +
$(event.target).closest('.mod').attr('value'), () => {
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
}, 'login=' + login + '&text=' + prompt('Nouveau tweet :'));
}
);
$('#tweets').on('click', '.del', () => {
console.log('delete');
ajaxRequest('DELETE', 'php/request.php/tweets/' +
$(event.target).closest('.del').attr('value') + '?login=' + login, () => {
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
}
);
}
);
//------------------------------------------------------------------------------
//--- displayAlerts ------------------------------------------------------------
//------------------------------------------------------------------------------
// Display alerts.
// \param alerts The alerts data received via the Ajax request.
function displayAlerts(alerts) {
// Clear the table.
$('#tab-alert').empty();
// Fill alerts.
console.log(alerts);
for (let alert of alerts)
$('#tab-alert').append(
$('<tr>').append(
$('<td>').text(alert['id']),
$('<td>').text(alert['date_alerte']),
$('<td>').text(alert['name']),
$('<td>').text(alert['device_product']),
$('<td>').text(alert['src']+":"+alert['spt']),
$('<td>').text(alert['dst']+":"+alert['dpt']),
$('<td>').text(alert['agent_severity']),
$('<td>').text(alert['reason'])
)
);
}
function fillSelectDevice(devices) {
for (let device of devices)
$('#device-select').append($('<option>').text(device['device_product']).val(device['device_product']));
}
function fillSelectRisque() {
for (let i = 1; i <= 10; i++)
$('#risque-select').append($('<option>').text(i).val(i));
}

View File

@ -1,72 +0,0 @@
'use strict';
let login = 'cir2';
let currentTitle = 'Liste des tweets';
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
$('#all-button').click(() =>
{
currentTitle = 'Liste des tweets';
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
}
);
$('#my-button').click(() =>
{
currentTitle = 'Liste de mes tweets';
ajaxRequest('GET', 'php/request.php/tweets/?login=' + login, displayTweets);
}
);
$('#tweet-add').submit((event) =>
{
event.preventDefault();
ajaxRequest('POST', 'php/request.php/tweets/', () =>
{
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
}, 'login=' + login + '&text=' + $('#tweet').val());
$('#tweet').val('');
}
);
$('#tweets').on('click', '.mod', () =>
{
ajaxRequest('PUT', 'php/request.php/tweets/' +
$(event.target).closest('.mod').attr('value'), () =>
{
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
}, 'login=' + login + '&text=' + prompt('Nouveau tweet :'));
}
);
$('#tweets').on('click', '.del', () =>
{
console.log('delete');
ajaxRequest('DELETE', 'php/request.php/tweets/' +
$(event.target).closest('.del').attr('value') +'?login=' + login, () =>
{
ajaxRequest('GET', 'php/request.php/tweets/', displayTweets);
}
);
}
);
//------------------------------------------------------------------------------
//--- displayTweets ------------------------------------------------------------
//------------------------------------------------------------------------------
// Display tweets.
// \param tweets The tweets data received via the Ajax request.
function displayTweets(tweets)
{
// Fill tweets.
$('#tweets').html('<h3>' + currentTitle + '</h3>');
for (let tweet of tweets)
$('#tweets').append('<div class="card"><div class="card-body">' +
tweet.login + ' : ' + tweet.text +
'<div class="btn-group float-right" role="group">' +
'<button type="button" class="btn btn-light float-right mod"' +
' value="' + tweet.id + '"><i class="fa fa-edit"></i></button>' +
'<button type="button" class="btn btn-light float-right del"' +
' value="' + tweet.id + '"><i class="fa fa-trash"></i></button>' +
'<div></div></div>');
}

View File

@ -1,5 +1,8 @@
<?php
require_once('constants.php');
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
//----------------------------------------------------------------------------
//--- dbConnect --------------------------------------------------------------
@ -28,13 +31,26 @@
// Function to get all alertes
// \param db The connected database.
// \return The list of alertes.
function dbRequestAlerts($db)
function dbRequestAlerts($db, $filtres = null)
{
try
{
$request = 'SELECT * FROM alertes';
$params = [];
// Si $filtres est non nul et non vide, appliquez les conditions
if (isset($filtres)) {
$conditions = [];
foreach ($filtres as $colonne => $valeur) {
$conditions[] = "$colonne = :$colonne";
$params[":$colonne"] = $valeur;
}
$request .= ' WHERE ' . implode(' AND ', $conditions);
}
$statement = $db->prepare($request);
$statement->execute();
$statement->execute($params);
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
}
catch (PDOException $exception)
@ -46,6 +62,29 @@
}
//----------------------------------------------------------------------------
//--- dbRequestDevices --------------------------------------------------------
//----------------------------------------------------------------------------
// Function to get all alertes
// \param db The connected database.
// \return The list of alertes.
function dbRequestDevices($db)
{
try
{
$request = 'SELECT device_product FROM alertes GROUP BY device_product;';
$statement = $db->prepare($request);
$statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
}
catch (PDOException $exception)
{
error_log('Request error: '.$exception->getMessage());
return false;
}
return $result;
}
//----------------------------------------------------------------------------
//--- dbAddCTweet ------------------------------------------------------------
//----------------------------------------------------------------------------
// Add a tweet.

View File

@ -1,11 +1,13 @@
<?php
require_once('database.php');
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Database connexion.
$db = dbConnect();
if (!$db)
{
if (!$db) {
header('HTTP/1.1 503 Service Unavailable');
exit;
}
@ -15,23 +17,34 @@
$request = $_SERVER['PATH_INFO'];
$request = explode('/', $request);
if ($request[1] != 'alertes')
{
header('HTTP/1.1 400 Bad Request');
exit;
if ($request[1] == 'alertes') {
if ($requestMethod == 'GET') {
$filtresArray = [];
if(isset($_GET['device_product']))
$filtresArray['device_product'] = $_GET['device_product'];
if(isset($_GET['agent_severity']))
$filtresArray['agent_severity'] = $_GET['agent_severity'];
error_log('filtres array : ' . json_encode($filtresArray));
if (!empty($filtresArray)) {
$data = dbRequestAlerts($db, $filtresArray);
} else {
$data = dbRequestAlerts($db, null);
}
}
if ($requestMethod == 'GET')
{
$data = dbRequestAlerts($db);
}
if ($requestMethod == 'PUT')
{
if ($requestMethod == 'PUT') {
parse_str(file_get_contents('php://input'), $_PUT);
if ($id != '' && isset($_PUT['login']) && isset($_PUT['text']))
$data = dbModifyTweet($db, $id, $_PUT['login'], strip_tags($_PUT['text']));
}
}
if ($request[1] == 'devices') {
$data = dbRequestDevices($db);
}
// Send data to the client.
header('Content-Type: application/json; charset=utf-8');
@ -43,4 +56,3 @@
header('HTTP/1.1 200 OK');
echo json_encode($data);
exit;
?>