208 lines
9.8 KiB
TypeScript
208 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { X, Loader2, Database, AlertCircle, Globe, Monitor, Cpu, Fingerprint, Hash, Terminal, Radio } from "lucide-react";
|
|
import { useMetadataDetail, MetadataDetailType } from "@/lib/api-metadata-detail";
|
|
import { Pagination } from "@/components/ui/Pagination";
|
|
import { fmtBytes, getKnownDomainService } from "@/lib/utils";
|
|
import { COLS, getColGroup, TableHead, TableRow } from "./MetadataDetailTable";
|
|
|
|
interface TypeConfig {
|
|
title: string;
|
|
subtitle: string;
|
|
icon: React.ElementType;
|
|
color: string;
|
|
}
|
|
|
|
const TYPE_CONFIG: Record<MetadataDetailType, TypeConfig> = {
|
|
sni_hostname: { title: "SNI Hostname", subtitle: "Devices that accessed this TLS hostname", icon: Globe, color: "blue" },
|
|
ssl_server_cn: { title: "SSL Common Name", subtitle: "Devices that connected to this certificate", icon: Globe, color: "blue" },
|
|
quic_hostname: { title: "QUIC Hostname", subtitle: "Devices using this QUIC destination", icon: Globe, color: "purple" },
|
|
netbios_hostname:{ title: "NetBIOS Hostname", subtitle: "Device records with this NetBIOS name", icon: Monitor, color: "cyan" },
|
|
os_label: { title: "Operating System", subtitle: "Devices running this operating system", icon: Cpu, color: "emerald" },
|
|
dhcp_fingerprint:{ title: "DHCP Fingerprint", subtitle: "Agents with this device fingerprint class", icon: Fingerprint, color: "amber" },
|
|
http_useragent: { title: "HTTP User Agent", subtitle: "Agent records for this User Agent string", icon: Globe, color: "orange" },
|
|
bittorrent_hash: { title: "BitTorrent Hash", subtitle: "Agent records for this torrent info hash", icon: Hash, color: "red" },
|
|
ssh_version: { title: "SSH Version", subtitle: "SSH client and server connections", icon: Terminal, color: "violet" },
|
|
mdns_hostname: { title: "mDNS Hostname", subtitle: "Agent records for this mDNS announcement", icon: Radio, color: "teal" },
|
|
};
|
|
|
|
const COLOR_MAP: Record<string, { icon: string; ring: string; glow: string }> = {
|
|
blue: { icon: "text-blue-400", ring: "ring-blue-500/30", glow: "bg-blue-500" },
|
|
purple: { icon: "text-purple-400", ring: "ring-purple-500/30", glow: "bg-purple-500" },
|
|
cyan: { icon: "text-cyan-400", ring: "ring-cyan-500/30", glow: "bg-cyan-500" },
|
|
emerald:{ icon: "text-emerald-400", ring: "ring-emerald-500/30", glow: "bg-emerald-500" },
|
|
amber: { icon: "text-amber-400", ring: "ring-amber-500/30", glow: "bg-amber-500" },
|
|
orange: { icon: "text-orange-400", ring: "ring-orange-500/30", glow: "bg-orange-500" },
|
|
red: { icon: "text-red-400", ring: "ring-red-500/30", glow: "bg-red-500" },
|
|
violet: { icon: "text-violet-400", ring: "ring-violet-500/30", glow: "bg-violet-500" },
|
|
teal: { icon: "text-teal-400", ring: "ring-teal-500/30", glow: "bg-teal-500" },
|
|
};
|
|
|
|
interface Props {
|
|
type: MetadataDetailType | null;
|
|
value: string | null;
|
|
timeRange: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const PAGE_SIZE = 50;
|
|
|
|
export function MetadataDetailPanel({ type, value, timeRange, onClose }: Props) {
|
|
const isOpen = !!(type && value);
|
|
const { data, isLoading, error } = useMetadataDetail(type, value, timeRange);
|
|
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
const [visible, setVisible] = useState(false);
|
|
const [page, setPage] = useState(1);
|
|
|
|
useEffect(() => { setIsMounted(true); }, []);
|
|
|
|
const handleClose = useCallback(() => {
|
|
setIsClosing(true);
|
|
setTimeout(() => {
|
|
setVisible(false);
|
|
setIsClosing(false);
|
|
document.body.style.overflow = "unset";
|
|
onClose();
|
|
}, 480);
|
|
}, [onClose]);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setVisible(true);
|
|
setIsClosing(false);
|
|
setPage(1);
|
|
document.body.style.overflow = "hidden";
|
|
}
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
const handler = (e: KeyboardEvent) => { if (e.key === "Escape") handleClose(); };
|
|
window.addEventListener("keydown", handler);
|
|
return () => window.removeEventListener("keydown", handler);
|
|
}, [handleClose]);
|
|
|
|
useEffect(() => () => { document.body.style.overflow = "unset"; }, []);
|
|
|
|
if (!isMounted || !visible || !type || !value) return null;
|
|
|
|
const cfg = TYPE_CONFIG[type];
|
|
const colors = COLOR_MAP[cfg.color];
|
|
const Icon = cfg.icon;
|
|
const group = getColGroup(type);
|
|
const cols = COLS[group];
|
|
|
|
const totalPages = Math.max(1, Math.ceil(data.length / PAGE_SIZE));
|
|
const safePage = Math.min(page, totalPages);
|
|
const pageStart = (safePage - 1) * PAGE_SIZE;
|
|
const pagedData = data.slice(pageStart, pageStart + PAGE_SIZE);
|
|
|
|
const totalDownload = data.reduce((s, r) => s + (r.download || 0), 0);
|
|
const totalUpload = data.reduce((s, r) => s + (r.upload || 0), 0);
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={handleClose}>
|
|
<div className={`absolute inset-0 bg-black/60 backdrop-blur-md ${isClosing ? "animate-overlay-out" : "animate-overlay-in"}`} />
|
|
|
|
<div
|
|
className={`relative bg-card border border-border/50 rounded-2xl w-full max-w-5xl h-[85vh] flex flex-col shadow-2xl shadow-black/60 overflow-hidden font-sans ${isClosing ? "animate-modal-out" : "animate-modal-in"}`}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
|
|
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border bg-gradient-to-r from-blue-900/30 to-purple-900/20 rounded-t-2xl flex-shrink-0">
|
|
<div className="flex items-center gap-3 min-w-0">
|
|
<div className="relative flex-shrink-0">
|
|
<div className={`absolute inset-0 ${colors.glow} blur-xl opacity-20 rounded-full`} />
|
|
<div className={`p-2.5 bg-white/[0.06] rounded-xl ring-1 ${colors.ring} relative`}>
|
|
<Icon className={`w-5 h-5 ${colors.icon}`} />
|
|
</div>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className={`text-xs font-semibold uppercase tracking-widest mb-0.5 ${colors.icon}`}>{cfg.title}</p>
|
|
<h3 className="text-lg font-bold text-card-foreground truncate" title={value}>{value}</h3>
|
|
{getKnownDomainService(value) && (
|
|
<span className="inline-block mt-1 px-2 py-0.5 bg-indigo-500/20 text-indigo-300 text-[10px] font-semibold rounded uppercase tracking-wider">
|
|
{getKnownDomainService(value)}
|
|
</span>
|
|
)}
|
|
<p className="text-xs text-muted-foreground mt-0.5">{cfg.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleClose}
|
|
className="ml-4 flex-shrink-0 p-2 text-muted-foreground hover:text-card-foreground hover:bg-secondary rounded-xl transition-all"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{!isLoading && data.length > 0 && (
|
|
<div className="flex items-center gap-6 px-6 py-2.5 bg-white/[0.02] border-b border-white/[0.06] flex-shrink-0 text-xs">
|
|
<span className="text-muted-foreground">
|
|
<span className="font-semibold text-slate-200">{data.length.toLocaleString()}</span>
|
|
{" "}{data.length === 1 ? "record" : "records"}
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
Total Download:{" "}
|
|
<span className="text-cyan-400 font-semibold font-mono">{fmtBytes(totalDownload)}</span>
|
|
</span>
|
|
<span className="text-muted-foreground">
|
|
Total Upload:{" "}
|
|
<span className="text-emerald-400 font-semibold font-mono">{fmtBytes(totalUpload)}</span>
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0 custom-scrollbar">
|
|
{isLoading ? (
|
|
<div className="flex flex-col items-center justify-center h-48 gap-3">
|
|
<Loader2 className="h-8 w-8 animate-spin text-blue-400" />
|
|
<p className="text-slate-400 text-sm font-medium">Loading data from Database...</p>
|
|
</div>
|
|
) : error ? (
|
|
<div className="flex flex-col items-center justify-center h-48 gap-3 text-red-400">
|
|
<AlertCircle className="h-8 w-8" />
|
|
<p className="text-sm font-medium">{error}</p>
|
|
</div>
|
|
) : data.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-48 gap-3 text-slate-500">
|
|
<Database className="h-8 w-8" />
|
|
<p className="text-base font-semibold text-slate-400">No Data</p>
|
|
<p className="text-sm">No records found for this entry in Database</p>
|
|
</div>
|
|
) : (
|
|
<table className="w-full border-collapse text-center whitespace-nowrap text-sm table-fixed">
|
|
<thead className="sticky top-0 bg-slate-900 z-10">
|
|
<TableHead cols={cols} />
|
|
</thead>
|
|
<tbody className="divide-y divide-white/[0.04]">
|
|
{pagedData.map((row, i) => (
|
|
<TableRow key={pageStart + i} row={row} group={group} />
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
|
|
{!isLoading && !error && data.length > 0 && (
|
|
<div className="flex-shrink-0">
|
|
<Pagination
|
|
currentPage={safePage}
|
|
totalPages={totalPages}
|
|
onPageChange={setPage}
|
|
totalResults={data.length}
|
|
startIndex={pageStart}
|
|
endIndex={pageStart + PAGE_SIZE}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|