Index: lan-frontend/src/components/ComputerDetailsModal.jsx =================================================================== --- lan-frontend/src/components/ComputerDetailsModal.jsx (revision 2058e5c694bb6097866a5fe6503c519e8f74970f) +++ lan-frontend/src/components/ComputerDetailsModal.jsx (revision e4c61dd6cd86e06265bc2bd91adba84a0f04044a) @@ -2,5 +2,5 @@ function severityForEventId(eventId) { - const id = parseInt(eventId, 10); + const id = Number.parseInt(String(eventId ?? ""), 10); const high = new Set([1, 3, 8, 10]); const med = new Set([5, 6, 7, 11, 22]); @@ -10,15 +10,48 @@ } +function fmtTime(ts) { + if (!ts) return "—"; + try { + return new Date(ts).toLocaleTimeString(); + } catch { + return String(ts); + } +} + export default function ComputerDetailsModal({ open, computer, onClose, onAskAI }) { const [tab, setTab] = useState("overview"); const [loading, setLoading] = useState(false); const [details, setDetails] = useState(null); + const [error, setError] = useState(""); const [search, setSearch] = useState(""); - // JSON viewer state + // JSON viewer const [jsonOpen, setJsonOpen] = useState(false); const [jsonTitle, setJsonTitle] = useState(""); const [jsonData, setJsonData] = useState(null); + // reset when opening / switching pc + useEffect(() => { + if (!open) return; + setTab("overview"); + setSearch(""); + setError(""); + setDetails(null); + setJsonOpen(false); + setJsonTitle(""); + setJsonData(null); + }, [open, computer?.name]); + + // close on ESC + useEffect(() => { + if (!open) return; + const onKey = (e) => { + if (e.key === "Escape") onClose?.(); + }; + window.addEventListener("keydown", onKey); + return () => window.removeEventListener("keydown", onKey); + }, [open, onClose]); + + // load details useEffect(() => { if (!open || !computer?.name) return; @@ -26,11 +59,18 @@ async function load() { + setLoading(true); + setError(""); try { - setLoading(true); - const r = await fetch(`/api/computer/${encodeURIComponent(computer.name)}`); - const d = await r.json(); + const r = await fetch(`/api/computer/${encodeURIComponent(computer.name)}`, { + credentials: "include", + }); + const d = await r.json().catch(() => ({})); + if (!r.ok) throw new Error(d?.error || `HTTP ${r.status}`); if (!cancelled) setDetails(d); } catch (e) { - console.error("details error", e); + if (!cancelled) { + setError(String(e?.message || e)); + setDetails(null); + } } finally { if (!cancelled) setLoading(false); @@ -51,5 +91,5 @@ const msg = (ev.message || "").toLowerCase(); const type = (ev.event_type || "").toLowerCase(); - const id = String(ev.event_id ?? ""); + const id = String(ev.event_id ?? "").toLowerCase(); return msg.includes(q) || type.includes(q) || id.includes(q); }); @@ -57,7 +97,6 @@ function openJson(ev) { - // server ти враќа: { event_id, event_type, message, timestamp, details } setJsonTitle(`Sysmon Event ${ev?.event_id ?? ""} • ${ev?.event_type ?? ""}`); - setJsonData(ev?.details ?? ev); // ако нема details, покажи цел event + setJsonData(ev?.details ?? ev); setJsonOpen(true); } @@ -73,30 +112,230 @@ return ( <> -
-
e.stopPropagation()}> -
+ + +
+
e.stopPropagation()}> +
-
{computer.name}
-
- {computer.ip || "—"} • {computer.user || "—"} • {computer.status || "—"} +
{computer?.name || "Computer"}
+
+ {computer?.ip || "—"} • {computer?.user || "—"} • {computer?.status || "—"}
-
-
- + +
+ - - -
- @@ -104,276 +343,240 @@
-
- {loading &&
Loading…
} - - {!loading && details && tab === "overview" && ( -
-
-
System Overview
- +
+
+ {loading &&
Loading…
} + + {!loading && error && ( +
+
+
Error
+
+
+ {error} +
-
-
- User: {details.computer?.user} -
-
- IP: {details.computer?.ip} -
-
- OS: {details.computer?.os} -
-
- First seen: {details.computer?.first_seen} -
-
- Last seen: {details.computer?.last_seen} -
-
- Total logs: {details.computer?.total_logs} + )} + + {!loading && !error && details && tab === "overview" && ( +
+
+
System Overview
+ Env: {details.computer?.env_name || "default"} +
+
+
User: {details.computer?.user || "—"}
+
IP: {details.computer?.ip || "—"}
+
OS: {details.computer?.os || "—"}
+
First seen: {details.computer?.first_seen || "—"}
+
Last seen: {details.computer?.last_seen || "—"}
+
Total logs: {details.computer?.total_logs ?? "—"}
-
- )} - - {!loading && details && tab === "sysmon" && ( -
-
-
Sysmon Events
-
- {filteredSysmon.length} events - setSearch(e.target.value)} - /> + )} + + {!loading && !error && details && tab === "sysmon" && ( +
+
+
Sysmon Events
+
+ {filteredSysmon.length} events + setSearch(e.target.value)} + /> +
+
+ +
+
+
+ + + + + + + + + + + + + {filteredSysmon.slice(0, 400).map((ev, idx) => { + const sev = severityForEventId(ev.event_id); + return ( + + + + + + + + + ); + })} + + {filteredSysmon.length === 0 && ( + + + + )} + +
TimeIDTypeSeverityMessageView
{fmtTime(ev.timestamp)}{ev.event_id ?? "—"}{ev.event_type || "—"}{sev.toUpperCase()} + {(ev.message || "").slice(0, 220)} + + +
+ No sysmon events. +
+
+
+ {filteredSysmon.length > 400 && ( +
+ Showing first 400 (for speed). +
+ )}
- -
-
- - - - - - - - - - - - - {filteredSysmon.slice(0, 200).map((ev, idx) => { - const sev = severityForEventId(ev.event_id); - return ( - - - - - - - + )} + + {!loading && !error && details && tab === "processes" && ( +
+
+
Recent Processes
+ {(details.recent_processes || []).length} rows +
+ +
+
+
+
TimeIDTypeSeverityMessageView
{ev.timestamp ? new Date(ev.timestamp).toLocaleTimeString() : "—"} - {ev.event_id} - {ev.event_type} - {sev.toUpperCase()} - - {(ev.message || "").slice(0, 140)} - - -
+ + + + + + + + + - ); - })} - - {filteredSysmon.length === 0 && ( - - - - )} - -
TimePIDNameUserCPU%RAM MBCmdline
- No sysmon events. -
-
- - {filteredSysmon.length > 200 && ( -
- Showing first 200 (for speed). + + + {(details.recent_processes || []).slice(0, 400).map((p, idx) => ( + + {fmtTime(p.timestamp)} + {p.pid ?? "—"} + {p.name || "—"} + {p.username || "—"} + {p.cpu_percent ?? 0} + {p.memory_mb ?? 0} + + {(p.cmdline || "").slice(0, 220)} + + + ))} + {(details.recent_processes || []).length === 0 && ( + + + No process data. + + + )} + + +
- )} +
-
- )} - - {!loading && details && tab === "processes" && ( -
-
-
Recent Processes
+ )} + + {!loading && !error && details && tab === "network" && ( +
+
+
Network Connections
+ {(details.network_connections || []).length} rows +
+ +
+
+
+ + + + + + + + + + + + + {(details.network_connections || []).slice(0, 400).map((n, idx) => ( + + + + + + + + + ))} + {(details.network_connections || []).length === 0 && ( + + + + )} + +
TimePIDProcessLocalRemoteStatus
{fmtTime(n.timestamp)}{n.pid ?? "—"}{n.process_name || "—"} + {n.local_address || "—"} + + {n.remote_address || "—"} + {n.status || "—"}
+ No network data. +
+
+
+
-
-
- - - - - - - - - - - - - - {(details.recent_processes || []).slice(0, 150).map((p, idx) => ( - - - - - - - - - - ))} - {(details.recent_processes || []).length === 0 && ( - - - - )} - -
TimePIDNameUserCPU%RAM MBCmdline
{p.timestamp ? new Date(p.timestamp).toLocaleTimeString() : "—"} - {p.pid} - {p.name}{p.username || "—"}{p.cpu_percent ?? 0}{p.memory_mb ?? 0} - {(p.cmdline || "").slice(0, 120)} -
- No process data. -
-
-
-
- )} - - {!loading && details && tab === "network" && ( -
-
-
Network Connections
-
-
-
- - - - - - - - - - - - - {(details.network_connections || []).slice(0, 150).map((n, idx) => ( - - - - - - - - - ))} - {(details.network_connections || []).length === 0 && ( - - - - )} - -
TimePIDProcessLocalRemoteStatus
{n.timestamp ? new Date(n.timestamp).toLocaleTimeString() : "—"} - {n.pid} - {n.process_name || "—"} - {n.local_address || "—"} - - {n.remote_address || "—"} - {n.status || "—"}
- No network data. -
-
-
-
- )} - - {!loading && !details &&
No details.
} + )} + + {!loading && !error && !details && ( +
No details.
+ )} +
- {/* JSON VIEWER MODAL */} + {/* JSON VIEWER */} {jsonOpen && ( -
-
e.stopPropagation()} style={{ width: "min(900px, 96vw)" }}> -
+
+
e.stopPropagation()}> +
-
View JSON
-
{jsonTitle}
+
View JSON
+
{jsonTitle}
-
+
-
-
- 
-                {JSON.stringify(jsonData ?? {}, null, 2)}
-
+ +
+ 
{JSON.stringify(jsonData ?? {}, null, 2)}