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.
4.0 KiB
ScoreBadgeComponent
Score badge component displaying evidence flags with icons and labels.
Overview
The ScoreBadgeComponent displays evidence quality flags that provide context about score reliability and data sources.
Selector
<stella-score-badge />
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
type |
ScoreFlag |
required | The flag type to display |
size |
'sm' | 'md' |
'md' |
Size variant |
showTooltip |
boolean |
true |
Show description on hover |
showLabel |
boolean |
true |
Show label text (false = icon only) |
Flag Types
| Type | Icon | Color | Description |
|---|---|---|---|
live-signal |
Signal wave | Green (#16A34A) |
Active runtime signals detected from deployed environments |
proven-path |
Checkmark | Blue (#2563EB) |
Verified reachability path to vulnerable code |
vendor-na |
Strikethrough | Gray (#6B7280) |
Vendor has marked as not affected |
speculative |
Question mark | Orange (#D97706) |
Evidence is speculative or unconfirmed |
Usage Examples
Basic Usage
<stella-score-badge type="live-signal" />
All Flag Types
<stella-score-badge type="live-signal" />
<stella-score-badge type="proven-path" />
<stella-score-badge type="vendor-na" />
<stella-score-badge type="speculative" />
Size Variants
<stella-score-badge type="proven-path" size="sm" />
<stella-score-badge type="proven-path" size="md" />
Icon-Only Mode
<stella-score-badge type="live-signal" [showLabel]="false" />
With Score Pill
<div class="score-display">
<stella-score-pill [score]="92" />
<div class="flags">
<stella-score-badge type="live-signal" size="sm" />
<stella-score-badge type="proven-path" size="sm" />
</div>
</div>
Rendering from Flags Array
@for (flag of scoreResult.flags; track flag) {
<stella-score-badge [type]="flag" size="sm" />
}
In a Table
<td class="flags-column">
@for (flag of finding.score?.flags; track flag) {
<stella-score-badge
[type]="flag"
size="sm"
[showLabel]="false"
/>
}
</td>
Flag Significance
live-signal (Green - High Confidence)
Indicates the vulnerability affects code that is actively being executed in production. This is the highest confidence indicator and typically elevates priority.
Sources:
- Runtime telemetry from deployed containers
- Function call traces
- Code coverage data from production
proven-path (Blue - Confirmed)
A verified call path from application entry points to the vulnerable function has been confirmed through static or dynamic analysis.
Sources:
- Static reachability analysis
- Dynamic call graph analysis
- Fuzzing results
vendor-na (Gray - Vendor Override)
The software vendor has issued a VEX statement indicating this vulnerability does not affect their product configuration or version.
Sources:
- Vendor VEX documents
- CSAF advisories
- Distro security teams
speculative (Orange - Unconfirmed)
The evidence for this vulnerability is speculative or based on incomplete analysis. Score caps are typically applied.
Sources:
- Incomplete static analysis
- Heuristic-based detection
- Unverified reports
Accessibility
- Uses
role="img"with descriptivearia-label - Tooltip shown on focus for keyboard users
- Icon colors meet WCAG AA contrast requirements
- Screen reader announces full flag description
Styling
stella-score-badge {
--badge-font-size: 12px;
--badge-padding: 4px 8px;
--badge-border-radius: 4px;
}
Live Signal Animation
The live-signal badge features a subtle pulse animation to draw attention:
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.live-signal-badge {
animation: pulse 2s ease-in-out infinite;
}
Related Components
- ScorePill - Compact score display
- ScoreBreakdownPopover - Full breakdown with flags section