Files
marcredhat-siem-toolkit-pat…/frontend/src/app/page.tsx
T
Mick c182d837ee Initial commit: SIEM Toolkit for SentinelOne
Dockerized SecOps toolkit with:
- Coverage Map: STAR rule vs SDL parser field coverage analysis
- Ingest Dashboard: PowerQuery-powered event volume and source breakdown
- Onboarding Assistant: AI-guided log source onboarding with Claude
- Parser management via SDL MCP integration

Stack: FastAPI + PostgreSQL backend, nginx-served HTML frontend, Docker Compose.
PowerQuery runs via Scalyr XDR API (SDL_XDR_URL + SDL_LOG_READ_KEY).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-19 11:39:26 -04:00

60 lines
2.1 KiB
TypeScript

import { Shield, BarChart2, Zap } from 'lucide-react'
import Link from 'next/link'
const CARDS = [
{
href: '/coverage',
icon: Shield,
title: 'Parser Coverage Map',
desc: 'Cross-reference SDL parser output fields against STAR and Sigma rule fields. Surface parsed-but-unused fields as reduction candidates.',
cta: 'Open Coverage Map',
color: 'from-purple-700 to-purple-900',
},
{
href: '/ingest',
icon: BarChart2,
title: 'Ingest Dashboard',
desc: 'Visualize event volume by source and type. Project monthly GB costs and simulate the impact of exclusion filters before applying them.',
cta: 'Open Dashboard',
color: 'from-blue-700 to-blue-900',
},
{
href: '/onboarding',
icon: Zap,
title: 'Onboarding Accelerator',
desc: 'Step-by-step guide for onboarding a new log source using Claude Code directly — no API key required.',
cta: 'View Onboarding Guide',
color: 'from-emerald-700 to-emerald-900',
},
]
export default function Home() {
return (
<div className="p-8 max-w-5xl">
<div className="mb-8">
<h1 className="text-2xl font-bold text-white">SIEM Engineering Toolkit</h1>
<p className="text-gray-400 mt-1">SentinelOne AI-SIEM · demo.sentinelone.net</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
{CARDS.map(({ href, icon: Icon, title, desc, cta, color }) => (
<div key={href} className="bg-gray-900 border border-gray-800 rounded-xl p-6 flex flex-col gap-4">
<div className={`w-10 h-10 rounded-lg bg-gradient-to-br ${color} flex items-center justify-center`}>
<Icon size={20} className="text-white" />
</div>
<div>
<h2 className="font-semibold text-white">{title}</h2>
<p className="text-sm text-gray-400 mt-1 leading-relaxed">{desc}</p>
</div>
<Link
href={href}
className="mt-auto text-sm text-purple-400 hover:text-purple-300 font-medium"
>
{cta}
</Link>
</div>
))}
</div>
</div>
)
}