Skip to content

Add Security Dashboard page to WebAdmin #893

@nickna

Description

@nickna

Summary

Add a dedicated Security Dashboard page to WebAdmin at /security to expose the existing security monitoring infrastructure through the UI.

Context

The backend infrastructure for security monitoring is complete:

  • SecurityMonitoringController in Admin API provides /api/security/events, /api/security/threats, /api/security/compliance
  • FetchSecurityService in Admin SDK exposes getEvents(), getThreats(), getComplianceStatus()
  • useSecurityApi hook in WebAdmin is ready to use

The only missing piece is the actual UI page.

Requirements

Page Location

  • Route: /security or /security-dashboard
  • Add to navigation under appropriate section

Dashboard Components

  1. Security Overview Card

    • Current threat level indicator
    • Compliance score
    • Active threats count
    • Events in last 24h
  2. Security Events Table

    • List recent security events from getSecurityEvents()
    • Filterable by severity (Info, Low, Medium, High, Critical)
    • Filterable by date range
    • Pagination support
  3. Active Threats Panel

    • Display threats from getThreats()
    • Show threat type, severity, affected resources
    • Status indicators (active, acknowledged, resolved)
  4. Quick Stats

    • Failed auth attempts (24h)
    • Blocked IPs count
    • Rate limit violations

Existing Resources to Use

  • useSecurityApi hook at WebAdmin/src/hooks/useSecurityApi.ts
  • IP Filtering page patterns at WebAdmin/src/app/ip-filtering/
  • Mantine UI components (consistent with rest of WebAdmin)

Acceptance Criteria

  • Security Dashboard page accessible at /security
  • Navigation link added
  • Security events displayed with filtering
  • Threat detection results displayed
  • Compliance/overview metrics shown
  • Responsive design (mobile-friendly)
  • Loading and error states handled
  • TypeScript strict mode compliant
  • ESLint passing

Technical Notes

  • Use existing useSecurityApi hook - no new API calls needed
  • Follow patterns from other dashboard pages (cost-dashboard, usage-analytics)
  • Consider using Mantine's StatsGroup, Table, and Card components

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions