335 lines
18 KiB
JavaScript
335 lines
18 KiB
JavaScript
|
import React, { useState, useEffect, useCallback } from 'react';
|
|||
|
|
import { X, MessageSquare, Send, Loader, AlertCircle, Clock, Shield } from 'lucide-react';
|
|||
|
|
|
|||
|
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
|||
|
|
|
|||
|
|
const TEAL = '#14B8A6';
|
|||
|
|
|
|||
|
|
const CATEGORY_COLORS = {
|
|||
|
|
'Vulnerability Management': '#EF4444',
|
|||
|
|
'Access & MFA': '#F59E0B',
|
|||
|
|
'Logging & Monitoring': '#8B5CF6',
|
|||
|
|
'End-of-Life OS': '#F97316',
|
|||
|
|
'Decommissioned Assets': '#64748B',
|
|||
|
|
'Asset Data Quality': '#64748B',
|
|||
|
|
'Application Security': '#0EA5E9',
|
|||
|
|
'Disaster Recovery': TEAL,
|
|||
|
|
'Endpoint Protection': '#F97316',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function categoryColor(category) {
|
|||
|
|
return CATEGORY_COLORS[category] || '#94A3B8';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function MetricChip({ metricId, category, status }) {
|
|||
|
|
const color = status === 'resolved' ? '#64748B' : categoryColor(category);
|
|||
|
|
return (
|
|||
|
|
<span style={{
|
|||
|
|
display: 'inline-flex', alignItems: 'center',
|
|||
|
|
padding: '0.2rem 0.5rem',
|
|||
|
|
background: `${color}18`,
|
|||
|
|
border: `1px solid ${color}50`,
|
|||
|
|
borderRadius: '0.25rem',
|
|||
|
|
color, fontSize: '0.7rem', fontFamily: 'monospace', fontWeight: '600',
|
|||
|
|
}}>
|
|||
|
|
{metricId}
|
|||
|
|
</span>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ComplianceDetailPanel({ hostname, onClose, onNoteAdded }) {
|
|||
|
|
const [detail, setDetail] = useState(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState(null);
|
|||
|
|
const [noteText, setNoteText] = useState('');
|
|||
|
|
const [noteMetric, setNoteMetric] = useState('');
|
|||
|
|
const [submitting, setSubmitting] = useState(false);
|
|||
|
|
const [noteError, setNoteError] = useState(null);
|
|||
|
|
|
|||
|
|
const fetchDetail = useCallback(async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
setError(null);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`${API_BASE}/compliance/items/${encodeURIComponent(hostname)}`, { credentials: 'include' });
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (!res.ok) throw new Error(data.error || 'Failed to load device');
|
|||
|
|
setDetail(data);
|
|||
|
|
|
|||
|
|
// Default note metric to first active failing metric
|
|||
|
|
const firstActive = (data.metrics || []).find(m => m.status === 'active');
|
|||
|
|
if (firstActive) setNoteMetric(firstActive.metric_id);
|
|||
|
|
} catch (err) {
|
|||
|
|
setError(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [hostname]);
|
|||
|
|
|
|||
|
|
useEffect(() => { fetchDetail(); }, [fetchDetail]);
|
|||
|
|
|
|||
|
|
const handleAddNote = async () => {
|
|||
|
|
if (!noteText.trim() || !noteMetric) return;
|
|||
|
|
setSubmitting(true);
|
|||
|
|
setNoteError(null);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`${API_BASE}/compliance/notes`, {
|
|||
|
|
method: 'POST',
|
|||
|
|
credentials: 'include',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ hostname, metric_id: noteMetric, note: noteText.trim() }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (!res.ok) throw new Error(data.error || 'Failed to save note');
|
|||
|
|
setNoteText('');
|
|||
|
|
await fetchDetail();
|
|||
|
|
if (onNoteAdded) onNoteAdded();
|
|||
|
|
} catch (err) {
|
|||
|
|
setNoteError(err.message);
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const activeMetrics = detail?.metrics?.filter(m => m.status === 'active') || [];
|
|||
|
|
const resolvedMetrics = detail?.metrics?.filter(m => m.status === 'resolved') || [];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{/* Backdrop */}
|
|||
|
|
<div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', zIndex: 40 }} />
|
|||
|
|
|
|||
|
|
{/* Panel */}
|
|||
|
|
<div style={{
|
|||
|
|
position: 'fixed', top: 0, right: 0, bottom: 0, width: '420px',
|
|||
|
|
background: 'linear-gradient(180deg, #0F1A2E 0%, #0A1628 100%)',
|
|||
|
|
borderLeft: `1px solid ${TEAL}30`,
|
|||
|
|
boxShadow: `-8px 0 32px rgba(0,0,0,0.6)`,
|
|||
|
|
zIndex: 41,
|
|||
|
|
display: 'flex', flexDirection: 'column',
|
|||
|
|
overflowY: 'auto',
|
|||
|
|
}}>
|
|||
|
|
{/* Header */}
|
|||
|
|
<div style={{
|
|||
|
|
padding: '1.25rem 1.25rem 1rem',
|
|||
|
|
borderBottom: '1px solid rgba(255,255,255,0.06)',
|
|||
|
|
flexShrink: 0,
|
|||
|
|
}}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
|||
|
|
<div style={{ minWidth: 0, flex: 1, marginRight: '0.75rem' }}>
|
|||
|
|
<div style={{ fontFamily: 'monospace', fontSize: '0.9rem', fontWeight: '700', color: '#F8FAFC', wordBreak: 'break-all', lineHeight: 1.3 }}>
|
|||
|
|
{hostname}
|
|||
|
|
</div>
|
|||
|
|
{detail && (
|
|||
|
|
<div style={{ marginTop: '0.4rem', display: 'flex', flexWrap: 'wrap', gap: '0.4rem' }}>
|
|||
|
|
{detail.ip_address && (
|
|||
|
|
<span style={{ fontSize: '0.72rem', fontFamily: 'monospace', color: '#64748B' }}>{detail.ip_address}</span>
|
|||
|
|
)}
|
|||
|
|
{detail.device_type && (
|
|||
|
|
<span style={{ fontSize: '0.72rem', color: '#475569' }}>· {detail.device_type}</span>
|
|||
|
|
)}
|
|||
|
|
<span style={{ fontSize: '0.72rem', color: TEAL }}>· {detail.team}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', flexShrink: 0, padding: '0.25rem' }}
|
|||
|
|
onMouseEnter={e => e.currentTarget.style.color = '#E2E8F0'}
|
|||
|
|
onMouseLeave={e => e.currentTarget.style.color = '#475569'}>
|
|||
|
|
<X style={{ width: '18px', height: '18px' }} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{loading && (
|
|||
|
|
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|||
|
|
<Loader style={{ width: '28px', height: '28px', color: TEAL, animation: 'spin 1s linear infinite' }} />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{error && (
|
|||
|
|
<div style={{ padding: '1.25rem', display: 'flex', gap: '0.5rem', color: '#F87171', fontSize: '0.8rem' }}>
|
|||
|
|
<AlertCircle style={{ width: '16px', height: '16px', flexShrink: 0, marginTop: '1px' }} />{error}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{!loading && !error && detail && (
|
|||
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
|
|||
|
|
|
|||
|
|
{/* Active failing metrics */}
|
|||
|
|
{activeMetrics.length > 0 && (
|
|||
|
|
<Section title="Failing Metrics" icon={<Shield style={{ width: '14px', height: '14px' }} />}>
|
|||
|
|
{activeMetrics.map(m => (
|
|||
|
|
<MetricRow key={m.metric_id} metric={m} />
|
|||
|
|
))}
|
|||
|
|
</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>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Notes */}
|
|||
|
|
<Section title="Notes" icon={<MessageSquare style={{ width: '14px', height: '14px' }} />} grow>
|
|||
|
|
{detail.notes.length === 0 && (
|
|||
|
|
<div style={{ color: '#334155', fontSize: '0.75rem', fontStyle: 'italic', marginBottom: '0.75rem' }}>No notes yet</div>
|
|||
|
|
)}
|
|||
|
|
{detail.notes.map(n => (
|
|||
|
|
<div key={n.id} style={{
|
|||
|
|
marginBottom: '0.75rem', padding: '0.625rem 0.75rem',
|
|||
|
|
background: 'rgba(15,23,42,0.6)', borderRadius: '0.375rem',
|
|||
|
|
border: '1px solid rgba(255,255,255,0.05)',
|
|||
|
|
}}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.3rem' }}>
|
|||
|
|
<MetricChip metricId={n.metric_id} category={activeMetrics.find(m => m.metric_id === n.metric_id)?.category || ''} />
|
|||
|
|
<span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>
|
|||
|
|
{n.created_by && `${n.created_by} · `}{n.created_at?.slice(0, 10)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ fontSize: '0.8rem', color: '#CBD5E1', lineHeight: 1.5 }}>{n.note}</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{/* Add note */}
|
|||
|
|
<div style={{ marginTop: 'auto', paddingTop: '0.75rem', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
|
|||
|
|
{activeMetrics.length > 1 && (
|
|||
|
|
<select
|
|||
|
|
value={noteMetric}
|
|||
|
|
onChange={e => setNoteMetric(e.target.value)}
|
|||
|
|
style={{
|
|||
|
|
width: '100%', marginBottom: '0.5rem',
|
|||
|
|
background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)',
|
|||
|
|
borderRadius: '0.25rem', color: '#CBD5E1',
|
|||
|
|
padding: '0.4rem 0.5rem', fontSize: '0.75rem', fontFamily: 'monospace',
|
|||
|
|
}}>
|
|||
|
|
{activeMetrics.map(m => (
|
|||
|
|
<option key={m.metric_id} value={m.metric_id}>{m.metric_id} — {m.category}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
)}
|
|||
|
|
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
|||
|
|
<textarea
|
|||
|
|
value={noteText}
|
|||
|
|
onChange={e => setNoteText(e.target.value)}
|
|||
|
|
placeholder="Add a note…"
|
|||
|
|
rows={2}
|
|||
|
|
style={{
|
|||
|
|
flex: 1, resize: 'none',
|
|||
|
|
background: 'rgba(15,23,42,0.8)', border: '1px solid rgba(20,184,166,0.25)',
|
|||
|
|
borderRadius: '0.375rem', color: '#F8FAFC',
|
|||
|
|
padding: '0.5rem 0.625rem', fontSize: '0.8rem',
|
|||
|
|
outline: 'none',
|
|||
|
|
}}
|
|||
|
|
onFocus={e => e.target.style.borderColor = `${TEAL}70`}
|
|||
|
|
onBlur={e => e.target.style.borderColor = 'rgba(20,184,166,0.25)'}
|
|||
|
|
onKeyDown={e => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleAddNote(); }}
|
|||
|
|
/>
|
|||
|
|
<button onClick={handleAddNote} disabled={!noteText.trim() || submitting}
|
|||
|
|
style={{
|
|||
|
|
padding: '0.5rem 0.625rem', flexShrink: 0,
|
|||
|
|
background: noteText.trim() ? `${TEAL}20` : 'transparent',
|
|||
|
|
border: `1px solid ${noteText.trim() ? TEAL : 'rgba(20,184,166,0.2)'}`,
|
|||
|
|
borderRadius: '0.375rem', color: noteText.trim() ? TEAL : '#334155',
|
|||
|
|
cursor: noteText.trim() ? 'pointer' : 'default', transition: 'all 0.15s',
|
|||
|
|
}}>
|
|||
|
|
{submitting
|
|||
|
|
? <Loader style={{ width: '16px', height: '16px', animation: 'spin 1s linear infinite' }} />
|
|||
|
|
: <Send style={{ width: '16px', height: '16px' }} />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{noteError && <div style={{ marginTop: '0.4rem', color: '#F87171', fontSize: '0.72rem' }}>{noteError}</div>}
|
|||
|
|
</div>
|
|||
|
|
</Section>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Section({ title, icon, children, muted, grow }) {
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
padding: '1rem 1.25rem',
|
|||
|
|
borderBottom: '1px solid rgba(255,255,255,0.04)',
|
|||
|
|
...(grow ? { flex: 1, display: 'flex', flexDirection: 'column' } : {}),
|
|||
|
|
}}>
|
|||
|
|
<div style={{
|
|||
|
|
display: 'flex', alignItems: 'center', gap: '0.4rem',
|
|||
|
|
fontSize: '0.68rem', fontFamily: 'monospace', textTransform: 'uppercase',
|
|||
|
|
letterSpacing: '0.1em', color: muted ? '#334155' : '#475569',
|
|||
|
|
marginBottom: '0.75rem',
|
|||
|
|
}}>
|
|||
|
|
{icon && <span style={{ color: muted ? '#334155' : TEAL }}>{icon}</span>}
|
|||
|
|
{title}
|
|||
|
|
</div>
|
|||
|
|
{children}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function MetricRow({ metric, resolved }) {
|
|||
|
|
const color = resolved ? '#475569' : categoryColor(metric.category);
|
|||
|
|
const extra = metric.extra || {};
|
|||
|
|
|
|||
|
|
// Surface the most useful extra fields per metric type
|
|||
|
|
const highlights = [];
|
|||
|
|
if (extra['CVEs_Associated']) highlights.push({ label: 'CVEs', value: extra['CVEs_Associated'] });
|
|||
|
|
if (extra['SLA_Status']) highlights.push({ label: 'SLA', value: extra['SLA_Status'] });
|
|||
|
|
if (extra['Due_Date']) highlights.push({ label: 'Due', value: extra['Due_Date'] });
|
|||
|
|
if (extra['Normalized - Operating System'])
|
|||
|
|
highlights.push({ label: 'OS', value: `${extra['Normalized - Operating System']} ${extra['Normalized - Operating System Version'] || ''}`.trim() });
|
|||
|
|
if (extra['EOS - End of Service Life'])
|
|||
|
|
highlights.push({ label: 'EoL', value: extra['EOS - End of Service Life'] });
|
|||
|
|
if (extra['Splunk - Last Seen']) highlights.push({ label: 'Splunk', value: extra['Splunk - Last Seen'] });
|
|||
|
|
if (extra['MFA - Software']) highlights.push({ label: 'MFA SW', value: extra['MFA - Software'] });
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{
|
|||
|
|
marginBottom: '0.625rem', padding: '0.625rem 0.75rem',
|
|||
|
|
background: resolved ? 'transparent' : `${color}08`,
|
|||
|
|
border: `1px solid ${color}25`,
|
|||
|
|
borderRadius: '0.375rem',
|
|||
|
|
opacity: resolved ? 0.5 : 1,
|
|||
|
|
}}>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: highlights.length ? '0.4rem' : 0 }}>
|
|||
|
|
<MetricChip metricId={metric.metric_id} category={metric.category} status={metric.status} />
|
|||
|
|
{resolved && <span style={{ fontSize: '0.68rem', color: '#334155', fontFamily: 'monospace' }}>resolved {metric.resolved_on || ''}</span>}
|
|||
|
|
</div>
|
|||
|
|
{metric.metric_desc && (
|
|||
|
|
<div style={{ fontSize: '0.72rem', color: '#475569', marginBottom: highlights.length ? '0.4rem' : 0, lineHeight: 1.4 }}>
|
|||
|
|
{metric.metric_desc.length > 100 ? metric.metric_desc.slice(0, 100) + '…' : metric.metric_desc}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{highlights.map(h => (
|
|||
|
|
<div key={h.label} style={{ display: 'flex', gap: '0.4rem', marginTop: '0.25rem' }}>
|
|||
|
|
<span style={{ fontSize: '0.68rem', color: '#475569', fontFamily: 'monospace', minWidth: '48px' }}>{h.label}</span>
|
|||
|
|
<span style={{ fontSize: '0.68rem', color: '#94A3B8', fontFamily: 'monospace', wordBreak: 'break-all' }}>
|
|||
|
|
{String(h.value).length > 80 ? String(h.value).slice(0, 80) + '…' : h.value}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|