feat: Phase 8 - Frontend main views (T-026 to T-031)

Implement all main frontend views for the MITRE ATT&CK coverage platform:

- T-026: Dashboard with coverage summary cards and tactic breakdown table

- T-027: Interactive ATT&CK matrix with filtering by status, tactic, platform

- T-028: Technique detail page with tests, intel items, and review actions

- T-029: Test creation form with technique selector and validation

- T-030: Test detail page with drag and drop evidence upload and download

- T-031: System admin panel with MITRE sync and intel scan controls

New components: CoverageSummaryCard, TacticCoverageChart, AttackMatrix, TechniqueCell, TestForm, EvidenceUpload, EvidenceList

New API modules: metrics.ts, techniques.ts, tests.ts, evidence.ts, system.ts

All views use TanStack Query for data fetching with proper loading and error states. Role-based UI controls for admin/lead actions.
This commit is contained in:
2026-02-06 16:21:14 +01:00
parent 591b5df250
commit cb447f3803
22 changed files with 3092 additions and 27 deletions

View File

@@ -18,7 +18,7 @@ Aegis is a comprehensive platform for tracking and managing security coverage ag
- **Database**: PostgreSQL 15
- **Object Storage**: MinIO (S3-compatible)
- **ORM**: SQLAlchemy with Alembic migrations
- **Frontend**: React 19 + TypeScript + Vite + Tailwind CSS v4
- **Frontend**: React 19 + TypeScript + Vite + Tailwind CSS v4 + TanStack Query
## Quick Start
@@ -208,19 +208,34 @@ Aegis/
├── index.css # Tailwind CSS entry
├── api/ # Axios clients
│ ├── client.ts # Base axios instance with JWT interceptor
── auth.ts # login(), getMe()
── auth.ts # login(), getMe()
│ ├── metrics.ts # getCoverageSummary(), getCoverageByTactic()
│ ├── techniques.ts # getTechniques(), getTechniqueByMitreId()
│ ├── tests.ts # createTest(), validateTest(), rejectTest()
│ ├── evidence.ts # uploadEvidence(), getEvidence()
│ └── system.ts # triggerMitreSync(), triggerIntelScan()
├── context/
│ └── AuthContext.tsx # Auth state: user, login, logout, isLoading
├── components/
│ ├── Layout.tsx # Sidebar + header + <Outlet/>
│ ├── Sidebar.tsx # Nav links (role-aware)
── ProtectedRoute.tsx
│ ├── Layout.tsx # Sidebar + header + <Outlet/>
│ ├── Sidebar.tsx # Nav links (role-aware)
── ProtectedRoute.tsx # Auth route guard with role support
│ ├── CoverageSummaryCard.tsx # Metric card component
│ ├── TacticCoverageChart.tsx # Coverage breakdown table
│ ├── AttackMatrix.tsx # Interactive technique grid
│ ├── TechniqueCell.tsx # Individual technique cell in matrix
│ ├── TestForm.tsx # Reusable test creation/edit form
│ ├── EvidenceUpload.tsx # Drag & drop file upload
│ └── EvidenceList.tsx # Evidence file listing
├── pages/
│ ├── LoginPage.tsx
│ ├── DashboardPage.tsx
│ ├── TechniquesPage.tsx
│ ├── TestsPage.tsx
── SystemPage.tsx
│ ├── LoginPage.tsx # User authentication form
│ ├── DashboardPage.tsx # Coverage metrics dashboard with summary cards
│ ├── TechniquesPage.tsx # Interactive ATT&CK matrix view with filters
│ ├── TechniqueDetailPage.tsx # Individual technique detail with tests
── TestsPage.tsx # Tests overview and navigation
│ ├── TestCreatePage.tsx # Test creation form
│ ├── TestDetailPage.tsx # Test details with evidence upload
│ └── SystemPage.tsx # Admin panel for MITRE sync & intel scan
├── types/
│ └── models.ts # TS interfaces matching backend schemas
├── hooks/