8788b1e91a
The View button for documents was constructing the href as API_HOST + file_path which resolved to http://localhost:3001/... Since the frontend is served from the same Express server, this should be a relative path. Users' browsers don't have localhost:3001 running, so the link was broken for anyone not on the server itself.
2460 lines
117 KiB
JavaScript
2460 lines
117 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Search, FileText, AlertCircle, AlertTriangle, Download, Upload, Eye, Filter, CheckCircle, XCircle, Loader, Trash2, Plus, RefreshCw, Edit2, ChevronDown, Shield, Activity, Menu } from 'lucide-react';
|
|
import { useAuth } from './contexts/AuthContext';
|
|
import LoginForm from './components/LoginForm';
|
|
import UserMenu from './components/UserMenu';
|
|
import UserManagement from './components/UserManagement';
|
|
import AuditLog from './components/AuditLog';
|
|
import NvdSyncModal from './components/NvdSyncModal';
|
|
import NavDrawer from './components/NavDrawer';
|
|
import AdminScopeToggle from './components/AdminScopeToggle';
|
|
import CalendarWidget from './components/CalendarWidget';
|
|
import ConfirmModal from './components/ConfirmModal';
|
|
import VulnerabilityTriagePage from './components/pages/ReportingPage';
|
|
import KnowledgeBasePage from './components/pages/KnowledgeBasePage';
|
|
import ExportsPage from './components/pages/ExportsPage';
|
|
import CompliancePage from './components/pages/CompliancePage';
|
|
import CCPMetricsPage from './components/pages/CCPMetricsPage';
|
|
import JiraPage from './components/pages/JiraPage';
|
|
import AdminPage from './components/pages/AdminPage';
|
|
import ArchiveSummaryBar from './components/pages/ArchiveSummaryBar';
|
|
import ArcherPage from './components/pages/ArcherPage';
|
|
import FeedbackModal from './components/FeedbackModal';
|
|
import NotificationBell from './components/NotificationBell';
|
|
import './App.css';
|
|
|
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
|
|
|
// ============================================
|
|
// INLINE STYLES - NUCLEAR OPTION FOR VISIBILITY
|
|
// ============================================
|
|
const STYLES = {
|
|
// Main container with visible background
|
|
mainContainer: {
|
|
minHeight: '100vh',
|
|
background: 'linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%)',
|
|
padding: '1.5rem',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
},
|
|
// Stat cards with refined borders
|
|
statCard: {
|
|
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%)',
|
|
border: '2px solid #0EA5E9',
|
|
borderRadius: '0.5rem',
|
|
padding: '1rem',
|
|
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.15)',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
},
|
|
// Intel card with refined glowing border
|
|
intelCard: {
|
|
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 50%, rgba(30, 41, 59, 0.95) 100%)',
|
|
border: '2px solid rgba(14, 165, 233, 0.4)',
|
|
borderRadius: '0.5rem',
|
|
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.6), 0 0 28px rgba(14, 165, 233, 0.15), inset 0 1px 0 rgba(14, 165, 233, 0.12)',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
},
|
|
// Vendor card with depth
|
|
vendorCard: {
|
|
background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%)',
|
|
border: '1.5px solid rgba(14, 165, 233, 0.3)',
|
|
borderRadius: '0.5rem',
|
|
padding: '1rem',
|
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(14, 165, 233, 0.08)',
|
|
marginBottom: '0.75rem',
|
|
},
|
|
// CRITICAL severity badge - Modern red with refined glow
|
|
badgeCritical: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
background: 'linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.2) 100%)',
|
|
border: '2px solid #EF4444',
|
|
borderRadius: '0.375rem',
|
|
padding: '0.375rem 0.875rem',
|
|
color: '#FCA5A5',
|
|
fontWeight: '700',
|
|
fontSize: '0.75rem',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px',
|
|
textShadow: '0 0 8px rgba(239, 68, 68, 0.5)',
|
|
boxShadow: '0 0 16px rgba(239, 68, 68, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
|
|
},
|
|
// HIGH severity badge - Amber with refined glow
|
|
badgeHigh: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%)',
|
|
border: '2px solid #F59E0B',
|
|
borderRadius: '0.375rem',
|
|
padding: '0.375rem 0.875rem',
|
|
color: '#FCD34D',
|
|
fontWeight: '700',
|
|
fontSize: '0.75rem',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px',
|
|
textShadow: '0 0 8px rgba(245, 158, 11, 0.5)',
|
|
boxShadow: '0 0 16px rgba(245, 158, 11, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
|
|
},
|
|
// MEDIUM severity badge - Sky blue with refined glow
|
|
badgeMedium: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
background: 'linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(14, 165, 233, 0.2) 100%)',
|
|
border: '2px solid #0EA5E9',
|
|
borderRadius: '0.375rem',
|
|
padding: '0.375rem 0.875rem',
|
|
color: '#7DD3FC',
|
|
fontWeight: '700',
|
|
fontSize: '0.75rem',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px',
|
|
textShadow: '0 0 8px rgba(14, 165, 233, 0.5)',
|
|
boxShadow: '0 0 16px rgba(14, 165, 233, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
|
|
},
|
|
// LOW severity badge - Emerald with refined glow
|
|
badgeLow: {
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
background: 'linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.2) 100%)',
|
|
border: '2px solid #10B981',
|
|
borderRadius: '0.375rem',
|
|
padding: '0.375rem 0.875rem',
|
|
color: '#6EE7B7',
|
|
fontWeight: '700',
|
|
fontSize: '0.75rem',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px',
|
|
textShadow: '0 0 8px rgba(16, 185, 129, 0.5)',
|
|
boxShadow: '0 0 16px rgba(16, 185, 129, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4)',
|
|
},
|
|
// Glowing dot for badges
|
|
glowDot: (color) => ({
|
|
width: '8px',
|
|
height: '8px',
|
|
borderRadius: '50%',
|
|
background: color,
|
|
boxShadow: `0 0 12px ${color}, 0 0 6px ${color}`,
|
|
animation: 'pulse 2s ease-in-out infinite',
|
|
}),
|
|
};
|
|
|
|
// Helper function to get severity badge style
|
|
const getSeverityBadgeStyle = (severity) => {
|
|
switch (severity?.toLowerCase()) {
|
|
case 'critical': return STYLES.badgeCritical;
|
|
case 'high': return STYLES.badgeHigh;
|
|
case 'medium': return STYLES.badgeMedium;
|
|
case 'low': return STYLES.badgeLow;
|
|
default: return STYLES.badgeMedium;
|
|
}
|
|
};
|
|
|
|
// Helper function to get severity dot color
|
|
const getSeverityDotColor = (severity) => {
|
|
switch (severity?.toLowerCase()) {
|
|
case 'critical': return '#EF4444';
|
|
case 'high': return '#F59E0B';
|
|
case 'medium': return '#0EA5E9';
|
|
case 'low': return '#10B981';
|
|
default: return '#0EA5E9';
|
|
}
|
|
};
|
|
const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:3001';
|
|
|
|
const severityLevels = ['All Severities', 'Critical', 'High', 'Medium', 'Low'];
|
|
|
|
export default function App() {
|
|
const { isAuthenticated, loading: authLoading, canWrite, canDelete, canExport, isAdmin, getActiveTeamsParam, adminScope } = useAuth();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedVendor, setSelectedVendor] = useState('All Vendors');
|
|
const [selectedSeverity, setSelectedSeverity] = useState('All Severities');
|
|
const [selectedCVE, setSelectedCVE] = useState(null);
|
|
const [selectedVendorView, setSelectedVendorView] = useState(null);
|
|
const [selectedDocuments, setSelectedDocuments] = useState([]);
|
|
const [cves, setCves] = useState([]);
|
|
const [vendors, setVendors] = useState(['All Vendors']);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [cveDocuments, setCveDocuments] = useState({});
|
|
const [quickCheckCVE, setQuickCheckCVE] = useState('');
|
|
const [quickCheckResult, setQuickCheckResult] = useState(null);
|
|
const VALID_PAGES = new Set(['home', 'triage', 'compliance', 'knowledge-base', 'exports', 'jira', 'admin']);
|
|
const [currentPage, setCurrentPageRaw] = useState(() => {
|
|
try {
|
|
const saved = localStorage.getItem('cve-dashboard-page');
|
|
return saved && VALID_PAGES.has(saved) ? saved : 'home';
|
|
} catch { return 'home'; }
|
|
});
|
|
const setCurrentPage = (page) => {
|
|
setCurrentPageRaw(page);
|
|
try { localStorage.setItem('cve-dashboard-page', page); } catch {}
|
|
};
|
|
const [navOpen, setNavOpen] = useState(false);
|
|
const [calendarFilter, setCalendarFilter] = useState(null);
|
|
const [reportingExcFilter, setReportingExcFilter] = useState(null);
|
|
const [showAddCVE, setShowAddCVE] = useState(false);
|
|
const [showUserManagement, setShowUserManagement] = useState(false);
|
|
const [showAuditLog, setShowAuditLog] = useState(false);
|
|
const [showFeedback, setShowFeedback] = useState(false);
|
|
const [feedbackType, setFeedbackType] = useState('bug');
|
|
const [showNvdSync, setShowNvdSync] = useState(false);
|
|
const [newCVE, setNewCVE] = useState({
|
|
cve_id: '',
|
|
vendor: '',
|
|
severity: 'Medium',
|
|
description: '',
|
|
published_date: new Date().toISOString().split('T')[0]
|
|
});
|
|
const [uploadingFile, setUploadingFile] = useState(false);
|
|
const [nvdLoading, setNvdLoading] = useState(false);
|
|
const [nvdError, setNvdError] = useState(null);
|
|
const [nvdAutoFilled, setNvdAutoFilled] = useState(false);
|
|
const [showEditCVE, setShowEditCVE] = useState(false);
|
|
const [editingCVE, setEditingCVE] = useState(null);
|
|
const [editForm, setEditForm] = useState({
|
|
cve_id: '', vendor: '', severity: 'Medium', description: '', published_date: '', status: 'Open'
|
|
});
|
|
const [editNvdLoading, setEditNvdLoading] = useState(false);
|
|
const [editNvdError, setEditNvdError] = useState(null);
|
|
const [editNvdAutoFilled, setEditNvdAutoFilled] = useState(false);
|
|
const [expandedCVEs, setExpandedCVEs] = useState({});
|
|
const [visibleCount, setVisibleCount] = useState(5);
|
|
const [jiraTickets, setJiraTickets] = useState([]);
|
|
const [showAddTicket, setShowAddTicket] = useState(false);
|
|
const [showEditTicket, setShowEditTicket] = useState(false);
|
|
const [editingTicket, setEditingTicket] = useState(null);
|
|
const [ticketForm, setTicketForm] = useState({
|
|
cve_id: '', vendor: '', ticket_key: '', url: '', summary: '', status: 'Open'
|
|
});
|
|
// For adding ticket from within a CVE card
|
|
const [addTicketContext, setAddTicketContext] = useState(null); // { cve_id, vendor }
|
|
|
|
// Archer tickets state
|
|
const [archerTickets, setArcherTickets] = useState([]);
|
|
const [showAddArcherTicket, setShowAddArcherTicket] = useState(false);
|
|
const [showEditArcherTicket, setShowEditArcherTicket] = useState(false);
|
|
const [editingArcherTicket, setEditingArcherTicket] = useState(null);
|
|
const [archerTicketForm, setArcherTicketForm] = useState({
|
|
exc_number: '', archer_url: '', status: 'Draft', cve_id: '', vendor: ''
|
|
});
|
|
const [addArcherTicketContext, setAddArcherTicketContext] = useState(null); // { cve_id, vendor }
|
|
|
|
// Ivanti workflows state
|
|
const [ivantiTotal, setIvantiTotal] = useState(null);
|
|
const [ivantiWorkflows, setIvantiWorkflows] = useState([]);
|
|
const [ivantiSyncedAt, setIvantiSyncedAt] = useState(null);
|
|
const [ivantiSyncStatus, setIvantiSyncStatus] = useState(null);
|
|
const [ivantiSyncError, setIvantiSyncError] = useState(null);
|
|
const [ivantiLoading, setIvantiLoading] = useState(false);
|
|
const [ivantiSyncing, setIvantiSyncing] = useState(false);
|
|
|
|
// Archive filter state
|
|
const [archiveFilter, setArchiveFilter] = useState(null);
|
|
const [archiveRefreshKey, setArchiveRefreshKey] = useState(0);
|
|
const [archiveList, setArchiveList] = useState([]);
|
|
const [archiveListLoading, setArchiveListLoading] = useState(false);
|
|
|
|
// Confirmation modal state — replaces window.confirm()
|
|
const [pendingConfirm, setPendingConfirm] = useState(null);
|
|
|
|
const toggleCVEExpand = (cveId) => {
|
|
setExpandedCVEs(prev => ({ ...prev, [cveId]: !prev[cveId] }));
|
|
};
|
|
|
|
const lookupNVD = async (cveId) => {
|
|
const trimmed = cveId.trim();
|
|
if (!/^CVE-\d{4}-\d{4,}$/.test(trimmed)) return;
|
|
|
|
setNvdLoading(true);
|
|
setNvdError(null);
|
|
setNvdAutoFilled(false);
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/nvd/lookup/${encodeURIComponent(trimmed)}`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'NVD lookup failed');
|
|
}
|
|
|
|
const data = await response.json();
|
|
setNewCVE(prev => ({
|
|
...prev,
|
|
description: prev.description || data.description,
|
|
severity: data.severity,
|
|
published_date: data.published_date || prev.published_date
|
|
}));
|
|
setNvdAutoFilled(true);
|
|
} catch (err) {
|
|
setNvdError(err.message);
|
|
} finally {
|
|
setNvdLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchCVEs = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (searchQuery) params.append('search', searchQuery);
|
|
if (selectedVendor !== 'All Vendors') params.append('vendor', selectedVendor);
|
|
if (selectedSeverity !== 'All Severities') params.append('severity', selectedSeverity);
|
|
|
|
const response = await fetch(`${API_BASE}/cves?${params}`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to fetch CVEs');
|
|
const data = await response.json();
|
|
setCves(data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
console.error('Error fetching CVEs:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchVendors = async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/vendors`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to fetch vendors');
|
|
const data = await response.json();
|
|
setVendors(['All Vendors', ...data]);
|
|
} catch (err) {
|
|
console.error('Error fetching vendors:', err);
|
|
}
|
|
};
|
|
|
|
const fetchJiraTickets = async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/jira-tickets`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to fetch JIRA tickets');
|
|
const data = await response.json();
|
|
setJiraTickets(data);
|
|
} catch (err) {
|
|
console.error('Error fetching JIRA tickets:', err);
|
|
}
|
|
};
|
|
|
|
const fetchArcherTickets = async () => {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/archer-tickets`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to fetch Archer tickets');
|
|
const data = await response.json();
|
|
setArcherTickets(data);
|
|
} catch (err) {
|
|
console.error('Error fetching Archer tickets:', err);
|
|
}
|
|
};
|
|
|
|
const applyIvantiState = (data) => {
|
|
setIvantiTotal(data.total ?? 0);
|
|
setIvantiWorkflows(data.workflows || []);
|
|
setIvantiSyncedAt(data.synced_at || null);
|
|
setIvantiSyncStatus(data.sync_status || null);
|
|
setIvantiSyncError(data.error_message || null);
|
|
};
|
|
|
|
const fetchIvantiWorkflows = async () => {
|
|
setIvantiLoading(true);
|
|
try {
|
|
const response = await fetch(`${API_BASE}/ivanti/workflows`, { credentials: 'include' });
|
|
const data = await response.json();
|
|
if (response.ok) applyIvantiState(data);
|
|
} catch (err) {
|
|
console.error('Error loading Ivanti workflows:', err);
|
|
} finally {
|
|
setIvantiLoading(false);
|
|
}
|
|
};
|
|
|
|
const syncIvantiWorkflows = async () => {
|
|
setIvantiSyncing(true);
|
|
try {
|
|
const response = await fetch(`${API_BASE}/ivanti/workflows/sync`, {
|
|
method: 'POST',
|
|
credentials: 'include'
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) applyIvantiState(data);
|
|
} catch (err) {
|
|
console.error('Error syncing Ivanti workflows:', err);
|
|
} finally {
|
|
setIvantiSyncing(false);
|
|
setArchiveRefreshKey(k => k + 1);
|
|
}
|
|
};
|
|
|
|
const handleArchiveStateClick = (state) => {
|
|
const newFilter = archiveFilter === state ? null : state;
|
|
setArchiveFilter(newFilter);
|
|
if (newFilter) {
|
|
setArchiveListLoading(true);
|
|
const teamsParam = getActiveTeamsParam();
|
|
const url = teamsParam
|
|
? `${API_BASE}/ivanti/archive?state=${newFilter}&teams=${encodeURIComponent(teamsParam)}`
|
|
: `${API_BASE}/ivanti/archive?state=${newFilter}`;
|
|
fetch(url, { credentials: 'include' })
|
|
.then(res => res.ok ? res.json() : Promise.reject())
|
|
.then(data => setArchiveList(data.archives || []))
|
|
.catch(() => setArchiveList([]))
|
|
.finally(() => setArchiveListLoading(false));
|
|
} else {
|
|
setArchiveList([]);
|
|
}
|
|
};
|
|
|
|
const fetchDocuments = async (cveId, vendor) => {
|
|
const key = `${cveId}-${vendor}`;
|
|
if (cveDocuments[key]) return;
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/cves/${cveId}/documents?vendor=${vendor}`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to fetch documents');
|
|
const data = await response.json();
|
|
setCveDocuments(prev => ({ ...prev, [key]: data }));
|
|
} catch (err) {
|
|
console.error('Error fetching documents:', err);
|
|
}
|
|
};
|
|
|
|
const quickCheckCVEStatus = async () => {
|
|
if (!quickCheckCVE.trim()) return;
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/cves/check/${quickCheckCVE.trim()}`, {
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to check CVE');
|
|
const data = await response.json();
|
|
setQuickCheckResult(data);
|
|
} catch (err) {
|
|
console.error('Error checking CVE:', err);
|
|
setQuickCheckResult({ error: err.message });
|
|
}
|
|
};
|
|
|
|
const handleViewDocuments = async (cveId, vendor) => {
|
|
if (selectedCVE === cveId && selectedVendorView === vendor) {
|
|
setSelectedCVE(null);
|
|
setSelectedVendorView(null);
|
|
} else {
|
|
setSelectedCVE(cveId);
|
|
setSelectedVendorView(vendor);
|
|
await fetchDocuments(cveId, vendor);
|
|
}
|
|
};
|
|
|
|
const toggleDocumentSelection = (docId) => {
|
|
setSelectedDocuments(prev =>
|
|
prev.includes(docId)
|
|
? prev.filter(id => id !== docId)
|
|
: [...prev, docId]
|
|
);
|
|
};
|
|
|
|
const exportSelectedDocuments = () => {
|
|
alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
|
|
};
|
|
|
|
const handleAddCVE = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch(`${API_BASE}/cves`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(newCVE)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to add CVE');
|
|
}
|
|
|
|
alert(`CVE ${newCVE.cve_id} added successfully for vendor: ${newCVE.vendor}!`);
|
|
setShowAddCVE(false);
|
|
setNewCVE({
|
|
cve_id: '',
|
|
vendor: '',
|
|
severity: 'Medium',
|
|
description: '',
|
|
published_date: new Date().toISOString().split('T')[0]
|
|
});
|
|
setNvdLoading(false);
|
|
setNvdError(null);
|
|
setNvdAutoFilled(false);
|
|
fetchCVEs();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const handleFileUpload = async (cveId, vendor) => {
|
|
const fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.accept = '.pdf,.png,.jpg,.jpeg,.gif,.bmp,.tiff,.tif,.txt,.csv,.log,.msg,.eml,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.odt,.ods,.odp,.rtf,.html,.htm,.xml,.json,.yaml,.yml,.zip,.gz,.tar,.7z';
|
|
|
|
fileInput.onchange = async (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
const docType = prompt(
|
|
'Document type (advisory, email, screenshot, patch, other):',
|
|
'advisory'
|
|
);
|
|
if (!docType) return;
|
|
|
|
const notes = prompt('Notes (optional):');
|
|
|
|
setUploadingFile(true);
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
formData.append('cveId', cveId);
|
|
formData.append('vendor', vendor);
|
|
formData.append('type', docType);
|
|
if (notes) formData.append('notes', notes);
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/cves/${cveId}/documents`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to upload document');
|
|
|
|
alert(`Document uploaded successfully!`);
|
|
const key = `${cveId}-${vendor}`;
|
|
delete cveDocuments[key];
|
|
await fetchDocuments(cveId, vendor);
|
|
fetchCVEs();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
} finally {
|
|
setUploadingFile(false);
|
|
}
|
|
};
|
|
|
|
fileInput.click();
|
|
};
|
|
|
|
const handleDeleteDocument = async (docId, cveId, vendor) => {
|
|
setPendingConfirm({
|
|
title: 'Delete Document',
|
|
message: 'Are you sure you want to delete this document?',
|
|
confirmText: 'Delete',
|
|
onConfirm: async () => {
|
|
setPendingConfirm(null);
|
|
try {
|
|
const response = await fetch(`${API_BASE}/documents/${docId}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to delete document');
|
|
|
|
alert('Document deleted successfully!');
|
|
const key = `${cveId}-${vendor}`;
|
|
delete cveDocuments[key];
|
|
await fetchDocuments(cveId, vendor);
|
|
fetchCVEs();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleEditCVE = (cve) => {
|
|
setEditingCVE(cve);
|
|
setEditForm({
|
|
cve_id: cve.cve_id,
|
|
vendor: cve.vendor,
|
|
severity: cve.severity,
|
|
description: cve.description || '',
|
|
published_date: cve.published_date || '',
|
|
status: cve.status || 'Open'
|
|
});
|
|
setEditNvdLoading(false);
|
|
setEditNvdError(null);
|
|
setEditNvdAutoFilled(false);
|
|
setShowEditCVE(true);
|
|
};
|
|
|
|
const handleEditCVESubmit = async (e) => {
|
|
e.preventDefault();
|
|
if (!editingCVE) return;
|
|
|
|
try {
|
|
const body = {};
|
|
if (editForm.cve_id !== editingCVE.cve_id) body.cve_id = editForm.cve_id;
|
|
if (editForm.vendor !== editingCVE.vendor) body.vendor = editForm.vendor;
|
|
if (editForm.severity !== editingCVE.severity) body.severity = editForm.severity;
|
|
if (editForm.description !== (editingCVE.description || '')) body.description = editForm.description;
|
|
if (editForm.published_date !== (editingCVE.published_date || '')) body.published_date = editForm.published_date;
|
|
if (editForm.status !== (editingCVE.status || 'Open')) body.status = editForm.status;
|
|
|
|
if (Object.keys(body).length === 0) {
|
|
alert('No changes detected.');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE}/cves/${editingCVE.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to update CVE');
|
|
}
|
|
|
|
alert('CVE updated successfully!');
|
|
setShowEditCVE(false);
|
|
setEditingCVE(null);
|
|
fetchCVEs();
|
|
fetchVendors();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const lookupNVDForEdit = async (cveId) => {
|
|
const trimmed = cveId.trim();
|
|
if (!/^CVE-\d{4}-\d{4,}$/.test(trimmed)) return;
|
|
|
|
setEditNvdLoading(true);
|
|
setEditNvdError(null);
|
|
setEditNvdAutoFilled(false);
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/nvd/lookup/${encodeURIComponent(trimmed)}`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'NVD lookup failed');
|
|
}
|
|
|
|
const data = await response.json();
|
|
setEditForm(prev => ({
|
|
...prev,
|
|
description: data.description || prev.description,
|
|
severity: data.severity || prev.severity,
|
|
published_date: data.published_date || prev.published_date
|
|
}));
|
|
setEditNvdAutoFilled(true);
|
|
} catch (err) {
|
|
setEditNvdError(err.message);
|
|
} finally {
|
|
setEditNvdLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteCVEEntry = async (cve) => {
|
|
setPendingConfirm({
|
|
title: 'Delete Vendor Entry',
|
|
message: `Are you sure you want to delete the "${cve.vendor}" entry for ${cve.cve_id}? This will also delete all associated documents.`,
|
|
confirmText: 'Delete',
|
|
onConfirm: async () => {
|
|
setPendingConfirm(null);
|
|
try {
|
|
const url = `${API_BASE}/cves/${cve.id}`;
|
|
console.log('DELETE request to:', url);
|
|
const response = await fetch(url, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const contentType = response.headers.get('content-type');
|
|
if (contentType && contentType.includes('application/json')) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to delete CVE entry');
|
|
} else {
|
|
throw new Error(`Server returned ${response.status} ${response.statusText}. Check API_BASE configuration.`);
|
|
}
|
|
}
|
|
|
|
alert(`Deleted ${cve.vendor} entry for ${cve.cve_id}`);
|
|
fetchCVEs();
|
|
fetchVendors();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleDeleteEntireCVE = async (cveId, vendorCount) => {
|
|
setPendingConfirm({
|
|
title: 'Delete Entire CVE',
|
|
message: `Are you sure you want to delete ALL ${vendorCount} vendor entries for ${cveId}? This will permanently remove all associated documents and files.`,
|
|
confirmText: 'Delete All',
|
|
onConfirm: async () => {
|
|
setPendingConfirm(null);
|
|
try {
|
|
const url = `${API_BASE}/cves/by-cve-id/${encodeURIComponent(cveId)}`;
|
|
console.log('DELETE request to:', url);
|
|
const response = await fetch(url, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const contentType = response.headers.get('content-type');
|
|
if (contentType && contentType.includes('application/json')) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to delete CVE');
|
|
} else {
|
|
throw new Error(`Server returned ${response.status} ${response.statusText}. Check API_BASE configuration.`);
|
|
}
|
|
}
|
|
|
|
alert(`Deleted all entries for ${cveId}`);
|
|
fetchCVEs();
|
|
fetchVendors();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleAddTicket = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch(`${API_BASE}/jira-tickets`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(ticketForm)
|
|
});
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to create ticket');
|
|
}
|
|
alert('JIRA ticket added successfully!');
|
|
setShowAddTicket(false);
|
|
setAddTicketContext(null);
|
|
setTicketForm({ cve_id: '', vendor: '', ticket_key: '', url: '', summary: '', status: 'Open' });
|
|
fetchJiraTickets();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const handleEditTicket = (ticket) => {
|
|
setEditingTicket(ticket);
|
|
setTicketForm({
|
|
cve_id: ticket.cve_id,
|
|
vendor: ticket.vendor,
|
|
ticket_key: ticket.ticket_key,
|
|
url: ticket.url || '',
|
|
summary: ticket.summary || '',
|
|
status: ticket.status
|
|
});
|
|
setShowEditTicket(true);
|
|
};
|
|
|
|
const handleUpdateTicket = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch(`${API_BASE}/jira-tickets/${editingTicket.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
ticket_key: ticketForm.ticket_key,
|
|
url: ticketForm.url,
|
|
summary: ticketForm.summary,
|
|
status: ticketForm.status
|
|
})
|
|
});
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to update ticket');
|
|
}
|
|
alert('JIRA ticket updated!');
|
|
setShowEditTicket(false);
|
|
setEditingTicket(null);
|
|
setTicketForm({ cve_id: '', vendor: '', ticket_key: '', url: '', summary: '', status: 'Open' });
|
|
fetchJiraTickets();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const handleDeleteTicket = async (ticket) => {
|
|
setPendingConfirm({
|
|
title: 'Delete Ticket',
|
|
message: `Delete ticket ${ticket.ticket_key}?`,
|
|
confirmText: 'Delete',
|
|
onConfirm: async () => {
|
|
setPendingConfirm(null);
|
|
try {
|
|
const response = await fetch(`${API_BASE}/jira-tickets/${ticket.id}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to delete ticket');
|
|
alert('Ticket deleted');
|
|
fetchJiraTickets();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const openAddTicketForCVE = (cve_id, vendor) => {
|
|
setAddTicketContext({ cve_id, vendor });
|
|
setTicketForm({ cve_id, vendor, ticket_key: '', url: '', summary: '', status: 'Open' });
|
|
setShowAddTicket(true);
|
|
};
|
|
|
|
// ========== ARCHER TICKET HANDLERS ==========
|
|
|
|
const handleAddArcherTicket = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch(`${API_BASE}/archer-tickets`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify(archerTicketForm)
|
|
});
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to create Archer ticket');
|
|
}
|
|
alert('Archer ticket added successfully!');
|
|
setShowAddArcherTicket(false);
|
|
setAddArcherTicketContext(null);
|
|
setArcherTicketForm({ exc_number: '', archer_url: '', status: 'Draft', cve_id: '', vendor: '' });
|
|
fetchArcherTickets();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const handleEditArcherTicket = (ticket) => {
|
|
setEditingArcherTicket(ticket);
|
|
setArcherTicketForm({
|
|
exc_number: ticket.exc_number,
|
|
archer_url: ticket.archer_url || '',
|
|
status: ticket.status,
|
|
cve_id: ticket.cve_id,
|
|
vendor: ticket.vendor
|
|
});
|
|
setShowEditArcherTicket(true);
|
|
};
|
|
|
|
const handleUpdateArcherTicket = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch(`${API_BASE}/archer-tickets/${editingArcherTicket.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'include',
|
|
body: JSON.stringify({
|
|
exc_number: archerTicketForm.exc_number,
|
|
archer_url: archerTicketForm.archer_url,
|
|
status: archerTicketForm.status
|
|
})
|
|
});
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || 'Failed to update Archer ticket');
|
|
}
|
|
alert('Archer ticket updated!');
|
|
setShowEditArcherTicket(false);
|
|
setEditingArcherTicket(null);
|
|
setArcherTicketForm({ exc_number: '', archer_url: '', status: 'Draft', cve_id: '', vendor: '' });
|
|
fetchArcherTickets();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const handleDeleteArcherTicket = async (ticket) => {
|
|
setPendingConfirm({
|
|
title: 'Delete Archer Ticket',
|
|
message: `Delete Archer ticket ${ticket.exc_number}?`,
|
|
confirmText: 'Delete',
|
|
onConfirm: async () => {
|
|
setPendingConfirm(null);
|
|
try {
|
|
const response = await fetch(`${API_BASE}/archer-tickets/${ticket.id}`, {
|
|
method: 'DELETE',
|
|
credentials: 'include'
|
|
});
|
|
if (!response.ok) throw new Error('Failed to delete Archer ticket');
|
|
alert('Archer ticket deleted');
|
|
fetchArcherTickets();
|
|
} catch (err) {
|
|
alert(`Error: ${err.message}`);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
|
|
const _openAddArcherTicketForCVE = (cve_id, vendor) => {
|
|
setAddArcherTicketContext({ cve_id, vendor });
|
|
setArcherTicketForm({ exc_number: '', archer_url: '', status: 'Draft', cve_id, vendor });
|
|
setShowAddArcherTicket(true);
|
|
};
|
|
|
|
// Fetch CVEs from API when authenticated
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
fetchCVEs();
|
|
fetchVendors();
|
|
fetchJiraTickets();
|
|
fetchArcherTickets();
|
|
fetchIvantiWorkflows();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isAuthenticated]);
|
|
|
|
// Refetch when filters change
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
fetchCVEs();
|
|
setVisibleCount(5);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [searchQuery, selectedVendor, selectedSeverity]);
|
|
|
|
// Show loading while checking auth
|
|
if (authLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Loader className="w-12 h-12 text-[#0476D9] mx-auto animate-spin" />
|
|
<p className="text-gray-600 mt-4">Loading...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Show login if not authenticated
|
|
if (!isAuthenticated) {
|
|
return <LoginForm />;
|
|
}
|
|
|
|
// Group CVEs by CVE ID
|
|
const groupedCVEs = cves.reduce((acc, cve) => {
|
|
if (!acc[cve.cve_id]) {
|
|
acc[cve.cve_id] = [];
|
|
}
|
|
acc[cve.cve_id].push(cve);
|
|
return acc;
|
|
}, {});
|
|
|
|
const filteredGroupedCVEs = groupedCVEs;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-intel-darkest grid-bg p-6 relative overflow-hidden fade-in">
|
|
<NavDrawer
|
|
isOpen={navOpen}
|
|
onClose={() => setNavOpen(false)}
|
|
currentPage={currentPage}
|
|
onNavigate={(page) => {
|
|
// Clear contextual filters when navigating directly via the nav drawer
|
|
if (page === 'triage') { setCalendarFilter(null); setReportingExcFilter(null); }
|
|
setCurrentPage(page);
|
|
}}
|
|
/>
|
|
{/* Scanning line effect */}
|
|
<div className="scan-line"></div>
|
|
|
|
<div className={`${currentPage === 'triage' ? 'w-full' : 'max-w-7xl mx-auto'} relative z-10`}>
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div className="flex items-center gap-4 flex-1">
|
|
<button
|
|
onClick={() => setNavOpen(true)}
|
|
style={{ background: 'none', border: '1px solid rgba(14, 165, 233, 0.25)', borderRadius: '0.375rem', padding: '0.5rem', cursor: 'pointer', color: '#64748B', flexShrink: 0 }}
|
|
onMouseEnter={e => { e.currentTarget.style.color = '#0EA5E9'; e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.6)'; }}
|
|
onMouseLeave={e => { e.currentTarget.style.color = '#64748B'; e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.25)'; }}
|
|
title="Navigation"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-4xl font-bold text-intel-accent mb-1 font-mono tracking-tight">
|
|
STEAM Security Dashboard
|
|
</h1>
|
|
<p className="text-gray-400 text-sm font-sans">NTS Threat Intelligence and Metric Aggregation</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => setShowNvdSync(true)}
|
|
className="intel-button intel-button-success relative z-10 flex items-center gap-2"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
NVD Sync
|
|
</button>
|
|
)}
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => setShowAddCVE(true)}
|
|
className="intel-button intel-button-primary relative z-10 flex items-center gap-2"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Add Entry
|
|
</button>
|
|
)}
|
|
<AdminScopeToggle />
|
|
<button
|
|
onClick={() => { setFeedbackType('bug'); setShowFeedback(true); }}
|
|
title="Report a Bug"
|
|
style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: '0.35rem',
|
|
padding: '0.4rem 0.7rem',
|
|
background: 'rgba(239,68,68,0.08)',
|
|
border: '1px solid rgba(239,68,68,0.25)',
|
|
borderRadius: '0.375rem',
|
|
color: '#94A3B8',
|
|
fontSize: '0.72rem',
|
|
fontFamily: "'JetBrains Mono', monospace",
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s',
|
|
}}
|
|
onMouseEnter={e => { e.currentTarget.style.color = '#F87171'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.5)'; }}
|
|
onMouseLeave={e => { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.borderColor = 'rgba(239,68,68,0.25)'; }}
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>
|
|
Bug
|
|
</button>
|
|
<NotificationBell />
|
|
<UserMenu onManageUsers={() => setShowUserManagement(true)} onAuditLog={() => setShowAuditLog(true)} onFeatureRequest={() => { setFeedbackType('feature'); setShowFeedback(true); }} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Bar - only shown on Home page */}
|
|
{currentPage === 'home' && <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div style={STYLES.statCard}>
|
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #0EA5E9, transparent)', boxShadow: '0 0 8px rgba(14, 165, 233, 0.5)' }}></div>
|
|
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Total CVEs</div>
|
|
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#0EA5E9', textShadow: '0 0 16px rgba(14, 165, 233, 0.4)' }}>{Object.keys(filteredGroupedCVEs).length}</div>
|
|
</div>
|
|
<div style={STYLES.statCard}>
|
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #0EA5E9, transparent)', boxShadow: '0 0 8px rgba(14, 165, 233, 0.5)' }}></div>
|
|
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Vendor Entries</div>
|
|
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#E2E8F0' }}>{cves.length}</div>
|
|
</div>
|
|
<div style={{...STYLES.statCard, border: '2px solid #F59E0B', boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(245, 158, 11, 0.15)'}}>
|
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #F59E0B, transparent)', boxShadow: '0 0 8px rgba(245, 158, 11, 0.5)' }}></div>
|
|
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Open Tickets</div>
|
|
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#F59E0B', textShadow: '0 0 16px rgba(245, 158, 11, 0.4)' }}>{jiraTickets.filter(t => t.status !== 'Closed').length}</div>
|
|
</div>
|
|
<div style={{...STYLES.statCard, border: '2px solid #EF4444', boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(239, 68, 68, 0.15)'}}>
|
|
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, #EF4444, transparent)', boxShadow: '0 0 8px rgba(239, 68, 68, 0.5)' }}></div>
|
|
<div style={{ fontSize: '0.75rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#CBD5E1', marginBottom: '0.25rem' }}>Critical</div>
|
|
<div style={{ fontSize: '1.5rem', fontWeight: '700', fontFamily: 'monospace', color: '#EF4444', textShadow: '0 0 16px rgba(239, 68, 68, 0.4)' }}>{cves.filter(c => c.severity === 'Critical').length}</div>
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
|
|
{/* Page content */}
|
|
{currentPage === 'triage' && <VulnerabilityTriagePage filterDate={calendarFilter} filterEXC={reportingExcFilter} />}
|
|
{currentPage === 'compliance' && <CompliancePage onNavigate={setCurrentPage} />}
|
|
{currentPage === 'ccp-metrics' && <CCPMetricsPage />}
|
|
{currentPage === 'knowledge-base' && <KnowledgeBasePage />}
|
|
{currentPage === 'exports' && <ExportsPage />}
|
|
{currentPage === 'jira' && <JiraPage />}
|
|
{currentPage === 'admin' && isAdmin() && <AdminPage />}
|
|
{currentPage === 'admin' && !isAdmin() && (() => { setCurrentPage('home'); return null; })()}
|
|
|
|
{/* User Management Modal */}
|
|
{showUserManagement && (
|
|
<UserManagement onClose={() => setShowUserManagement(false)} />
|
|
)}
|
|
|
|
{/* Audit Log Modal */}
|
|
{showAuditLog && (
|
|
<AuditLog onClose={() => setShowAuditLog(false)} />
|
|
)}
|
|
|
|
{/* NVD Sync Modal */}
|
|
{showNvdSync && (
|
|
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
|
|
)}
|
|
|
|
{/* Feedback Modal (Bug Report / Feature Request) */}
|
|
<FeedbackModal
|
|
isOpen={showFeedback}
|
|
onClose={() => setShowFeedback(false)}
|
|
defaultType={feedbackType}
|
|
currentPage={currentPage}
|
|
/>
|
|
|
|
{/* Add CVE Modal */}
|
|
{showAddCVE && (
|
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
|
<div className="intel-card rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border-intel-accent">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-2xl font-bold text-intel-accent font-mono">Add CVE Entry</h2>
|
|
<button
|
|
onClick={() => { setShowAddCVE(false); setNvdLoading(false); setNvdError(null); setNvdAutoFilled(false); }}
|
|
className="text-gray-400 hover:text-intel-accent transition-colors"
|
|
>
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-4 p-3 bg-intel-medium border border-intel-accent/30 rounded">
|
|
<p className="text-sm text-white">
|
|
<strong className="text-intel-accent">Tip:</strong> You can add the same CVE-ID multiple times with different vendors.
|
|
Each vendor will have its own documents folder.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleAddCVE} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
CVE ID *
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="CVE-2024-1234"
|
|
value={newCVE.cve_id}
|
|
onChange={(e) => { setNewCVE({...newCVE, cve_id: e.target.value.toUpperCase()}); setNvdAutoFilled(false); setNvdError(null); }}
|
|
onBlur={(e) => lookupNVD(e.target.value)}
|
|
className="intel-input w-full"
|
|
/>
|
|
{nvdLoading && (
|
|
<Loader className="absolute right-3 top-2.5 w-5 h-5 text-intel-accent animate-spin" />
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1">Can be the same as existing CVE if adding another vendor</p>
|
|
{nvdAutoFilled && (
|
|
<p className="text-xs text-intel-success mt-1 flex items-center gap-1">
|
|
<CheckCircle className="w-3 h-3" />
|
|
Auto-filled from NVD
|
|
</p>
|
|
)}
|
|
{nvdError && (
|
|
<p className="text-xs text-intel-warning mt-1 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{nvdError}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
Vendor *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="Microsoft, Cisco, Oracle, etc."
|
|
value={newCVE.vendor}
|
|
onChange={(e) => setNewCVE({...newCVE, vendor: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Must be unique for this CVE-ID</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
Severity *
|
|
</label>
|
|
<select
|
|
value={newCVE.severity}
|
|
onChange={(e) => setNewCVE({...newCVE, severity: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Critical">Critical</option>
|
|
<option value="High">High</option>
|
|
<option value="Medium">Medium</option>
|
|
<option value="Low">Low</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
Description *
|
|
</label>
|
|
<textarea
|
|
required
|
|
placeholder="Brief description of the vulnerability"
|
|
value={newCVE.description}
|
|
onChange={(e) => setNewCVE({...newCVE, description: e.target.value})}
|
|
rows={3}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
Published Date *
|
|
</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
value={newCVE.published_date}
|
|
onChange={(e) => setNewCVE({...newCVE, published_date: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="submit"
|
|
className="flex-1 intel-button intel-button-primary"
|
|
>
|
|
Add CVE Entry
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setShowAddCVE(false); setNvdLoading(false); setNvdError(null); setNvdAutoFilled(false); }}
|
|
className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit CVE Modal */}
|
|
{showEditCVE && editingCVE && (
|
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
|
<div className="intel-card rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto border-intel-accent">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-2xl font-bold text-intel-accent font-mono">Edit CVE Entry</h2>
|
|
<button
|
|
onClick={() => { setShowEditCVE(false); setEditingCVE(null); }}
|
|
className="text-gray-400 hover:text-intel-accent transition-colors"
|
|
>
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-4 p-3 bg-intel-medium border border-intel-warning/30 rounded">
|
|
<p className="text-sm text-white">
|
|
<strong className="text-intel-warning">Note:</strong> Changing CVE ID or Vendor will move associated documents to the new path.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleEditCVESubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">CVE ID *</label>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
required
|
|
value={editForm.cve_id}
|
|
onChange={(e) => { setEditForm({...editForm, cve_id: e.target.value.toUpperCase()}); setEditNvdAutoFilled(false); setEditNvdError(null); }}
|
|
className="intel-input w-full"
|
|
/>
|
|
{editNvdLoading && (
|
|
<Loader className="absolute right-3 top-2.5 w-5 h-5 text-intel-accent animate-spin" />
|
|
)}
|
|
</div>
|
|
{editNvdAutoFilled && (
|
|
<p className="text-xs text-intel-success mt-1 flex items-center gap-1">
|
|
<CheckCircle className="w-3 h-3" />
|
|
Updated from NVD
|
|
</p>
|
|
)}
|
|
{editNvdError && (
|
|
<p className="text-xs text-intel-warning mt-1 flex items-center gap-1">
|
|
<AlertCircle className="w-3 h-3" />
|
|
{editNvdError}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Vendor *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={editForm.vendor}
|
|
onChange={(e) => setEditForm({...editForm, vendor: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Severity *</label>
|
|
<select
|
|
value={editForm.severity}
|
|
onChange={(e) => setEditForm({...editForm, severity: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Critical">Critical</option>
|
|
<option value="High">High</option>
|
|
<option value="Medium">Medium</option>
|
|
<option value="Low">Low</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Description *</label>
|
|
<textarea
|
|
required
|
|
value={editForm.description}
|
|
onChange={(e) => setEditForm({...editForm, description: e.target.value})}
|
|
rows={3}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Published Date *</label>
|
|
<input
|
|
type="date"
|
|
required
|
|
value={editForm.published_date}
|
|
onChange={(e) => setEditForm({...editForm, published_date: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Status *</label>
|
|
<select
|
|
value={editForm.status}
|
|
onChange={(e) => setEditForm({...editForm, status: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Open">Open</option>
|
|
<option value="Addressed">Addressed</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Resolved">Resolved</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => lookupNVDForEdit(editForm.cve_id)}
|
|
disabled={editNvdLoading}
|
|
className="intel-button intel-button-success flex items-center gap-2 disabled:opacity-50"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${editNvdLoading ? 'animate-spin' : ''}`} />
|
|
NVD Update
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 intel-button intel-button-primary"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setShowEditCVE(false); setEditingCVE(null); }}
|
|
className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add JIRA Ticket Modal */}
|
|
{showAddTicket && (
|
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
|
<div className="intel-card rounded-lg shadow-2xl max-w-md w-full border-intel-warning">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-bold text-intel-warning font-mono">Add JIRA Ticket</h2>
|
|
<button onClick={() => { setShowAddTicket(false); setAddTicketContext(null); }} className="text-gray-400 hover:text-intel-accent transition-colors">
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleAddTicket} className="space-y-4">
|
|
{!addTicketContext && (
|
|
<>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">CVE ID *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="CVE-2024-1234"
|
|
value={ticketForm.cve_id}
|
|
onChange={(e) => setTicketForm({...ticketForm, cve_id: e.target.value.toUpperCase()})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Vendor *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="Cisco"
|
|
value={ticketForm.vendor}
|
|
onChange={(e) => setTicketForm({...ticketForm, vendor: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{addTicketContext && (
|
|
<div className="p-3 bg-intel-medium border border-intel-warning/30 rounded text-sm text-white">
|
|
Adding ticket for <strong className="text-intel-warning">{addTicketContext.cve_id}</strong> / <strong className="text-intel-warning">{addTicketContext.vendor}</strong>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Ticket Key *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="VULN-1234"
|
|
value={ticketForm.ticket_key}
|
|
onChange={(e) => setTicketForm({...ticketForm, ticket_key: e.target.value.toUpperCase()})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">JIRA URL</label>
|
|
<input
|
|
type="url"
|
|
placeholder="https://jira.company.com/browse/VULN-1234"
|
|
value={ticketForm.url}
|
|
onChange={(e) => setTicketForm({...ticketForm, url: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Summary</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Brief description"
|
|
value={ticketForm.summary}
|
|
onChange={(e) => setTicketForm({...ticketForm, summary: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Status</label>
|
|
<select
|
|
value={ticketForm.status}
|
|
onChange={(e) => setTicketForm({...ticketForm, status: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Open">Open</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-3 pt-4">
|
|
<button type="submit" className="flex-1 intel-button intel-button-primary">
|
|
Add Ticket
|
|
</button>
|
|
<button type="button" onClick={() => { setShowAddTicket(false); setAddTicketContext(null); }} className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit JIRA Ticket Modal */}
|
|
{showEditTicket && editingTicket && (
|
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
|
<div className="intel-card rounded-lg shadow-2xl max-w-md w-full border-intel-warning">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-bold text-intel-warning font-mono">Edit JIRA Ticket</h2>
|
|
<button onClick={() => { setShowEditTicket(false); setEditingTicket(null); }} className="text-gray-400 hover:text-intel-accent transition-colors">
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<div className="p-3 bg-intel-medium rounded text-sm text-white mb-4 font-mono">
|
|
{editingTicket.cve_id} / {editingTicket.vendor}
|
|
</div>
|
|
<form onSubmit={handleUpdateTicket} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Ticket Key *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={ticketForm.ticket_key}
|
|
onChange={(e) => setTicketForm({...ticketForm, ticket_key: e.target.value.toUpperCase()})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">JIRA URL</label>
|
|
<input
|
|
type="url"
|
|
value={ticketForm.url}
|
|
onChange={(e) => setTicketForm({...ticketForm, url: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Summary</label>
|
|
<input
|
|
type="text"
|
|
value={ticketForm.summary}
|
|
onChange={(e) => setTicketForm({...ticketForm, summary: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Status</label>
|
|
<select
|
|
value={ticketForm.status}
|
|
onChange={(e) => setTicketForm({...ticketForm, status: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Open">Open</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-3 pt-4">
|
|
<button type="submit" className="flex-1 intel-button intel-button-primary">
|
|
Save Changes
|
|
</button>
|
|
<button type="button" onClick={() => { setShowEditTicket(false); setEditingTicket(null); }} className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Archer Ticket Modal */}
|
|
{showAddArcherTicket && (
|
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
|
<div className="intel-card rounded-lg shadow-2xl max-w-md w-full border-purple-500">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-bold text-purple-400 font-mono">Add Archer Risk Ticket</h2>
|
|
<button onClick={() => { setShowAddArcherTicket(false); setAddArcherTicketContext(null); }} className="text-gray-400 hover:text-intel-accent transition-colors">
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleAddArcherTicket} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">EXC Number *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="EXC-5754"
|
|
value={archerTicketForm.exc_number}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, exc_number: e.target.value.toUpperCase()})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Archer URL</label>
|
|
<input
|
|
type="url"
|
|
placeholder="https://archer.example.com/..."
|
|
value={archerTicketForm.archer_url}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, archer_url: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">CVE ID *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="CVE-2024-1234"
|
|
value={archerTicketForm.cve_id}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, cve_id: e.target.value.toUpperCase()})}
|
|
className="intel-input w-full"
|
|
readOnly={!!addArcherTicketContext}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Vendor *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="Vendor name"
|
|
value={archerTicketForm.vendor}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, vendor: e.target.value})}
|
|
className="intel-input w-full"
|
|
readOnly={!!addArcherTicketContext}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Status</label>
|
|
<select
|
|
value={archerTicketForm.status}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, status: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Draft">Draft</option>
|
|
<option value="Open">Open</option>
|
|
<option value="Under Review">Under Review</option>
|
|
<option value="Accepted">Accepted</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-3 pt-4">
|
|
<button type="submit" className="flex-1 intel-button intel-button-primary">
|
|
Create Ticket
|
|
</button>
|
|
<button type="button" onClick={() => { setShowAddArcherTicket(false); setAddArcherTicketContext(null); }} className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Archer Ticket Modal */}
|
|
{showEditArcherTicket && editingArcherTicket && (
|
|
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
|
|
<div className="intel-card rounded-lg shadow-2xl max-w-md w-full border-purple-500">
|
|
<div className="p-6">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-bold text-purple-400 font-mono">Edit Archer Risk Ticket</h2>
|
|
<button onClick={() => { setShowEditArcherTicket(false); setEditingArcherTicket(null); }} className="text-gray-400 hover:text-intel-accent transition-colors">
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<div className="p-3 bg-intel-medium rounded text-sm text-white mb-4 font-mono">
|
|
{editingArcherTicket.cve_id} / {editingArcherTicket.vendor}
|
|
</div>
|
|
<form onSubmit={handleUpdateArcherTicket} className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">EXC Number *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={archerTicketForm.exc_number}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, exc_number: e.target.value.toUpperCase()})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Archer URL</label>
|
|
<input
|
|
type="url"
|
|
value={archerTicketForm.archer_url}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, archer_url: e.target.value})}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">Status</label>
|
|
<select
|
|
value={archerTicketForm.status}
|
|
onChange={(e) => setArcherTicketForm({...archerTicketForm, status: e.target.value})}
|
|
className="intel-input w-full"
|
|
>
|
|
<option value="Draft">Draft</option>
|
|
<option value="Open">Open</option>
|
|
<option value="Under Review">Under Review</option>
|
|
<option value="Accepted">Accepted</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex gap-3 pt-4">
|
|
<button type="submit" className="flex-1 intel-button intel-button-primary">
|
|
Save Changes
|
|
</button>
|
|
<button type="button" onClick={() => { setShowEditArcherTicket(false); setEditingArcherTicket(null); }} className="px-4 py-2 bg-intel-dark text-gray-400 rounded border border-gray-600 hover:bg-intel-medium transition-colors font-mono text-sm uppercase tracking-wider">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Two Column Layout - Home page only */}
|
|
{currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
|
|
{/* CENTER PANEL - Main Content */}
|
|
<div className="col-span-12 lg:col-span-9 space-y-4">
|
|
<>
|
|
{/* Quick Check */}
|
|
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
|
|
<div className="scan-line"></div>
|
|
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#0EA5E9', marginBottom: '0.75rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 16px rgba(14, 165, 233, 0.4)' }}>Quick CVE Lookup</h2>
|
|
<div className="flex gap-3">
|
|
<input
|
|
type="text"
|
|
placeholder="Enter CVE ID (e.g., CVE-2024-1234)"
|
|
value={quickCheckCVE}
|
|
onChange={(e) => setQuickCheckCVE(e.target.value)}
|
|
onKeyPress={(e) => e.key === 'Enter' && quickCheckCVEStatus()}
|
|
className="flex-1 intel-input"
|
|
/>
|
|
<button
|
|
onClick={quickCheckCVEStatus}
|
|
className="intel-button intel-button-primary"
|
|
>
|
|
Scan
|
|
</button>
|
|
</div>
|
|
|
|
{quickCheckResult && (
|
|
<div className={`mt-4 p-4 rounded border ${quickCheckResult.exists ? 'bg-intel-success/10 border-intel-success/30' : 'bg-intel-warning/10 border-intel-warning/30'}`}>
|
|
{quickCheckResult.error ? (
|
|
<div className="flex items-start gap-3">
|
|
<XCircle className="w-5 h-5 text-intel-danger mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-intel-danger font-mono">Error</p>
|
|
<p className="text-sm text-gray-300">{quickCheckResult.error}</p>
|
|
</div>
|
|
</div>
|
|
) : quickCheckResult.exists ? (
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-intel-success mt-0.5" />
|
|
<div className="flex-1">
|
|
<p className="font-medium text-intel-success font-mono">✓ CVE Addressed ({quickCheckResult.vendors.length} vendor{quickCheckResult.vendors.length > 1 ? 's' : ''})</p>
|
|
<div className="mt-3 space-y-3">
|
|
{quickCheckResult.vendors.map((vendorInfo, idx) => (
|
|
<div key={idx} className="p-3 bg-intel-dark/70 rounded border border-intel-accent/30 shadow-lg">
|
|
<p className="font-semibold text-white mb-2 font-sans">{vendorInfo.vendor}</p>
|
|
<div className="grid grid-cols-2 gap-2 text-sm text-gray-300 mb-2 font-mono">
|
|
<p><strong className="text-white">Severity:</strong> {vendorInfo.severity}</p>
|
|
<p><strong className="text-white">Status:</strong> {vendorInfo.status}</p>
|
|
<p><strong className="text-white">Documents:</strong> {vendorInfo.total_documents} attached</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-start gap-3">
|
|
<AlertCircle className="w-5 h-5 text-intel-warning mt-0.5" />
|
|
<div>
|
|
<p className="font-medium text-intel-warning font-mono">Not Found</p>
|
|
<p className="text-sm text-gray-300">This CVE has not been addressed yet. No entry exists in the database.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
<Search className="inline w-4 h-4 mr-1" />
|
|
Search CVEs
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="CVE ID or description..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="intel-input w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
<Filter className="inline w-4 h-4 mr-1" />
|
|
Vendor
|
|
</label>
|
|
<select
|
|
value={selectedVendor}
|
|
onChange={(e) => setSelectedVendor(e.target.value)}
|
|
className="intel-input w-full"
|
|
>
|
|
{vendors.map(vendor => (
|
|
<option key={vendor} value={vendor}>{vendor}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
|
|
<AlertCircle className="inline w-4 h-4 mr-1" />
|
|
Severity
|
|
</label>
|
|
<select
|
|
value={selectedSeverity}
|
|
onChange={(e) => setSelectedSeverity(e.target.value)}
|
|
className="intel-input w-full"
|
|
>
|
|
{severityLevels.map(level => (
|
|
<option key={level} value={level}>{level}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Results Summary */}
|
|
<div className="flex justify-between items-center">
|
|
<p className="text-gray-400 font-mono text-sm">
|
|
<span className="text-intel-accent font-bold">{Object.keys(filteredGroupedCVEs).length}</span> CVE{Object.keys(filteredGroupedCVEs).length !== 1 ? 's' : ''}
|
|
<span className="text-gray-500 mx-2">•</span>
|
|
<span className="text-gray-300">{cves.length}</span> vendor entr{cves.length !== 1 ? 'ies' : 'y'}
|
|
</p>
|
|
{selectedDocuments.length > 0 && canExport() && (
|
|
<button
|
|
onClick={exportSelectedDocuments}
|
|
className="intel-button intel-button-primary flex items-center gap-2"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
Export {selectedDocuments.length} Doc{selectedDocuments.length !== 1 ? 's' : ''}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* CVE List - Grouped by CVE ID */}
|
|
{loading ? (
|
|
<div className="intel-card rounded-lg p-12 text-center">
|
|
<div className="loading-spinner w-12 h-12 mx-auto mb-4"></div>
|
|
<p className="text-gray-400 font-mono text-sm uppercase tracking-wider">Scanning Vulnerabilities...</p>
|
|
</div>
|
|
) : error ? (
|
|
<div className="intel-card rounded-lg p-12 text-center border-intel-danger">
|
|
<XCircle className="w-12 h-12 text-intel-danger mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-200 mb-2 font-mono">Error Loading CVEs</h3>
|
|
<p className="text-gray-400 mb-4">{error}</p>
|
|
<button
|
|
onClick={fetchCVEs}
|
|
className="intel-button intel-button-primary"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{Object.entries(filteredGroupedCVEs).slice(0, visibleCount).map(([cveId, vendorEntries]) => {
|
|
const isCVEExpanded = expandedCVEs[cveId];
|
|
const severityOrder = { 'Critical': 0, 'High': 1, 'Medium': 2, 'Low': 3 };
|
|
const highestSeverity = vendorEntries.reduce((highest, entry) => {
|
|
const currentOrder = severityOrder[entry.severity] ?? 4;
|
|
const highestOrder = severityOrder[highest] ?? 4;
|
|
return currentOrder < highestOrder ? entry.severity : highest;
|
|
}, vendorEntries[0].severity);
|
|
const totalDocCount = vendorEntries.reduce((sum, entry) => sum + (entry.document_count || 0), 0);
|
|
const overallStatuses = [...new Set(vendorEntries.map(e => e.status))];
|
|
|
|
return (
|
|
<div key={cveId} style={STYLES.intelCard} className="rounded-lg">
|
|
{/* Clickable CVE Header */}
|
|
<div
|
|
style={{ padding: '1.5rem', cursor: 'pointer', transition: 'all 0.2s', userSelect: 'none' }}
|
|
onClick={() => toggleCVEExpand(cveId)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<ChevronDown
|
|
className={`w-5 h-5 text-intel-accent transition-transform duration-200 flex-shrink-0 ${isCVEExpanded ? 'rotate-0' : '-rotate-90'}`}
|
|
/>
|
|
<h3 className="text-2xl font-bold text-intel-accent font-mono tracking-tight">{cveId}</h3>
|
|
</div>
|
|
|
|
{/* Collapsed: truncated description + summary row */}
|
|
{!isCVEExpanded && (
|
|
<div className="ml-8">
|
|
<p style={{ color: '#E4E8F1', fontSize: '0.875rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: '0.5rem' }}>{vendorEntries[0].description}</p>
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<span style={getSeverityBadgeStyle(highestSeverity)}>
|
|
<span style={STYLES.glowDot(getSeverityDotColor(highestSeverity))}></span>
|
|
{highestSeverity}
|
|
</span>
|
|
<span style={{ fontSize: '0.75rem', color: '#E4E8F1', fontFamily: 'monospace' }}>{vendorEntries.length} vendor{vendorEntries.length > 1 ? 's' : ''}</span>
|
|
<span style={{ fontSize: '0.75rem', color: '#E4E8F1', fontFamily: 'monospace', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
|
<FileText className="w-3 h-3" />
|
|
{totalDocCount} doc{totalDocCount !== 1 ? 's' : ''}
|
|
</span>
|
|
<span style={{ fontSize: '0.75rem', color: '#E4E8F1', fontFamily: 'monospace' }}>
|
|
{overallStatuses.join(', ')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Expanded: full description + metadata */}
|
|
{isCVEExpanded && (
|
|
<div className="ml-8">
|
|
<p className="text-white mb-3">{vendorEntries[0].description}</p>
|
|
<div className="flex items-center gap-2 text-sm text-gray-300 font-mono">
|
|
<span>Published: {vendorEntries[0].published_date}</span>
|
|
<span className="text-intel-accent">•</span>
|
|
<span>{vendorEntries.length} affected vendor{vendorEntries.length > 1 ? 's' : ''}</span>
|
|
{isAdmin() && vendorEntries.length >= 2 && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleDeleteEntireCVE(cveId, vendorEntries.length); }}
|
|
className="ml-2 px-3 py-1 text-xs intel-button intel-button-danger flex items-center gap-1"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
Delete All
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Expanded: Vendor Entries */}
|
|
{isCVEExpanded && (
|
|
<div className="px-6 pb-6">
|
|
<div className="space-y-3">
|
|
{vendorEntries.map((cve) => {
|
|
const key = `${cve.cve_id}-${cve.vendor}`;
|
|
const documents = cveDocuments[key] || [];
|
|
const isDocExpanded = selectedCVE === cve.cve_id && selectedVendorView === cve.vendor;
|
|
|
|
return (
|
|
<div key={cve.id} style={STYLES.vendorCard}>
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h4 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#FFFFFF' }}>{cve.vendor}</h4>
|
|
<span style={getSeverityBadgeStyle(cve.severity)}>
|
|
<span style={STYLES.glowDot(getSeverityDotColor(cve.severity))}></span>
|
|
{cve.severity}
|
|
</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', fontSize: '0.875rem', color: '#E4E8F1', fontFamily: 'monospace' }}>
|
|
<span>Status: <span style={{ fontWeight: '500', color: '#FFFFFF' }}>{cve.status}</span></span>
|
|
<span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
|
<FileText className="w-4 h-4" />
|
|
{cve.document_count} doc{cve.document_count !== 1 ? 's' : ''}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => handleViewDocuments(cve.cve_id, cve.vendor)}
|
|
className="px-4 py-2 text-intel-accent hover:bg-intel-medium rounded border border-intel-accent/50 transition-all flex items-center gap-2 font-mono text-xs uppercase tracking-wider"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
{isDocExpanded ? 'Hide' : 'View'}
|
|
</button>
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => handleEditCVE(cve)}
|
|
className="px-3 py-2 text-intel-warning hover:bg-intel-medium rounded border border-intel-warning/50 transition-all flex items-center gap-1"
|
|
title="Edit CVE entry"
|
|
>
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
{canDelete(cve) && (
|
|
<button
|
|
onClick={() => handleDeleteCVEEntry(cve)}
|
|
className="px-3 py-2 text-intel-danger hover:bg-intel-medium rounded border border-intel-danger/50 transition-all flex items-center gap-1"
|
|
title="Delete this vendor entry"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Documents Section */}
|
|
{isDocExpanded && (
|
|
<div className="mt-4 pt-4 border-t border-intel-accent/30">
|
|
<h5 className="text-sm font-semibold text-white mb-3 flex items-center gap-2 font-mono uppercase tracking-wider">
|
|
<FileText className="w-4 h-4 text-intel-accent" />
|
|
Documents ({documents.length})
|
|
</h5>
|
|
{documents.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{documents.map(doc => (
|
|
<div
|
|
key={doc.id}
|
|
className="document-item flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedDocuments.includes(doc.id)}
|
|
onChange={() => toggleDocumentSelection(doc.id)}
|
|
className="w-4 h-4 text-intel-accent rounded focus:ring-2 focus:ring-intel-accent bg-intel-dark border-intel-accent/50"
|
|
/>
|
|
<FileText className="w-5 h-5 text-intel-accent" />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-white font-mono">{doc.name}</p>
|
|
<p className="text-xs text-gray-300 capitalize font-mono">
|
|
{doc.type} <span className="text-intel-accent">•</span> {doc.file_size}
|
|
{doc.notes && <span> <span className="text-intel-accent">•</span> {doc.notes}</span>}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<a
|
|
href={`/${doc.file_path}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="px-3 py-1 text-sm text-intel-accent hover:bg-intel-medium rounded transition-all border border-intel-accent/50 font-mono uppercase tracking-wider"
|
|
>
|
|
View
|
|
</a>
|
|
{isAdmin() && (
|
|
<button
|
|
onClick={() => handleDeleteDocument(doc.id, cve.cve_id, cve.vendor)}
|
|
className="px-3 py-1 text-sm text-intel-danger hover:bg-intel-medium rounded transition-all border border-intel-danger/50 flex items-center gap-1 font-mono uppercase tracking-wider"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
Del
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-400 italic font-mono">No documents attached</p>
|
|
)}
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => handleFileUpload(cve.cve_id, cve.vendor)}
|
|
disabled={uploadingFile}
|
|
className="mt-3 px-4 py-2 text-sm text-gray-400 hover:text-intel-accent hover:bg-intel-medium rounded transition-all flex items-center gap-2 disabled:opacity-50 border border-gray-600 font-mono uppercase tracking-wider"
|
|
>
|
|
<Upload className="w-4 h-4" />
|
|
{uploadingFile ? 'Uploading...' : 'Upload Doc'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* JIRA Tickets for this vendor */}
|
|
{(() => {
|
|
const vendorTickets = jiraTickets.filter(t => t.cve_id === cve.cve_id && t.vendor === cve.vendor);
|
|
return vendorTickets.length > 0 || canWrite() ? (
|
|
<div className="mt-4 pt-4 border-t border-intel-warning/30">
|
|
<div className="flex justify-between items-center mb-3">
|
|
<h5 className="text-sm font-semibold text-white flex items-center gap-2 font-mono uppercase tracking-wider">
|
|
<AlertCircle className="w-4 h-4 text-intel-warning" />
|
|
JIRA Tickets ({vendorTickets.length})
|
|
</h5>
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => openAddTicketForCVE(cve.cve_id, cve.vendor)}
|
|
className="text-xs px-3 py-1 intel-button intel-button-primary flex items-center gap-1"
|
|
>
|
|
<Plus className="w-3 h-3" />
|
|
Add Ticket
|
|
</button>
|
|
)}
|
|
</div>
|
|
{vendorTickets.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{vendorTickets.map(ticket => (
|
|
<div key={ticket.id} style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(255, 184, 0, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04)' }} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<a
|
|
href={ticket.url || '#'}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-mono text-sm font-semibold text-intel-accent hover:text-intel-warning transition-colors"
|
|
>
|
|
{ticket.ticket_key}
|
|
</a>
|
|
{ticket.summary && <span style={{ fontSize: '0.875rem', color: '#E4E8F1', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '20rem' }}>{ticket.summary}</span>}
|
|
<span style={
|
|
ticket.status === 'Open' ? STYLES.badgeCritical :
|
|
ticket.status === 'In Progress' ? STYLES.badgeHigh :
|
|
STYLES.badgeLow
|
|
}>
|
|
<span style={STYLES.glowDot(
|
|
ticket.status === 'Open' ? '#FF3366' :
|
|
ticket.status === 'In Progress' ? '#FFB800' :
|
|
'#00FF88'
|
|
)}></span>
|
|
{ticket.status}
|
|
</span>
|
|
</div>
|
|
{canWrite() && (
|
|
<div className="flex gap-2">
|
|
<button onClick={() => handleEditTicket(ticket)} className="p-1 text-gray-400 hover:text-intel-warning transition-colors">
|
|
<Edit2 className="w-4 h-4" />
|
|
</button>
|
|
{canDelete(ticket) && (
|
|
<button onClick={() => handleDeleteTicket(ticket)} className="p-1 text-gray-400 hover:text-intel-danger transition-colors">
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-gray-400 italic font-mono">No JIRA tickets linked</p>
|
|
)}
|
|
</div>
|
|
) : null;
|
|
})()}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
{/* Show more / pagination footer */}
|
|
{Object.keys(filteredGroupedCVEs).length > visibleCount && (
|
|
<div className="flex items-center justify-between pt-2">
|
|
<span className="text-gray-500 font-mono text-xs">
|
|
Showing {visibleCount} of {Object.keys(filteredGroupedCVEs).length} CVEs
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setVisibleCount(v => v + 5)}
|
|
className="intel-button intel-button-primary text-xs px-3 py-1"
|
|
>
|
|
Show 5 more
|
|
</button>
|
|
<button
|
|
onClick={() => setVisibleCount(Object.keys(filteredGroupedCVEs).length)}
|
|
className="intel-button text-xs px-3 py-1"
|
|
style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#94A3B8' }}
|
|
>
|
|
Show all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{visibleCount > 5 && Object.keys(filteredGroupedCVEs).length <= visibleCount && Object.keys(filteredGroupedCVEs).length > 5 && (
|
|
<div className="flex justify-end pt-2">
|
|
<button
|
|
onClick={() => setVisibleCount(5)}
|
|
className="intel-button text-xs px-3 py-1"
|
|
style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#94A3B8' }}
|
|
>
|
|
Collapse
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{Object.keys(filteredGroupedCVEs).length === 0 && !loading && (
|
|
<div className="intel-card rounded-lg p-12 text-center">
|
|
<AlertCircle className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-white mb-2 font-mono">No CVEs Found</h3>
|
|
<p className="text-gray-300">Try adjusting your search criteria or filters</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
</div>
|
|
{/* End Center Panel */}
|
|
|
|
{/* RIGHT PANEL - Calendar & Open Tickets */}
|
|
<div className="col-span-12 lg:col-span-3 space-y-4">
|
|
{/* Calendar Widget */}
|
|
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #0EA5E9'}} className="rounded-lg">
|
|
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#0EA5E9', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(14, 165, 233, 0.4)' }}>
|
|
Calendar
|
|
</h2>
|
|
|
|
<CalendarWidget
|
|
onDateClick={(dateStr) => {
|
|
setCalendarFilter(dateStr);
|
|
setCurrentPage('triage');
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Open Vendor Tickets */}
|
|
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #F59E0B'}} className="rounded-lg">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#F59E0B', display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(245, 158, 11, 0.4)' }}>
|
|
<AlertCircle className="w-5 h-5" />
|
|
Open Tickets
|
|
</h2>
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => { setAddTicketContext(null); setTicketForm({ cve_id: '', vendor: '', ticket_key: '', url: '', summary: '', status: 'Open' }); setShowAddTicket(true); }}
|
|
className="intel-button intel-button-primary flex items-center gap-1 text-xs px-2 py-1"
|
|
>
|
|
<Plus className="w-3 h-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="text-center mb-3">
|
|
<div style={{ fontSize: '2rem', fontWeight: '700', fontFamily: 'monospace', color: '#F59E0B', textShadow: '0 0 16px rgba(245, 158, 11, 0.4)' }}>
|
|
{jiraTickets.filter(t => t.status !== 'Closed').length}
|
|
</div>
|
|
<div className="text-xs text-gray-400 uppercase tracking-wider">Active</div>
|
|
</div>
|
|
<div className="space-y-2 max-h-96 overflow-y-auto">
|
|
{jiraTickets.filter(t => t.status !== 'Closed').slice(0, 10).map(ticket => (
|
|
<div key={ticket.id} style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(245, 158, 11, 0.25)', borderRadius: '0.375rem', padding: '0.5rem', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03)' }}>
|
|
<div className="flex items-start justify-between gap-2 mb-1">
|
|
<a
|
|
href={ticket.url || '#'}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-mono text-xs font-semibold text-intel-accent hover:text-intel-warning transition-colors"
|
|
>
|
|
{ticket.ticket_key}
|
|
</a>
|
|
{canWrite() && (
|
|
<div className="flex gap-1">
|
|
<button onClick={() => handleEditTicket(ticket)} className="text-gray-400 hover:text-intel-warning transition-colors">
|
|
<Edit2 className="w-3 h-3" />
|
|
</button>
|
|
{canDelete(ticket) && (
|
|
<button onClick={() => handleDeleteTicket(ticket)} className="text-gray-400 hover:text-intel-danger transition-colors">
|
|
<Trash2 className="w-3 h-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-white font-mono mb-1">{ticket.cve_id}</div>
|
|
<div className="text-xs text-gray-400">{ticket.vendor}</div>
|
|
{ticket.summary && <div className="text-xs text-gray-300 mt-1 truncate">{ticket.summary}</div>}
|
|
<div className="mt-2">
|
|
<span style={{ ...STYLES.badgeHigh, fontSize: '0.65rem', padding: '0.25rem 0.5rem' }}>
|
|
<span style={{...STYLES.glowDot('#F59E0B'), width: '6px', height: '6px'}}></span>
|
|
{ticket.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{jiraTickets.filter(t => t.status !== 'Closed').length === 0 && (
|
|
<div className="text-center py-8">
|
|
<CheckCircle className="w-8 h-8 text-intel-success mx-auto mb-2" />
|
|
<p className="text-sm text-gray-400 italic font-mono">No open tickets</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Archer Risk Acceptance Tickets */}
|
|
<ArcherPage
|
|
archerTickets={archerTickets}
|
|
onEditTicket={handleEditArcherTicket}
|
|
onDeleteTicket={handleDeleteArcherTicket}
|
|
onFilterByExc={(exc) => { setReportingExcFilter(exc); setCurrentPage('triage'); }}
|
|
onAddTicket={() => { setAddArcherTicketContext(null); setArcherTicketForm({ exc_number: '', archer_url: '', status: 'Draft', cve_id: '', vendor: '' }); setShowAddArcherTicket(true); }}
|
|
canDeleteTicket={canDelete}
|
|
/>
|
|
|
|
{/* Ivanti Workflows */}
|
|
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #0D9488'}} className="rounded-lg">
|
|
<div className="flex justify-between items-center mb-1">
|
|
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#0D9488', display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(13, 148, 136, 0.4)' }}>
|
|
<Activity className="w-5 h-5" />
|
|
Ivanti Workflows
|
|
</h2>
|
|
{canWrite() && (
|
|
<button
|
|
onClick={syncIvantiWorkflows}
|
|
disabled={ivantiSyncing || ivantiLoading}
|
|
className="intel-button intel-button-primary flex items-center gap-1 text-xs px-2 py-1"
|
|
title="Sync now"
|
|
>
|
|
<RefreshCw className={`w-3 h-3 ${ivantiSyncing ? 'animate-spin' : ''}`} />
|
|
{ivantiSyncing ? 'Syncing…' : 'Sync'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Last synced line */}
|
|
<div className="text-xs text-gray-500 font-mono mb-4">
|
|
{ivantiSyncedAt
|
|
? `Synced ${new Date(ivantiSyncedAt).toLocaleString()}`
|
|
: 'Never synced'}
|
|
</div>
|
|
|
|
{/* Archive Summary Bar */}
|
|
<ArchiveSummaryBar onStateClick={handleArchiveStateClick} activeFilter={archiveFilter} refreshKey={archiveRefreshKey} teamsParam={getActiveTeamsParam()} />
|
|
|
|
{/* Archive list — shown when a state card is clicked */}
|
|
{archiveFilter && (
|
|
<div style={{ marginBottom: '1rem' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
|
|
<span style={{ fontFamily: 'monospace', fontSize: '0.75rem', color: '#94A3B8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
|
{archiveFilter} findings
|
|
</span>
|
|
<button
|
|
onClick={() => { setArchiveFilter(null); setArchiveList([]); }}
|
|
style={{ background: 'none', border: 'none', color: '#94A3B8', cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.7rem' }}
|
|
>
|
|
✕ Clear
|
|
</button>
|
|
</div>
|
|
{archiveListLoading ? (
|
|
<div style={{ textAlign: 'center', padding: '1rem', color: '#94A3B8', fontFamily: 'monospace', fontSize: '0.75rem' }}>Loading…</div>
|
|
) : archiveList.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: '1rem', color: '#64748B', fontFamily: 'monospace', fontSize: '0.72rem', border: '1px dashed rgba(100, 116, 139, 0.3)', borderRadius: '0.375rem' }}>
|
|
No {archiveFilter.toLowerCase()} findings
|
|
</div>
|
|
) : (
|
|
<div style={{ maxHeight: '240px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '0.375rem' }}>
|
|
{archiveList.map((a) => (
|
|
<div key={a.id} style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(51, 65, 85, 0.75))', border: '1px solid rgba(100, 116, 139, 0.25)', borderLeft: a.related_active ? '3px solid #F59E0B' : '3px solid #10B981', borderRadius: '0.375rem', padding: '0.5rem' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: '0.5rem', marginBottom: '0.25rem' }}>
|
|
<div style={{ display: 'flex', alignItems: 'start', gap: '0.375rem', flex: 1, minWidth: 0 }}>
|
|
{a.related_active ? (
|
|
<AlertTriangle style={{ width: '13px', height: '13px', color: '#F59E0B', flexShrink: 0, marginTop: '1px' }} />
|
|
) : (
|
|
<CheckCircle style={{ width: '13px', height: '13px', color: '#10B981', flexShrink: 0, marginTop: '1px' }} />
|
|
)}
|
|
<div style={{ minWidth: 0 }}>
|
|
<span style={{ fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600', color: '#E2E8F0', display: 'block' }}>{a.finding_title || a.finding_id}</span>
|
|
{a.finding_id && (
|
|
<span
|
|
title={a.finding_id}
|
|
style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#64748B', display: 'block', marginTop: '0.1rem' }}
|
|
>
|
|
{a.finding_id.length > 20 ? a.finding_id.slice(0, 20) + '…' : a.finding_id}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span style={{ fontFamily: 'monospace', fontSize: '0.55rem', padding: '0.15rem 0.35rem', borderRadius: '0.25rem', background: 'rgba(100, 116, 139, 0.2)', border: '1px solid rgba(100, 116, 139, 0.4)', color: '#94A3B8', whiteSpace: 'nowrap' }}>
|
|
Last seen: {(a.last_severity && Number(a.last_severity) !== 0) ? Number(a.last_severity).toFixed(1) : '—'}
|
|
</span>
|
|
</div>
|
|
<div style={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#64748B', marginLeft: '1.375rem' }}>
|
|
{a.host_name}{a.ip_address ? ` (${a.ip_address})` : ''}
|
|
</div>
|
|
{a.related_active && (
|
|
<div style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#0EA5E9', marginTop: '0.35rem', marginLeft: '1.375rem', padding: '0.2rem 0.4rem', background: 'rgba(14, 165, 233, 0.1)', border: '1px solid rgba(14, 165, 233, 0.25)', borderRadius: '0.25rem', display: 'inline-block' }}>
|
|
Similar finding active — ID: {a.related_active.id} ({a.related_active.severity ? Number(a.related_active.severity).toFixed(1) : '—'})
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{ivantiLoading ? (
|
|
<div className="text-center py-8">
|
|
<Loader className="w-6 h-6 text-teal-400 animate-spin mx-auto mb-2" />
|
|
<p className="text-xs text-gray-400 font-mono">Loading...</p>
|
|
</div>
|
|
) : ivantiSyncStatus === 'error' ? (
|
|
<>
|
|
<div className="text-center mb-3">
|
|
<div style={{ fontSize: '2rem', fontWeight: '700', fontFamily: 'monospace', color: '#0D9488', textShadow: '0 0 16px rgba(13, 148, 136, 0.4)' }}>
|
|
{ivantiTotal ?? '—'}
|
|
</div>
|
|
<div className="text-xs text-gray-400 uppercase tracking-wider">Total Workflows</div>
|
|
</div>
|
|
<div className="flex items-start gap-2 p-2 rounded" style={{ background: 'rgba(239, 68, 68, 0.1)', border: '1px solid rgba(239, 68, 68, 0.3)' }}>
|
|
<AlertCircle className="w-4 h-4 text-intel-danger mt-0.5 shrink-0" />
|
|
<p className="text-xs text-red-400 font-mono">{ivantiSyncError}</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="text-center mb-3">
|
|
<div style={{ fontSize: '2rem', fontWeight: '700', fontFamily: 'monospace', color: '#0D9488', textShadow: '0 0 16px rgba(13, 148, 136, 0.4)' }}>
|
|
{ivantiSyncStatus === 'never' ? '—' : (ivantiTotal ?? '—')}
|
|
</div>
|
|
<div className="text-xs text-gray-400 uppercase tracking-wider">Total Workflows</div>
|
|
</div>
|
|
<div className="space-y-2 max-h-64 overflow-y-auto">
|
|
{ivantiWorkflows.slice(0, 10).map((wf, idx) => (
|
|
<div key={wf.uuid ?? idx} style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(13, 148, 136, 0.25)', borderRadius: '0.375rem', padding: '0.5rem', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.03)' }}>
|
|
<div className="flex items-start justify-between gap-2 mb-1">
|
|
<span className="font-mono text-xs font-semibold text-teal-300">
|
|
{wf.id?.value || wf.uuid?.slice(0, 8)}
|
|
</span>
|
|
{wf.currentState && (
|
|
<span style={{ fontSize: '0.65rem', padding: '0.2rem 0.4rem', borderRadius: '0.25rem', background: 'rgba(13, 148, 136, 0.2)', border: '1px solid #0D9488', color: '#0D9488', whiteSpace: 'nowrap', fontFamily: 'monospace' }}>
|
|
{wf.currentState}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-white truncate mb-1">{wf.name}</div>
|
|
<div className="flex items-center justify-between gap-2">
|
|
{wf.type && (
|
|
<span className="text-xs text-gray-400 font-mono">{wf.type.replace(/_/g, ' ')}</span>
|
|
)}
|
|
{wf.createdOn && (
|
|
<span className="text-xs text-gray-500">{wf.createdOn}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{ivantiSyncStatus !== 'never' && ivantiTotal === 0 && (
|
|
<div className="text-center py-8">
|
|
<CheckCircle className="w-8 h-8 text-intel-success mx-auto mb-2" />
|
|
<p className="text-sm text-gray-400 italic font-mono">No workflows found</p>
|
|
</div>
|
|
)}
|
|
{ivantiSyncStatus === 'never' && (
|
|
<div className="text-center py-6">
|
|
<p className="text-xs text-gray-500 font-mono">Click Sync to load workflow data</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* End Right Panel */}
|
|
|
|
</div>}
|
|
{/* End Three Column Layout */}
|
|
|
|
{/* Confirmation Modal */}
|
|
<ConfirmModal
|
|
open={!!pendingConfirm}
|
|
title={pendingConfirm?.title}
|
|
message={pendingConfirm?.message}
|
|
confirmText={pendingConfirm?.confirmText}
|
|
variant={pendingConfirm?.variant || 'danger'}
|
|
onConfirm={pendingConfirm?.onConfirm}
|
|
onCancel={() => setPendingConfirm(null)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|