Add syntax highlighting in System Logs

[andre8244]

Description

The System Logs viewer in the NethServer 8 admin UI currently displays log lines as plain, undifferentiated text. When scrolling through a large volume of output during troubleshooting, it's easy to miss a critical error line buried among routine info messages.

Add syntax coloring to the log viewer based on log level/severity:

• Error messages (error, err, crit, fatal, etc.) highlighted in red
• Warning messages highlighted in yellow/orange
• Info messages left in the default/neutral color, so they don't add visual noise

This benefits administrators and support engineers who rely on the built-in log viewer for quick diagnostics, letting them spot problems at a glance instead of reading every line.

Alternative solutions

• Relying on external log aggregation (e.g. Grafana/Loki) for visual triage — already possible for advanced setups, but doesn't help the built-in admin UI log viewer that most users check first.

References

Community discussion: https://community.nethserver.org/t/feature-proposal-logs-highlighting-in-ns8-ui/28010

[andre8244]

Test case

Preconditions

• Install ns8-core testing version 3.20.1-dev.3

• Ensure system logs contain a mix of levels (error, warn, info, debug). If the existing logs don't have enough variety, generate controlled test lines by logging into the NS8 leader node as root and running:

  logger -t logviewer-test "ERROR something broke badly"
  logger -t logviewer-test "WARNING disk almost full"
  logger -t logviewer-test "INFO service started ok"
  logger -t logviewer-test "DEBUG connection pool size=8"
  

Steps

1. Open the System Logs page, a time range that includes the logviewer-test lines (or any other lines with a good mix of levels), and click Search.
   → The log output panel loads and displays lines as before, on a dark background.

2. Locate a line containing an error-level keyword: error, err, fatal, crit, or critical (case-insensitive, e.g. ERROR something broke badly).
   → From right after the leading timestamp/tag onward, the line is rendered bold in red.

3. Locate a line containing a warning-level keyword: warn or warning (case-insensitive).
   → The line is rendered bold in yellow/orange.

4. Locate a line containing an info-level keyword: info, information, or notice (case-insensitive).
   → The line is rendered bold in blue.

5. Locate a line containing a debug-level keyword: debug or trace (case-insensitive).
   → The line is rendered bold in white.

6. Check a line that contains none of the keywords above.
   → The body of the line is left in the default log text color.

7. Type a term into the "Search query" box that also appears inside a colored line (e.g. part of an error line's text), then click Search.
   → Every occurrence of the search term is still highlighted with the standard yellow <mark> background, on top of any level coloring, and all matching lines are still returned exactly as before this change.

8. Search for a term that matches nothing.
   → The "No log found" empty state is displayed, with the ghost animation showing as a light/white outline that reads clearly against the dark log background.