Merged
Conversation
Add profile compliance route/tab, composable, typed models, and unit tests to render summary cards, progress bars, group breakdown, and control status details.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements a Compliance Dashboard UI that displays compliance posture metrics across the application. It integrates compliance data into existing SSP and Profile views, and adds a new dashboard widget for quick visibility into compliance status.
Changes:
- Added Compliance tabs to both SSP editor and Profile pages with detailed compliance metrics visualization including summary cards, progress bars, and control-level breakdowns
- Created a reusable
useProfileCompliancecomposable for fetching and managing compliance data from the API - Added CompliancePostureWidget to the main dashboard showing compliance cards for all SSPs with attached profiles
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/system-security-plans/SystemSecurityPlanEditorView.vue | Refactored SSP ID handling from ref to computed, added Compliance tab to navigation |
| src/views/system-security-plans/SystemSecurityPlanComplianceView.vue | New view displaying SSP-scoped compliance with profile resolution, summary metrics, implementation coverage, group breakdown, and controls table |
| src/views/profile/ProfileView.vue | Added Compliance tab to profile navigation |
| src/views/profile/ProfileComplianceView.vue | New view displaying profile-level compliance with summary metrics, group breakdown, and controls table |
| src/views/dashboard/IndexView.vue | Integrated CompliancePostureWidget into dashboard |
| src/views/dashboard/CompliancePostureWidget.vue | New widget component loading SSP/profile pairs sequentially and displaying compliance cards with keyboard navigation support |
| src/types/compliance.ts | Type definitions for compliance data structures including controls, groups, summaries, and progress |
| src/router/index.ts | Added routes for profile and SSP compliance views |
| src/composables/useProfileCompliance.ts | Composable for loading compliance data with flexible query parameter support |
| src/views/tests/ProfileComplianceView.spec.ts | Unit tests for ProfileComplianceView component |
| src/composables/tests/useProfileCompliance.spec.ts | Comprehensive unit tests for useProfileCompliance composable |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/views/system-security-plans/SystemSecurityPlanComplianceView.vue
Outdated
Show resolved
Hide resolved
src/views/system-security-plans/SystemSecurityPlanComplianceView.vue
Outdated
Show resolved
Hide resolved
src/views/system-security-plans/SystemSecurityPlanComplianceView.vue
Outdated
Show resolved
Hide resolved
…metrics and loading states
…es for better modularity and readability - Introduced ComplianceProgressPanel component to encapsulate compliance progress display logic. - Replaced inline progress calculations with computeComplianceWidths utility for cleaner code. - Updated ProfileComplianceView and SystemSecurityPlanComplianceView to utilize the new ComplianceProgressPanel. - Added unit tests for compliance utilities to ensure correct width calculations and status handling.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds the first version of compliance posture in places people naturally look first: the SSP page and the dashboard.
What changed
/dashboards.API behavior used by UI
GET /api/oscal/system-security-plans/{sspId}/profileGET /api/oscal/profiles/{profileId}/compliance-progress?includeControls=true&sspId={sspId}GET /api/oscal/profiles/{profileId}/compliance-progress?includeControls=falseCompliance model in this PR
Current statuses are intentionally simple:
satisfiednot-satisfiedunknownPercentages:
Screenshots
Dashboard posture widget
Quick posture cards on
/dashboardsfor SSPs that already have a profile attached.SSP overview with profile selected
Profile is attached on SSP Overview, and the new Compliance tab is available.
SSP compliance empty state
If no profile is attached, user gets clear guidance instead of a broken/blank page.
SSP compliance summary
Top-level metrics and bars for satisfied/not-satisfied/unknown plus implementation coverage.
SSP controls and group breakdown
Detailed drill-down with per-group and per-control status/evidence info.