When CrowdSec is first enabled, the 10-60 second startup window caused
the toggle to immediately flicker back to unchecked, the card badge to
show 'Disabled' throughout startup, CrowdSecKeyWarning to flash before
bouncer registration completed, and CrowdSecConfig to show alarming
LAPI-not-ready banners to the user.
Root cause: the toggle, badge, and warning conditions all read from
stale sources (crowdsecStatus local state and status.crowdsec.enabled
server data) which neither reflects user intent during a pending mutation.
- Derive crowdsecChecked from crowdsecPowerMutation.variables during
the pending window so the UI reflects intent immediately on click,
not the lagging server state
- Show a 'Starting...' badge in warning variant throughout the startup
window so the user knows the operation is in progress
- Suppress CrowdSecKeyWarning unconditionally while the mutation is
pending, preventing the bouncer key alert from flashing before
registration completes on the backend
- Broadcast the mutation's running state to the QueryClient cache via
a synthetic crowdsec-starting key so CrowdSecConfig.tsx can read it
without prop drilling
- In CrowdSecConfig, suppress the LAPI 'not running' (red) and
'initializing' (yellow) banners while the startup broadcast is active,
with a 90-second safety cap to prevent stale state from persisting
if the tab is closed mid-mutation
- Add security.crowdsec.starting translation key to all five locales
- Add two backend regression tests confirming that empty-string setting
values are accepted (not rejected by binding validation), preventing
silent re-introduction of the Issue 4 bug
- Add nine RTL tests covering toggle stabilization, badge text, warning
suppression, and LAPI banner suppression/expiry
- Add four Playwright E2E tests using route interception to simulate
the startup delay in a real browser context
Fixes Issues 3 and 4 from the fresh-install bug report.
- Implemented `getCrowdsecKeyStatus` API call to retrieve the current status of the CrowdSec API key.
- Created `CrowdSecKeyWarning` component to display warnings when the API key is rejected.
- Integrated `CrowdSecKeyWarning` into the Security page, ensuring it only shows when relevant.
- Updated i18n initialization in main.tsx to prevent race conditions during rendering.
- Enhanced authentication setup in tests to handle various response statuses more robustly.
- Adjusted security tests to accept broader error responses for import validation.
- Implemented CrowdSecBouncerKeyDisplay component to fetch and display the bouncer API key information.
- Added loading skeletons and error handling for API requests.
- Integrated the new component into the Security page, conditionally rendering it based on CrowdSec status.
- Created unit tests for the CrowdSecBouncerKeyDisplay component, covering various states including loading, registered/unregistered bouncer, and no key configured.
- Added functional tests for the Security page to ensure proper rendering of the CrowdSec Bouncer Key Display based on the CrowdSec status.
- Updated translation files to include new keys related to the bouncer API key functionality.
Complete Phase 4 implementation enabling ACL, WAF, and Rate Limiting
toggle functionality in the Security Dashboard UI.
Backend:
Add 60-second TTL settings cache layer to Cerberus middleware
Trigger async Caddy config reload on security.* setting changes
Query runtime settings in Caddy manager before config generation
Wire SettingsHandler with CaddyManager and Cerberus dependencies
Frontend:
Fix optimistic update logic to preserve mode field for WAF/rate_limit
Replace onChange with onCheckedChange for all Switch components
Add unit tests for mode preservation and rollback behavior
Test Fixes:
Fix CrowdSec startup test assertions (cfg.Enabled is global Cerberus flag)
Fix security service test UUID uniqueness for UNIQUE constraint
Add .first() to toast locator in wait-helpers.ts for multiple toasts
Documentation:
Add Security Dashboard Toggles section to features.md
Mark phase4_security_toggles_spec.md as IMPLEMENTED
Add E2E coverage mode (Docker vs Vite) documentation
Enables 8 previously skipped E2E tests in security-dashboard.spec.ts
and rate-limiting.spec.ts.
- Implemented Audit Logs page with a detailed view for each log entry.
- Added API functions for fetching and exporting audit logs in CSV format.
- Created hooks for managing audit log data fetching and state.
- Integrated filtering options for audit logs based on various criteria.
- Added unit tests for the Audit Logs page to ensure functionality and correctness.
- Updated Security page to include a link to the Audit Logs page.
- Added translation support using react-i18next in WafConfig and CrowdSecConfig components.
- Updated UI elements to use translation keys instead of hardcoded strings.
- Enhanced test coverage for i18n integration, including mocks for translation in tests.
- Fixed various test cases to align with new translation structure.
- Created a QA report for i18n implementation, noting validation of translation files and areas for improvement.
- Add comprehensive design token system (colors, typography, spacing)
- Create 12 new UI components with Radix UI primitives
- Add layout components (PageShell, StatsCard, EmptyState, DataTable)
- Polish all pages with new component library
- Improve accessibility with WCAG 2.1 compliance
- Add dark mode support with semantic color tokens
- Update 947 tests to match new UI patterns
Closes#409
- Backend: Start/Stop handlers now sync both settings and security_configs tables
- Frontend: CrowdSec toggle uses actual process status (crowdsecStatus.running)
- Frontend: Fixed LiveLogViewer WebSocket race condition by using isPausedRef
- Frontend: Removed deprecated mode toggle from CrowdSecConfig page
- Frontend: Added info banner directing users to Security Dashboard
- Frontend: Added "Start CrowdSec" button to enrollment warning panel
Fixes dual-source state conflict causing toggle to show incorrect state.
Fixes live log "disconnected" status appearing while logs stream.
Simplifies CrowdSec control to single source (Security Dashboard toggle).
Includes comprehensive test updates for new architecture.
- Updated LiveLogViewer to support a new security mode, allowing for the display of security logs.
- Implemented mock functions for connecting to security logs in tests.
- Added tests for rendering, filtering, and displaying security log entries, including blocked requests and source filtering.
- Modified Security page to utilize the new security mode in LiveLogViewer.
- Updated Security page tests to reflect changes in log viewer and ensure proper rendering of security-related components.
- Introduced a new script for CrowdSec startup testing, ensuring proper configuration and parser installation.
- Added pre-flight checks in the CrowdSec integration script to verify successful startup and configuration.
- Updated UI components to reflect the renaming of "WAF (Coraza)" to "Coraza".
- Removed WAF controls from the Security page and adjusted related tests.
- Verified that all frontend tests pass after updating assertions to match the new UI.
- Added a test script to package.json for running tests with Vitest.
- Adjusted imports for jest-dom to be compatible with Vitest.
- Updated TypeScript configuration to include Vitest types for testing.
- Created `qa-test-output-after-fix.txt` and `qa-test-output.txt` to log results of certificate page authentication tests.
- Added `build.sh` for deterministic backend builds in CI, utilizing `go list` for efficiency.
- Introduced `codeql_scan.sh` for CodeQL database creation and analysis for Go and JavaScript/TypeScript.
- Implemented `dockerfile_check.sh` to validate Dockerfiles for base image and package manager mismatches.
- Added `sourcery_precommit_wrapper.sh` to facilitate Sourcery CLI usage in pre-commit hooks.
- Added a test case in CrowdSecConfig to show improved error message when preset is not cached.
- Introduced a new test suite for the Dashboard component, verifying counts and health status.
- Updated SMTPSettings tests to utilize a shared render function and added tests for backend validation errors.
- Modified Security.audit tests to improve input handling and removed redundant export failure test.
- Refactored Security tests to remove export functionality and ensure correct rendering of components.
- Enhanced UsersPage tests with new scenarios for updating user permissions and manual invite link flow.
- Created a new utility for rendering components with a QueryClient and MemoryRouter for better test isolation.
- Updated go-test-coverage script to improve error handling and coverage reporting.
- Added comprehensive tests for CrowdSec configuration, including preset application and validation error handling.
- Introduced new test cases for importing CrowdSec configurations, ensuring backup creation and successful import.
- Updated existing tests to reflect changes in UI elements and functionality, including toggling CrowdSec mode and exporting configurations.
- Created utility functions for building export filenames and handling downloads, improving code organization and reusability.
- Refactored existing tests to use new test IDs and ensure accurate assertions for UI elements and API calls.
- Removed the Cerberus toggle functionality from the Security page.
- Introduced a new feature flags section in the System Settings page to manage Cerberus and Uptime Monitoring features.
- Updated tests to reflect the changes in the Security and System Settings components.
- Added loading overlays for feature toggling actions.
- Implemented new CSS animations for UI elements including bobbing, pulsing, rotating, and spinning effects.
- Integrated loading overlays in CrowdSecConfig, Login, ProxyHosts, Security, and WafConfig pages to enhance user experience during asynchronous operations.
- Added contextual messages for loading states to inform users about ongoing processes.
- Created tests for Login and Security pages to ensure overlays function correctly during login attempts and security operations.
- Refactored `SyncMonitors` method in `uptime_service.go` for better readability.
- Updated unit tests for `UptimeService` to ensure proper functionality.
- Introduced Playwright configuration for end-to-end testing.
- Added e2e tests for WAF blocking and monitoring functionality.
- Enhanced the Security page to include WAF mode and rule set selection.
- Implemented tests for WAF configuration changes and validation.
- Created a `.last-run.json` file to store test results.
- Updated SecurityConfig model to only support 'local' or 'disabled' modes for CrowdSec.
- Modified related logic in the manager and services to reject external mode.
- Adjusted tests to validate the new restrictions on CrowdSec modes.
- Updated frontend components to remove references to external mode and provide appropriate user feedback.
- Enhanced documentation to reflect the removal of external CrowdSec mode support.
- Added SecurityConfig model to manage Cerberus settings including admin whitelist and break-glass token.
- Introduced SecurityService for handling security configurations and token generation.
- Updated Manager to check for admin whitelist before applying configurations to prevent accidental lockouts.
- Enhanced frontend with hooks and API calls for managing security settings and generating break-glass tokens.
- Updated documentation to include self-lockout protection measures and best practices for using Cerberus.
- Implemented CrowdSec configuration page with import/export capabilities.
- Added API endpoints for exporting, importing, listing, reading, and writing CrowdSec configuration files.
- Enhanced security handler to support runtime overrides for CrowdSec mode and API URL.
- Updated frontend components to include CrowdSec settings in the UI.
- Added tests for CrowdSec configuration management and security handler behavior.
- Improved user experience with toast notifications for successful operations and error handling.
- Added API integration for access lists including listing, creating, updating, deleting, and testing IPs against access lists.
- Created AccessListForm component for creating and editing access lists with validation.
- Developed AccessListSelector component for selecting access lists with detailed display of selected ACL.
- Implemented hooks for managing access lists and handling API interactions.
- Added tests for AccessListSelector and useAccessLists hooks to ensure functionality.
- Enhanced AccessLists page with UI for managing access lists, including create, edit, delete, and test IP features.
GitHub Actions
CI
Wikid82