17613acf57
- Exported BulkTriageViewComponent and its related types from findings module. - Created a new accessibility test suite for score components using axe-core. - Introduced design tokens for score components to standardize styling. - Enhanced score breakdown popover for mobile responsiveness with drag handle. - Added date range selector functionality to score history chart component. - Implemented unit tests for date range selector in score history chart. - Created Storybook stories for bulk triage view and score history chart with date range selector.
UI Components
This directory contains documentation for the StellaOps Angular UI components.
Evidence-Weighted Score (EWS) Components
The EWS component suite provides visual representations of vulnerability scores based on evidence-weighted analysis.
Core Components
| Component | Purpose | Location |
|---|---|---|
| ScorePill | Compact score display with bucket coloring | shared/components/score/ |
| ScoreBreakdownPopover | Detailed score breakdown with dimensions | shared/components/score/ |
| ScoreBadge | Evidence flag badges (live-signal, proven-path, etc.) | shared/components/score/ |
| ScoreHistoryChart | Timeline visualization of score changes | shared/components/score/ |
Feature Components
| Component | Purpose | Location |
|---|---|---|
| FindingsList | Findings table with EWS integration | features/findings/ |
| BulkTriageView | Bulk triage interface with bucket summaries | features/findings/ |
Score Buckets
All EWS components use a consistent bucket system:
| Bucket | Score Range | Color | Priority |
|---|---|---|---|
| Act Now | 90-100 | Red (#DC2626) |
Critical - Immediate action required |
| Schedule Next | 70-89 | Amber (#D97706) |
High - Schedule for next sprint |
| Investigate | 40-69 | Blue (#2563EB) |
Medium - Investigate when possible |
| Watchlist | 0-39 | Gray (#6B7280) |
Low - Monitor for changes |
Evidence Flags
Findings can have special flags indicating evidence quality:
| Flag | Icon | Color | Description |
|---|---|---|---|
live-signal |
Signal wave | Green | Active runtime signals detected |
proven-path |
Checkmark | Blue | Verified reachability path confirmed |
vendor-na |
Strikethrough | Gray | Vendor marked as not affected |
speculative |
Question mark | Orange | Evidence is speculative/unconfirmed |
Quick Start
Import Components
// Score components
import {
ScorePillComponent,
ScoreBreakdownPopoverComponent,
ScoreBadgeComponent,
ScoreHistoryChartComponent,
} from '@app/shared/components/score';
// Findings components
import {
FindingsListComponent,
BulkTriageViewComponent,
} from '@app/features/findings';
Basic Usage
<!-- Display a score pill -->
<stella-score-pill [score]="78" size="md" />
<!-- Display score badges -->
<stella-score-badge type="live-signal" />
<stella-score-badge type="proven-path" />
<!-- Full findings list with scoring -->
<app-findings-list
[findings]="findings"
[autoLoadScores]="true"
(findingSelect)="onFindingSelect($event)"
/>
Storybook
Interactive examples and documentation are available in Storybook:
cd src/Web/StellaOps.Web
npm run storybook
Navigate to:
Score/ScorePill- Score pill variantsScore/ScoreBreakdownPopover- Breakdown popover examplesScore/ScoreBadge- Evidence flag badgesScore/ScoreHistoryChart- History chart variantsFindings/FindingsList- Findings list with scoringFindings/BulkTriageView- Bulk triage interface
Design Tokens
Score colors are defined as CSS custom properties. See design-tokens.md for the full token reference.
Accessibility
All components follow WCAG 2.1 AA guidelines:
- Proper ARIA labels and roles
- Keyboard navigation support
- Focus management
- Color contrast ratios meet AA standards
- Screen reader announcements for dynamic content