feat: implement working system logs viewer in system-hub
Fixed and enhanced the system logs functionality with real-time log viewing
and color-coded log levels.
🔧 Backend Fix (RPCD)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Problem:
- get_logs() function returned empty array
- Logs were piped through while loop creating a subshell
- json_add_string in subshell didn't affect main JSON output
Solution:
- Use temporary file to collect logs
- Read from file outside of subshell
- Properly build JSON array with all log lines
Implementation:
```sh
# Store logs in temporary file
logread | tail -n "$lines" > "$tmpfile"
# Read from file (no subshell issue)
while IFS= read -r line; do
json_add_string "" "$line"
done < "$tmpfile"
```
Testing:
✅ ubus call luci.system-hub get_logs '{"lines": 100}' → Returns real logs
✅ Filter parameter works: get_logs '{"filter": "error"}'
✅ Temporary files cleaned up after use
🎨 Frontend Enhancement (logs.js)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Added color-coded log level display:
Features:
1. **Color-coded by severity:**
- 🔴 Errors (red): error, err, fatal, crit
- 🟡 Warnings (orange): warn, warning
- 🔵 Info (blue): info, notice
- 🟣 Debug (purple): debug
- 🟢 Success (green): success, ok
2. **Visual enhancements:**
- Colored left border for each log line
- Semi-transparent background matching log level
- JetBrains Mono font for better readability
- Proper line spacing and padding
3. **Empty state:**
- Friendly message when no logs available
- Different message for empty search results
- Large icon for better UX
Implementation:
```javascript
renderLogLine: function(line) {
// Detect log level from keywords
if (line.includes('error')) {
color = '#ef4444'; // Red
bgColor = 'rgba(239, 68, 68, 0.1)';
}
// ... other levels
return E('div', {
'style': 'border-left: 3px solid ' + color + '; ...'
}, line);
}
```
📋 Features Summary
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Real-time system log viewing (logread integration)
✅ Filter by log level (all, errors, warnings, info)
✅ Search functionality (filter text in logs)
✅ Adjustable line count (50, 100, 200, 500, 1000 lines)
✅ Color-coded log levels for easy identification
✅ Refresh button to reload logs
✅ Download logs as .txt file
✅ Statistics: total lines, errors count, warnings count
✅ Beautiful empty state when no logs match
🚀 Deployment
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Updated RPCD backend on router
✅ Updated frontend logs.js on router
✅ Permissions fixed (755 for RPCD, 644 for JS)
✅ Services restarted (rpcd, uhttpd)
✅ Tested and working
Test URL: https://192.168.8.191/cgi-bin/luci/admin/secubox/system/system-hub/logs
Files Modified:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Backend:
* luci-app-system-hub/root/usr/libexec/rpcd/luci.system-hub
- Fixed get_logs() to return real logs (+12 lines refactor)
Frontend:
* luci-app-system-hub/htdocs/luci-static/resources/view/system-hub/logs.js
- Added renderLogLine() for color-coded display (+27 lines)
- Enhanced updateLogDisplay() with empty state (+18 lines)
- JetBrains Mono font integration
🎯 User Experience
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Before:
❌ Empty log viewer (backend returned [])
❌ Plain text display
❌ No visual distinction between log levels
After:
✅ Real system logs displayed
✅ Color-coded by severity level
✅ Easy to spot errors and warnings
✅ Professional terminal-like appearance
✅ Fully functional filters and search
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
CyberMind-FR
e90cf85f69