Skip to content

Next release #1684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jokob-sk merged 6 commits into from
Jun 21, 2026
+230 −77
Merged

Next release #1684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
553ed6e
FE: skeleton uplift, table fixes in systeminfo
jokob-sk Jun 20, 2026
8c0d1e1
FE: skeleton uplift
jokob-sk Jun 20, 2026
6256149
FE: add shared sub-tab skeleton template for plugins
jokob-sk Jun 21, 2026
b1fe243
FE: skeleton uplift
jokob-sk Jun 21, 2026
7ce2ce4
Merge branch 'next_release' of github.com:netalertx/NetAlertX into ne…
jokob-sk Jun 21, 2026
931be74
FE: skeleton uplift
jokob-sk Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/DEVICE_FILTERS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ If a device is missing from the **My Devices** list, work through these checks.

The most common cause is that a filter is hiding the device.

![Image](https://docs.netalertx.com/img/ADVISORIES/filters.png)
![Active device filters example](./img/ADVISORIES/filters.png)

![Image](https://docs.netalertx.com/img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)
![Display settings](./img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)

Review any active:

Expand All @@ -32,6 +32,8 @@ Clear filters first, then reload the page and check again.

You can select devices of what statuses should be displayed in the My Devices view. This can be adjusted in the _Settings_ section - search for the `UI_MY_DEVICES` setting and verify that the statuses you want to show are selected.

![Global filter display settings](./img/DEVICE_MANAGEMENT/device_filter_settings.png)

---

### Check Whether the Device Is Hidden
Expand Down
Binary file added docs/img/DEVICE_MANAGEMENT/device_filter_settings.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 7 additions & 6 deletions front/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2647,13 +2647,13 @@ table.dataTable tbody > tr.selected
.skel-tab-pane { z-index: 10; min-height: 400px; }
#settings-skeleton { padding-top: 50px; padding-left: 20px; padding-right: 20px; min-height: 500px; }
#devices-skeleton { top: 50px; min-height: 500px; }
#device-details-skeleton { min-height: 600px; }
#device-details-skeleton { top: 45px; min-height: 100px; }
#events-skeleton { top: 50px; min-height: 500px; }
#presence-skeleton { top: 50px; min-height: 500px; }
#report-skeleton { min-height: 400px; }
#notifications-skeleton { min-height: 400px; }
#notifications-skeleton { top: 50px; min-height: 400px; }
#workflows-skeleton { top: 50px; width: 770px; margin: 0 auto; min-height: 300px; }
#plugins-skeleton { padding: 0; min-height: 400px; }
#plugins-skeleton { top: 50px; padding: 0; min-height: 400px; }

/* Bordered containers */
.skel-overview-panel, .skel-section, .skel-plugin-block,
Expand Down Expand Up @@ -2728,6 +2728,7 @@ table.dataTable tbody > tr.selected

/* ----- Devices ---------------------------------------------------------- */
.skel-tile { display: flex; height: 80px; }
#device-details-skeleton .skel-tile { display: flex; height: 45px; }
.skel-tile-inner { display: flex; flex-direction: column; padding: 12px 15px; justify-content: center; gap: 10px; }
.skel-tile-num { height: 26px; width: 55%; }
.skel-tile-label { height: 13px; width: 75%; }
Expand All @@ -2740,8 +2741,8 @@ table.dataTable tbody > tr.selected
.skel-td { height: 13px; }

/* ----- Device Details --------------------------------------------------- */
.skel-detail-header { margin-bottom: 15px; }
.skel-detail-title { height: 26px; width: 42%; margin-bottom: 14px; }
.skel-detail-header { margin-bottom: 0px; }
.skel-detail-title { height: 26px; width: 42%; margin-bottom: 0px; }
.skel-detail-info-panel { display: flex; gap: 0; padding: 14px; border-radius: 4px; margin-bottom: 15px; max-width: 400px; }
.skel-tabs-bar { display: flex; gap: 4px; padding: 8px 10px 0; border-radius: 4px 4px 0 0; border-bottom: none; }
.skel-tab { height: 34px; width: 100px; border-radius: 4px 4px 0 0; flex-shrink: 0; }
Expand All @@ -2758,7 +2759,7 @@ table.dataTable tbody > tr.selected

/* ----- Plugins ---------------------------------------------------------- */
.skel-plugins-wrap { display: flex; gap: 0; min-height: 400px; }
.skel-plugins-nav { width: 165px; flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }
.skel-plugins-nav { flex-shrink: 0; border-right: 1px solid var(--skel-border); padding: 8px 0; }
.skel-plugins-nav-item { display: flex; align-items: center; padding: 9px 15px; border-bottom: 1px solid var(--skel-border); }
.skel-plugins-nav-item:last-child { border-bottom: none; }
.skel-plugins-body { flex: 1; padding: 0; }
Expand Down
2 changes: 1 addition & 1 deletion front/css/dark-patch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -766,5 +766,5 @@ table.dataTable tbody tr.selected, table.dataTable tbody tr .selected
--skel-section: #252c38;
--skel-panel-bg: #1e242e;
--skel-border: #2a323e;
--skel-bg: #353c42;
--skel-bg: #292e33;
}
2 changes: 1 addition & 1 deletion front/css/system-dark-patch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -743,5 +743,5 @@
--skel-section: #252c38;
--skel-panel-bg: #1e242e;
--skel-border: #2a323e;
--skel-bg: #353c42;
--skel-bg: #292e33;
}
21 changes: 4 additions & 17 deletions front/php/templates/skel_device_details.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,56 +4,43 @@
<!-- Content header area -------------------------------------------------- -->
<div class="skel-detail-header">
<div class="skel-detail-title skel-shimmer"></div>
<div class="skel-detail-info-panel">
<div class="skel-shimmer" style="width:76px; height:76px; border-radius:4px; flex-shrink:0;"></div>
<div style="flex:1; display:flex; flex-direction:column; gap:9px; padding:10px 0 10px 10px;">
<span class="skel-line skel-shimmer" style="width:55%"></span>
<span class="skel-line skel-shimmer" style="width:38%"></span>
<span class="skel-line skel-shimmer" style="width:45%"></span>
</div>
</div>
</div>

<!-- Top stat tiles -------------------------------------------------------- -->
<div class="row">
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="col-lg-3 col-sm-6 col-xs-6 ">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="col-lg-3 col-sm-6 col-xs-6 ">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="col-lg-3 col-sm-6 col-xs-6 ">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 padding-5px">
<div class="col-lg-3 col-sm-6 col-xs-6 ">
<div class="skel-tile">
<div class="skel-tile-inner">
<div class="skel-tile-num skel-shimmer"></div>
<div class="skel-tile-label skel-shimmer"></div>
</div>
<div class="skel-tile-icon-area">
<div class="skel-tile-icon-shape skel-shimmer"></div>
Expand Down
2 changes: 1 addition & 1 deletion front/php/templates/skel_events.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<?php for ($i = 0; $i < 20; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 6; $j++): ?>
<span class="skel-td skel-shimmer"></span>
Expand Down
6 changes: 5 additions & 1 deletion front/php/templates/skel_notifications.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<?php for ($i = 0; $i < 25; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 4; $j++): ?>
<span class="skel-td skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php endfor; ?>
</div>
<div class="skel-form-footer">
<span class="skel-form-btn skel-shimmer"></span>
<span class="skel-form-btn skel-shimmer"></span>
</div>
</div>
13 changes: 8 additions & 5 deletions front/php/templates/skel_plugins.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div id="plugins-skeleton">
<div class="skel-plugins-wrap">
<div class="skel-plugins-wrap col-sm-12">

<!-- Left nav sidebar -->
<div class="skel-plugins-nav">
<div class="skel-plugins-nav col-sm-2">
<?php
$widths = [72, 60, 80, 55, 68, 75];
for ($i = 0; $i < 6; $i++):
Expand All @@ -14,7 +14,7 @@
</div>

<!-- Right content area -->
<div class="skel-plugins-body">
<div class="skel-plugins-body col-sm-10">
<!-- Sub-tab bar -->
<div class="skel-tabs-bar" style="border-radius: 0 4px 0 0; margin-bottom: 0;">
<span class="skel-tab skel-shimmer"></span>
Expand All @@ -28,7 +28,7 @@
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 8; $i++): ?>
<?php for ($i = 0; $i < 25; $i++): ?>
<div class="skel-tr">
<?php for ($j = 0; $j < 5; $j++): ?>
<span class="skel-td skel-shimmer"></span>
Expand All @@ -37,6 +37,9 @@
<?php endfor; ?>
</div>
</div>

</div>
<div class="skel-form-footer col-sm-12 padding-5px">
<span class="skel-form-btn skel-shimmer"></span>
<span class="skel-form-btn skel-shimmer"></span>
</div>
</div>
174 changes: 146 additions & 28 deletions front/php/templates/skel_tab_details.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,155 @@
<!-- Details Tab Skeleton ================================================== -->
<div id="skel-tab-details" class="skel-tab-pane">
<div class="skel-detail-form">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
<div class="skel-detail-form col-lg-12 col-sm-12 col-xs-12">
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:400px;height:50px"></span>
</div>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
<div class="col-lg-4 col-sm-6 col-xs-12">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:260px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:400px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:300px"></span>
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span><span class="skel-form-input skel-shimmer" style="max-width:40px"></span>
</div>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:220px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:380px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:280px"></span>
</div>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:320px"></span>
<div class="col-lg-6 col-sm-12 col-xs-12">
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer" style="max-width:340px"></span>
</div>
</div>
<div class="skel-form-footer">
<span class="skel-form-btn skel-shimmer"></span>
Expand Down
Loading
Loading