akanealw
eec8c28fb3
Some checks are pending
Go Benchmark / Performance Regression Check (push) Waiting to run
Cerberus Integration / Cerberus Security Stack Integration (push) Waiting to run
Upload Coverage to Codecov / Backend Codecov Upload (push) Waiting to run
Upload Coverage to Codecov / Frontend Codecov Upload (push) Waiting to run
CodeQL - Analyze / CodeQL analysis (go) (push) Waiting to run
CodeQL - Analyze / CodeQL analysis (javascript-typescript) (push) Waiting to run
CrowdSec Integration / CrowdSec Bouncer Integration (push) Waiting to run
Docker Build, Publish & Test / build-and-push (push) Waiting to run
Docker Build, Publish & Test / Security Scan PR Image (push) Blocked by required conditions
Quality Checks / Auth Route Protection Contract (push) Waiting to run
Quality Checks / Codecov Trigger/Comment Parity Guard (push) Waiting to run
Quality Checks / Backend (Go) (push) Waiting to run
Quality Checks / Frontend (React) (push) Waiting to run
Rate Limit integration / Rate Limiting Integration (push) Waiting to run
Security Scan (PR) / Trivy Binary Scan (push) Waiting to run
Supply Chain Verification (PR) / Verify Supply Chain (push) Waiting to run
WAF integration / Coraza WAF Integration (push) Waiting to run
163 lines
7.6 KiB
Markdown
Executable File
163 lines
7.6 KiB
Markdown
Executable File
---
|
|
title: "Manual Test Plan - Issue #26: CrowdSec Dashboard Integration"
|
|
status: Open
|
|
priority: High
|
|
assignee: QA
|
|
labels: testing, backend, frontend, security
|
|
---
|
|
|
|
# Test Objective
|
|
|
|
Confirm that the CrowdSec Dashboard tab displays accurate security metrics, charts render correctly, time range filtering works, alerts paginate properly, and export produces valid output.
|
|
|
|
# Scope
|
|
|
|
- In scope: Dashboard tab navigation, summary cards, chart rendering, time range selector, active decisions table, alerts feed, CSV/JSON export, keyboard navigation, screen reader compatibility.
|
|
- Out of scope: CrowdSec engine start/stop/configuration, bouncer registration, existing security toggle behavior.
|
|
|
|
# Prerequisites
|
|
|
|
- Charon instance running with CrowdSec enabled and at least a few recorded decisions.
|
|
- Admin account credentials.
|
|
- Browser DevTools available for network inspection.
|
|
- Screen reader available for accessibility testing (e.g., NVDA, VoiceOver).
|
|
|
|
# Manual Scenarios
|
|
|
|
## 1) Dashboard Tab Navigation
|
|
|
|
- [ ] Navigate to `/security/crowdsec`.
|
|
- [ ] **Expected**: Two tabs are visible — "Configuration" and "Dashboard."
|
|
- [ ] Click the "Dashboard" tab.
|
|
- [ ] **Expected**: The dashboard loads with summary cards, charts, and the decisions table.
|
|
- [ ] Click the "Configuration" tab.
|
|
- [ ] **Expected**: The existing CrowdSec configuration interface appears unchanged.
|
|
- [ ] Click back to "Dashboard."
|
|
- [ ] **Expected**: Dashboard state is preserved (same time range, same data).
|
|
|
|
## 2) Summary Cards Accuracy
|
|
|
|
- [ ] Open the Dashboard tab with the default 24h time range.
|
|
- [ ] **Expected**: Four summary cards are displayed — Total Bans, Active Bans, Unique IPs, Top Scenario.
|
|
- [ ] Compare the "Active Bans" count against `cscli decisions list` output from the container.
|
|
- [ ] **Expected**: The counts match (within the 30-second cache window).
|
|
- [ ] Check that the trend indicator (percentage change) is visible on the Total Bans card.
|
|
|
|
## 3) Chart Rendering
|
|
|
|
- [ ] Confirm the ban timeline chart (area chart) renders with data points.
|
|
- [ ] **Expected**: The X-axis shows time labels and the Y-axis shows ban counts.
|
|
- [ ] Confirm the top attacking IPs chart (horizontal bar chart) renders.
|
|
- [ ] **Expected**: Up to 10 IP addresses are listed with proportional bars.
|
|
- [ ] Confirm the scenario breakdown chart (pie/donut chart) renders.
|
|
- [ ] **Expected**: Slices represent different CrowdSec scenarios with a legend.
|
|
- [ ] Hover over data points in each chart.
|
|
- [ ] **Expected**: Tooltips appear with relevant values.
|
|
|
|
## 4) Time Range Switching
|
|
|
|
- [ ] Select the "1h" time range.
|
|
- [ ] **Expected**: All cards and charts update to reflect the last 1 hour of data.
|
|
- [ ] Select "7d."
|
|
- [ ] **Expected**: Data expands to show the last 7 days.
|
|
- [ ] Select "30d."
|
|
- [ ] **Expected**: Data expands to show the last 30 days. Charts may show wider time buckets.
|
|
- [ ] Rapidly toggle between "1h" and "30d" several times.
|
|
- [ ] **Expected**: No stale data, no visual glitches, and no console errors. The most recently selected range is always displayed.
|
|
|
|
## 5) Active Decisions Table
|
|
|
|
- [ ] Scroll to the active decisions table on the Dashboard.
|
|
- [ ] **Expected**: Table columns include IP, Scenario, Duration, Type (ban/captcha), Origin, and Time Remaining.
|
|
- [ ] Verify that the "Time Remaining" column shows a countdown or human-readable time.
|
|
- [ ] If there are more than 10 active decisions, confirm pagination or scrolling works.
|
|
- [ ] If there are zero active decisions, confirm a placeholder message is shown (e.g., "No active decisions").
|
|
|
|
## 6) Alerts Feed
|
|
|
|
- [ ] Scroll to the alerts section of the Dashboard.
|
|
- [ ] **Expected**: A list of recent CrowdSec alerts is displayed with timestamps and scenario names.
|
|
- [ ] If there are enough alerts, confirm that pagination controls are present and functional.
|
|
- [ ] Click "Next" on the pagination.
|
|
- [ ] **Expected**: The next page of alerts loads without duplicates.
|
|
- [ ] Click "Previous."
|
|
- [ ] **Expected**: Returns to the first page with the original data.
|
|
|
|
## 7) CSV Export
|
|
|
|
- [ ] Click the "Export" button on the Dashboard.
|
|
- [ ] Select "CSV" as the format.
|
|
- [ ] **Expected**: A `.csv` file downloads to your machine.
|
|
- [ ] Open the file in a text editor or spreadsheet application.
|
|
- [ ] **Expected**: Columns match the decisions table (IP, Scenario, Duration, Type, etc.) and rows contain valid data.
|
|
|
|
## 8) JSON Export
|
|
|
|
- [ ] Click the "Export" button on the Dashboard.
|
|
- [ ] Select "JSON" as the format.
|
|
- [ ] **Expected**: A `.json` file downloads to your machine.
|
|
- [ ] Open the file in a text editor.
|
|
- [ ] **Expected**: Valid JSON array of decision objects. Fields match the decisions table.
|
|
|
|
## 9) Keyboard Navigation
|
|
|
|
- [ ] Use `Tab` to navigate from the tab bar to the summary cards, then to the charts, then to the table.
|
|
- [ ] **Expected**: Focus moves in a logical order. A visible focus indicator is shown on each interactive element.
|
|
- [ ] Use `Enter` or `Space` to activate the time range selector buttons.
|
|
- [ ] **Expected**: The selected time range changes and data updates.
|
|
- [ ] Use `Tab` to reach the "Export" button, then press `Enter`.
|
|
- [ ] **Expected**: The export dialog or menu opens.
|
|
|
|
## 10) Screen Reader Compatibility
|
|
|
|
- [ ] Enable a screen reader (NVDA, VoiceOver, or similar).
|
|
- [ ] Navigate to the Dashboard tab.
|
|
- [ ] **Expected**: The tab bar is announced correctly with "Configuration" and "Dashboard" tab names.
|
|
- [ ] Navigate to the summary cards.
|
|
- [ ] **Expected**: Each card's label and value is announced (e.g., "Total Bans: 1247").
|
|
- [ ] Navigate to the charts.
|
|
- [ ] **Expected**: Charts have accessible labels or descriptions (e.g., "Ban Timeline Chart").
|
|
- [ ] Navigate to the decisions table.
|
|
- [ ] **Expected**: Table headers and cell values are announced correctly.
|
|
|
|
# Edge Cases
|
|
|
|
## 11) Empty CrowdSec Data
|
|
|
|
- [ ] Disable CrowdSec or test on an instance with zero recorded decisions.
|
|
- [ ] Open the Dashboard tab.
|
|
- [ ] **Expected**: Summary cards show `0` values. Charts show an empty state or placeholder. The decisions table shows "No active decisions." No errors in the console.
|
|
|
|
## 12) Large Number of Decisions
|
|
|
|
- [ ] Test on an instance with 1,000+ recorded decisions (or simulate with test data).
|
|
- [ ] Open the Dashboard tab with the "30d" time range.
|
|
- [ ] **Expected**: Dashboard loads within 2 seconds. Charts render without performance issues. Pagination handles the large dataset.
|
|
|
|
## 13) CrowdSec LAPI Unavailable
|
|
|
|
- [ ] Stop the CrowdSec container while Charon is running.
|
|
- [ ] Open the Dashboard tab.
|
|
- [ ] **Expected**: Historical data from the database still renders. Active decisions and alerts show an error or "unavailable" state. No unhandled errors in the UI.
|
|
|
|
## 14) Rapid Time Range Switching Under Load
|
|
|
|
- [ ] On an instance with significant data, rapidly click through all five time ranges in quick succession.
|
|
- [ ] **Expected**: Only the final selection's data is displayed. No race conditions, stale data, or flickering.
|
|
|
|
# Expected Results
|
|
|
|
- Dashboard tab loads and displays all components (cards, charts, table, alerts).
|
|
- Summary card numbers match CrowdSec LAPI and database records within the cache window.
|
|
- Charts render with correct data for the selected time range.
|
|
- Export produces valid CSV and JSON files with matching data.
|
|
- Keyboard and screen reader users can navigate and interact with all dashboard elements.
|
|
- Edge cases (empty data, LAPI down, large datasets) are handled gracefully.
|
|
|
|
# Regression Checks
|
|
|
|
- [ ] Confirm the existing CrowdSec Configuration tab is unchanged in behavior and layout.
|
|
- [ ] Confirm CrowdSec start/stop/restart functionality is unaffected.
|
|
- [ ] Confirm existing security toggles (ACL, WAF, Rate Limiting) are unaffected.
|
|
- [ ] Confirm no new console errors appear on pages outside the Dashboard.
|