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

Move resolution date/remediation plan below failing metrics and fix date picker contrast

Browse Source 
The Resolution Date, Remediation Plan, and Apply To Metrics sections
now render immediately after Failing Metrics in the sidebar instead of
after Resolved Metrics and History — no more scrolling past unrelated
sections to reach the edit fields.

The date input also gains colorScheme: 'dark' so the native browser
calendar picker renders with light text on a dark background, fixing
the black-on-dark-blue readability issue.

Closes #21
Closes #22
This commit is contained in:
Jordan Ramos
2026-06-02 12:09:29 -06:00
parent 7545457813
commit 0cf49e6ef1
1 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/components/pages/ComplianceDetailPanel.js
View File

@@ -296,33 +296,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
</Section>
)}
{/* Resolved metrics */}
{resolvedMetrics.length > 0 && (
<Section title="Resolved Metrics" muted>
{resolvedMetrics.map(m => (
<MetricRow key={m.metric_id} metric={m} resolved />
))}
</Section>
)}
{/* Upload history summary */}
{activeMetrics.length > 0 && (
<Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
{activeMetrics.map(m => (
<div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
<MetricChip metricId={m.metric_id} category={m.category} />
<div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
<span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
{m.seen_count}× seen
</span>
{m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
</div>
</div>
))}
</Section>
)}
{/* Metric Selector for Metadata Editing */}
{/* Metric Selector for Metadata Editing — placed right after Failing Metrics per issue #21 */}
{activeMetrics.length > 0 && (
<Section title="Apply To Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
{activeMetrics.length > 1 && (() => {
@@ -434,6 +408,7 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
fontSize: '0.8rem',
fontFamily: 'monospace',
outline: 'none',
colorScheme: 'dark',
}}
onFocus={e => e.target.style.borderColor = `${TEAL}70`}
/>
@@ -521,6 +496,32 @@ export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded,
/>
</Section>
{/* Resolved metrics */}
{resolvedMetrics.length > 0 && (
<Section title="Resolved Metrics" muted>
{resolvedMetrics.map(m => (
<MetricRow key={m.metric_id} metric={m} resolved />
))}
</Section>
)}
{/* Upload history summary */}
{activeMetrics.length > 0 && (
<Section title="History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>
{activeMetrics.map(m => (
<div key={m.metric_id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.35rem' }}>
<MetricChip metricId={m.metric_id} category={m.category} />
<div style={{ fontSize: '0.72rem', color: '#64748B', fontFamily: 'monospace', textAlign: 'right' }}>
<span style={{ color: m.seen_count > 2 ? '#F59E0B' : '#94A3B8' }}>
{m.seen_count}× seen
</span>
{m.first_seen && <span style={{ marginLeft: '0.5rem' }}>since {m.first_seen}</span>}
</div>
</div>
))}
</Section>
)}
{/* Change History */}
{detail.history && detail.history.length > 0 && (
<Section title="Change History" icon={<Clock style={{ width: '14px', height: '14px' }} />}>