Dashboard Overview
The AuroraSOC dashboard is a Next.js 15 single-page application that provides real-time visibility into your security operations. Built with shadcn/ui components, Recharts for visualization, and Zustand for state management, it offers a responsive, dark-themed interface designed for 24/7 SOC monitoring.
When to Use This Page
Use this page when you need to:
- Understand where each daily SOC workflow lives in the UI
- Train new analysts on navigation and role-based visibility
- Troubleshoot why expected data or controls are not visible
- Route network triage into the right command surface before opening a case
Main Dashboard
When you log in, the main dashboard presents a comprehensive overview:
KPI Cards
Six key performance indicators display at the top:
- Critical Alerts — Red badge with count of critical-severity alerts
- High Alerts — Orange badge for high-severity
- Medium Alerts — Yellow badge for medium-severity
- Low Alerts — Blue badge for low-severity
- Open Cases — Active investigation cases
- CPS Devices — Registered IoT/CPS devices with attestation status
Charts
- 24-Hour Alert Trend — Area chart showing alert volume over the last 24 hours
- Severity Distribution — Pie chart breaking down alerts by severity
Auto-Refresh
The dashboard auto-refreshes every 15 seconds via the Zustand store, ensuring analysts always see the latest data without manual refreshing.
Navigation Structure
The sidebar organizes features into logical groups:
| Group | Pages | Required Permission |
|---|---|---|
| Operations | Alerts, Cases, Approvals | alerts:read, cases:read |
| Intelligence | Threat Intel, SIEM, UEBA | siem:read, agents:read |
| Infrastructure | Agents, CPS/IoT, EDR, SOAR | agents:read, cps:read |
| System | Sites, Firmware, Settings | sites:read, settings:manage |
Navigation items are automatically filtered based on your role's permissions. A viewer will see fewer navigation options than an admin.
Real-Time Updates
The dashboard maintains WebSocket connections for live data:
- Alert Stream (
/api/v1/ws/alerts) — New alerts appear instantly - Agent Thoughts (
/api/v1/ws/agent-thoughts) — Live AI agent reasoning - Approval Notifications (
/api/v1/ws/approvals) — Human approval requests
WebSocket connections require authentication via a query-string token parameter.
Theme and Accessibility
- Dark Mode — Default theme optimized for low-light SOC environments
- Responsive — Works on desktop, tablet, and mobile
- RBAC-Aware — UI elements adapt to user permissions
- Keyboard Navigation — All interactive elements are keyboard-accessible
Motion and Animation
The dashboard uses subtle intra-page motion (powered by framer-motion) to make
list and grid updates feel responsive without distracting from triage:
- Where it applies — Overview KPI grid, Agents fleet card list, SOAR playbook grid. Tabular surfaces (Alerts table, Cases divide-y row list) keep static layout to preserve row chrome and dense scanning.
- Tokens — 220 ms duration, easing
[0.22, 1, 0.36, 1], 8 px enter, 4 px exit, withAnimatePresence mode="popLayout"and per-itemlayoutso adds, removes, and reorders animate in place. - No global page transitions — Route changes are instant. Motion is scoped to data updates inside a page only, so analysts never wait on chrome transitions during incident response.
Implementation primitives live in dashboard/src/components/ui/motion.tsx
(MotionList, MotionItem, MotionCard, MotionFade). The list parent owns
the AnimatePresence; stable React keys go on the MotionItem (the direct
child of AnimatePresence), never on the inner Card.
Annotated UI Map
Use this visual as a fast orientation aid for new operators:
Have new analysts keep this page open during their first shift and pair each numbered area with one live task in the product.
"How Do I..." Workflows
| Task | Steps | Page |
|---|---|---|
| Choose safe vs active runtime behavior | Open Settings → review current mode banner → switch between dummy/dry_run/real (with proper role) | Operation Modes |
| Triage a new critical alert | Open Alerts → filter by severity/status → open detail → trigger investigation | Alerts Management |
| Create and track an incident case | Open Cases → create case from alert context → assign owner → update stage | Case Management |
| Triage correlated network attacks and telemetry health | Open the Network Command Center → focus the attack → validate evidence, review posture, and source health → create a case or queue an investigation | Network Command Center |
| Run a manual network hunt or continue imported context | Open Network Analyzer → reuse imported query or enter a manual hunt → review findings and queue follow-up work if needed | Network Analyzer |
| Execute a safe response action | Open SOAR → choose playbook → dry run → request approval if required | SOAR Playbooks |
| Review AI investigation output | Open Agent Fleet or alert investigation tab → inspect reasoning trace and output | Agent Fleet |
| Check endpoint or device trust posture | Open EDR/CPS pages → filter unhealthy assets → drill into detail | EDR Endpoints, CPS/IoT Devices |
Troubleshooting
I do not see a menu item shown in training screenshots
Most likely your role does not include the needed permission. See Role-Based Access.
Cards are visible but data seems stale
Check API connectivity and WebSocket status. The dashboard auto-refreshes, but upstream API or socket issues can delay updates.
Alerts update, but agent reasoning does not
Agent reasoning is a separate stream. Confirm the relevant channel is connected and that agents are running.
FAQ
Can I customize the dashboard layout per role?
Navigation visibility is permission-driven. Role design and permission mapping control what users can access.
Is there a lightweight view for wallboards/NOC screens?
Yes. You can keep only overview pages open with auto-refresh for monitoring displays.
Where can engineers find implementation details?
See WebSocket API and Architecture Overview.