feat(ttp): inspector drawer surfaces evidence + rule_id behind each technique
The TTPsObservedSection rollup tells the operator "we saw T1059" but
not why. Click any technique row → side drawer opens listing every
ttp_tag row in scope with the persisted evidence JSON, firing
rule_id / rule_version, source_kind / source_id, confidence, and
created_at. Mirrors the CredentialReuseInspector / BountyInspector
pattern (drawer-backdrop + bd-head/bd-body + kvs grid).
Backend:
- New `GET /api/v1/ttp/tags/by-{scope}/{uuid}/{technique_id}`
(`scope ∈ {identity, attacker, session}`, optional
`?sub_technique_id=`, `?limit=` capped to 1000). Returns raw
TTPTag rows newest-first.
- New `TTPTagDetailRow` Pydantic model + re-export.
- New repo method `list_tags_by_scope_and_technique` on
TTPMixin (+ abstract on BaseRepository) — single query branched
on scope; identity scope projects through `Attacker.identity_id`
the same way `list_techniques_by_identity` does.
- Tests: evidence round-trips, sub_technique filter, JWT-required,
empty scope, unknown scope rejected.
Frontend:
- New `TTPInspector.tsx` + `TTPInspector.css` (violet accent, slide
animation, focus-trapped panel matching the existing inspector
family).
- `TTPsObservedSection`'s TechniqueBar is now click+keyboard
activatable; clicking opens the inspector for that
(technique, sub_technique) tuple.
mypy clean. 532 passed in the targeted sweep.
This commit is contained in:
140
decnet_web/src/components/TTPInspector.css
Normal file
140
decnet_web/src/components/TTPInspector.css
Normal file
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* TTPInspector — sidebar drawer that explains *why* the rule engine
|
||||
* flagged a technique. Mirrors CredentialReuseInspector / BountyInspector
|
||||
* geometry and tokens; only the colour accent differs (violet for the
|
||||
* TTP family).
|
||||
*/
|
||||
|
||||
.ttp-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 1000;
|
||||
animation: ttp-fade 0.15s ease;
|
||||
}
|
||||
@keyframes ttp-fade { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
.ttp-drawer {
|
||||
width: min(680px, 100%);
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
border-left: 1px solid var(--violet);
|
||||
box-shadow: -12px 0 40px rgba(155, 135, 245, 0.12);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: ttp-slide 0.2s ease;
|
||||
}
|
||||
@keyframes ttp-slide {
|
||||
from { transform: translateX(30px); opacity: 0.6; }
|
||||
to { transform: none; opacity: 1; }
|
||||
}
|
||||
|
||||
.ttp-drawer .bd-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.ttp-drawer .bd-head h3 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 3px;
|
||||
color: var(--violet);
|
||||
margin: 0;
|
||||
}
|
||||
.ttp-drawer .close-btn {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--matrix);
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ttp-drawer .close-btn:hover { border-color: var(--accent); }
|
||||
|
||||
.ttp-drawer .bd-body {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ttp-drawer .type-label {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 2px;
|
||||
color: var(--dim-color);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ttp-tag-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
background: rgba(255, 255, 255, 0.015);
|
||||
}
|
||||
|
||||
.ttp-tag-card .ttp-card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.ttp-tag-card .ttp-rule-id {
|
||||
color: var(--violet);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.ttp-tag-card .ttp-confidence {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--matrix);
|
||||
}
|
||||
|
||||
.ttp-tag-card .ttp-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap: 4px 12px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.ttp-tag-card .ttp-meta .k {
|
||||
color: var(--dim-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.ttp-tag-card .ttp-meta .v {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ttp-evidence {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
padding: 8px 10px;
|
||||
font-family: var(--mono, ui-monospace, monospace);
|
||||
font-size: 0.72rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: var(--matrix);
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ttp-empty {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
color: var(--dim-color);
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
180
decnet_web/src/components/TTPInspector.tsx
Normal file
180
decnet_web/src/components/TTPInspector.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { X, Crosshair } from '../icons';
|
||||
import api from '../utils/api';
|
||||
import { useEscapeKey } from '../hooks/useEscapeKey';
|
||||
import { useFocusTrap } from '../hooks/useFocusTrap';
|
||||
import './TTPInspector.css';
|
||||
|
||||
/*
|
||||
* TTPInspector — sidebar that explains *why* the rule engine flagged a
|
||||
* technique. Renders one card per `ttp_tag` row hitting the
|
||||
* (scope, uuid, technique_id, sub_technique_id?) selector, including
|
||||
* the rule_id, source_kind / source_id, confidence, and the persisted
|
||||
* `evidence` JSON the engine attached at fire time.
|
||||
*
|
||||
* Click target is :class:`TechniqueBar` in TTPsObservedSection. Drawer
|
||||
* geometry mirrors CredentialReuseInspector / BountyInspector.
|
||||
*/
|
||||
|
||||
export interface TTPTagDetailRow {
|
||||
uuid: string;
|
||||
source_kind: string;
|
||||
source_id: string;
|
||||
attacker_uuid: string | null;
|
||||
identity_uuid: string | null;
|
||||
session_id: string | null;
|
||||
decky_id: string | null;
|
||||
tactic: string;
|
||||
technique_id: string;
|
||||
sub_technique_id: string | null;
|
||||
confidence: number;
|
||||
rule_id: string;
|
||||
rule_version: number;
|
||||
evidence: Record<string, unknown>;
|
||||
attack_release: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export type TTPInspectorScope = 'identity' | 'attacker' | 'session';
|
||||
|
||||
interface Props {
|
||||
scope: TTPInspectorScope;
|
||||
uuid: string;
|
||||
techniqueId: string;
|
||||
subTechniqueId: string | null;
|
||||
tactic: string;
|
||||
count: number;
|
||||
confidenceMax: number;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TTPInspector: React.FC<Props> = ({
|
||||
scope, uuid, techniqueId, subTechniqueId, tactic, count, confidenceMax, onClose,
|
||||
}) => {
|
||||
const panelRef = useRef<HTMLDivElement | null>(null);
|
||||
useEscapeKey(onClose, true);
|
||||
useFocusTrap(panelRef, true);
|
||||
useEffect(() => {
|
||||
const prev = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => { document.body.style.overflow = prev; };
|
||||
}, []);
|
||||
|
||||
const [rows, setRows] = useState<TTPTagDetailRow[]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
const fetch = async () => {
|
||||
try {
|
||||
const params: Record<string, string> = {};
|
||||
if (subTechniqueId) params.sub_technique_id = subTechniqueId;
|
||||
const path = `/ttp/tags/by-${scope}/${uuid}/${techniqueId}`;
|
||||
const res = await api.get(path, { params });
|
||||
if (cancelled) return;
|
||||
setRows(Array.isArray(res.data) ? res.data : []);
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
if (cancelled) return;
|
||||
setRows([]);
|
||||
setError(
|
||||
err?.response?.status === 403 ? 'Insufficient role for tag detail.' :
|
||||
'Failed to load tag detail.',
|
||||
);
|
||||
} finally {
|
||||
if (!cancelled) setLoaded(true);
|
||||
}
|
||||
};
|
||||
fetch();
|
||||
return () => { cancelled = true; };
|
||||
}, [scope, uuid, techniqueId, subTechniqueId]);
|
||||
|
||||
const label = subTechniqueId ?? techniqueId;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="ttp-drawer-backdrop"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div className="ttp-drawer" ref={panelRef}>
|
||||
<div className="bd-head">
|
||||
<h3>
|
||||
<Crosshair size={14} />
|
||||
<span>{label}</span>
|
||||
</h3>
|
||||
<button className="close-btn" onClick={onClose} aria-label="Close">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bd-body">
|
||||
<div className="ttp-meta" style={{
|
||||
gridTemplateColumns: '110px 1fr',
|
||||
display: 'grid',
|
||||
gap: '4px 12px',
|
||||
fontSize: '0.75rem',
|
||||
}}>
|
||||
<div className="k" style={{ color: 'var(--dim-color)' }}>TACTIC</div>
|
||||
<div className="v">{tactic}</div>
|
||||
<div className="k" style={{ color: 'var(--dim-color)' }}>TECHNIQUE</div>
|
||||
<div className="v">{techniqueId}{subTechniqueId ? ` / ${subTechniqueId}` : ''}</div>
|
||||
<div className="k" style={{ color: 'var(--dim-color)' }}>FIRES</div>
|
||||
<div className="v">{count}</div>
|
||||
<div className="k" style={{ color: 'var(--dim-color)' }}>MAX CONF</div>
|
||||
<div className="v">{confidenceMax.toFixed(2)}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="type-label">EVIDENCE</div>
|
||||
{!loaded ? null : error ? (
|
||||
<div className="ttp-empty">{error}</div>
|
||||
) : rows.length === 0 ? (
|
||||
<div className="ttp-empty">No tag rows in scope.</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{rows.map((row) => (
|
||||
<TTPTagCard key={row.uuid} row={row} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TTPTagCard: React.FC<{ row: TTPTagDetailRow }> = ({ row }) => {
|
||||
const evidenceText = JSON.stringify(row.evidence ?? {}, null, 2);
|
||||
return (
|
||||
<div className="ttp-tag-card">
|
||||
<div className="ttp-card-head">
|
||||
<span className="ttp-rule-id">{row.rule_id} v{row.rule_version}</span>
|
||||
<span className="ttp-confidence">conf {row.confidence.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="ttp-meta">
|
||||
<div className="k">SOURCE</div>
|
||||
<div className="v">{row.source_kind} / {row.source_id}</div>
|
||||
{row.session_id && (
|
||||
<>
|
||||
<div className="k">SESSION</div>
|
||||
<div className="v">{row.session_id}</div>
|
||||
</>
|
||||
)}
|
||||
{row.decky_id && (
|
||||
<>
|
||||
<div className="k">DECKY</div>
|
||||
<div className="v">{row.decky_id}</div>
|
||||
</>
|
||||
)}
|
||||
<div className="k">SEEN</div>
|
||||
<div className="v">{new Date(row.created_at).toLocaleString()}</div>
|
||||
<div className="k">ATT&CK</div>
|
||||
<div className="v">{row.attack_release}</div>
|
||||
</div>
|
||||
<pre className="ttp-evidence">{evidenceText}</pre>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TTPInspector;
|
||||
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
|
||||
import { Crosshair, Download, Target } from '../icons';
|
||||
import api from '../utils/api';
|
||||
import EmptyState from './EmptyState/EmptyState';
|
||||
import TTPInspector from './TTPInspector';
|
||||
|
||||
/*
|
||||
* TTPsObservedSection — shared between IdentityDetail (primary) and
|
||||
@@ -59,6 +60,7 @@ const TTPsObservedSection: React.FC<Props> = ({ scope, uuid }) => {
|
||||
const [rows, setRows] = useState<TechniqueRow[]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<TechniqueRow | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
@@ -141,7 +143,11 @@ const TTPsObservedSection: React.FC<Props> = ({ scope, uuid }) => {
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{byTactic[tid].map((r) => (
|
||||
<TechniqueBar key={`${r.technique_id}-${r.sub_technique_id ?? ''}`} row={r} />
|
||||
<TechniqueBar
|
||||
key={`${r.technique_id}-${r.sub_technique_id ?? ''}`}
|
||||
row={r}
|
||||
onClick={() => setSelected(r)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,11 +155,26 @@ const TTPsObservedSection: React.FC<Props> = ({ scope, uuid }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{selected && (
|
||||
<TTPInspector
|
||||
scope={scope}
|
||||
uuid={uuid}
|
||||
techniqueId={selected.technique_id}
|
||||
subTechniqueId={selected.sub_technique_id}
|
||||
tactic={selected.tactic}
|
||||
count={selected.count}
|
||||
confidenceMax={selected.confidence_max}
|
||||
onClose={() => setSelected(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TechniqueBar: React.FC<{ row: TechniqueRow }> = ({ row }) => {
|
||||
const TechniqueBar: React.FC<{
|
||||
row: TechniqueRow;
|
||||
onClick: () => void;
|
||||
}> = ({ row, onClick }) => {
|
||||
// Confidence bar: 0..1 mapped to 0..100% width. Values below 0.3
|
||||
// can never appear (repo confidence floor) so the bar always shows
|
||||
// some non-trivial fill.
|
||||
@@ -161,12 +182,27 @@ const TechniqueBar: React.FC<{ row: TechniqueRow }> = ({ row }) => {
|
||||
const label = row.sub_technique_id ?? row.technique_id;
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={onClick}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onClick();
|
||||
}
|
||||
}}
|
||||
title="Click to inspect underlying tags + evidence"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '160px 1fr 60px',
|
||||
gap: 8,
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
padding: '2px 4px',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(155,135,245,0.06)'; }}
|
||||
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
|
||||
>
|
||||
<span className="matrix-text">{label}</span>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user