Add comprehensive backend support for managing the CrowdSec Firewall Bouncer
through the dashboard with full control and monitoring capabilities.
RPC Backend Enhancements (luci.crowdsec-dashboard):
- get_firewall_bouncer_status: Detailed status (running, enabled, UCI config, nftables)
- control_firewall_bouncer: Service control (start/stop/restart/enable/disable)
- get_firewall_bouncer_config: Read UCI configuration
- update_firewall_bouncer_config: Modify UCI settings
- get_nftables_stats: nftables statistics (blocked IPs, rules count)
API Methods Added (api.js):
- getFirewallBouncerStatus(): Get bouncer status and health
- controlFirewallBouncer(action): Control service lifecycle
- getFirewallBouncerConfig(): Read configuration
- updateFirewallBouncerConfig(key, value): Update settings
- getNftablesStats(): Get firewall statistics
Features:
- Real-time service status monitoring
- nftables table detection (IPv4/IPv6)
- Blocked IP counting
- UCI configuration management
- Service lifecycle control
- Comprehensive error handling
Status Information Provided:
- Service running state
- Init script enabled state
- UCI configuration status
- nftables tables active (crowdsec, crowdsec6)
- Blocked IPv4/IPv6 count
- Rules count per table
Configuration Options Supported:
- enabled, ipv4, ipv6 (boolean)
- api_url, update_frequency, deny_action, log_level (string)
- deny_log, filter_input, filter_forward (boolean)
- interfaces list
Next: Frontend UI enhancements for bouncer management panel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed "[object HTMLElement]" display bugs in CrowdSec dashboard views by properly structuring DOM element children arrays.
## Problem:
Multiple CrowdSec dashboard views were showing "[object HTMLElement]" instead of properly rendered content. This occurred when JavaScript code tried to concatenate strings with E() DOM elements using the + operator.
## Root Cause:
```javascript
// WRONG: String concatenation with DOM elements
E('p', {}, _('Access metrics at: ') + E('code', {}, url))
// Results in: "Access metrics at: [object HTMLElement]"
```
When you concatenate a string with a DOM element, JavaScript converts the DOM element to its string representation "[object HTMLElement]", which then gets rendered as text.
## Solution:
Changed from string concatenation to proper children arrays:
```javascript
// CORRECT: Array of children
E('p', {}, [
_('Access metrics at: '),
E('code', {}, url)
])
```
## Files Fixed:
### metrics.js (line 299-302):
- Fixed "Access metrics at: [object HTMLElement]" in metrics export info box
- Changed from concatenation to children array
### settings.js (line 217-220):
- Fixed "Or use: [object HTMLElement]" in collections empty state
- Changed from concatenation to children array
### waf.js (lines 123-126):
- Fixed 4 instances in WAF setup instructions:
- "Install AppSec collections: [object HTMLElement]"
- "Restart CrowdSec service: [object HTMLElement]"
- "Verify status: [object HTMLElement]"
- Changed all from concatenation to children arrays
## Technical Notes:
- The E() helper function expects children to be:
1. A single string
2. A single DOM element
3. An array of strings and/or DOM elements
- String concatenation (+) cannot be used to combine text with DOM elements
- Always use array notation when mixing text and elements
## Testing:
- Deployed to router 192.168.8.191
- Metrics view now displays "Access metrics at: http://127.0.0.1:6060/metrics" correctly
- Settings view shows "Or use: cscli hub update" properly
- WAF view renders all setup instructions with code blocks correctly
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhanced dashboard UX when CrowdSec service is not running:
API module (api.js):
- Modified getDashboardData() to handle error responses gracefully
- Returns empty arrays/objects for stats when service is stopped
- Includes error flag in response data
Overview module (overview.js):
- Added 'fs' module import for service control
- Added startCrowdSec() function to start service from UI
- Display warning banner when service is stopped
- Provide actionable message with start service link
Dashboard CSS (dashboard.css):
- Added .cs-warning-banner styles for error messages
- Professional warning styling with icon and content layout
This resolves XHR timeout errors by showing friendly error messages
instead of hanging requests.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed 'new api()' to 'api' in all dashboard views since the API module
exports an object, not a constructor class.
Fixed files:
- overview.js
- decisions.js
- alerts.js
- metrics.js
- waf.js
This resolves the 'TypeError: api is not a constructor' error.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
