Skip to content

Next release#1684

Merged
jokob-sk merged 6 commits into
mainfrom
next_release
Jun 21, 2026
Merged

Next release#1684
jokob-sk merged 6 commits into
mainfrom
next_release

Conversation

@jokob-sk

@jokob-sk jokob-sk commented Jun 21, 2026

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • Documentation

    • Updated device filters documentation with refreshed local screenshot embeds.
  • Style

    • Refined loading skeleton spacing and sizing across device details, notifications, and plugins.
    • Updated the dark theme skeleton background color.
  • UI Improvements

    • Improved loading skeleton layouts (responsive grids) for details and tab content.
    • Increased skeleton row counts for events, notifications, and system info tabs.
    • Enhanced skeleton handling for data tables (overlay fade-out timing) and initialized the network table after interface data loads.

@coderabbitai

coderabbitai Bot commented Jun 21, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9b363708-b51e-4f48-917b-908e362140e1

📥 Commits

Reviewing files that changed from the base of the PR and between 6256149 and 931be74.

📒 Files selected for processing (4)
  • docs/DEVICE_FILTERS.md
  • front/css/dark-patch.css
  • front/php/templates/skel_tab_plugins_table.php
  • front/systeminfoNetwork.php
💤 Files with no reviewable changes (1)
  • front/systeminfoNetwork.php
✅ Files skipped from review due to trivial changes (2)
  • front/css/dark-patch.css
  • docs/DEVICE_FILTERS.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • front/php/templates/skel_tab_plugins_table.php

📝 Walkthrough

Walkthrough

Loading skeleton templates are overhauled across device details, tab details, plugins, events, notifications, and sysinfo views: row counts increase, layouts move to Bootstrap responsive grids, and footers with shimmer buttons are added. A new skel_tab_plugins_table.php is introduced and wired as a fade-out DataTable overlay in pluginsCore.php. Network DataTable init is moved from a timed setTimeout to the AJAX success handler. Screenshot references are added to DEVICE_FILTERS.md.

Changes

Loading Skeleton UI Overhaul

Layer / File(s) Summary
New plugins-table skeleton template
front/php/templates/skel_tab_plugins_table.php
Introduces a 5-column shimmer header, per-row percentage-width-driven body rows, and a footer with two shimmer button placeholders.
pluginsCore.php skeleton overlay wiring
front/pluginsCore.php
Captures the new skeleton via output buffering, exposes it as skelPluginsTable in JavaScript, injects a per-table skeleton overlay into generateDataTable(), derives a skelId in initializeDataTables(), and removes the overlay on initComplete.
Device-details skeleton template and CSS refactor
front/php/templates/skel_device_details.php, front/css/app.css
Simplifies tile-area skeleton markup by removing the info-panel block, label shimmers, and padding-5px classes. Reduces skeleton height, adds top offset, forces .skel-tile to 45px flex height, and zeroes header/title bottom margins.
Tab-details skeleton responsive grid refactor
front/php/templates/skel_tab_details.php
Reorganizes from a single vertical shimmer list into three col-lg-4 columns and two col-lg-6 responsive sections with varied inline placeholder widths and multi-input rows.
Skeleton row-count and layout updates
front/php/templates/skel_plugins.php, front/php/templates/skel_notifications.php, front/php/templates/skel_events.php, front/php/templates/skel_tab_sysinfo_*.php
Adds Bootstrap grid classes to plugins skeleton wrapper/nav/body, increases loop bounds (up to 25 rows for plugins and storage), adds footer shimmer buttons to plugins and notifications. Increases header-cell and sysinfo row placeholders across tabs.
Skeleton CSS positioning, sizing, and dark-theme updates
front/css/app.css, front/css/system-dark-patch.css, front/css/dark-patch.css
Removes fixed width: 165px from plugins nav skeleton leaving it flex-sized. Updates --skel-bg skeleton background color to #292e33 in both dark-theme CSS files.
Network DataTable initialization timing fix
front/systeminfoNetwork.php
Moves #networkTable DataTable creation into the loadInterfaces() AJAX success handler with a destroy-before-reinit guard and hideSpinner() via initComplete. Removes the prior document.ready setTimeout-based initialization.
DEVICE_FILTERS.md screenshot additions
docs/DEVICE_FILTERS.md
Updates the "Check Active Filters" section with new local screenshot image embeds and descriptive alt text, and adds a new screenshot to the "Check global filters" section.

Possibly related PRs

  • netalertx/NetAlertX#1679: Also updates skeleton CSS variables in front/css/system-dark-patch.css and --skel-bg background color, overlapping with this PR's skeleton theme adjustments.

Poem

🐇 Hop, hop! The shimmer grows wide,
Twenty-five rows to fill every side.
Grid columns align, the nav breathes free,
Overlays fade when the data flows free.
No more timeouts to guess the right beat —
The skeleton dances, then quietly retreats! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'Next release' is vague and generic, failing to describe the actual changes in the pull request which involve loading skeleton UI improvements, CSS adjustments, and template refactoring across multiple frontend components. Provide a more descriptive title that summarizes the main change, such as 'Improve loading skeleton UI layouts and templates' or 'Refactor skeleton components and adjust CSS styling'.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch next_release

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
front/php/templates/skel_tab_plugins_table.php (1)

9-30: ⚡ Quick win

Simplify repeated row-width definitions with array_fill.

The 20 identical width rows are hard-coded; generating them programmatically keeps this template easier to maintain.

♻️ Proposed refactor
-    $rowWidths = [
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-        [15, 14, 18, 12, 20],
-    ];
+    $rowWidths = array_fill(0, 20, [15, 14, 18, 12, 20]);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@front/php/templates/skel_tab_plugins_table.php` around lines 9 - 30, The
$rowWidths array definition contains 20 identical rows with values [15, 14, 18,
12, 20] that are repetitively hard-coded. Replace this repetitive definition by
using the array_fill() function to programmatically generate the same array with
20 identical rows, passing the starting index, the count of 20 rows, and the
single row pattern as arguments. This will make the code more maintainable and
easier to modify if the row count or widths need to change in the future.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/DEVICE_FILTERS.md`:
- Around line 17-19: Replace the generic "[Image]" alt-text on all three image
references in the DEVICE_FILTERS.md file with descriptive alternatives: for the
filters.png image at line 17, use "Active device filters example" or "Device
filter panel"; for the DeviceDetails_DisplaySettings.png image at line 19, use
"Display settings"; and for the device_filter_settings.png image around line 35,
use "Global filter display settings". Additionally, verify the semantic
appropriateness of the images used: confirm that the ADVISORIES/filters.png
screenshot is suitable for the device-specific "Check Active Filters" section
(or replace it with a device-specific filters screenshot if it shows advisory
context instead), and verify that DeviceDetails_DisplaySettings.png correctly
illustrates active filter checking rather than just display customization
settings (or replace it with a screenshot showing the actual filters interface).

---

Nitpick comments:
In `@front/php/templates/skel_tab_plugins_table.php`:
- Around line 9-30: The $rowWidths array definition contains 20 identical rows
with values [15, 14, 18, 12, 20] that are repetitively hard-coded. Replace this
repetitive definition by using the array_fill() function to programmatically
generate the same array with 20 identical rows, passing the starting index, the
count of 20 rows, and the single row pattern as arguments. This will make the
code more maintainable and easier to modify if the row count or widths need to
change in the future.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 35dc6fe1-b73e-4957-befa-6ecb641373ac

📥 Commits

Reviewing files that changed from the base of the PR and between 7e237b0 and 6256149.

⛔ Files ignored due to path filters (1)
  • docs/img/DEVICE_MANAGEMENT/device_filter_settings.png is excluded by !**/*.png
📒 Files selected for processing (14)
  • docs/DEVICE_FILTERS.md
  • front/css/app.css
  • front/css/system-dark-patch.css
  • front/php/templates/skel_device_details.php
  • front/php/templates/skel_events.php
  • front/php/templates/skel_notifications.php
  • front/php/templates/skel_plugins.php
  • front/php/templates/skel_tab_details.php
  • front/php/templates/skel_tab_plugins_table.php
  • front/php/templates/skel_tab_sysinfo_network.php
  • front/php/templates/skel_tab_sysinfo_server.php
  • front/php/templates/skel_tab_sysinfo_storage.php
  • front/pluginsCore.php
  • front/systeminfoNetwork.php

Comment thread docs/DEVICE_FILTERS.md Outdated
Comment on lines +17 to +19
![Image](./img/ADVISORIES/filters.png)

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify image file existence and inspect their relationships.

# Check if image files exist
echo "=== Checking image file existence ==="
fd -e png --path "*/img/ADVISORIES/filters.png" 
fd -e png --path "*/img/DEVICE_MANAGEMENT/*"

# Inspect other docs that reference these images to understand intended use
echo ""
echo "=== Cross-reference usage in other docs ==="
rg -l "ADVISORIES/filters\.png|DeviceDetails_DisplaySettings\.png|device_filter_settings\.png" docs/
rg -C 3 "ADVISORIES/filters\.png" docs/
rg -C 3 "DeviceDetails_DisplaySettings\.png" docs/

Repository: netalertx/NetAlertX

Length of output: 2674


🏁 Script executed:

#!/bin/bash
# Correct file existence check and review DEVICE_FILTERS.md context

echo "=== Checking image files in repo ==="
find . -name "filters.png" -o -name "DeviceDetails_DisplaySettings.png" -o -name "device_filter_settings.png"

echo ""
echo "=== Directory structure of img/ ==="
find ./img -type d | head -20

echo ""
echo "=== Full DEVICE_FILTERS.md to see context ==="
cat docs/DEVICE_FILTERS.md

Repository: netalertx/NetAlertX

Length of output: 5689


Improve alt-text descriptiveness and verify image semantic alignment in device filter guidance.

The three images exist in the repository, but their usage has accessibility and clarity concerns:

  1. Generic alt-text on all three images: Using "[Image]" does not convey to screen-reader users or in preview contexts what each screenshot depicts. Replace with descriptive text:

    • Line 17: ./img/ADVISORIES/filters.png → suggest "Active device filters example" or "Device filter panel"
    • Line 19: ./img/DEVICE_MANAGEMENT/DeviceDetails_DisplaySettings.png → use "Display settings" (consistent with its use in DEVICE_DISPLAY_SETTINGS.md)
    • Line ~35: ./img/DEVICE_MANAGEMENT/device_filter_settings.png → suggest "Global filter display settings"
  2. Semantic mismatch (line 17): The ADVISORIES/filters.png screenshot is from the advisory context (ADVISORY_EYES_ON_GLASS.md, alt-text: "filters"). Reusing it in the device-specific "Check Active Filters" section may confuse users about what they're looking at. Verify whether this is the intended visual aid or if a device-specific filters screenshot should replace it.

  3. Contextual relevance (line 19): The DeviceDetails_DisplaySettings.png image depicts device display customization (archiving, grouping, visibility), not active filter checking. Confirm this is the intended visual aid for the "Check Active Filters" section, or replace it with a screenshot showing the actual filters interface.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/DEVICE_FILTERS.md` around lines 17 - 19, Replace the generic "[Image]"
alt-text on all three image references in the DEVICE_FILTERS.md file with
descriptive alternatives: for the filters.png image at line 17, use "Active
device filters example" or "Device filter panel"; for the
DeviceDetails_DisplaySettings.png image at line 19, use "Display settings"; and
for the device_filter_settings.png image around line 35, use "Global filter
display settings". Additionally, verify the semantic appropriateness of the
images used: confirm that the ADVISORIES/filters.png screenshot is suitable for
the device-specific "Check Active Filters" section (or replace it with a
device-specific filters screenshot if it shows advisory context instead), and
verify that DeviceDetails_DisplaySettings.png correctly illustrates active
filter checking rather than just display customization settings (or replace it
with a screenshot showing the actual filters interface).

@jokob-sk jokob-sk merged commit 4abfbf6 into main Jun 21, 2026
6 checks passed
This was referenced Jun 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant