Redesigns the components page

main
Yasen Pramatarov 2025-01-26 14:39:10 +02:00
parent 4e79b76377
commit 71d0984e9d
4 changed files with 188 additions and 111 deletions

View File

@ -49,25 +49,14 @@ class Component {
$until_time = htmlspecialchars(strip_tags($until_time));
// list of jitsi component events
$sql = "
SELECT
jitsi_component, loglevel, time, component_id, event_type, event_param
FROM
jitsi_components
WHERE
jitsi_component = %s
AND
component_id = %s";
$sql = "SELECT jitsi_component, loglevel, time, component_id, event_type, event_param
FROM jitsi_components
WHERE LOWER(jitsi_component) = LOWER(%s)
AND component_id = %s";
if ($event_type != '' && $event_type != 'event_type') {
$sql .= "
AND
event_type LIKE '%%%s%%'";
$sql .= " AND event_type LIKE '%%%s%%'";
}
$sql .= "
AND
(time >= '%s 00:00:00' AND time <= '%s 23:59:59')
ORDER BY
time";
$sql .= " AND (time >= '%s 00:00:00' AND time <= '%s 23:59:59') ORDER BY time";
if ($items_per_page) {
$items_per_page = (int)$items_per_page;
@ -89,6 +78,52 @@ ORDER BY
return $query->fetchAll(PDO::FETCH_ASSOC);
}
/**
* Gets the total count of components events matching the filter criteria
*
* @param string $jitsi_component The Jitsi component name.
* @param int $component_id The component ID.
* @param string $event_type The type of event to filter by.
* @param string $from_time The start date in 'YYYY-MM-DD' format.
* @param string $until_time The end date in 'YYYY-MM-DD' format.
*
* @return int The total count of matching components
*/
public function getComponentEventsCount($jitsi_component, $component_id, $event_type, $from_time, $until_time) {
// time period drill-down
if (empty($from_time)) {
$from_time = '0000-01-01';
}
if (empty($until_time)) {
$until_time = '9999-12-31';
}
$from_time = htmlspecialchars(strip_tags($from_time));
$until_time = htmlspecialchars(strip_tags($until_time));
// Build the query
$sql = "SELECT COUNT(*) as total
FROM jitsi_events
WHERE time >= :from_time
AND time <= :until_time
AND LOWER(jitsi_component) = LOWER(:jitsi_component)
AND component_id) = :component_id
AND LOWER(event_type) = LOWER(:event_type)";
try {
$stmt = $this->db->prepare($sql);
$stmt->bindParam(':from_time', $from_time);
$stmt->bindParam(':until_time', $until_time);
$stmt->bindParam(':jitsi_component', $jitsi_component);
$stmt->bindParam(':component_id', $component_id);
$stmt->bindParam(':event_type', $event_type);
$stmt->execute();
$result = $stmt->fetch(PDO::FETCH_ASSOC);
return (int)$result['total'];
} catch (PDOException $e) {
error_log("Error in getComponentCount: " . $e->getMessage());
return 0;
}
}
}
?>

View File

@ -25,9 +25,35 @@ if ($response['db'] === null) {
} else {
$db = $response['db'];
// Get current page for pagination
$currentPage = $_REQUEST['page_num'] ?? 1;
$currentPage = (int)$currentPage;
// specify time range
include '../app/helpers/time_range.php';
// Build params for pagination
$params = '';
if (!empty($_REQUEST['from_time'])) {
$params .= '&from_time=' . urlencode($_REQUEST['from_time']);
}
if (!empty($_REQUEST['until_time'])) {
$params .= '&until_time=' . urlencode($_REQUEST['until_time']);
}
if (!empty($_REQUEST['name'])) {
$params .= '&name=' . urlencode($_REQUEST['name']);
}
if (!empty($_REQUEST['id'])) {
$params .= '&id=' . urlencode($_REQUEST['id']);
}
if (isset($_REQUEST['event'])) {
$params .= '&event=' . urlencode($_REQUEST['event']);
}
// pagination variables
$items_per_page = 15;
$offset = ($currentPage -1) * $items_per_page;
// jitsi component events list
// we use $_REQUEST, so that both links and forms work
// if it's there, but empty, we make it same as the field name; otherwise assign the value
@ -44,11 +70,6 @@ if ($response['db'] === null) {
// list of all component events (default)
$componentObject = new Component($db);
// pagination variables
$items_per_page = 15;
$browse_page = $_REQUEST['p'] ?? 1;
$browse_page = (int)$browse_page;
$offset = ($browse_page -1) * $items_per_page;
// prepare the result
$search = $componentObject->jitsiComponents($jitsi_component, $component_id, $event_type, $from_time, $until_time, $offset, $items_per_page);
@ -57,7 +78,7 @@ if ($response['db'] === null) {
if (!empty($search)) {
// we get total items and number of pages
$item_count = count($search_all);
$page_count = ceil($item_count / $items_per_page);
$totalPages = ceil($item_count / $items_per_page);
$components = array();
$components['records'] = array();
@ -78,11 +99,11 @@ if ($response['db'] === null) {
}
}
// prepare the widget
$widget['full'] = false;
$widget['name'] = 'AllComponents';
$widget['filter'] = true;
$widget['pagination'] = true;
// // prepare the widget
// $widget['full'] = false;
// $widget['name'] = 'AllComponents';
// $widget['filter'] = true;
// $widget['pagination'] = true;
// widget title
if (isset($_REQUEST['name']) && $_REQUEST['name'] != '') {
@ -92,15 +113,15 @@ if ($response['db'] === null) {
} else {
$widget['title'] = 'Jitsi events for&nbsp;<strong>all components</strong>';
}
// widget records
if (!empty($components['records'])) {
$widget['full'] = true;
$widget['table_headers'] = array_keys($components['records'][0]);
$widget['table_records'] = $components['records'];
}
// // widget records
// if (!empty($components['records'])) {
// $widget['full'] = true;
// $widget['table_headers'] = array_keys($components['records'][0]);
// $widget['table_records'] = $components['records'];
// }
// display the widget
include '../app/templates/event-list-components.php';
include '../app/templates/components.php';
}

View File

@ -0,0 +1,97 @@
<!-- "jitsi components events" -->
<div class="container-fluid mt-2">
<div class="row mb-4">
<div class="col-md-6 mb-5">
<h2>Jitsi components events</h2>
<small>Log events related to Jitsi Meet components like Jicofo, Videobridge, Jigasi, etc.</small>
</div>
<div class="row mb-4">
<!-- component events filter -->
<div class="card mb-3">
<div class="card-body">
<form method="get" action="" class="row g-3 align-items-end">
<input type="hidden" name="page" value="components">
<div class="col-md-auto">
<label for="from_time" class="form-label">From date</label>
<input type="date" class="form-control" id="from_time" name="from_time" value="<?= htmlspecialchars($_REQUEST['from_time'] ?? '') ?>">
</div>
<div class="col-md-auto">
<label for="until_time" class="form-label">Until date</label>
<input type="date" class="form-control" id="until_time" name="until_time" value="<?= htmlspecialchars($_REQUEST['until_time'] ?? '') ?>">
</div>
<div class="col-md-2">
<label for="name" class="form-label">Component name</label>
<input type="text" class="form-control" id="name" name="name" value="<?= htmlspecialchars($_REQUEST['name'] ?? '') ?>" placeholder="Component name">
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="id" name="id" value="<?= htmlspecialchars($_REQUEST['id'] ?? '') ?>" placeholder="Search in component IDs">
<input type="text" class="form-control" id="event" name="event" value="<?= htmlspecialchars($_REQUEST['event'] ?? '') ?>" placeholder="Search in event messages">
</div>
<div class="col-md-auto align-middle">
<button type="submit" class="btn btn-primary me-2">
<i class="fas fa-search me-2"></i>Search
</button>
<a href="?page=components" class="btn btn-outline-secondary">
<i class="fas fa-times me-2"></i>Clear
</a>
</div>
</form>
</div>
</div>
<!-- /component events filter -->
<!-- component events -->
<?php if ($time_range_specified) { ?>
<div class="alert alert-info m-3">
<i class="fas fa-calendar-alt me-2"></i>Time period: <strong><?= htmlspecialchars($from_time) ?> - <?= htmlspecialchars($until_time) ?></strong>
</div>
<?php } ?>
<div class="mb-5">
<?php if (!empty($components['records'])) { ?>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="table-light">
<tr>
<th>Component</th>
<th>LogLevel</th>
<th>Time</th>
<th>Component ID</th>
<th>Event</th>
<th>Parameter</th>
</tr>
</thead>
<tbody>
<?php foreach ($components['records'] as $row) { ?>
<tr>
<td>
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=components&name=<?= htmlspecialchars($row['component'] ?? '') ?>">
<?= htmlspecialchars($row['component'] ?? '') ?>
</a>
</td>
<td><?= htmlspecialchars($row['loglevel']) ?></td>
<td><span class="text-muted"><?= date('d M Y H:i', strtotime($row['time'])) ?></span></td>
<td>
<a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=components&id=<?= htmlspecialchars($row['component ID'] ?? '') ?>">
<?= htmlspecialchars($row['component ID'] ?? '') ?>
</a>
</td>
<td><?= htmlspecialchars($row['event']) ?></td>
<td><?= htmlspecialchars($row['param']) ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php include '../app/templates/pagination.php'; ?>
<?php } else { ?>
<div class="alert alert-info m-3">
<i class="fas fa-info-circle me-2"></i>No component events found for the specified criteria.
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<!-- "/jitsi components events" -->

View File

@ -1,76 +0,0 @@
<div class="row">
<div class="card w-auto bg-light border-light card-body" style="flex-direction: row;"><?= $widget['title'] ?></div>
<!-- Results filter -->
<div class="card w-auto bg-light border-light card-body text-right" style="text-align: right;">
<form method="POST" id="filter_form" class="filter-results" action="?platform=<?= htmlspecialchars($platform_id) ?>&page=<?= htmlspecialchars($page) ?>">
<label for="from_time">from</label>
<input type="date" id="from_time" name="from_time"<?php if (isset($_REQUEST['from_time'])) echo " value=\"" . htmlspecialchars($from_time) . "\"" ?> />
<label for="until_time">until</label>
<input type="date" id="until_time" name="until_time"<?php if (isset($_REQUEST['until_time'])) echo " value=\"" . htmlspecialchars($until_time) . "\"" ?> />
<input type="text" name="id" placeholder="component ID"<?php if (isset($_REQUEST['id'])) echo " value=\"" . htmlspecialchars($_REQUEST['id']) . "\"" ?> />
<input type="text" name="name" placeholder="component name"<?php if (isset($_REQUEST['name'])) echo " value=\"" . htmlspecialchars($_REQUEST['name']) . "\"" ?> />
<input type="text" name="event" placeholder="event name"<?php if (isset($_REQUEST['event'])) echo " value=\"" . htmlspecialchars($_REQUEST['event']) . "\"" ?> />
<input type="button" onclick="clearFilter()" value="clear" />
<input type="submit" value="search" />
</form>
<script>
function clearFilter() {
document.getElementById("filter_form").reset();
const filterFields = document.querySelectorAll("#filter_form input");
filterFields.forEach(input => {
if (input.type === 'text' ||input.type === 'date') {
input.value = '';
}
});
}
</script>
</div>
<!-- /Results filter -->
</div>
<!-- widget "<?= htmlspecialchars($widget['name']) ?>" -->
<div class="collapse show" id="collapse<?= htmlspecialchars($widget['name']) ?>">
<?php if ($time_range_specified) { ?>
<p class="m-3">time period: <strong><?= htmlspecialchars($from_time) ?> - <?= htmlspecialchars($until_time) ?></strong></p>
<?php } ?>
<div class="mb-5">
<?php if ($widget['full'] === true) { ?>
<table class="table table-results table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<?php foreach ($widget['table_headers'] as $header) { ?>
<th scope="col"><?= htmlspecialchars($header) ?></th>
<?php } ?>
</tr>
</thead>
<tbody>
<?php foreach ($widget['table_records'] as $row) { ?>
<tr>
<?php foreach ($row as $key => $column) { ?>
<?php if ($key === 'component ID') { ?>
<td><a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=components&id=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } elseif ($key === 'component') { ?>
<td><a href="<?= htmlspecialchars($app_root) ?>?platform=<?= htmlspecialchars($platform_id) ?>&page=components&name=<?= htmlspecialchars($column ?? '') ?>"><?= htmlspecialchars($column ?? '') ?></a></td>
<?php } else { ?>
<td><?= htmlspecialchars($column ?? '') ?></td>
<?php }
} ?>
</tr>
<?php } ?>
</tbody>
</table>
<?php
if ($widget['pagination'] && $item_count > $items_per_page) {
$url = "$app_root?platform=$platform_id&page=$page";
include '../app/helpers/pagination.php';
}
?>
<?php } else { ?>
<p class="m-3">No matching records found.</p>
<?php } ?>
</div>
</div>
<!-- /widget "<?= htmlspecialchars($widget['name']) ?>" -->