Dashboard & Visualization
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Dashboard & Visualization system in FixOps provides a multi-layered interface for monitoring security posture, analyzing decision engine metrics, and visualizing risk trends across the enterprise. It serves as the primary command-and-control center for DevSecOps operations, offering specialized views for different stakeholders including CISOs, Software Architects, and Security Analysts.
The system integrates real-time data from various backend services—including the Decision Engine, SSVC Policy Gates, and the Evidence Lake—to deliver actionable insights. Key features include MTTR/MTTD tracking, compliance scoring, and detailed analysis of multi-LLM consensus decisions.
Sources: web/apps/dashboard/app/page.tsx:32-35, frontend/src/pages/CISODashboard.jsx:178-185, frontend/src/pages/ArchitectDashboard.jsx:153-160
Dashboard Architecture & Data Flow
The visualization layer is built using a modern React-based stack utilizing custom hooks for state management and polling. Data is aggregated from multiple REST API endpoints and normalized for display in interactive charts and metrics grids.
Data Acquisition Flow
The useDashboardData hook orchestrates the retrieval of metrics from the FixOps API. It implements a polling mechanism (defaulting to 30 seconds) to ensure real-time visibility and provides a fallback to demo data to maintain UI functionality during service interruptions.
The system leverages Promise.all to fetch parallel data streams for overview, trends, risks, and MTTR metrics.
Sources: web/apps/dashboard/app/hooks/useDashboardData.ts:133-160, frontend/src/pages/CISODashboard.jsx:26-31
Core Components and Visualizations
The visual interface is categorized into three primary dashboards:
- Executive/CISO Dashboard: High-level risk overview, service-level business impact, and deployment gate outcomes.
- Technical/Architect Dashboard: Monitoring of core engine components like Vector DB, LLM Engine, and Policy Engine health.
- Operations Dashboard: Real-time triage inbox and finding-level details.
Sources: frontend/src/pages/CISODashboard.jsx:178-180, frontend/src/pages/ArchitectDashboard.jsx:110-115
Key Metric Categories
Security Posture Metrics
FixOps tracks four primary severity levels for security findings and calculates an overall compliance score based on framework coverage.
| Metric | Description | Source |
|---|---|---|
| Total Issues | Aggregate count of all findings across all sources. | web/apps/dashboard/app/page.tsx:112 |
| Severity Distribution | Breakdown of Critical, High, Medium, and Low issues. | web/apps/dashboard/app/page.tsx:28-31 |
| Compliance Score | Percentage-based score across tracked frameworks (PCI, SOC2, etc.). | web/apps/dashboard/app/page.tsx:160 |
| KEV Count | Number of findings present in the CISA Known Exploited Vulnerabilities catalog. | web/apps/dashboard/app/page.tsx:135 |
Operational Efficiency Metrics
Operational health is measured through time-to-remediate and system throughput metrics.
| Metric | Context | Logic |
|---|---|---|
| MTTR | Mean Time to Resolve | Tracks speed of remediation from detection to closure. |
| MTTD | Mean Time to Detect | Tracks speed of finding identification. |
| Decision Latency | Engine Performance | Measures "Hot Path" latency in microseconds (µs). |
| Consensus Rate | Reliability | Percentage of multi-LLM analyses reaching a unified decision. |
Sources: web/apps/dashboard/app/page.tsx:174-180, frontend/src/pages/ArchitectDashboard.jsx:324-340
Specialized Dashboards
CISO Executive Overview
Focuses on business risk and deployment governance. It visualizes the "Service Risk Analysis," which maps technical findings to business impact.
The dashboard generates risk areas based on actual recent decisions, categorizing services as "Critical" if they have blocked deployments.
Sources: frontend/src/pages/CISODashboard.jsx:101-118, frontend/src/pages/CISODashboard.jsx:221-225
Architect Decision Engine View
Monitors the internal components of the FixOps processing layer. It provides status indicators for:
- Vector Database: Security pattern storage status (e.g., ChromaDB).
- LLM Engine: Active model configuration and RAG integration status.
- Policy Engine: OPA (Open Policy Agent) health and loaded Rego policies.
- Processing Layer: Logic mapping for Bayesian and Markov transitions.
Sources: frontend/src/pages/ArchitectDashboard.jsx:128-140, frontend/src/pages/ArchitectDashboard.jsx:250-265
Data Visualization Implementation
FixOps utilizes recharts for complex data representation and custom SVG-based gauges for simple metric tracking.
Component Logic: useDashboardData
// Initial state setup for the dashboard hook
const EMPTY_SUMMARY: DashboardOverview = {
total_issues: 0,
critical: 0,
high: 0,
medium: 0,
low: 0,
new_7d: 0,
resolved_7d: 0,
kev_count: 0,
internet_facing: 0,
avg_age_days: 0,
};
Sources: web/apps/dashboard/app/hooks/useDashboardData.ts:98-109
Evidence Lake Visualization
The system includes a legacy dashboard interface for monitoring evidence bundles and SBOM (Software Bill of Materials) coverage.
- SBOM Gauge: Visualizes coverage percentage using a CSS custom property
--value. - Evidence Table: Displays bundle availability and signing status for individual releases.
Sources: ui/dashboard/script.js:14-20, ui/dashboard/script.js:46-53
Summary
The FixOps Dashboard & Visualization system translates complex security telemetry and machine-learning analysis into structured, role-based views. By utilizing real-time polling via useDashboardData and specialized dashboards for CISOs and Architects, the system provides a holistic view of both security risk and the health of the underlying Decision Engine infrastructure.
Sources: web/apps/dashboard/app/page.tsx, frontend/src/pages/CISODashboard.jsx, frontend/src/pages/ArchitectDashboard.jsx