mirror/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2026-06-20 22:30:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

FE: skeleton uplift, table fixes in systeminfo

Browse Source
This commit is contained in:
jokob-sk
2026-06-21 09:46:44 +10:00
parent 39cdbfcc18
commit 553ed6ec2b
12 changed files with 191 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/DEVICE_FILTERS.md
View File

@@ -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)
![Image](./img/ADVISORIES/filters.png)
![Image](https://docs.netalertx.com/img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)
![Image](./img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png)
Review any active:
@@ -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.
![Image](./img/DEVICE_MANAGEMENT/device_filter_settings.png)
---
### Check Whether the Device Is Hidden

BIN
docs/img/DEVICE_MANAGEMENT/device_filter_settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

9
front/css/app.css
View File

@@ -2647,11 +2647,11 @@ 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; }
@@ -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%; }
@@ -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; }

2
front/css/system-dark-patch.css
View File

@@ -743,5 +743,5 @@
--skel-section: #252c38;
--skel-panel-bg: #1e242e;
--skel-border: #2a323e;
--skel-bg: #353c42;
--skel-bg: #292e33;
}

21
front/php/templates/skel_device_details.php
View File

@@ -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>

2
front/php/templates/skel_events.php
View File

@@ -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>

6
front/php/templates/skel_notifications.php
View File

@@ -8,7 +8,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 < 4; $j++): ?>
<span class="skel-td skel-shimmer"></span>
@@ -16,4 +16,8 @@
</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>

174
front/php/templates/skel_tab_details.php
View File

@@ -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>

2
front/php/templates/skel_tab_sysinfo_network.php
View File

@@ -1,5 +1,5 @@
<div class="skel-info-tab">
<?php for ($i = 0; $i < 10; $i++): ?>
<?php for ($i = 0; $i < 20; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>

2
front/php/templates/skel_tab_sysinfo_server.php
View File

@@ -1,5 +1,5 @@
<div class="skel-info-tab">
<?php for ($i = 0; $i < 14; $i++): ?>
<?php for ($i = 0; $i < 20; $i++): ?>
<div class="skel-form-row">
<span class="skel-form-label skel-shimmer"></span>
<span class="skel-form-input skel-shimmer"></span>

2
front/php/templates/skel_tab_sysinfo_storage.php
View File

@@ -4,7 +4,7 @@
<span class="skel-th skel-shimmer"></span>
<?php endfor; ?>
</div>
<?php for ($i = 0; $i < 6; $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>

32
front/systeminfoNetwork.php
View File

@@ -335,6 +335,18 @@ function loadInterfaces() {
</tr>
`);
});
if ($.fn.DataTable.isDataTable('#networkTable')) {
$('#networkTable').DataTable().destroy();
}
$('#networkTable').DataTable({
searching: true,
order: [[0, "desc"]],
initComplete: function() {
hideSpinner();
}
});
},
error: function(xhr) {
const tbody = $("#networkTable tbody");
@@ -356,16 +368,16 @@ $(document).ready(function() {
loadInterfaces();
setTimeout(() => {
// Available IPs datatable
$('#networkTable').DataTable({
searching: true,
order: [[0, "desc"]],
initComplete: function(settings, json) {
hideSpinner(); // Called after the DataTable is fully initialized
}
});
}, 200);
// setTimeout(() => {
// // Available IPs datatable
// $('#networkTable').DataTable({
// searching: true,
// order: [[0, "desc"]],
// initComplete: function(settings, json) {
// hideSpinner(); // Called after the DataTable is fully initialized
// }
// });
// }, 200);
});
</script>