Admin Panel Metrics Dashboard

[RichardCMX]

Summary

Implements a comprehensive API metrics dashboard for staff administrators to monitor API usage, performance, and client activity in real-time.

Related Issues

Closes #33

Changes

New Features

• API Metrics Dashboard at /admin/api/metrics/
  • Real-time KPIs: total requests, average latency, success/error rates, active clients
  • Interactive charts: traffic trends, response time distribution, status codes, top endpoints, client breakdown
  • Time-based filtering: 1 hour, 6 hours, 24 hours, 7 days
  • Endpoint detail drill-down views
  • Client-specific usage filtering
  • Recent error log with detailed information
  • Dark mode support - Automatic detection via CSS prefers-color-scheme

Security

• ✅ Staff-only access: Protected with @staff_member_required decorator
• ✅ Non-authenticated users redirected to login
• ✅ Regular users denied access (requires is_staff=True)
• ✅ Added to SECURITY_AUDIT.md with comprehensive documentation
• ✅ Comprehensive test coverage validates access control (28 test methods)

Files Added/Modified

New Files:

• api/admin_dashboard.py - Dashboard views and logic
• api/admin_urls.py - Admin area URL routing
• api/templates/admin/api_dashboard.html - Dashboard template with dark mode support
• api/templates/admin/index.html - Enhanced admin index
• api/ADMIN_DASHBOARD.md - Complete dashboard documentation
• api/tests/test_admin_dashboard.py - Comprehensive test suite (28 tests)
• scripts/generate_traffic.sh - Traffic generation tool for testing

Modified Files:

• datahub/urls.py - Added admin URL routing and health check endpoint
• api/tests/test_jwt_auth.py - Fixed authentication test (line 130: accept both 401/403)
• api/tests/README.md - Added admin dashboard test documentation
• SECURITY_AUDIT.md - Documented dashboard security measures
• CHANGELOG.md - Comprehensive admin panel feature documentation

Test Coverage

• Total Tests: 113 passing (2 skipped)
• Admin Dashboard Tests: 28 test methods across 6 test classes
  • AdminDashboardAccessTest - Access control and authentication (4 tests)
  • AdminDashboardKPITest - KPI calculations (6 tests)
  • AdminDashboardChartsTest - Chart data generation (5 tests)
  • AdminDashboardFiltersTest - Time-based filtering (6 tests)
  • AdminDashboardTemplateTest - Template rendering (3 tests)
  • AdminDashboardIntegrationTest - Integration scenarios (5 tests)
• ✅ All test methods have comprehensive docstrings
• ✅ Tests cover: authentication, authorization, KPIs, charts, filters, templates, integration

Dashboard Features

Key Performance Indicators:

• Total Requests
• Average Latency (ms)
• Success Rate (%)
• Error Rate (%)
• Active Clients Count
• 4xx Client Errors
• 5xx Server Errors

Visualizations:

• Traffic trends over time (hourly/daily)
• Response time distribution
• Status code breakdown
• Top 10 endpoints by volume
• Client usage breakdown by tier
• HTTP method distribution
• Daily trends (7-day view)

Filtering & Drill-down:

• Time windows: 1h, 6h, 24h, 7d
• Endpoint-specific detail views
• Client-specific filtering
• Recent error log with timestamps

UI/UX:

• Responsive grid layout
• Automatic dark mode support (CSS prefers-color-scheme)
• Chart.js-ready data serialization
• Clean, accessible interface

Testing Instructions

Run Admin Dashboard Tests:

docker compose exec web uv run python manage.py test api.tests.test_admin_dashboard

Run All Tests:

docker compose exec web uv run python manage.py test api

Access Dashboard:

1. Log in as staff/admin user: http://localhost:8000/admin/
2. Navigate to: http://localhost:8000/admin/api/metrics/
3. Or click "API Metrics" from the admin index

Generate Test Traffic:

./scripts/generate_traffic.sh

Verify Security:

# Should redirect to login (unauthenticated)
curl -i http://localhost:8000/admin/api/metrics/

# Should return 302 redirect (non-staff user)
curl -i -u regular:test123 http://localhost:8000/admin/api/metrics/

# Should return 200 OK (staff user)
curl -i -u admin:admin http://localhost:8000/admin/api/metrics/

Dependencies

Merges from: feature/security-performance

Technical Notes

Implementation Details

• Uses Django's @staff_member_required decorator for access control
• Aggregates data from ClientUsage model with efficient queries
• JSON-serialized chart data for frontend visualization
• Time-based filtering with efficient database queries
• Responsive template with Chart.js integration (ready for frontend)
• CSS-based dark mode using @media (prefers-color-scheme: dark)

Merge Conflict Resolution

• datahub/urls.py: Kept both health check endpoint and admin/api/ routes
• Resolved using --allow-unrelated-histories flag

Bug Fixes

• Fixed test_jwt_auth.py line 130: Accept both 401 (JWTAuthentication) and 403 (SessionAuthentication) status codes for unauthenticated requests

Dark Mode Support

• Automatic detection via browser/OS preference
• Pure CSS solution (no JavaScript required)
• Maintains readability with appropriate color contrast
• Dark backgrounds (#2b2b2b) with light text (#e0e0e0)

Documentation

• ✅ api/ADMIN_DASHBOARD.md - Complete usage documentation
• ✅ api/tests/README.md - Test documentation updated
• ✅ SECURITY_AUDIT.md - Security measures documented
• ✅ CHANGELOG.md - Feature details and usage examples
• ✅ All test methods have docstrings

Commits in this Branch

1. Merged feature/security-performance with conflict resolution
2. Fixed JWT auth test to accept both 401/403 status codes
3. Updated api/tests/README.md and SECURITY_AUDIT.md
4. Added dark mode support to admin metrics dashboard

Checklist

• All tests passing (113 tests, 2 skipped)
• Test docstrings added for all test methods
• Security audit completed and documented
• Access control properly implemented (@staff_member_required)
• CHANGELOG.md updated
• Test README updated
• Security documentation updated
• Dark mode support implemented
• Code follows project conventions
• Ready for review