322 lines
12 KiB
TypeScript
322 lines
12 KiB
TypeScript
import { useState } from "react";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import {
|
|
Loader2,
|
|
CheckCircle,
|
|
XCircle,
|
|
MinusCircle,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
ExternalLink,
|
|
Shield,
|
|
} from "lucide-react";
|
|
import {
|
|
getDetectionRulesForTest,
|
|
evaluateDetectionRule,
|
|
type DetectionRuleItem,
|
|
} from "../../api/detection-rules";
|
|
import type { User } from "../../types/models";
|
|
|
|
const severityColors: Record<string, string> = {
|
|
critical: "bg-red-900/50 text-red-400 border-red-500/30",
|
|
high: "bg-orange-900/50 text-orange-400 border-orange-500/30",
|
|
medium: "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
|
|
low: "bg-blue-900/50 text-blue-400 border-blue-500/30",
|
|
informational: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
|
};
|
|
|
|
const sourceColors: Record<string, string> = {
|
|
sigma: "bg-purple-900/50 text-purple-400 border-purple-500/30",
|
|
elastic: "bg-cyan-900/50 text-cyan-400 border-cyan-500/30",
|
|
splunk: "bg-green-900/50 text-green-400 border-green-500/30",
|
|
custom: "bg-gray-800/50 text-gray-400 border-gray-600/30",
|
|
};
|
|
|
|
interface Props {
|
|
testId: string;
|
|
user: User | null;
|
|
canEdit: boolean;
|
|
}
|
|
|
|
export default function DetectionRuleChecklist({ testId, user, canEdit }: Props) {
|
|
const queryClient = useQueryClient();
|
|
const [expandedRules, setExpandedRules] = useState<Set<string>>(new Set());
|
|
const [editingNotes, setEditingNotes] = useState<Record<string, string>>({});
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ["detection-rules-for-test", testId],
|
|
queryFn: () => getDetectionRulesForTest(testId),
|
|
enabled: !!testId,
|
|
});
|
|
|
|
const evaluateMutation = useMutation({
|
|
mutationFn: evaluateDetectionRule,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["detection-rules-for-test", testId] });
|
|
},
|
|
});
|
|
|
|
const toggleExpanded = (ruleId: string) => {
|
|
setExpandedRules((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(ruleId)) next.delete(ruleId);
|
|
else next.add(ruleId);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleEvaluate = (ruleId: string, triggered: boolean | null) => {
|
|
evaluateMutation.mutate({
|
|
test_id: testId,
|
|
detection_rule_id: ruleId,
|
|
triggered,
|
|
notes: editingNotes[ruleId],
|
|
});
|
|
};
|
|
|
|
const handleNotesChange = (ruleId: string, notes: string) => {
|
|
setEditingNotes((prev) => ({ ...prev, [ruleId]: notes }));
|
|
};
|
|
|
|
const handleNotesSave = (ruleId: string, triggered: boolean | null) => {
|
|
evaluateMutation.mutate({
|
|
test_id: testId,
|
|
detection_rule_id: ruleId,
|
|
triggered: triggered,
|
|
notes: editingNotes[ruleId] ?? "",
|
|
});
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-gray-500" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !data) {
|
|
return null;
|
|
}
|
|
|
|
if (data.rules.length === 0) {
|
|
return (
|
|
<div className="rounded-lg border border-gray-700 bg-gray-800/30 p-4 text-center">
|
|
<Shield className="mx-auto h-8 w-8 text-gray-600" />
|
|
<p className="mt-2 text-sm text-gray-400">No detection rules available for this technique.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Summary bar */}
|
|
<div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800/50 p-3">
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-sm text-gray-300">
|
|
<span className="font-semibold text-white">{data.triggered}</span>
|
|
<span className="text-gray-500"> / </span>
|
|
<span className="font-semibold text-white">{data.total}</span>
|
|
<span className="ml-1 text-gray-400">rules triggered</span>
|
|
</div>
|
|
{data.evaluated > 0 && (
|
|
<span className="rounded-full bg-cyan-900/50 border border-cyan-500/30 px-2 py-0.5 text-xs font-medium text-cyan-400">
|
|
{data.detection_rate}% detection rate
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-gray-500">
|
|
{data.evaluated} / {data.total} evaluated
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress bar */}
|
|
<div className="h-2 w-full rounded-full bg-gray-800 overflow-hidden">
|
|
<div className="flex h-full">
|
|
{data.total > 0 && (
|
|
<>
|
|
<div
|
|
className="bg-green-500 transition-all"
|
|
style={{ width: `${(data.triggered / data.total) * 100}%` }}
|
|
/>
|
|
<div
|
|
className="bg-red-500 transition-all"
|
|
style={{
|
|
width: `${((data.evaluated - data.triggered) / data.total) * 100}%`,
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Rules list */}
|
|
<div className="space-y-2">
|
|
{data.rules.map((rule) => {
|
|
const isExpanded = expandedRules.has(rule.id);
|
|
const notesDraft = editingNotes[rule.id] ?? rule.notes ?? "";
|
|
|
|
return (
|
|
<div
|
|
key={rule.id}
|
|
className="rounded-lg border border-gray-700 bg-gray-800/30 overflow-hidden"
|
|
>
|
|
{/* Rule header */}
|
|
<div className="flex items-center gap-3 p-3">
|
|
{/* Expand toggle */}
|
|
<button
|
|
onClick={() => toggleExpanded(rule.id)}
|
|
className="shrink-0 text-gray-500 hover:text-gray-300"
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown className="h-4 w-4" />
|
|
) : (
|
|
<ChevronRight className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
|
|
{/* Status icon */}
|
|
{rule.triggered === true && <CheckCircle className="h-4 w-4 shrink-0 text-green-400" />}
|
|
{rule.triggered === false && <XCircle className="h-4 w-4 shrink-0 text-red-400" />}
|
|
{rule.triggered == null && <MinusCircle className="h-4 w-4 shrink-0 text-gray-500" />}
|
|
|
|
{/* Rule info */}
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-gray-200 truncate">{rule.title}</p>
|
|
</div>
|
|
|
|
{/* Badges */}
|
|
<div className="flex shrink-0 items-center gap-1.5">
|
|
{rule.severity && (
|
|
<span
|
|
className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium ${
|
|
severityColors[rule.severity] || severityColors.informational
|
|
}`}
|
|
>
|
|
{rule.severity}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={`inline-flex rounded-full border px-2 py-0.5 text-[10px] font-medium ${
|
|
sourceColors[rule.source] || sourceColors.custom
|
|
}`}
|
|
>
|
|
{rule.source}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Evaluate buttons */}
|
|
{canEdit && (
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
<button
|
|
onClick={() => handleEvaluate(rule.id, true)}
|
|
disabled={evaluateMutation.isPending}
|
|
className={`rounded p-1 transition-colors ${
|
|
rule.triggered === true
|
|
? "bg-green-900/50 text-green-400"
|
|
: "text-gray-500 hover:bg-green-900/30 hover:text-green-400"
|
|
}`}
|
|
title="Triggered"
|
|
>
|
|
<CheckCircle className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleEvaluate(rule.id, false)}
|
|
disabled={evaluateMutation.isPending}
|
|
className={`rounded p-1 transition-colors ${
|
|
rule.triggered === false
|
|
? "bg-red-900/50 text-red-400"
|
|
: "text-gray-500 hover:bg-red-900/30 hover:text-red-400"
|
|
}`}
|
|
title="Not Triggered"
|
|
>
|
|
<XCircle className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleEvaluate(rule.id, null)}
|
|
disabled={evaluateMutation.isPending}
|
|
className={`rounded p-1 transition-colors ${
|
|
rule.triggered === null && rule.result_id
|
|
? "bg-gray-700 text-gray-300"
|
|
: "text-gray-500 hover:bg-gray-700 hover:text-gray-300"
|
|
}`}
|
|
title="Not Applicable"
|
|
>
|
|
<MinusCircle className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Expanded content */}
|
|
{isExpanded && (
|
|
<div className="border-t border-gray-700 p-3 space-y-3">
|
|
{rule.description && (
|
|
<p className="text-xs text-gray-400">{rule.description}</p>
|
|
)}
|
|
|
|
{/* Rule content */}
|
|
{rule.rule_content && (
|
|
<div>
|
|
<p className="mb-1 text-[10px] font-medium uppercase text-gray-500">
|
|
Rule Content ({rule.rule_format})
|
|
</p>
|
|
<pre className="max-h-48 overflow-auto rounded bg-gray-900 p-3 font-mono text-xs text-gray-300">
|
|
{rule.rule_content}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{/* Source link */}
|
|
{rule.source_url && (
|
|
<a
|
|
href={rule.source_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 text-xs text-cyan-400 hover:underline"
|
|
>
|
|
View source
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
)}
|
|
|
|
{/* Notes */}
|
|
{canEdit ? (
|
|
<div>
|
|
<label className="mb-1 block text-[10px] font-medium uppercase text-gray-500">
|
|
Notes
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
value={notesDraft}
|
|
onChange={(e) => handleNotesChange(rule.id, e.target.value)}
|
|
placeholder="Add evaluation notes..."
|
|
className="flex-1 rounded border border-gray-700 bg-gray-900 px-2 py-1.5 text-xs text-gray-200 placeholder-gray-500 focus:border-indigo-500 focus:outline-none"
|
|
/>
|
|
<button
|
|
onClick={() => handleNotesSave(rule.id, rule.triggered)}
|
|
disabled={evaluateMutation.isPending}
|
|
className="shrink-0 rounded bg-indigo-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
rule.notes && (
|
|
<div>
|
|
<p className="text-[10px] font-medium uppercase text-gray-500">Notes</p>
|
|
<p className="mt-0.5 text-xs text-gray-400">{rule.notes}</p>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|