jramos
ae04bc981e
Columns that contain any blank values now show a '— empty —' entry at the
top of the filter dropdown. Selecting only that entry shows findings with
nothing in that column (e.g. workflow with no FP# ticket assigned).
Uses an EMPTY_SENTINEL constant ('__EMPTY__') in the filter Set so blank
cells are handled distinctly from non-blank values. Works for both
single-value and multi-value (CVEs) columns.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1680 lines
84 KiB
JavaScript
1680 lines
84 KiB
JavaScript
import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
||
import ReactDOM from 'react-dom';
|
||
import { RefreshCw, Loader, AlertCircle, PieChart, ChevronUp, ChevronDown, ChevronsUpDown, Settings2, GripVertical, Eye, EyeOff, Filter, Download, RotateCcw } from 'lucide-react';
|
||
import * as XLSX from 'xlsx';
|
||
import { useAuth } from '../../contexts/AuthContext';
|
||
|
||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||
const STORAGE_KEY = 'steam_findings_columns_v2';
|
||
|
||
// Sentinel used in filter Sets to represent cells with no value (blank / —)
|
||
const EMPTY_SENTINEL = '__EMPTY__';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Column definitions — source of truth for labels, sort behaviour, rendering
|
||
// ---------------------------------------------------------------------------
|
||
const COLUMN_DEFS = {
|
||
findingId: { label: 'Finding ID', sortable: true, filterable: false },
|
||
severity: { label: 'Severity', sortable: true, filterable: true },
|
||
title: { label: 'Title', sortable: true, filterable: true },
|
||
cves: { label: 'CVEs', sortable: true, filterable: true, multiValue: true },
|
||
hostName: { label: 'Host', sortable: true, filterable: true },
|
||
ipAddress: { label: 'IP Address', sortable: true, filterable: true },
|
||
dns: { label: 'DNS', sortable: true, filterable: true },
|
||
dueDate: { label: 'Due Date', sortable: true, filterable: true },
|
||
slaStatus: { label: 'SLA', sortable: true, filterable: true },
|
||
buOwnership: { label: 'BU', sortable: true, filterable: true },
|
||
workflow: { label: 'Workflow', sortable: true, filterable: true },
|
||
lastFoundOn: { label: 'Last Found', sortable: true, filterable: true },
|
||
note: { label: 'Notes', sortable: false, filterable: false },
|
||
};
|
||
|
||
const DEFAULT_COLUMN_ORDER = [
|
||
{ key: 'findingId', visible: true },
|
||
{ key: 'severity', visible: true },
|
||
{ key: 'title', visible: true },
|
||
{ key: 'cves', visible: true },
|
||
{ key: 'hostName', visible: true },
|
||
{ key: 'ipAddress', visible: true },
|
||
{ key: 'dns', visible: true },
|
||
{ key: 'dueDate', visible: true },
|
||
{ key: 'slaStatus', visible: true },
|
||
{ key: 'buOwnership', visible: true },
|
||
{ key: 'workflow', visible: true },
|
||
{ key: 'lastFoundOn', visible: true },
|
||
{ key: 'note', visible: true },
|
||
];
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Persist / load column config
|
||
// ---------------------------------------------------------------------------
|
||
function loadColumnOrder() {
|
||
try {
|
||
const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');
|
||
if (saved && Array.isArray(saved)) {
|
||
const savedKeys = new Set(saved.map((c) => c.key));
|
||
const merged = saved.filter((c) => COLUMN_DEFS[c.key]);
|
||
DEFAULT_COLUMN_ORDER.forEach((d) => {
|
||
if (!savedKeys.has(d.key)) merged.push({ ...d });
|
||
});
|
||
return merged;
|
||
}
|
||
} catch { /* ignore */ }
|
||
return DEFAULT_COLUMN_ORDER.map((c) => ({ ...c }));
|
||
}
|
||
|
||
function saveColumnOrder(order) {
|
||
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(order)); } catch { /* ignore */ }
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Sort accessor by column key
|
||
// ---------------------------------------------------------------------------
|
||
function getVal(finding, key) {
|
||
switch (key) {
|
||
case 'findingId': return finding.id ?? '';
|
||
case 'severity': return finding.severity ?? 0;
|
||
case 'title': return finding.title ?? '';
|
||
case 'hostName': return finding.hostName ?? '';
|
||
case 'ipAddress': return finding.ipAddress ?? '';
|
||
case 'dns': return finding.dns ?? '';
|
||
case 'dueDate': return finding.dueDate ?? '';
|
||
case 'slaStatus': return finding.slaStatus ?? '';
|
||
case 'cves': return (finding.cves || []).length; // sort by CVE count
|
||
case 'buOwnership': return finding.buOwnership ?? '';
|
||
case 'workflow': return finding.workflow?.id ?? '';
|
||
case 'lastFoundOn': return finding.lastFoundOn ?? '';
|
||
case 'note': return finding.note ?? '';
|
||
default: return '';
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Filter accessor — severity → vrrGroup label; cves handled as multi-value
|
||
// ---------------------------------------------------------------------------
|
||
function getFilterVal(finding, key) {
|
||
if (key === 'severity') return finding.vrrGroup || '';
|
||
if (key === 'cves') return (finding.cves || []).join(','); // not used directly; see multiValue logic
|
||
if (key === 'workflow') return finding.workflow?.id || '';
|
||
return String(getVal(finding, key) ?? '');
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Export value accessor — plain text representation for CSV/XLSX
|
||
// ---------------------------------------------------------------------------
|
||
function getExportVal(finding, key) {
|
||
switch (key) {
|
||
case 'findingId': return finding.id ?? '';
|
||
case 'severity': return finding.vrrGroup ? `${finding.severity?.toFixed(2)} ${finding.vrrGroup}` : String(finding.severity ?? '');
|
||
case 'title': return finding.title ?? '';
|
||
case 'cves': return (finding.cves || []).join(', ');
|
||
case 'hostName': return finding.hostName ?? '';
|
||
case 'ipAddress': return finding.ipAddress ?? '';
|
||
case 'dns': return finding.dns ?? '';
|
||
case 'dueDate': return finding.dueDate ?? '';
|
||
case 'slaStatus': return finding.slaStatus ?? '';
|
||
case 'buOwnership': return finding.buOwnership ?? '';
|
||
case 'workflow': return finding.workflow ? `${finding.workflow.id} (${finding.workflow.state})` : '';
|
||
case 'lastFoundOn': return finding.lastFoundOn ?? '';
|
||
case 'note': return finding.note ?? '';
|
||
default: return '';
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Action coverage classification — used by chart and filter
|
||
// ---------------------------------------------------------------------------
|
||
const EXC_PATTERN = /EXC-\d+/i;
|
||
|
||
function classifyFinding(finding) {
|
||
if (finding.workflow != null) return 'fp';
|
||
if (EXC_PATTERN.test(finding.note || '')) return 'archer';
|
||
return 'pending';
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Style helpers
|
||
// ---------------------------------------------------------------------------
|
||
function severityColor(vrrGroup) {
|
||
switch ((vrrGroup || '').toUpperCase()) {
|
||
case 'CRITICAL': return { bg: 'rgba(239,68,68,0.15)', border: '#EF4444', text: '#EF4444' };
|
||
case 'HIGH': return { bg: 'rgba(245,158,11,0.15)', border: '#F59E0B', text: '#F59E0B' };
|
||
case 'MEDIUM': return { bg: 'rgba(234,179,8,0.15)', border: '#EAB308', text: '#EAB308' };
|
||
default: return { bg: 'rgba(100,116,139,0.15)', border: '#64748B', text: '#94A3B8' };
|
||
}
|
||
}
|
||
|
||
function slaColor(slaStatus) {
|
||
switch ((slaStatus || '').toUpperCase()) {
|
||
case 'OVERDUE': return '#EF4444';
|
||
case 'AT_RISK': return '#F59E0B';
|
||
case 'WITHIN_SLA': return '#10B981';
|
||
default: return '#64748B';
|
||
}
|
||
}
|
||
|
||
function dueDateColor(dueDate) {
|
||
if (!dueDate) return '#64748B';
|
||
const today = new Date();
|
||
const due = new Date(dueDate);
|
||
const diffDays = Math.ceil((due - today) / (1000 * 60 * 60 * 24));
|
||
if (diffDays < 0) return '#EF4444';
|
||
if (diffDays <= 30) return '#F59E0B';
|
||
return '#94A3B8';
|
||
}
|
||
|
||
function workflowStyle(state) {
|
||
// Colors reflect action urgency — all findings here are Open, so Approved won't appear.
|
||
switch ((state || '').toLowerCase()) {
|
||
case 'expired': return { bg: 'rgba(239,68,68,0.12)', border: 'rgba(239,68,68,0.4)', text: '#EF4444' }; // overdue — renew FP
|
||
case 'rejected': return { bg: 'rgba(239,68,68,0.12)', border: 'rgba(239,68,68,0.4)', text: '#EF4444' }; // denied — must remediate
|
||
case 'reworked': return { bg: 'rgba(245,158,11,0.12)', border: 'rgba(245,158,11,0.4)', text: '#F59E0B' }; // challenged — resubmit FP
|
||
case 'actionable': return { bg: 'rgba(245,158,11,0.12)', border: 'rgba(245,158,11,0.4)', text: '#F59E0B' }; // needs action
|
||
case 'requested': return { bg: 'rgba(14,165,233,0.12)', border: 'rgba(14,165,233,0.35)', text: '#0EA5E9' }; // in flight — awaiting approval
|
||
default: return { bg: 'rgba(100,116,139,0.08)', border: 'rgba(100,116,139,0.2)', text: '#64748B' }; // unknown state
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// SVG Donut Chart — Open vs Closed findings
|
||
// ---------------------------------------------------------------------------
|
||
function polarToCartesian(cx, cy, r, angleDeg) {
|
||
const rad = ((angleDeg - 90) * Math.PI) / 180;
|
||
return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
|
||
}
|
||
|
||
function donutArcPath(cx, cy, outerR, innerR, startDeg, endDeg) {
|
||
// Full circle must be split into two arcs (SVG can't render a 360° arc)
|
||
if (Math.abs(endDeg - startDeg) >= 359.9) {
|
||
const mid = startDeg + 180;
|
||
return donutArcPath(cx, cy, outerR, innerR, startDeg, mid) + ' ' +
|
||
donutArcPath(cx, cy, outerR, innerR, mid, endDeg);
|
||
}
|
||
const largeArc = endDeg - startDeg > 180 ? 1 : 0;
|
||
const s = polarToCartesian(cx, cy, outerR, startDeg);
|
||
const e = polarToCartesian(cx, cy, outerR, endDeg);
|
||
const si = polarToCartesian(cx, cy, innerR, endDeg);
|
||
const ei = polarToCartesian(cx, cy, innerR, startDeg);
|
||
return [
|
||
`M ${s.x.toFixed(2)} ${s.y.toFixed(2)}`,
|
||
`A ${outerR} ${outerR} 0 ${largeArc} 1 ${e.x.toFixed(2)} ${e.y.toFixed(2)}`,
|
||
`L ${si.x.toFixed(2)} ${si.y.toFixed(2)}`,
|
||
`A ${innerR} ${innerR} 0 ${largeArc} 0 ${ei.x.toFixed(2)} ${ei.y.toFixed(2)}`,
|
||
'Z',
|
||
].join(' ');
|
||
}
|
||
|
||
function StatusDonut({ open, closed, loading }) {
|
||
const SIZE = 180;
|
||
const CX = SIZE / 2;
|
||
const CY = SIZE / 2;
|
||
const OUTER = 72;
|
||
const INNER = 48;
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: `${SIZE}px` }}>
|
||
<Loader style={{ width: '24px', height: '24px', color: '#0EA5E9', animation: 'spin 1s linear infinite' }} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const total = open + closed;
|
||
if (total === 0) {
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: `${SIZE}px` }}>
|
||
<p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569' }}>No data — click Sync to load</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const openDeg = (open / total) * 360;
|
||
const segments = [
|
||
{ label: 'Open', count: open, color: '#0EA5E9', start: 0, end: openDeg },
|
||
{ label: 'Closed', count: closed, color: '#475569', start: openDeg, end: 360 },
|
||
].filter((s) => s.count > 0);
|
||
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
|
||
<svg width={SIZE} height={SIZE} style={{ flexShrink: 0 }}>
|
||
{/* Gap ring behind slices */}
|
||
<circle cx={CX} cy={CY} r={OUTER + 1} fill="none" stroke="rgba(10,18,32,0.8)" strokeWidth="2" />
|
||
{segments.map((seg) => (
|
||
<path
|
||
key={seg.label}
|
||
d={donutArcPath(CX, CY, OUTER, INNER, seg.start, seg.end)}
|
||
fill={seg.color}
|
||
opacity={0.88}
|
||
/>
|
||
))}
|
||
{/* Center total */}
|
||
<text x={CX} y={CY - 10} textAnchor="middle" style={{ fontFamily: 'monospace', fontSize: '22px', fontWeight: '700', fill: '#E2E8F0' }}>
|
||
{total.toLocaleString()}
|
||
</text>
|
||
<text x={CX} y={CY + 10} textAnchor="middle" style={{ fontFamily: 'monospace', fontSize: '8.5px', fontWeight: '600', fill: '#475569', letterSpacing: '0.12em' }}>
|
||
TOTAL
|
||
</text>
|
||
</svg>
|
||
|
||
{/* Legend */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||
{segments.map((seg) => (
|
||
<div key={seg.label} style={{ display: 'flex', alignItems: 'center', gap: '0.625rem' }}>
|
||
<div style={{ width: '10px', height: '10px', borderRadius: '2px', background: seg.color, flexShrink: 0 }} />
|
||
<div>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
|
||
{seg.label}
|
||
</div>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.9rem', fontWeight: '700', color: '#E2E8F0', lineHeight: 1.2 }}>
|
||
{seg.count.toLocaleString()}
|
||
<span style={{ fontSize: '0.68rem', fontWeight: '400', color: '#64748B', marginLeft: '0.4rem' }}>
|
||
({((seg.count / total) * 100).toFixed(1)}%)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// SVG Donut Chart — Action Coverage (FP Request | Archer Exception | Pending)
|
||
// ---------------------------------------------------------------------------
|
||
const ACTION_DEFS = [
|
||
{ key: 'fp', label: 'FP Request', color: '#0EA5E9' },
|
||
{ key: 'archer', label: 'Archer Exception', color: '#F59E0B' },
|
||
{ key: 'pending', label: 'Pending', color: '#EF4444' },
|
||
];
|
||
|
||
function ActionCoverageDonut({ findings, activeSegment, onSegmentClick }) {
|
||
const SIZE = 180;
|
||
const CX = SIZE / 2;
|
||
const CY = SIZE / 2;
|
||
const OUTER = 72;
|
||
const INNER = 48;
|
||
|
||
const counts = useMemo(() => {
|
||
const map = { fp: 0, archer: 0, pending: 0 };
|
||
findings.forEach((f) => { map[classifyFinding(f)]++; });
|
||
return map;
|
||
}, [findings]);
|
||
|
||
const total = findings.length;
|
||
|
||
if (total === 0) {
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: `${SIZE}px` }}>
|
||
<p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569' }}>No data — click Sync to load</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
let cursor = 0;
|
||
const segments = ACTION_DEFS.map((def) => {
|
||
const count = counts[def.key];
|
||
const start = cursor;
|
||
const end = count > 0 ? cursor + (count / total) * 360 : cursor;
|
||
if (count > 0) cursor = end;
|
||
return { ...def, count, start, end };
|
||
});
|
||
|
||
const hasActive = !!activeSegment;
|
||
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
|
||
<svg width={SIZE} height={SIZE} style={{ flexShrink: 0 }}>
|
||
<circle cx={CX} cy={CY} r={OUTER + 1} fill="none" stroke="rgba(10,18,32,0.8)" strokeWidth="2" />
|
||
{segments.filter((s) => s.count > 0).map((seg) => {
|
||
const isActive = activeSegment === seg.key;
|
||
return (
|
||
<path
|
||
key={seg.key}
|
||
d={donutArcPath(CX, CY, OUTER, INNER, seg.start, seg.end)}
|
||
fill={seg.color}
|
||
opacity={hasActive ? (isActive ? 1 : 0.25) : 0.88}
|
||
stroke={isActive ? 'rgba(255,255,255,0.6)' : 'none'}
|
||
strokeWidth={isActive ? 2 : 0}
|
||
style={{ cursor: 'pointer', transition: 'opacity 0.2s' }}
|
||
onClick={() => onSegmentClick(isActive ? null : seg.key)}
|
||
/>
|
||
);
|
||
})}
|
||
<text x={CX} y={CY - 10} textAnchor="middle" style={{ fontFamily: 'monospace', fontSize: '22px', fontWeight: '700', fill: '#E2E8F0' }}>
|
||
{total.toLocaleString()}
|
||
</text>
|
||
<text x={CX} y={CY + 10} textAnchor="middle" style={{ fontFamily: 'monospace', fontSize: '8.5px', fontWeight: '600', fill: '#475569', letterSpacing: '0.12em' }}>
|
||
TOTAL
|
||
</text>
|
||
</svg>
|
||
|
||
{/* Legend — always shows all 3 categories */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||
{segments.map((seg) => {
|
||
const isActive = activeSegment === seg.key;
|
||
const dimmed = hasActive && !isActive;
|
||
return (
|
||
<div
|
||
key={seg.key}
|
||
onClick={() => onSegmentClick(isActive ? null : seg.key)}
|
||
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', opacity: dimmed ? 0.35 : 1, transition: 'opacity 0.2s' }}
|
||
>
|
||
<div style={{ width: '8px', height: '8px', borderRadius: '2px', background: seg.color, flexShrink: 0, outline: isActive ? `2px solid ${seg.color}` : 'none', outlineOffset: '1px' }} />
|
||
<div>
|
||
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
|
||
{seg.label}
|
||
</span>
|
||
<span style={{ fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '700', color: '#E2E8F0', marginLeft: '0.4rem' }}>
|
||
{seg.count}
|
||
</span>
|
||
<span style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#475569', marginLeft: '0.25rem' }}>
|
||
({total > 0 ? ((seg.count / total) * 100).toFixed(0) : 0}%)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
{hasActive && (
|
||
<button
|
||
onClick={() => onSegmentClick(null)}
|
||
style={{ marginTop: '0.25rem', background: 'none', border: 'none', fontFamily: 'monospace', fontSize: '0.65rem', color: '#475569', cursor: 'pointer', textAlign: 'left', padding: 0, textDecoration: 'underline' }}
|
||
>
|
||
clear filter
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// SVG Donut Chart — FP Workflow Status distribution
|
||
// ---------------------------------------------------------------------------
|
||
const FP_WORKFLOW_DEFS = [
|
||
{ key: 'Actionable', label: 'Actionable', color: '#F59E0B' },
|
||
{ key: 'Requested', label: 'Requested', color: '#0EA5E9' },
|
||
{ key: 'Reworked', label: 'Reworked', color: '#A855F7' },
|
||
{ key: 'Approved', label: 'Approved', color: '#22C55E' },
|
||
{ key: 'Rejected', label: 'Rejected', color: '#EF4444' },
|
||
{ key: 'Expired', label: 'Expired', color: '#64748B' },
|
||
{ key: 'Unknown', label: 'Unknown', color: '#334155' },
|
||
];
|
||
|
||
function FPWorkflowDonut({ counts, total, centerLabel = 'FP TOTAL' }) {
|
||
const SIZE = 180;
|
||
const CX = SIZE / 2;
|
||
const CY = SIZE / 2;
|
||
const OUTER = 72;
|
||
const INNER = 48;
|
||
|
||
if (total === 0) {
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: `${SIZE}px` }}>
|
||
<p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569' }}>No FP workflows — click Sync to load</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
let cursor = 0;
|
||
const segments = FP_WORKFLOW_DEFS.map((def) => {
|
||
const count = counts[def.key] || 0;
|
||
const start = cursor;
|
||
const end = count > 0 ? cursor + (count / total) * 360 : cursor;
|
||
if (count > 0) cursor = end;
|
||
return { ...def, count, start, end };
|
||
}).filter(s => s.count > 0);
|
||
|
||
return (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}>
|
||
<svg width={SIZE} height={SIZE} style={{ flexShrink: 0 }}>
|
||
<circle cx={CX} cy={CY} r={OUTER + 1} fill="none" stroke="rgba(10,18,32,0.8)" strokeWidth="2" />
|
||
{segments.map((seg) => (
|
||
<path
|
||
key={seg.key}
|
||
d={donutArcPath(CX, CY, OUTER, INNER, seg.start, seg.end)}
|
||
fill={seg.color}
|
||
opacity={0.88}
|
||
/>
|
||
))}
|
||
<text x={CX} y={CY - 10} textAnchor="middle" style={{ fontFamily: 'monospace', fontSize: '22px', fontWeight: '700', fill: '#E2E8F0' }}>
|
||
{total.toLocaleString()}
|
||
</text>
|
||
<text x={CX} y={CY + 10} textAnchor="middle" style={{ fontFamily: 'monospace', fontSize: '8.5px', fontWeight: '600', fill: '#475569', letterSpacing: '0.12em' }}>
|
||
{centerLabel}
|
||
</text>
|
||
</svg>
|
||
|
||
{/* Legend */}
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
|
||
{segments.map((seg) => (
|
||
<div key={seg.key} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||
<div style={{ width: '8px', height: '8px', borderRadius: '2px', background: seg.color, flexShrink: 0 }} />
|
||
<div>
|
||
<span style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
|
||
{seg.label}
|
||
</span>
|
||
<span style={{ fontFamily: 'monospace', fontSize: '0.8rem', fontWeight: '700', color: '#E2E8F0', marginLeft: '0.4rem' }}>
|
||
{seg.count}
|
||
</span>
|
||
<span style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#475569', marginLeft: '0.25rem' }}>
|
||
({((seg.count / total) * 100).toFixed(0)}%)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function SortIcon({ colKey, sort }) {
|
||
if (sort.field !== colKey) return <ChevronsUpDown style={{ width: '11px', height: '11px', opacity: 0.3, marginLeft: '3px', flexShrink: 0 }} />;
|
||
return sort.dir === 'asc'
|
||
? <ChevronUp style={{ width: '11px', height: '11px', color: '#0EA5E9', marginLeft: '3px', flexShrink: 0 }} />
|
||
: <ChevronDown style={{ width: '11px', height: '11px', color: '#0EA5E9', marginLeft: '3px', flexShrink: 0 }} />;
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// OverrideCell — inline editable hostname/dns with amber dot when overridden
|
||
// ---------------------------------------------------------------------------
|
||
function OverrideCell({ findingId, field, originalValue, initialOverride, canWrite }) {
|
||
const effective = initialOverride ?? originalValue ?? '';
|
||
const [value, setValue] = useState(effective);
|
||
const [isOverridden, setOverridden] = useState(!!initialOverride);
|
||
const [editing, setEditing] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const lastSaved = useRef(effective);
|
||
const inputRef = useRef(null);
|
||
|
||
// Sync when the finding updates (e.g. after a full sync)
|
||
useEffect(() => {
|
||
const eff = initialOverride ?? originalValue ?? '';
|
||
setValue(eff);
|
||
setOverridden(!!initialOverride);
|
||
lastSaved.current = eff;
|
||
}, [initialOverride, originalValue]);
|
||
|
||
useEffect(() => {
|
||
if (editing && inputRef.current) inputRef.current.focus();
|
||
}, [editing]);
|
||
|
||
const persist = useCallback(async (newVal) => {
|
||
const trimmed = newVal.trim();
|
||
if (trimmed === lastSaved.current) return;
|
||
setSaving(true);
|
||
try {
|
||
const res = await fetch(`${API_BASE}/ivanti/findings/${findingId}/override`, {
|
||
method: 'PUT',
|
||
credentials: 'include',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ field, value: trimmed }),
|
||
});
|
||
if (res.ok) {
|
||
const data = await res.json();
|
||
const cleared = data.value === null;
|
||
const displayed = cleared ? (originalValue ?? '') : trimmed;
|
||
setValue(displayed);
|
||
setOverridden(!cleared);
|
||
lastSaved.current = displayed;
|
||
} else {
|
||
setValue(lastSaved.current); // revert on error
|
||
}
|
||
} catch {
|
||
setValue(lastSaved.current);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}, [findingId, field, originalValue]);
|
||
|
||
const handleBlur = () => { setEditing(false); persist(value); };
|
||
const handleKeyDown = (e) => {
|
||
if (e.key === 'Enter') { e.target.blur(); }
|
||
if (e.key === 'Escape') { setValue(lastSaved.current); setEditing(false); }
|
||
};
|
||
const handleRevert = (e) => { e.stopPropagation(); setValue(''); persist(''); };
|
||
|
||
if (editing) {
|
||
return (
|
||
<td style={{ padding: '0.3rem 0.5rem' }}>
|
||
<input
|
||
ref={inputRef}
|
||
value={value}
|
||
onChange={(e) => setValue(e.target.value)}
|
||
onBlur={handleBlur}
|
||
onKeyDown={handleKeyDown}
|
||
style={{
|
||
width: '100%', minWidth: '120px',
|
||
background: 'rgba(14,165,233,0.08)',
|
||
border: '1px solid rgba(14,165,233,0.4)',
|
||
borderRadius: '0.25rem',
|
||
padding: '0.2rem 0.4rem',
|
||
color: '#E2E8F0', fontFamily: 'monospace', fontSize: '0.72rem',
|
||
outline: 'none',
|
||
}}
|
||
/>
|
||
</td>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap' }}>
|
||
<span
|
||
onClick={canWrite ? () => setEditing(true) : undefined}
|
||
title={isOverridden ? `Ivanti value: ${originalValue || '—'}\nClick to edit` : canWrite ? 'Click to edit' : undefined}
|
||
style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: '0.3rem',
|
||
color: isOverridden ? '#E2E8F0' : '#94A3B8',
|
||
fontFamily: 'monospace', fontSize: '0.72rem',
|
||
cursor: canWrite ? 'text' : 'default',
|
||
}}
|
||
>
|
||
{isOverridden && (
|
||
<span title="Local override active" style={{ width: '5px', height: '5px', borderRadius: '50%', background: '#F59E0B', flexShrink: 0, marginRight: '1px' }} />
|
||
)}
|
||
{value || '—'}
|
||
{saving && <Loader style={{ width: '10px', height: '10px', color: '#475569', animation: 'spin 1s linear infinite', flexShrink: 0 }} />}
|
||
{isOverridden && canWrite && !saving && (
|
||
<button
|
||
onClick={handleRevert}
|
||
title="Revert to Ivanti value"
|
||
style={{ background: 'none', border: 'none', padding: '0 1px', cursor: 'pointer', color: '#475569', lineHeight: 1, flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}
|
||
>
|
||
<RotateCcw style={{ width: '10px', height: '10px' }} />
|
||
</button>
|
||
)}
|
||
</span>
|
||
</td>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// NoteCell — inline editable, saves on blur
|
||
// ---------------------------------------------------------------------------
|
||
function NoteCell({ findingId, initialNote }) {
|
||
const [value, setValue] = useState(initialNote || '');
|
||
const [saving, setSaving] = useState(false);
|
||
const lastSaved = useRef(initialNote || '');
|
||
|
||
useEffect(() => {
|
||
setValue(initialNote || '');
|
||
lastSaved.current = initialNote || '';
|
||
}, [initialNote]);
|
||
|
||
const save = useCallback(async () => {
|
||
if (value === lastSaved.current) return;
|
||
setSaving(true);
|
||
try {
|
||
await fetch(`${API_BASE}/ivanti/findings/${encodeURIComponent(findingId)}/note`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({ note: value })
|
||
});
|
||
lastSaved.current = value;
|
||
} catch (e) {
|
||
console.error('Failed to save note:', e);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}, [findingId, value]);
|
||
|
||
return (
|
||
<div style={{ position: 'relative' }}>
|
||
<input
|
||
type="text"
|
||
value={value}
|
||
maxLength={255}
|
||
onChange={(e) => setValue(e.target.value)}
|
||
onBlur={save}
|
||
placeholder="Add note…"
|
||
style={{
|
||
width: '100%', minWidth: '160px',
|
||
background: 'rgba(14,165,233,0.05)',
|
||
border: '1px solid rgba(14,165,233,0.2)',
|
||
borderRadius: '4px', padding: '4px 8px',
|
||
color: '#CBD5E1', fontSize: '0.75rem',
|
||
fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box'
|
||
}}
|
||
onFocus={(e) => { e.target.style.borderColor = 'rgba(14,165,233,0.6)'; e.target.style.background = 'rgba(14,165,233,0.1)'; }}
|
||
onBlurCapture={(e) => { e.target.style.borderColor = 'rgba(14,165,233,0.2)'; e.target.style.background = 'rgba(14,165,233,0.05)'; }}
|
||
/>
|
||
{saving && <Loader style={{ width: '10px', height: '10px', position: 'absolute', right: '6px', top: '6px', color: '#0EA5E9' }} />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// ColumnManager — popover with drag-to-reorder and show/hide toggles
|
||
// ---------------------------------------------------------------------------
|
||
function ColumnManager({ columnOrder, onChange }) {
|
||
const [open, setOpen] = useState(false);
|
||
const [dragIdx, setDragIdx] = useState(null);
|
||
const [overIdx, setOverIdx] = useState(null);
|
||
const panelRef = useRef(null);
|
||
const btnRef = useRef(null);
|
||
|
||
useEffect(() => {
|
||
if (!open) return;
|
||
const handler = (e) => {
|
||
if (!panelRef.current?.contains(e.target) && !btnRef.current?.contains(e.target)) setOpen(false);
|
||
};
|
||
document.addEventListener('mousedown', handler);
|
||
return () => document.removeEventListener('mousedown', handler);
|
||
}, [open]);
|
||
|
||
const toggleVisible = (key) => {
|
||
onChange(columnOrder.map((c) => c.key === key ? { ...c, visible: !c.visible } : c));
|
||
};
|
||
|
||
const handleDragStart = (idx) => setDragIdx(idx);
|
||
const handleDragOver = (e, idx) => { e.preventDefault(); setOverIdx(idx); };
|
||
const handleDrop = (idx) => {
|
||
if (dragIdx === null || dragIdx === idx) { setDragIdx(null); setOverIdx(null); return; }
|
||
const updated = [...columnOrder];
|
||
const [moved] = updated.splice(dragIdx, 1);
|
||
updated.splice(idx, 0, moved);
|
||
onChange(updated);
|
||
setDragIdx(null);
|
||
setOverIdx(null);
|
||
};
|
||
|
||
const visibleCount = columnOrder.filter((c) => c.visible).length;
|
||
|
||
return (
|
||
<div style={{ position: 'relative' }}>
|
||
<button
|
||
ref={btnRef}
|
||
onClick={() => setOpen((p) => !p)}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||
padding: '0.375rem 0.75rem',
|
||
background: open ? 'rgba(14,165,233,0.15)' : 'rgba(14,165,233,0.07)',
|
||
border: `1px solid rgba(14,165,233,${open ? '0.5' : '0.25'})`,
|
||
borderRadius: '0.375rem',
|
||
color: '#0EA5E9', cursor: 'pointer',
|
||
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||
textTransform: 'uppercase', letterSpacing: '0.05em'
|
||
}}
|
||
>
|
||
<Settings2 style={{ width: '13px', height: '13px' }} />
|
||
Columns
|
||
<span style={{ fontSize: '0.65rem', opacity: 0.7 }}>({visibleCount}/{columnOrder.length})</span>
|
||
</button>
|
||
|
||
{open && (
|
||
<div
|
||
ref={panelRef}
|
||
style={{
|
||
position: 'absolute', top: 'calc(100% + 8px)', right: 0,
|
||
width: '220px', zIndex: 100,
|
||
background: 'linear-gradient(180deg, #0F1A2E 0%, #0A1628 100%)',
|
||
border: '1px solid rgba(14,165,233,0.25)',
|
||
borderRadius: '0.5rem',
|
||
boxShadow: '0 8px 24px rgba(0,0,0,0.6)',
|
||
padding: '0.5rem'
|
||
}}
|
||
>
|
||
<div style={{ fontSize: '0.65rem', color: '#475569', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '0.25rem 0.5rem 0.5rem', borderBottom: '1px solid rgba(255,255,255,0.05)', marginBottom: '0.375rem' }}>
|
||
Drag to reorder · click to toggle
|
||
</div>
|
||
{columnOrder.map((col, idx) => {
|
||
const def = COLUMN_DEFS[col.key];
|
||
const isDragging = dragIdx === idx;
|
||
const isOver = overIdx === idx && dragIdx !== null && dragIdx !== idx;
|
||
return (
|
||
<div
|
||
key={col.key}
|
||
draggable
|
||
onDragStart={() => handleDragStart(idx)}
|
||
onDragOver={(e) => handleDragOver(e, idx)}
|
||
onDrop={() => handleDrop(idx)}
|
||
onDragEnd={() => { setDragIdx(null); setOverIdx(null); }}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.5rem',
|
||
padding: '0.4rem 0.5rem', borderRadius: '0.25rem', cursor: 'grab',
|
||
opacity: isDragging ? 0.4 : 1,
|
||
background: isOver ? 'rgba(14,165,233,0.12)' : 'transparent',
|
||
borderTop: isOver ? '2px solid #0EA5E9' : '2px solid transparent',
|
||
transition: 'background 0.1s'
|
||
}}
|
||
>
|
||
<GripVertical style={{ width: '14px', height: '14px', color: '#334155', flexShrink: 0 }} />
|
||
<span style={{ flex: 1, fontSize: '0.78rem', color: col.visible ? '#CBD5E1' : '#475569', fontFamily: 'monospace' }}>
|
||
{def?.label || col.key}
|
||
</span>
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); toggleVisible(col.key); }}
|
||
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: col.visible ? '#0EA5E9' : '#334155', lineHeight: 1 }}
|
||
>
|
||
{col.visible ? <Eye style={{ width: '14px', height: '14px' }} /> : <EyeOff style={{ width: '14px', height: '14px' }} />}
|
||
</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// FilterDropdown — portal-based so it escapes overflow:auto clipping
|
||
// ---------------------------------------------------------------------------
|
||
function FilterDropdown({ anchorEl, colKey, findings, activeFilter, onFilterChange, onClose }) {
|
||
const [pos, setPos] = useState({ top: 0, left: 0 });
|
||
const [search, setSearch] = useState('');
|
||
const panelRef = useRef(null);
|
||
const inputRef = useRef(null);
|
||
|
||
// Compute fixed position from anchor button's viewport rect
|
||
useEffect(() => {
|
||
if (!anchorEl) return;
|
||
const r = anchorEl.getBoundingClientRect();
|
||
setPos({ top: r.bottom + 4, left: r.left });
|
||
setTimeout(() => inputRef.current?.focus(), 0);
|
||
}, [anchorEl]);
|
||
|
||
// Close on outside click
|
||
useEffect(() => {
|
||
const handler = (e) => {
|
||
if (panelRef.current && !panelRef.current.contains(e.target) &&
|
||
!(anchorEl && anchorEl.contains(e.target))) {
|
||
onClose();
|
||
}
|
||
};
|
||
document.addEventListener('mousedown', handler);
|
||
return () => document.removeEventListener('mousedown', handler);
|
||
}, [anchorEl, onClose]);
|
||
|
||
// Close on Escape
|
||
useEffect(() => {
|
||
const handler = (e) => { if (e.key === 'Escape') onClose(); };
|
||
document.addEventListener('keydown', handler);
|
||
return () => document.removeEventListener('keydown', handler);
|
||
}, [onClose]);
|
||
|
||
// Unique values from the full (unfiltered) findings list.
|
||
// Multi-value columns (e.g. cves) expand their array so each item is a separate option.
|
||
// EMPTY_SENTINEL is prepended when any finding has a blank/null cell.
|
||
const allValues = useMemo(() => {
|
||
const def = COLUMN_DEFS[colKey];
|
||
const vals = new Set();
|
||
let hasEmpty = false;
|
||
findings.forEach((f) => {
|
||
if (def?.multiValue) {
|
||
const arr = f[colKey] || [];
|
||
if (arr.length === 0) { hasEmpty = true; return; }
|
||
arr.forEach((v) => { if (String(v).trim()) vals.add(String(v).trim()); });
|
||
} else {
|
||
const v = getFilterVal(f, colKey).trim();
|
||
if (v) vals.add(v); else hasEmpty = true;
|
||
}
|
||
});
|
||
const sorted = [...vals].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
|
||
if (hasEmpty) sorted.unshift(EMPTY_SENTINEL);
|
||
return sorted;
|
||
}, [findings, colKey]);
|
||
|
||
const displayed = search.trim()
|
||
? allValues.filter((v) => v === EMPTY_SENTINEL || v.toLowerCase().includes(search.toLowerCase()))
|
||
: allValues;
|
||
|
||
const isChecked = (val) => !activeFilter || activeFilter.has(val);
|
||
const activeCount = activeFilter ? activeFilter.size : allValues.length;
|
||
|
||
const toggle = (val) => {
|
||
let next;
|
||
if (!activeFilter) {
|
||
next = new Set(allValues);
|
||
next.delete(val);
|
||
} else {
|
||
next = new Set(activeFilter);
|
||
if (next.has(val)) next.delete(val); else next.add(val);
|
||
}
|
||
// If all values selected again, remove the filter entirely
|
||
onFilterChange(next.size >= allValues.length ? null : next);
|
||
};
|
||
|
||
return ReactDOM.createPortal(
|
||
<div
|
||
ref={panelRef}
|
||
style={{
|
||
position: 'fixed', top: pos.top, left: pos.left,
|
||
width: '220px', zIndex: 9999,
|
||
background: 'linear-gradient(180deg, #0F1A2E 0%, #0A1628 100%)',
|
||
border: '1px solid rgba(14,165,233,0.3)',
|
||
borderRadius: '0.5rem',
|
||
boxShadow: '0 8px 32px rgba(0,0,0,0.8)',
|
||
padding: '0.5rem',
|
||
}}
|
||
>
|
||
{/* Search */}
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={search}
|
||
onChange={(e) => setSearch(e.target.value)}
|
||
placeholder="Search values…"
|
||
style={{
|
||
width: '100%', marginBottom: '0.375rem',
|
||
background: 'rgba(14,165,233,0.05)',
|
||
border: '1px solid rgba(14,165,233,0.2)',
|
||
borderRadius: '0.25rem', padding: '0.3rem 0.5rem',
|
||
color: '#CBD5E1', fontSize: '0.72rem',
|
||
fontFamily: 'monospace', outline: 'none', boxSizing: 'border-box',
|
||
}}
|
||
/>
|
||
|
||
{/* Select All / Clear */}
|
||
<div style={{ display: 'flex', gap: '0.375rem', marginBottom: '0.375rem', paddingBottom: '0.375rem', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||
<button
|
||
onClick={() => onFilterChange(null)}
|
||
style={{ flex: 1, padding: '0.2rem', background: 'rgba(14,165,233,0.08)', border: '1px solid rgba(14,165,233,0.2)', borderRadius: '0.25rem', color: '#0EA5E9', cursor: 'pointer', fontSize: '0.65rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.05em' }}
|
||
>
|
||
Select All
|
||
</button>
|
||
<button
|
||
onClick={() => onFilterChange(new Set())}
|
||
style={{ flex: 1, padding: '0.2rem', background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: '0.25rem', color: '#EF4444', cursor: 'pointer', fontSize: '0.65rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.05em' }}
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
|
||
{/* Value checkboxes */}
|
||
<div style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
||
{displayed.length === 0 ? (
|
||
<div style={{ fontSize: '0.68rem', color: '#475569', textAlign: 'center', padding: '0.5rem 0' }}>No values</div>
|
||
) : displayed.map((val) => (
|
||
<label
|
||
key={val}
|
||
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0.375rem', borderRadius: '0.25rem', cursor: 'pointer', color: isChecked(val) ? '#CBD5E1' : '#475569', fontSize: '0.72rem', fontFamily: 'monospace' }}
|
||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(14,165,233,0.08)'}
|
||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={isChecked(val)}
|
||
onChange={() => toggle(val)}
|
||
style={{ accentColor: '#0EA5E9', width: '12px', height: '12px', flexShrink: 0, cursor: 'pointer' }}
|
||
/>
|
||
{val === EMPTY_SENTINEL
|
||
? <span style={{ fontStyle: 'italic', color: '#64748B', whiteSpace: 'nowrap' }}>— empty —</span>
|
||
: <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{val}</span>
|
||
}
|
||
</label>
|
||
))}
|
||
</div>
|
||
|
||
{/* Status footer */}
|
||
<div style={{ marginTop: '0.375rem', paddingTop: '0.375rem', borderTop: '1px solid rgba(255,255,255,0.06)', fontSize: '0.65rem', color: '#475569', textAlign: 'center', fontFamily: 'monospace' }}>
|
||
{activeCount} / {allValues.length} selected
|
||
</div>
|
||
</div>,
|
||
document.body
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Render a single table cell by column key
|
||
// ---------------------------------------------------------------------------
|
||
function TableCell({ colKey, finding, canWrite }) {
|
||
switch (colKey) {
|
||
case 'findingId':
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap', color: '#475569', fontFamily: 'monospace', fontSize: '0.68rem' }}>
|
||
{finding.id || '—'}
|
||
</td>
|
||
);
|
||
case 'severity': {
|
||
const sc = severityColor(finding.vrrGroup);
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap' }}>
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: '0.3rem', padding: '0.2rem 0.45rem', borderRadius: '0.25rem', background: sc.bg, border: `1px solid ${sc.border}40`, fontFamily: 'monospace', fontWeight: '700', color: sc.text, fontSize: '0.72rem' }}>
|
||
{finding.severity?.toFixed(2)}
|
||
<span style={{ fontSize: '0.6rem', opacity: 0.75 }}>{finding.vrrGroup}</span>
|
||
</span>
|
||
</td>
|
||
);
|
||
}
|
||
case 'title':
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', maxWidth: '280px' }}>
|
||
<span style={{ color: '#CBD5E1', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={finding.title}>
|
||
{finding.title}
|
||
</span>
|
||
</td>
|
||
);
|
||
case 'cves': {
|
||
const cves = finding.cves || [];
|
||
if (cves.length === 0) return <td style={{ padding: '0.45rem 0.75rem', color: '#475569' }}>—</td>;
|
||
const shown = cves.slice(0, 2);
|
||
const rest = cves.length - shown.length;
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', minWidth: '160px', maxWidth: '240px' }}>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.2rem' }}>
|
||
{shown.map((cve) => (
|
||
<span key={cve} style={{ padding: '0.1rem 0.35rem', borderRadius: '0.2rem', background: 'rgba(139,92,246,0.1)', border: '1px solid rgba(139,92,246,0.3)', color: '#A78BFA', fontFamily: 'monospace', fontSize: '0.65rem', fontWeight: '600', whiteSpace: 'nowrap' }}>
|
||
{cve}
|
||
</span>
|
||
))}
|
||
{rest > 0 && (
|
||
<span title={cves.slice(2).join('\n')} style={{ padding: '0.1rem 0.35rem', borderRadius: '0.2rem', background: 'rgba(100,116,139,0.12)', border: '1px solid rgba(100,116,139,0.25)', color: '#64748B', fontFamily: 'monospace', fontSize: '0.65rem', cursor: 'help', whiteSpace: 'nowrap' }}>
|
||
+{rest} more
|
||
</span>
|
||
)}
|
||
</div>
|
||
</td>
|
||
);
|
||
}
|
||
case 'hostName':
|
||
return (
|
||
<OverrideCell
|
||
findingId={finding.id}
|
||
field="hostName"
|
||
originalValue={finding.hostName}
|
||
initialOverride={finding.overrides?.hostName ?? null}
|
||
canWrite={canWrite}
|
||
/>
|
||
);
|
||
case 'ipAddress':
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap', color: '#94A3B8', fontFamily: 'monospace', fontSize: '0.72rem' }}>
|
||
{finding.ipAddress || '—'}
|
||
</td>
|
||
);
|
||
case 'dns':
|
||
return (
|
||
<OverrideCell
|
||
findingId={finding.id}
|
||
field="dns"
|
||
originalValue={finding.dns}
|
||
initialOverride={finding.overrides?.dns ?? null}
|
||
canWrite={canWrite}
|
||
/>
|
||
);
|
||
case 'dueDate': {
|
||
const color = dueDateColor(finding.dueDate);
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.72rem', fontWeight: '600', color }}>
|
||
{finding.dueDate || '—'}
|
||
</td>
|
||
);
|
||
}
|
||
case 'slaStatus':
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: slaColor(finding.slaStatus) }}>
|
||
{finding.slaStatus || '—'}
|
||
</td>
|
||
);
|
||
case 'buOwnership': {
|
||
const bu = finding.buOwnership || '';
|
||
const isSteam = bu.toUpperCase().includes('STEAM');
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap' }}>
|
||
{bu ? (
|
||
<span
|
||
title={bu}
|
||
style={{
|
||
display: 'inline-block', padding: '0.15rem 0.4rem',
|
||
borderRadius: '0.25rem',
|
||
background: isSteam ? 'rgba(14,165,233,0.1)' : 'rgba(245,158,11,0.1)',
|
||
border: `1px solid ${isSteam ? 'rgba(14,165,233,0.3)' : 'rgba(245,158,11,0.3)'}`,
|
||
color: isSteam ? '#0EA5E9' : '#F59E0B',
|
||
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||
}}
|
||
>
|
||
{bu.replace('NTS-AEO-', '')}
|
||
</span>
|
||
) : (
|
||
<span style={{ color: '#475569' }}>—</span>
|
||
)}
|
||
</td>
|
||
);
|
||
}
|
||
case 'workflow': {
|
||
const wf = finding.workflow;
|
||
if (!wf || !wf.id) return <td style={{ padding: '0.45rem 0.75rem', color: '#334155' }}>—</td>;
|
||
const ws = workflowStyle(wf.state);
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap' }}>
|
||
<span
|
||
title={`${wf.id} · ${wf.state || 'Unknown'} · ${wf.type || ''}`}
|
||
style={{
|
||
display: 'inline-flex', alignItems: 'center', gap: '0.3rem',
|
||
padding: '0.15rem 0.45rem', borderRadius: '0.25rem',
|
||
background: ws.bg, border: `1px solid ${ws.border}`,
|
||
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||
color: ws.text, cursor: 'default',
|
||
}}
|
||
>
|
||
{wf.id}
|
||
<span style={{ fontSize: '0.58rem', opacity: 0.8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
|
||
{wf.state}
|
||
</span>
|
||
</span>
|
||
</td>
|
||
);
|
||
}
|
||
case 'lastFoundOn':
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem', whiteSpace: 'nowrap', color: '#64748B', fontFamily: 'monospace', fontSize: '0.72rem' }}>
|
||
{finding.lastFoundOn || '—'}
|
||
</td>
|
||
);
|
||
case 'note':
|
||
return (
|
||
<td style={{ padding: '0.45rem 0.75rem' }}>
|
||
<NoteCell findingId={finding.id} initialNote={finding.note} />
|
||
</td>
|
||
);
|
||
default:
|
||
return <td style={{ padding: '0.45rem 0.75rem', color: '#64748B' }}>—</td>;
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Main ReportingPage
|
||
// ---------------------------------------------------------------------------
|
||
export default function ReportingPage({ filterDate, filterEXC }) {
|
||
const { canWrite } = useAuth();
|
||
const [findings, setFindings] = useState([]);
|
||
const [total, setTotal] = useState(null);
|
||
const [syncedAt, setSyncedAt] = useState(null);
|
||
const [syncStatus, setSyncStatus] = useState(null);
|
||
const [syncError, setSyncError] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [syncing, setSyncing] = useState(false);
|
||
const [statusCounts, setStatusCounts] = useState({ open: 0, closed: 0 });
|
||
const [countsLoading, setCountsLoading] = useState(true);
|
||
const [fpCounts, setFPCounts] = useState({ findingCounts: {}, findingTotal: 0, idCounts: {}, idTotal: 0 });
|
||
const [sort, setSort] = useState({ field: 'severity', dir: 'desc' });
|
||
const [columnOrder, setColumnOrder] = useState(loadColumnOrder);
|
||
const [columnFilters, setColumnFilters] = useState(() =>
|
||
filterDate ? { dueDate: new Set([filterDate]) } : {}
|
||
);
|
||
const [openFilter, setOpenFilter] = useState(null);
|
||
const filterBtnRefs = useRef({});
|
||
const [actionFilter, setActionFilter] = useState(null);
|
||
const [excFilter, setExcFilter] = useState(filterEXC || null);
|
||
|
||
const updateColumns = useCallback((newOrder) => {
|
||
setColumnOrder(newOrder);
|
||
saveColumnOrder(newOrder);
|
||
}, []);
|
||
|
||
const applyState = (data) => {
|
||
setTotal(data.total ?? 0);
|
||
setFindings(data.findings || []);
|
||
setSyncedAt(data.synced_at || null);
|
||
setSyncStatus(data.sync_status || null);
|
||
setSyncError(data.error_message || null);
|
||
};
|
||
|
||
const fetchCounts = async () => {
|
||
setCountsLoading(true);
|
||
try {
|
||
const res = await fetch(`${API_BASE}/ivanti/findings/counts`, { credentials: 'include' });
|
||
const data = await res.json();
|
||
if (res.ok) setStatusCounts({ open: data.open ?? 0, closed: data.closed ?? 0 });
|
||
} catch (e) {
|
||
console.error('Error loading status counts:', e);
|
||
} finally {
|
||
setCountsLoading(false);
|
||
}
|
||
};
|
||
|
||
const fetchFPWorkflowCounts = async () => {
|
||
try {
|
||
const res = await fetch(`${API_BASE}/ivanti/findings/fp-workflow-counts`, { credentials: 'include' });
|
||
const data = await res.json();
|
||
if (res.ok) setFPCounts({
|
||
findingCounts: data.findingCounts || {},
|
||
findingTotal: data.findingTotal || 0,
|
||
idCounts: data.idCounts || {},
|
||
idTotal: data.idTotal || 0,
|
||
});
|
||
} catch (e) {
|
||
console.error('Error loading FP workflow counts:', e);
|
||
}
|
||
};
|
||
|
||
const fetchFindings = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const res = await fetch(`${API_BASE}/ivanti/findings`, { credentials: 'include' });
|
||
const data = await res.json();
|
||
if (res.ok) applyState(data);
|
||
} catch (e) {
|
||
console.error('Error loading findings:', e);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const syncFindings = async () => {
|
||
setSyncing(true);
|
||
try {
|
||
const res = await fetch(`${API_BASE}/ivanti/findings/sync`, { method: 'POST', credentials: 'include' });
|
||
const data = await res.json();
|
||
if (res.ok) {
|
||
applyState(data);
|
||
fetchCounts(); // refresh counts after sync
|
||
fetchFPWorkflowCounts(); // refresh FP workflow counts after sync
|
||
}
|
||
} catch (e) {
|
||
console.error('Error syncing findings:', e);
|
||
} finally {
|
||
setSyncing(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchFindings();
|
||
fetchCounts();
|
||
fetchFPWorkflowCounts();
|
||
}, []); // eslint-disable-line
|
||
|
||
// Set/clear a single column filter
|
||
const setColFilter = useCallback((colKey, vals) => {
|
||
setColumnFilters((prev) => {
|
||
if (!vals) {
|
||
const next = { ...prev };
|
||
delete next[colKey];
|
||
return next;
|
||
}
|
||
return { ...prev, [colKey]: vals };
|
||
});
|
||
}, []);
|
||
|
||
// Apply all active filters to produce the visible row set
|
||
const filtered = useMemo(() => {
|
||
let result = findings;
|
||
|
||
// Column filters
|
||
const active = Object.entries(columnFilters);
|
||
if (active.length > 0) {
|
||
result = result.filter((f) =>
|
||
active.every(([key, vals]) => {
|
||
if (!vals || vals.size === 0) return false;
|
||
const def = COLUMN_DEFS[key];
|
||
if (def?.multiValue) {
|
||
const arr = f[key] || [];
|
||
if (arr.length === 0) return vals.has(EMPTY_SENTINEL);
|
||
return arr.some((v) => vals.has(String(v).trim()));
|
||
}
|
||
const fval = getFilterVal(f, key).trim();
|
||
return fval === '' ? vals.has(EMPTY_SENTINEL) : vals.has(fval);
|
||
})
|
||
);
|
||
}
|
||
|
||
// Action coverage filter (chart segment click)
|
||
if (actionFilter) {
|
||
result = result.filter((f) => classifyFinding(f) === actionFilter);
|
||
}
|
||
|
||
// EXC filter (navigated from home page Archer ticket)
|
||
if (excFilter) {
|
||
const upper = excFilter.toUpperCase();
|
||
result = result.filter((f) => (f.note || '').toUpperCase().includes(upper));
|
||
}
|
||
|
||
return result;
|
||
}, [findings, columnFilters, actionFilter, excFilter]);
|
||
|
||
// Visible columns in current order
|
||
const visibleCols = columnOrder.filter((c) => c.visible && COLUMN_DEFS[c.key]);
|
||
|
||
// Sort filtered results
|
||
const sorted = useMemo(() => [...filtered].sort((a, b) => {
|
||
const av = getVal(a, sort.field);
|
||
const bv = getVal(b, sort.field);
|
||
let cmp = 0;
|
||
if (typeof av === 'number' && typeof bv === 'number') {
|
||
cmp = av - bv;
|
||
} else {
|
||
cmp = String(av).localeCompare(String(bv), undefined, { numeric: true });
|
||
}
|
||
return sort.dir === 'asc' ? cmp : -cmp;
|
||
}), [filtered, sort]);
|
||
|
||
const toggleSort = (key) => {
|
||
setSort((prev) =>
|
||
prev.field === key
|
||
? { field: key, dir: prev.dir === 'asc' ? 'desc' : 'asc' }
|
||
: { field: key, dir: 'asc' }
|
||
);
|
||
};
|
||
|
||
const activeFilterCount = Object.keys(columnFilters).length + (actionFilter ? 1 : 0) + (excFilter ? 1 : 0);
|
||
|
||
const [exportMenuOpen, setExportMenuOpen] = useState(false);
|
||
const exportBtnRef = useRef(null);
|
||
|
||
// Close export menu on outside click
|
||
useEffect(() => {
|
||
if (!exportMenuOpen) return;
|
||
const handler = (e) => {
|
||
if (exportBtnRef.current && !exportBtnRef.current.contains(e.target)) {
|
||
setExportMenuOpen(false);
|
||
}
|
||
};
|
||
document.addEventListener('mousedown', handler);
|
||
return () => document.removeEventListener('mousedown', handler);
|
||
}, [exportMenuOpen]);
|
||
|
||
const buildExportRows = useCallback(() => {
|
||
const cols = visibleCols.filter((c) => COLUMN_DEFS[c.key]);
|
||
const headers = cols.map((c) => COLUMN_DEFS[c.key].label);
|
||
const rows = sorted.map((finding) =>
|
||
cols.map((c) => getExportVal(finding, c.key))
|
||
);
|
||
return [headers, ...rows];
|
||
}, [sorted, visibleCols]);
|
||
|
||
const exportCSV = useCallback(() => {
|
||
setExportMenuOpen(false);
|
||
const rows = buildExportRows();
|
||
const csvContent = rows.map((row) =>
|
||
row.map((cell) => {
|
||
const s = String(cell ?? '');
|
||
// Quote if it contains comma, double-quote, or newline
|
||
if (s.includes(',') || s.includes('"') || s.includes('\n')) {
|
||
return `"${s.replace(/"/g, '""')}"`;
|
||
}
|
||
return s;
|
||
}).join(',')
|
||
).join('\r\n');
|
||
const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `findings-export-${new Date().toISOString().slice(0, 10)}.csv`;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
URL.revokeObjectURL(url);
|
||
}, [buildExportRows]);
|
||
|
||
const exportXLSX = useCallback(() => {
|
||
setExportMenuOpen(false);
|
||
const rows = buildExportRows();
|
||
const ws = XLSX.utils.aoa_to_sheet(rows);
|
||
// Auto-fit column widths
|
||
const colWidths = rows[0].map((_, ci) =>
|
||
Math.min(60, Math.max(10, ...rows.map((r) => String(r[ci] ?? '').length)))
|
||
);
|
||
ws['!cols'] = colWidths.map((w) => ({ wch: w }));
|
||
const wb = XLSX.utils.book_new();
|
||
XLSX.utils.book_append_sheet(wb, ws, 'Findings');
|
||
XLSX.writeFile(wb, `findings-export-${new Date().toISOString().slice(0, 10)}.xlsx`);
|
||
}, [buildExportRows]);
|
||
|
||
const syncedDisplay = syncedAt
|
||
? `Synced ${new Date(syncedAt.replace(' ', 'T') + 'Z').toLocaleString()}`
|
||
: 'Never synced';
|
||
|
||
// -------------------------------------------------------------------------
|
||
// Render
|
||
// -------------------------------------------------------------------------
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||
|
||
{/* ----------------------------------------------------------------
|
||
Panel 1 — Metrics placeholder
|
||
---------------------------------------------------------------- */}
|
||
<div style={{
|
||
background: 'linear-gradient(135deg, rgba(15,26,46,0.95) 0%, rgba(10,22,40,0.9) 100%)',
|
||
border: '1px solid rgba(245,158,11,0.2)',
|
||
borderLeft: '3px solid #F59E0B',
|
||
borderRadius: '0.5rem',
|
||
padding: '1.5rem',
|
||
boxShadow: '0 4px 16px rgba(0,0,0,0.4)'
|
||
}}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', marginBottom: '1rem' }}>
|
||
<PieChart style={{ width: '20px', height: '20px', color: '#F59E0B' }} />
|
||
<h2 style={{ fontFamily: 'monospace', fontSize: '1rem', fontWeight: '600', color: '#F59E0B', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(245,158,11,0.4)', margin: 0 }}>
|
||
Metric Graphs
|
||
</h2>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '3rem', flexWrap: 'wrap', alignItems: 'flex-start' }}>
|
||
{/* Open vs Closed donut */}
|
||
<div style={{ flex: '0 0 auto' }}>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.75rem' }}>
|
||
Open vs Closed
|
||
</div>
|
||
<StatusDonut
|
||
open={statusCounts.open}
|
||
closed={statusCounts.closed}
|
||
loading={countsLoading}
|
||
/>
|
||
</div>
|
||
|
||
{/* Divider */}
|
||
<div style={{ width: '1px', background: 'rgba(255,255,255,0.06)', alignSelf: 'stretch', flexShrink: 0 }} />
|
||
|
||
{/* Action Coverage donut */}
|
||
<div style={{ flex: '0 0 auto' }}>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.75rem' }}>
|
||
Action Coverage
|
||
{actionFilter && <span style={{ marginLeft: '0.5rem', color: ACTION_DEFS.find(d => d.key === actionFilter)?.color, fontSize: '0.6rem' }}>● filtered</span>}
|
||
</div>
|
||
<ActionCoverageDonut
|
||
findings={findings}
|
||
activeSegment={actionFilter}
|
||
onSegmentClick={(key) => {
|
||
setExcFilter(null);
|
||
setActionFilter(key);
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Divider */}
|
||
<div style={{ width: '1px', background: 'rgba(255,255,255,0.06)', alignSelf: 'stretch', flexShrink: 0 }} />
|
||
|
||
{/* FP Finding Status donut — # of findings per FP workflow state */}
|
||
<div style={{ flex: '0 0 auto' }}>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.75rem' }}>
|
||
FP Finding Status
|
||
</div>
|
||
<FPWorkflowDonut counts={fpCounts.findingCounts} total={fpCounts.findingTotal} centerLabel="FINDINGS" />
|
||
</div>
|
||
|
||
{/* Divider */}
|
||
<div style={{ width: '1px', background: 'rgba(255,255,255,0.06)', alignSelf: 'stretch', flexShrink: 0 }} />
|
||
|
||
{/* FP Workflow Status donut — # of unique FP# ticket IDs per state */}
|
||
<div style={{ flex: '0 0 auto' }}>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '0.75rem' }}>
|
||
FP Workflow Status
|
||
</div>
|
||
<FPWorkflowDonut counts={fpCounts.idCounts} total={fpCounts.idTotal} centerLabel="FP TICKETS" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ----------------------------------------------------------------
|
||
Panel 2 — Findings table
|
||
---------------------------------------------------------------- */}
|
||
<div style={{
|
||
background: 'linear-gradient(135deg, rgba(15,26,46,0.95) 0%, rgba(10,22,40,0.9) 100%)',
|
||
border: '1px solid rgba(14,165,233,0.2)',
|
||
borderLeft: '3px solid #0EA5E9',
|
||
borderRadius: '0.5rem',
|
||
padding: '1.5rem',
|
||
boxShadow: '0 4px 16px rgba(0,0,0,0.4)'
|
||
}}>
|
||
{/* Panel header */}
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '0.5rem' }}>
|
||
<div>
|
||
<h2 style={{ fontFamily: 'monospace', fontSize: '1rem', fontWeight: '600', color: '#0EA5E9', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(14,165,233,0.4)', margin: '0 0 4px 0' }}>
|
||
Host Findings
|
||
</h2>
|
||
<div style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#475569' }}>
|
||
{syncedDisplay}
|
||
{syncStatus === 'success' && total !== null && (
|
||
<span style={{ marginLeft: '0.75rem', color: '#64748B' }}>
|
||
{activeFilterCount > 0 ? `${filtered.length} of ${total}` : total} findings
|
||
{activeFilterCount > 0 && (
|
||
<span style={{ marginLeft: '0.5rem', color: '#F59E0B' }}>
|
||
({activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} active)
|
||
</span>
|
||
)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Action buttons */}
|
||
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
|
||
{/* EXC filter badge (from home page navigation) */}
|
||
{excFilter && (
|
||
<button
|
||
onClick={() => setExcFilter(null)}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||
padding: '0.375rem 0.75rem',
|
||
background: 'rgba(245,158,11,0.08)',
|
||
border: '1px solid rgba(245,158,11,0.3)',
|
||
borderRadius: '0.375rem',
|
||
color: '#F59E0B', cursor: 'pointer',
|
||
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||
letterSpacing: '0.05em'
|
||
}}
|
||
>
|
||
<Filter style={{ width: '11px', height: '11px' }} />
|
||
{excFilter} ×
|
||
</button>
|
||
)}
|
||
{/* Action coverage filter badge (from chart click) */}
|
||
{actionFilter && (
|
||
<button
|
||
onClick={() => setActionFilter(null)}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||
padding: '0.375rem 0.75rem',
|
||
background: actionFilter === 'fp' ? 'rgba(14,165,233,0.08)' : actionFilter === 'archer' ? 'rgba(245,158,11,0.08)' : 'rgba(239,68,68,0.08)',
|
||
border: `1px solid ${actionFilter === 'fp' ? 'rgba(14,165,233,0.3)' : actionFilter === 'archer' ? 'rgba(245,158,11,0.3)' : 'rgba(239,68,68,0.3)'}`,
|
||
borderRadius: '0.375rem',
|
||
color: actionFilter === 'fp' ? '#0EA5E9' : actionFilter === 'archer' ? '#F59E0B' : '#EF4444',
|
||
cursor: 'pointer',
|
||
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||
letterSpacing: '0.05em'
|
||
}}
|
||
>
|
||
<Filter style={{ width: '11px', height: '11px' }} />
|
||
{ACTION_DEFS.find(d => d.key === actionFilter)?.label} ×
|
||
</button>
|
||
)}
|
||
{Object.keys(columnFilters).length > 0 && (
|
||
<button
|
||
onClick={() => setColumnFilters({})}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||
padding: '0.375rem 0.75rem',
|
||
background: 'rgba(245,158,11,0.08)',
|
||
border: '1px solid rgba(245,158,11,0.3)',
|
||
borderRadius: '0.375rem',
|
||
color: '#F59E0B', cursor: 'pointer',
|
||
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||
textTransform: 'uppercase', letterSpacing: '0.05em'
|
||
}}
|
||
>
|
||
<Filter style={{ width: '11px', height: '11px' }} />
|
||
Clear Filters
|
||
</button>
|
||
)}
|
||
{/* Export dropdown */}
|
||
<div ref={exportBtnRef} style={{ position: 'relative' }}>
|
||
<button
|
||
onClick={() => setExportMenuOpen((o) => !o)}
|
||
disabled={sorted.length === 0}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||
padding: '0.375rem 0.75rem',
|
||
background: 'rgba(16,185,129,0.08)',
|
||
border: '1px solid rgba(16,185,129,0.3)',
|
||
borderRadius: '0.375rem',
|
||
color: '#10B981', cursor: sorted.length === 0 ? 'not-allowed' : 'pointer',
|
||
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||
opacity: sorted.length === 0 ? 0.4 : 1,
|
||
}}
|
||
>
|
||
<Download style={{ width: '11px', height: '11px' }} />
|
||
Export
|
||
<ChevronDown style={{ width: '10px', height: '10px', marginLeft: '1px' }} />
|
||
</button>
|
||
{exportMenuOpen && (
|
||
<div style={{
|
||
position: 'absolute', top: 'calc(100% + 4px)', right: 0, zIndex: 200,
|
||
background: 'rgb(12,22,40)', border: '1px solid rgba(16,185,129,0.3)',
|
||
borderRadius: '0.375rem', overflow: 'hidden',
|
||
boxShadow: '0 4px 16px rgba(0,0,0,0.5)',
|
||
minWidth: '120px',
|
||
}}>
|
||
{[
|
||
{ label: 'CSV (.csv)', action: exportCSV },
|
||
{ label: 'Excel (.xlsx)', action: exportXLSX },
|
||
].map(({ label, action }) => (
|
||
<button
|
||
key={label}
|
||
onClick={action}
|
||
style={{
|
||
display: 'block', width: '100%', textAlign: 'left',
|
||
padding: '0.5rem 0.875rem',
|
||
background: 'none', border: 'none',
|
||
fontFamily: 'monospace', fontSize: '0.73rem', fontWeight: '600',
|
||
color: '#10B981', cursor: 'pointer',
|
||
textTransform: 'uppercase', letterSpacing: '0.04em',
|
||
transition: 'background 0.1s',
|
||
}}
|
||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(16,185,129,0.1)'}
|
||
onMouseLeave={(e) => e.currentTarget.style.background = 'none'}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<ColumnManager columnOrder={columnOrder} onChange={updateColumns} />
|
||
<button
|
||
onClick={syncFindings}
|
||
disabled={syncing || loading}
|
||
style={{
|
||
display: 'flex', alignItems: 'center', gap: '0.375rem',
|
||
padding: '0.375rem 0.75rem',
|
||
background: 'rgba(14,165,233,0.1)',
|
||
border: '1px solid rgba(14,165,233,0.35)',
|
||
borderRadius: '0.375rem',
|
||
color: '#0EA5E9', cursor: 'pointer',
|
||
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
||
textTransform: 'uppercase', letterSpacing: '0.05em',
|
||
opacity: (syncing || loading) ? 0.6 : 1
|
||
}}
|
||
>
|
||
<RefreshCw style={{ width: '13px', height: '13px', animation: syncing ? 'spin 1s linear infinite' : 'none' }} />
|
||
{syncing ? 'Syncing…' : 'Sync'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error banner */}
|
||
{syncStatus === 'error' && syncError && (
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', padding: '0.625rem 0.875rem', background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.25)', borderRadius: '0.375rem', marginBottom: '1rem' }}>
|
||
<AlertCircle style={{ width: '15px', height: '15px', color: '#EF4444', flexShrink: 0, marginTop: '1px' }} />
|
||
<span style={{ fontSize: '0.75rem', color: '#FCA5A5', fontFamily: 'monospace' }}>{syncError}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Content */}
|
||
{loading ? (
|
||
<div style={{ textAlign: 'center', padding: '3rem 0' }}>
|
||
<Loader style={{ width: '28px', height: '28px', color: '#0EA5E9', animation: 'spin 1s linear infinite', margin: '0 auto 0.75rem' }} />
|
||
<p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569' }}>Loading findings…</p>
|
||
</div>
|
||
) : syncStatus === 'never' ? (
|
||
<div style={{ textAlign: 'center', padding: '3rem 0' }}>
|
||
<p style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#475569' }}>Click Sync to load findings data</p>
|
||
</div>
|
||
) : (
|
||
<div style={{ overflowX: 'auto', overflowY: 'auto', maxHeight: 'calc(100vh - 420px)', minHeight: '200px', marginTop: '0.75rem' }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.75rem', fontFamily: 'sans-serif' }}>
|
||
<thead>
|
||
<tr style={{ borderBottom: '1px solid rgba(14,165,233,0.2)' }}>
|
||
{visibleCols.map((col) => {
|
||
const def = COLUMN_DEFS[col.key];
|
||
const active = sort.field === col.key;
|
||
const isFiltered = !!columnFilters[col.key];
|
||
return (
|
||
<th
|
||
key={col.key}
|
||
onClick={def?.sortable ? () => toggleSort(col.key) : undefined}
|
||
style={{
|
||
padding: '0.5rem 0.75rem', textAlign: 'left',
|
||
fontFamily: 'monospace', fontSize: '0.68rem', fontWeight: '600',
|
||
color: active ? '#0EA5E9' : '#64748B',
|
||
textTransform: 'uppercase', letterSpacing: '0.08em',
|
||
whiteSpace: 'nowrap',
|
||
cursor: def?.sortable ? 'pointer' : 'default',
|
||
userSelect: 'none',
|
||
background: 'rgb(10, 20, 36)',
|
||
position: 'sticky', top: 0, zIndex: 10,
|
||
boxShadow: '0 1px 0 rgba(14,165,233,0.2)',
|
||
}}
|
||
>
|
||
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
|
||
{def?.label || col.key}
|
||
{def?.sortable && <SortIcon colKey={col.key} sort={sort} />}
|
||
{def?.filterable && (
|
||
<button
|
||
ref={(el) => { filterBtnRefs.current[col.key] = el; }}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setOpenFilter(openFilter === col.key ? null : col.key);
|
||
}}
|
||
title={`Filter ${def.label}`}
|
||
style={{
|
||
background: 'none', border: 'none',
|
||
cursor: 'pointer', padding: '1px 1px 1px 3px',
|
||
color: isFiltered ? '#F59E0B' : '#334155',
|
||
lineHeight: 1, flexShrink: 0,
|
||
transition: 'color 0.15s',
|
||
}}
|
||
>
|
||
<Filter style={{ width: '10px', height: '10px' }} />
|
||
</button>
|
||
)}
|
||
</span>
|
||
</th>
|
||
);
|
||
})}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{sorted.map((finding, idx) => {
|
||
const rowBg = idx % 2 === 0 ? 'rgba(15,26,46,0.4)' : 'rgba(10,18,32,0.4)';
|
||
return (
|
||
<tr
|
||
key={finding.id}
|
||
style={{ borderBottom: '1px solid rgba(255,255,255,0.04)', background: rowBg }}
|
||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(14,165,233,0.05)'}
|
||
onMouseLeave={(e) => e.currentTarget.style.background = rowBg}
|
||
>
|
||
{visibleCols.map((col) => (
|
||
<TableCell key={col.key} colKey={col.key} finding={finding} canWrite={canWrite()} />
|
||
))}
|
||
</tr>
|
||
);
|
||
})}
|
||
{sorted.length === 0 && (
|
||
<tr>
|
||
<td colSpan={visibleCols.length} style={{ textAlign: 'center', padding: '2rem', color: '#475569', fontFamily: 'monospace', fontSize: '0.75rem' }}>
|
||
{activeFilterCount > 0 ? 'No findings match the current filters' : 'No findings found'}
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Filter dropdown — rendered via portal at document.body */}
|
||
{openFilter && COLUMN_DEFS[openFilter]?.filterable && (
|
||
<FilterDropdown
|
||
anchorEl={filterBtnRefs.current[openFilter]}
|
||
colKey={openFilter}
|
||
findings={findings}
|
||
activeFilter={columnFilters[openFilter] || null}
|
||
onFilterChange={(vals) => setColFilter(openFilter, vals)}
|
||
onClose={() => setOpenFilter(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|