391 lines
14 KiB
TypeScript
391 lines
14 KiB
TypeScript
import React, { useEffect, useState, useRef, useMemo } from 'react';
|
|
import { useFocusSearch } from '../hooks/useFocusSearch';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import {
|
|
Terminal, Search, BarChart3, ChevronLeft, ChevronRight,
|
|
Play, Pause, Paperclip, Download, Radio, X as XIcon,
|
|
} from '../icons';
|
|
import api from '../utils/api';
|
|
import { parseEventBody } from '../utils/parseEventBody';
|
|
import ArtifactDrawer from './ArtifactDrawer';
|
|
import EmptyState from './EmptyState/EmptyState';
|
|
import './Dashboard.css';
|
|
import './LiveLogs.css';
|
|
|
|
interface LogEntry {
|
|
id: number;
|
|
timestamp: string;
|
|
decky: string;
|
|
service: string;
|
|
event_type: string;
|
|
attacker_ip: string;
|
|
raw_line: string;
|
|
fields: string;
|
|
msg: string;
|
|
is_bounty?: boolean;
|
|
}
|
|
|
|
const LIMIT = 50;
|
|
|
|
const LiveLogs: React.FC = () => {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
|
|
const query = searchParams.get('q') || '';
|
|
const timeRange = searchParams.get('time') || '1h';
|
|
const isLive = searchParams.get('live') !== 'false';
|
|
const page = parseInt(searchParams.get('page') || '1');
|
|
|
|
const [logs, setLogs] = useState<LogEntry[]>([]);
|
|
const [totalLogs, setTotalLogs] = useState(0);
|
|
const [loading, setLoading] = useState(true);
|
|
const [streaming, setStreaming] = useState(isLive);
|
|
const [searchInput, setSearchInput] = useState(query);
|
|
const searchRef = useRef<HTMLInputElement | null>(null);
|
|
useFocusSearch(searchRef);
|
|
const [selectedHour, setSelectedHour] = useState<number | null>(null);
|
|
|
|
const eventSourceRef = useRef<EventSource | null>(null);
|
|
|
|
const [artifact, setArtifact] = useState<{ decky: string; storedAs: string; fields: Record<string, any> } | null>(null);
|
|
|
|
useEffect(() => { setSearchInput(query); }, [query]);
|
|
|
|
const startTimeParam = (): string | null => {
|
|
if (timeRange === 'all') return null;
|
|
const minutes = timeRange === '15m' ? 15 : timeRange === '1h' ? 60 : timeRange === '24h' ? 1440 : 0;
|
|
if (!minutes) return null;
|
|
return new Date(Date.now() - minutes * 60000).toISOString().replace('T', ' ').substring(0, 19);
|
|
};
|
|
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const offset = (page - 1) * LIMIT;
|
|
let url = `/logs?limit=${LIMIT}&offset=${offset}&search=${encodeURIComponent(query)}`;
|
|
const startTime = startTimeParam();
|
|
if (startTime) url += `&start_time=${startTime}`;
|
|
const res = await api.get(url);
|
|
setLogs(res.data.data);
|
|
setTotalLogs(res.data.total);
|
|
} catch (err) {
|
|
console.error('Failed to fetch logs', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const setupSSE = () => {
|
|
if (eventSourceRef.current) eventSourceRef.current.close();
|
|
|
|
const token = localStorage.getItem('token');
|
|
const baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000/api/v1';
|
|
let url = `${baseUrl}/stream?token=${token}&search=${encodeURIComponent(query)}`;
|
|
const startTime = startTimeParam();
|
|
if (startTime) url += `&start_time=${startTime}`;
|
|
|
|
const es = new EventSource(url);
|
|
eventSourceRef.current = es;
|
|
|
|
es.onmessage = (event) => {
|
|
try {
|
|
const payload = JSON.parse(event.data);
|
|
if (payload.type === 'logs') {
|
|
setLogs(prev => [...payload.data, ...prev].slice(0, 500));
|
|
} else if (payload.type === 'stats') {
|
|
setTotalLogs(payload.data.total_logs);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to parse SSE payload', err);
|
|
}
|
|
};
|
|
|
|
es.onerror = () => console.error('SSE connection lost, reconnecting...');
|
|
};
|
|
|
|
// Always seed with REST backlog on mount / filter changes.
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [query, timeRange, page]);
|
|
|
|
// SSE follows the streaming toggle independently.
|
|
useEffect(() => {
|
|
if (streaming) {
|
|
setupSSE();
|
|
} else if (eventSourceRef.current) {
|
|
eventSourceRef.current.close();
|
|
eventSourceRef.current = null;
|
|
}
|
|
return () => {
|
|
if (eventSourceRef.current) {
|
|
eventSourceRef.current.close();
|
|
eventSourceRef.current = null;
|
|
}
|
|
};
|
|
}, [streaming, query, timeRange]);
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSearchParams({ q: searchInput, time: timeRange, live: streaming.toString(), page: '1' });
|
|
};
|
|
|
|
const handleToggleLive = () => {
|
|
const newStreaming = !streaming;
|
|
setStreaming(newStreaming);
|
|
setSearchParams({ q: query, time: timeRange, live: newStreaming.toString(), page: '1' });
|
|
};
|
|
|
|
const handleTimeChange = (newTime: string) => {
|
|
setSearchParams({ q: query, time: newTime, live: streaming.toString(), page: '1' });
|
|
};
|
|
|
|
const changePage = (newPage: number) => {
|
|
setSearchParams({ q: query, time: timeRange, live: 'false', page: newPage.toString() });
|
|
};
|
|
|
|
const buckets = useMemo(() => {
|
|
const b = Array.from({ length: 24 }, (_, i) => ({ i, count: 0, bounties: 0 }));
|
|
logs.forEach(l => {
|
|
const h = parseInt(String(l.timestamp).slice(11, 13), 10);
|
|
if (!isNaN(h) && h >= 0 && h < 24) {
|
|
b[h].count++;
|
|
if (l.is_bounty) b[h].bounties++;
|
|
}
|
|
});
|
|
return b;
|
|
}, [logs]);
|
|
const maxBar = Math.max(...buckets.map(b => b.count), 1);
|
|
const peakHour = buckets.findIndex(b => b.count === maxBar);
|
|
|
|
const filteredLogs = useMemo(() => {
|
|
if (selectedHour == null) return logs;
|
|
return logs.filter(l => parseInt(String(l.timestamp).slice(11, 13), 10) === selectedHour);
|
|
}, [logs, selectedHour]);
|
|
|
|
const handleExport = () => {
|
|
const header = 'timestamp,decky,service,attacker_ip,event_type,msg';
|
|
const rows = filteredLogs.map(l =>
|
|
[l.timestamp, l.decky, l.service, l.attacker_ip, l.event_type, (l.msg || '').replace(/"/g, '""')]
|
|
.map(v => `"${v ?? ''}"`).join(',')
|
|
);
|
|
const blob = new Blob([[header, ...rows].join('\n')], { type: 'text/csv' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `decnet-logs-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.csv`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const totalPages = Math.max(1, Math.ceil(totalLogs / LIMIT));
|
|
|
|
return (
|
|
<div className="logs-root">
|
|
<div className="page-header">
|
|
<div className="page-title-group">
|
|
<h1>LOGS</h1>
|
|
<span className="page-sub">
|
|
{filteredLogs.length.toLocaleString()} SHOWN · {totalLogs.toLocaleString()} MATCHES · STREAM {streaming ? 'LIVE' : 'PAUSED'}
|
|
</span>
|
|
</div>
|
|
<div className="actions">
|
|
<button className={`btn ${streaming ? '' : 'violet'}`} onClick={handleToggleLive}>
|
|
{streaming
|
|
? <><Pause size={12} className="fx-blink" /> PAUSE</>
|
|
: <><Play size={12} /> GO LIVE</>}
|
|
</button>
|
|
<button className="btn ghost" onClick={handleExport} disabled={filteredLogs.length === 0}>
|
|
<Download size={12} /> EXPORT
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form className="logs-controls" onSubmit={handleSearch}>
|
|
<div className="search-container">
|
|
<Search size={14} className="search-icon" />
|
|
<input
|
|
ref={searchRef}
|
|
type="text"
|
|
placeholder="Query (e.g. decky:decky-03 service:ssh attacker:89.248)"
|
|
value={searchInput}
|
|
onChange={(e) => setSearchInput(e.target.value)}
|
|
/>
|
|
{searchInput && (
|
|
<button
|
|
type="button"
|
|
className="close-btn"
|
|
onClick={() => { setSearchInput(''); setSearchParams({ q: '', time: timeRange, live: streaming.toString(), page: '1' }); }}
|
|
style={{ background: 'transparent', border: 'none', color: 'inherit', cursor: 'pointer', padding: 0, display: 'flex' }}
|
|
aria-label="Clear search"
|
|
>
|
|
<XIcon size={12} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<select
|
|
className="time-select"
|
|
value={timeRange}
|
|
onChange={(e) => handleTimeChange(e.target.value)}
|
|
>
|
|
<option value="15m">LAST 15 MIN</option>
|
|
<option value="1h">LAST 1 HOUR</option>
|
|
<option value="24h">LAST 24 HOURS</option>
|
|
<option value="all">ALL TIME</option>
|
|
</select>
|
|
</form>
|
|
|
|
<div className="histogram-wrap">
|
|
<div className="histogram-header">
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<BarChart3 size={12} />
|
|
<span>ATTACK VOLUME — PAST 24 HOURS</span>
|
|
{selectedHour != null && (
|
|
<span className="violet-accent" style={{ marginLeft: 8 }}>
|
|
· {String(selectedHour).padStart(2, '0')}:00 SELECTED —
|
|
<span className="clear-sel" onClick={() => setSelectedHour(null)}>clear</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span>PEAK: {maxBar} @ HOUR {String(peakHour).padStart(2, '0')}</span>
|
|
</div>
|
|
<div className="histogram">
|
|
{buckets.map(b => (
|
|
<div
|
|
key={b.i}
|
|
className={`bar ${selectedHour === b.i ? 'selected' : ''} ${b.bounties > 0 ? 'has-bounty' : ''}`}
|
|
style={{ height: `${(b.count / maxBar) * 100}%` }}
|
|
title={`${String(b.i).padStart(2, '0')}:00 — ${b.count} events${b.bounties ? `, ${b.bounties} bounties` : ''}`}
|
|
onClick={() => setSelectedHour(selectedHour === b.i ? null : b.i)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="histogram-axis">
|
|
<span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>23:59</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="logs-section">
|
|
<div className="section-header">
|
|
<div className="section-title">
|
|
<Terminal size={14} />
|
|
<span>LOG EXPLORER</span>
|
|
</div>
|
|
<div className="section-actions">
|
|
<span>SHOWING {filteredLogs.length} OF {totalLogs.toLocaleString()}</span>
|
|
{!streaming && (
|
|
<div className="pager" style={{ marginLeft: 16 }}>
|
|
<span className="dim">Page {page} of {totalPages}</span>
|
|
<button disabled={page === 1} onClick={() => changePage(page - 1)} aria-label="Previous page">
|
|
<ChevronLeft size={14} />
|
|
</button>
|
|
<button disabled={page >= totalPages} onClick={() => changePage(page + 1)} aria-label="Next page">
|
|
<ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="logs-table-container" style={{ maxHeight: 520 }}>
|
|
<table className="logs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>TIME</th>
|
|
<th>DECKY</th>
|
|
<th>SVC</th>
|
|
<th>ATTACKER</th>
|
|
<th>EVENT</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredLogs.length > 0 ? filteredLogs.map(log => {
|
|
let parsedFields: Record<string, any> = {};
|
|
if (log.fields) {
|
|
try { parsedFields = JSON.parse(log.fields); } catch { /* noop */ }
|
|
}
|
|
let msgHead: string | null = null;
|
|
let msgTail: string | null = null;
|
|
if (Object.keys(parsedFields).length === 0) {
|
|
const parsed = parseEventBody(log.msg);
|
|
parsedFields = parsed.fields;
|
|
msgHead = parsed.head;
|
|
msgTail = parsed.tail;
|
|
} else if (log.msg && log.msg !== '-') {
|
|
msgTail = log.msg;
|
|
}
|
|
const et = log.event_type && log.event_type !== '-' ? log.event_type : null;
|
|
const headParts = [et, msgHead].filter(Boolean) as string[];
|
|
const hasBadges = Object.keys(parsedFields).length > 0 || parsedFields.stored_as;
|
|
|
|
return (
|
|
<tr key={log.id}>
|
|
<td className="t-time">{new Date(log.timestamp).toLocaleString()}</td>
|
|
<td className="t-decky">{log.decky}</td>
|
|
<td className="t-svc">{log.service}</td>
|
|
<td>{log.attacker_ip}</td>
|
|
<td className="t-event">
|
|
<div className="event-head">
|
|
{headParts.join(' · ')}
|
|
{msgTail && (
|
|
<span className="event-tail">
|
|
{headParts.length ? ' — ' : ''}{msgTail}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{hasBadges && (
|
|
<div className="badges">
|
|
{parsedFields.stored_as && (
|
|
<button
|
|
className="artifact-btn"
|
|
onClick={() => setArtifact({
|
|
decky: log.decky,
|
|
storedAs: String(parsedFields.stored_as),
|
|
fields: parsedFields,
|
|
})}
|
|
title="Inspect captured artifact"
|
|
>
|
|
<Paperclip size={11} /> ARTIFACT
|
|
</button>
|
|
)}
|
|
{Object.entries(parsedFields)
|
|
.filter(([k]) => k !== 'meta_json_b64' && k !== 'stored_as')
|
|
.map(([k, v]) => (
|
|
<span key={k} className="field-badge">
|
|
<span className="k">{k}:</span>
|
|
{typeof v === 'object' ? JSON.stringify(v) : String(v)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}) : (
|
|
<tr className="empty-row">
|
|
<td colSpan={5}>
|
|
<EmptyState
|
|
icon={Radio}
|
|
title={loading ? 'RETRIEVING DATA…' : 'NO LOGS MATCHING CRITERIA'}
|
|
hint={loading ? undefined : 'adjust filters or wait for new events'}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{artifact && (
|
|
<ArtifactDrawer
|
|
decky={artifact.decky}
|
|
storedAs={artifact.storedAs}
|
|
fields={artifact.fields}
|
|
onClose={() => setArtifact(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LiveLogs;
|