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

added panels

Browse Source
This commit is contained in:
jramos
2026-02-10 12:09:38 -07:00
parent 4a50cd100b
commit 0c9c3b5514
1 changed files with 333 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
frontend/src/App.js
View File

@@ -1255,8 +1255,54 @@ export default function App() {
</div> </div>
)} )}
{/* Three Column Layout */}
<div className="grid grid-cols-12 gap-6">
{/* LEFT PANEL - Wiki/Knowledge Base */}
<div className="col-span-12 lg:col-span-3 space-y-4">
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '4px solid #00FF88'}} className="rounded-lg">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00FF88', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(0, 255, 136, 0.5)' }}>
Knowledge Base
</h2>
{/* Wiki/Blog Style Entries */}
<div className="space-y-3">
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">CVE Response Procedures</h3>
<p className="text-gray-400 text-xs mb-2">Standard operating procedures for vulnerability response and escalation...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-02-08</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Vendor Contact Matrix</h3>
<p className="text-gray-400 text-xs mb-2">Emergency contacts and escalation paths for security vendors...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-02-05</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Severity Classification Guide</h3>
<p className="text-gray-400 text-xs mb-2">Guidelines for assessing and classifying vulnerability severity levels...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-01-28</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Patching Policy</h3>
<p className="text-gray-400 text-xs mb-2">Enterprise patch management timelines and approval workflow...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-01-15</span>
</div>
<div style={{ background: 'linear-gradient(135deg, rgba(19, 25, 55, 0.85) 0%, rgba(30, 39, 73, 0.75) 100%)', border: '1px solid rgba(0, 255, 136, 0.3)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
<h3 className="text-white font-semibold text-sm mb-1 font-mono">Documentation Standards</h3>
<p className="text-gray-400 text-xs mb-2">Required documentation for vulnerability tracking and audit compliance...</p>
<span className="text-xs text-intel-success font-mono">Last updated: 2024-01-10</span>
</div>
</div>
</div>
</div>
{/* CENTER PANEL - Main Content */}
<div className="col-span-12 lg:col-span-6 space-y-4">
{/* Quick Check */} {/* Quick Check */}
<div style={{...STYLES.intelCard, padding: '1.5rem', marginBottom: '1.5rem'}} className="rounded-lg"> <div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
<div className="scan-line"></div> <div className="scan-line"></div>
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00D9FF', marginBottom: '0.75rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 20px rgba(0, 217, 255, 0.5)' }}>Quick CVE Lookup</h2> <h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00D9FF', marginBottom: '0.75rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 20px rgba(0, 217, 255, 0.5)' }}>Quick CVE Lookup</h2>
<div className="flex gap-3"> <div className="flex gap-3">
@@ -1318,64 +1364,10 @@ export default function App() {
)} )}
</div> </div>
{/* Open Vendor Tickets Dashboard */}
{jiraTickets.filter(t => t.status !== 'Closed').length > 0 && (
<div style={{...STYLES.intelCard, padding: '1.5rem', marginBottom: '1.5rem', borderLeft: '4px solid #FFB800'}} className="rounded-lg">
<div className="flex justify-between items-center mb-4">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#FFB800', display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(255, 184, 0, 0.5)' }}>
<AlertCircle className="w-5 h-5" />
Open Tickets ({jiraTickets.filter(t => t.status !== 'Closed').length})
</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"
>
<Plus className="w-4 h-4" />
Add
</button>
)}
</div>
<div className="space-y-2">
{jiraTickets.filter(t => t.status !== 'Closed').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-4 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>
<span className="text-sm text-white font-mono">{ticket.cve_id}</span>
<span style={{ fontSize: '0.875rem', color: '#E4E8F1', fontFamily: 'monospace' }}>({ticket.vendor})</span>
{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 : STYLES.badgeHigh}>
<span style={STYLES.glowDot(ticket.status === 'Open' ? '#FF3366' : '#FFB800')}></span>
{ticket.status}
</span>
</div>
{canWrite() && (
<div className="flex gap-2">
<button onClick={() => handleEditTicket(ticket)} className="text-gray-400 hover:text-intel-warning transition-colors">
<Edit2 className="w-4 h-4" />
</button>
<button onClick={() => handleDeleteTicket(ticket)} className="text-gray-400 hover:text-intel-danger transition-colors">
<Trash2 className="w-4 h-4" />
</button>
</div>
)}
</div>
))}
</div>
</div>
)}
{/* Search and Filters */} {/* Search and Filters */}
<div style={{...STYLES.intelCard, padding: '1.5rem', marginBottom: '1.5rem'}} className="rounded-lg"> <div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 gap-4">
<div className="md:col-span-1"> <div>
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider"> <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 className="inline w-4 h-4 mr-1" />
Search CVEs Search CVEs
@@ -1389,6 +1381,7 @@ export default function App() {
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider"> <label className="block text-xs font-medium text-gray-300 mb-2 uppercase tracking-wider">
<Filter className="inline w-4 h-4 mr-1" /> <Filter className="inline w-4 h-4 mr-1" />
@@ -1422,9 +1415,10 @@ export default function App() {
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Results Summary */} {/* Results Summary */}
<div className="mb-4 flex justify-between items-center"> <div className="flex justify-between items-center">
<p className="text-gray-400 font-mono text-sm"> <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-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-500 mx-2">•</span>
@@ -1744,6 +1738,145 @@ export default function App() {
</div> </div>
)} )}
</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: '4px solid #00D9FF'}} className="rounded-lg">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#00D9FF', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(0, 217, 255, 0.5)' }}>
Calendar
</h2>
{/* Simple Calendar Grid */}
<div className="mb-2">
<div className="text-center mb-3">
<span className="text-white font-semibold font-mono">February 2024</span>
</div>
<div className="grid grid-cols-7 gap-1 text-center text-xs mb-2">
<div className="text-gray-400 font-mono">Su</div>
<div className="text-gray-400 font-mono">Mo</div>
<div className="text-gray-400 font-mono">Tu</div>
<div className="text-gray-400 font-mono">We</div>
<div className="text-gray-400 font-mono">Th</div>
<div className="text-gray-400 font-mono">Fr</div>
<div className="text-gray-400 font-mono">Sa</div>
</div>
<div className="grid grid-cols-7 gap-1 text-center">
{/* Week 1 */}
<div className="text-gray-600 font-mono text-xs p-1">28</div>
<div className="text-gray-600 font-mono text-xs p-1">29</div>
<div className="text-gray-600 font-mono text-xs p-1">30</div>
<div className="text-gray-600 font-mono text-xs p-1">31</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">1</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">2</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">3</div>
{/* Week 2 */}
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">4</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">5</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">6</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">7</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">8</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">9</div>
<div className="bg-intel-accent/30 text-white font-mono text-xs p-1 rounded font-bold border border-intel-accent">10</div>
{/* Week 3 */}
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">11</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">12</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">13</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">14</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">15</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">16</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">17</div>
{/* Week 4 */}
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">18</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">19</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">20</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">21</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">22</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">23</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">24</div>
{/* Week 5 */}
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">25</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">26</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">27</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">28</div>
<div className="text-white font-mono text-xs p-1 hover:bg-intel-accent/20 rounded cursor-pointer">29</div>
<div className="text-gray-600 font-mono text-xs p-1">1</div>
<div className="text-gray-600 font-mono text-xs p-1">2</div>
</div>
</div>
</div>
{/* Open Vendor Tickets */}
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '4px solid #FFB800'}} className="rounded-lg">
<div className="flex justify-between items-center mb-4">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#FFB800', display: 'flex', alignItems: 'center', gap: '0.5rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 15px rgba(255, 184, 0, 0.5)' }}>
<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: '#FFB800', textShadow: '0 0 20px rgba(255, 184, 0, 0.5)' }}>
{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(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.5rem', boxShadow: '0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04)' }}>
<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>
<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('#FFB800'), 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>
</div>
{/* End Right Panel */}
</div>
{/* End Three Column Layout */}
</div>
</div> </div>
); );
} }