jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add LIVE and LAST REPORT badges to VCL compliance page

Browse Source 
The burndown chart uses live compliance_items data (updates as
remediation plans and resolution dates are entered), while the
metrics overview table shows the snapshot from the last uploaded
report. Add visual badges to clarify this distinction:
- Burndown chart: green 'LIVE' badge
- Metrics overview: grey 'LAST REPORT' badge
This commit is contained in:
Jordan Ramos
2026-05-27 16:25:31 -06:00
parent 9f7703c76f
commit 1903e41088
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/pages/CCPMetricsPage.js
View File

@@ -392,8 +392,13 @@ function MetricTable({ metrics, onSelectMetric }) {
return ( return (
<div style={{ ...CARD_STYLE, marginTop: '1.5rem' }}> <div style={{ ...CARD_STYLE, marginTop: '1.5rem' }}>
<div style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '1rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
Metrics Overview <span style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
Metrics Overview
</span>
<span style={{ fontSize: '0.6rem', color: '#64748B', background: 'rgba(100, 116, 139, 0.1)', padding: '0.15rem 0.4rem', borderRadius: '3px', fontWeight: '600' }}>
LAST REPORT
</span>
</div> </div>
<div style={{ overflowX: 'auto' }}> <div style={{ overflowX: 'auto' }}>
<table style={TABLE_STYLE}> <table style={TABLE_STYLE}>
@@ -1422,8 +1427,13 @@ function ForecastBurndownChart({ metricId }) {
return ( return (
<div style={{ ...CARD_STYLE }}> <div style={{ ...CARD_STYLE }}>
<div style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '1rem' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '1rem' }}>
Forecast Burndown — {metricId} <span style={{ fontSize: '0.7rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
Forecast Burndown — {metricId}
</span>
<span style={{ fontSize: '0.6rem', color: '#10B981', background: 'rgba(16, 185, 129, 0.1)', padding: '0.15rem 0.4rem', borderRadius: '3px', fontWeight: '600' }}>
LIVE
</span>
</div> </div>
<ResponsiveContainer width="100%" height={350}> <ResponsiveContainer width="100%" height={350}>
<ComposedChart data={combinedData} margin={{ top: 35, right: 40, left: 10, bottom: 5 }}> <ComposedChart data={combinedData} margin={{ top: 35, right: 40, left: 10, bottom: 5 }}>