feat: device detail drill-down modal + smart domain/app display
- Add DeviceDetailModal with 8 tabs (Info, Flows, Apps, Encryption, Servers, Password Leaks, IP Reputation, VPN & Events) - Make device cards in AgentDetailModal clickable (nested modal drill-down) - Expand fetchDeviceDetails backend to query all 10 correlated tables (devices, flows, intel_device_discovery, intel_encryption_audit, intel_server_discovery, intel_unencrypted_passwords, intel_ip_reputation, intel_vpn_detection, events, mac_bandwidth) - Smart combined app/domain display: prioritize actual domain names over port-only labels (Port 443 -> scontent.fcgk42-1.fna.fbcdn.net) - Update Flows tab: domain shown in teal monospace, protocols in purple, port-only entries muted - Add 10 new TypeScript interfaces for device detail data types - Add MAC address fallback queries (by MAC when IP yields no results) - Fix fmtBytes for very large values
This commit is contained in:
vanne committed
1 parent
bba75c7dc6
commit
26179a0270
8 files changed
+2171
-400
No files matched your search
@@ -3,7 +3,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { fetchAgentDetails, AgentDetails } from "@/lib/api";
|
||||
import { fmtBytes } from "@/lib/utils";
|
||||
import { Loader2, X, Server, Monitor, Activity, Globe, ChevronRight } from "lucide-react";
|
||||
import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
|
||||
import {
|
||||
Loader2, X, Server, Monitor, Activity, Globe, Shield,
|
||||
Bell, Wifi, AlertTriangle, Lock, Unlock, ChevronRight,
|
||||
Eye, Router
|
||||
} from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
agentUuid: string;
|
||||
@@ -11,13 +16,60 @@ interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
type Tab = "devices" | "flows" | "apps";
|
||||
type Tab = "devices" | "flows" | "apps" | "security" | "events" | "mac";
|
||||
|
||||
// ── Severity colour helper ─────────────────────────────────────────────────
|
||||
function severityStyle(sev: string | null) {
|
||||
switch ((sev || "").toLowerCase()) {
|
||||
case "critical": return { badge: "bg-red-500/15 text-red-400 ring-red-500/30", dot: "bg-red-400" };
|
||||
case "high": return { badge: "bg-orange-500/15 text-orange-400 ring-orange-500/30", dot: "bg-orange-400" };
|
||||
case "warning": return { badge: "bg-yellow-500/15 text-yellow-400 ring-yellow-500/30", dot: "bg-yellow-400" };
|
||||
case "info": return { badge: "bg-blue-500/15 text-blue-400 ring-blue-500/30", dot: "bg-blue-400" };
|
||||
default: return { badge: "bg-slate-500/15 text-slate-400 ring-slate-500/30", dot: "bg-slate-400" };
|
||||
}
|
||||
}
|
||||
|
||||
function riskStyle(level: string | null) {
|
||||
switch ((level || "").toLowerCase()) {
|
||||
case "rawan":
|
||||
case "critical": return { badge: "bg-red-500/15 text-red-400 ring-red-500/30", dot: "bg-red-400" };
|
||||
case "sedang":
|
||||
case "medium": return { badge: "bg-yellow-500/15 text-yellow-400 ring-yellow-500/30", dot: "bg-yellow-400" };
|
||||
case "aman":
|
||||
case "low": return { badge: "bg-green-500/15 text-green-400 ring-green-500/30", dot: "bg-green-400" };
|
||||
default: return { badge: "bg-slate-500/15 text-slate-400 ring-slate-500/30", dot: "bg-slate-400" };
|
||||
}
|
||||
}
|
||||
|
||||
// ── Shared table wrapper ────────────────────────────────────────────────────
|
||||
function TableWrap({ children, head }: { children: React.ReactNode; head: string[] }) {
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl border border-white/5">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-white/10 bg-white/[0.02]">
|
||||
{head.map((h) => (
|
||||
<th key={h} className="px-3 py-2 text-left font-medium text-slate-400 whitespace-nowrap">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">{children}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ msg }: { msg: string }) {
|
||||
return <p className="text-slate-500 text-sm text-center py-10">{msg}</p>;
|
||||
}
|
||||
|
||||
// ── Main component ──────────────────────────────────────────────────────────
|
||||
export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
|
||||
const [data, setData] = useState<AgentDetails | null>(null);
|
||||
const [data, setData] = useState<AgentDetails | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<Tab>("devices");
|
||||
const [selectedDevice, setSelectedDevice] = useState<{ ip: string; label: string | null; mac: string | null } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
@@ -28,21 +80,33 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
|
||||
.finally(() => setIsLoading(false));
|
||||
}, [agentUuid]);
|
||||
|
||||
// Count security alerts
|
||||
const secCount = data
|
||||
? (data.security?.insecure_protocols?.length ?? 0) +
|
||||
(data.security?.unencrypted_passwords?.length ?? 0) +
|
||||
(data.security?.tor_detections?.length ?? 0) +
|
||||
(data.security?.vpn_detections?.length ?? 0)
|
||||
: 0;
|
||||
|
||||
const tabs: { key: Tab; label: string; icon: React.ReactNode; count?: number }[] = [
|
||||
{ key: "devices", label: "Devices", icon: <Monitor className="w-4 h-4" />, count: data?.devices.length },
|
||||
{ key: "flows", label: "Active Flows", icon: <Activity className="w-4 h-4" />, count: data?.flows.length },
|
||||
{ key: "apps", label: "Top Apps", icon: <Globe className="w-4 h-4" />, count: data?.top_apps.length },
|
||||
{ key: "devices", label: "Devices", icon: <Monitor className="w-3.5 h-3.5" />, count: data?.devices.length },
|
||||
{ key: "flows", label: "Flows", icon: <Activity className="w-3.5 h-3.5" />, count: data?.flows.length },
|
||||
{ key: "apps", label: "Top Apps", icon: <Globe className="w-3.5 h-3.5" />, count: data?.top_apps.length },
|
||||
{ key: "security", label: "Security", icon: <Shield className="w-3.5 h-3.5" />, count: secCount || undefined },
|
||||
{ key: "events", label: "Events", icon: <Bell className="w-3.5 h-3.5" />, count: data?.events.length },
|
||||
{ key: "mac", label: "MAC Bandwidth", icon: <Wifi className="w-3.5 h-3.5" />, count: data?.mac_bandwidth.length },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||||
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
|
||||
<div
|
||||
className="relative bg-[#0d1117] border border-white/10 rounded-2xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl shadow-black/60 animate-slide-up"
|
||||
className="relative bg-[#0d1117] border border-white/10 rounded-2xl w-full max-w-5xl max-h-[92vh] flex flex-col shadow-2xl shadow-black/60 animate-slide-up"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-gradient-to-r from-blue-900/30 to-purple-900/20 rounded-t-2xl">
|
||||
{/* ── Header ── */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 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">
|
||||
<div className="p-2 bg-blue-500/20 rounded-lg ring-1 ring-blue-500/30">
|
||||
<Server className="w-5 h-5 text-blue-400" />
|
||||
@@ -52,52 +116,52 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
|
||||
<p className="text-xs text-slate-400 font-mono">{agentUuid}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all"
|
||||
>
|
||||
<button onClick={onClose} className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* ── Body ── */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-3">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-400" />
|
||||
<p className="text-slate-400 text-sm">Loading agent data...</p>
|
||||
<p className="text-slate-400 text-sm">Loading agent data…</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-6 text-center text-red-400 text-sm">{error}</div>
|
||||
) : data ? (
|
||||
<>
|
||||
{/* KPI Summary row */}
|
||||
<div className="grid grid-cols-4 gap-4 px-6 py-4 border-b border-white/5">
|
||||
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
|
||||
<p className="text-xs text-slate-400 mb-1">Devices</p>
|
||||
<p className="text-2xl font-bold text-white">{data.devices.length}</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
|
||||
<p className="text-xs text-slate-400 mb-1">Active Flows</p>
|
||||
<p className="text-2xl font-bold text-white">{data.summary?.active_flows ?? data.flows.length}</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
|
||||
<p className="text-xs text-slate-400 mb-1">Total Download</p>
|
||||
<p className="text-2xl font-bold text-cyan-400">{fmtBytes(data.summary?.bandwidth_down ?? 0)}</p>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
|
||||
<p className="text-xs text-slate-400 mb-1">Total Upload</p>
|
||||
<p className="text-2xl font-bold text-green-400">{fmtBytes(data.summary?.bandwidth_up ?? 0)}</p>
|
||||
</div>
|
||||
{/* ── KPI row ── */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 px-6 py-4 border-b border-white/5 flex-shrink-0">
|
||||
{[
|
||||
{ label: "Devices", value: data.devices.length, color: "text-white" },
|
||||
{ label: "Flows", value: data.summary?.active_flows ?? data.flows.length, color: "text-white" },
|
||||
{ label: "Download", value: fmtBytes(data.summary?.bandwidth_down ?? 0), color: "text-cyan-400" },
|
||||
{ label: "Upload", value: fmtBytes(data.summary?.bandwidth_up ?? 0), color: "text-green-400" },
|
||||
].map((kpi) => (
|
||||
<div key={kpi.label} className="bg-white/5 rounded-xl p-3 border border-white/5">
|
||||
<p className="text-xs text-slate-400 mb-1">{kpi.label}</p>
|
||||
<p className={`text-xl font-bold ${kpi.color}`}>{kpi.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 px-6 py-3 border-b border-white/5">
|
||||
{/* ── Security alert strip ── */}
|
||||
{secCount > 0 && (
|
||||
<div className="mx-6 mt-3 flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-xs text-red-400">
|
||||
<AlertTriangle className="w-4 h-4 flex-shrink-0" />
|
||||
<span><strong>{secCount}</strong> security alerts detected on this agent — check the Security tab</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Tabs ── */}
|
||||
<div className="flex gap-1 px-6 py-3 border-b border-white/5 flex-shrink-0 flex-wrap">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
activeTab === tab.key
|
||||
? "bg-blue-500/20 text-blue-300 ring-1 ring-blue-500/40"
|
||||
: "text-slate-400 hover:text-white hover:bg-white/5"
|
||||
@@ -105,8 +169,8 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
|
||||
>
|
||||
{tab.icon}
|
||||
{tab.label}
|
||||
{tab.count !== undefined && (
|
||||
<span className="ml-1 px-1.5 py-0.5 bg-white/10 rounded text-xs text-slate-300">
|
||||
{tab.count !== undefined && tab.count > 0 && (
|
||||
<span className={`ml-0.5 px-1.5 py-0.5 rounded text-xs ${activeTab === tab.key ? "bg-blue-500/30 text-blue-200" : "bg-white/10 text-slate-300"}`}>
|
||||
{tab.count}
|
||||
</span>
|
||||
)}
|
||||
@@ -114,34 +178,32 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<div className="px-6 py-4">
|
||||
{/* ── Tab content ── */}
|
||||
<div className="px-6 py-4 space-y-4">
|
||||
|
||||
{/* DEVICES */}
|
||||
{activeTab === "devices" && (
|
||||
<div className="space-y-2">
|
||||
{data.devices.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm text-center py-8">No devices found for this agent.</p>
|
||||
) : (
|
||||
data.devices.map((d, i) => {
|
||||
const riskCfg = d.risk_level === "Rawan" || d.risk_level === "Critical"
|
||||
? { color: "text-red-400", bg: "bg-red-500/10 ring-red-500/30", dot: "bg-red-400", label: d.risk_level }
|
||||
: d.risk_level === "Sedang" || d.risk_level === "Medium"
|
||||
? { color: "text-yellow-400", bg: "bg-yellow-500/10 ring-yellow-500/30", dot: "bg-yellow-400", label: d.risk_level }
|
||||
: d.risk_level === "Aman" || d.risk_level === "Low"
|
||||
? { color: "text-green-400", bg: "bg-green-500/10 ring-green-500/30", dot: "bg-green-400", label: d.risk_level }
|
||||
: null;
|
||||
data.devices.length === 0 ? <EmptyState msg="No devices found for this agent." /> : (
|
||||
<div className="space-y-2">
|
||||
{data.devices.map((d, i) => {
|
||||
const rc = riskStyle(d.risk_level);
|
||||
return (
|
||||
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-lg transition-colors">
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setSelectedDevice({ ip: d.ip_address || "", label: d.device_label, mac: d.mac_address })}
|
||||
className="w-full text-left p-3 bg-white/[0.03] hover:bg-white/[0.07] hover:border-cyan-500/30 border border-white/5 rounded-xl transition-all group cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-shrink-0 p-2 bg-slate-800/60 rounded-lg">
|
||||
<Monitor className="w-4 h-4 text-slate-400" />
|
||||
<div className="flex-shrink-0 p-2 bg-slate-800/60 group-hover:bg-cyan-500/10 rounded-lg transition-colors">
|
||||
<Monitor className="w-4 h-4 text-slate-400 group-hover:text-cyan-400 transition-colors" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-white text-sm truncate">{d.device_label || d.ip_address || "Unknown"}</p>
|
||||
{riskCfg && (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold ring-1 ${riskCfg.bg} ${riskCfg.color}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${riskCfg.dot}`} />
|
||||
{riskCfg.label}
|
||||
<p className="font-medium text-white text-sm truncate group-hover:text-cyan-300 transition-colors">{d.device_label || d.ip_address || "Unknown"}</p>
|
||||
{d.risk_level && (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold ring-1 ${rc.badge}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${rc.dot}`} />
|
||||
{d.risk_level}
|
||||
</span>
|
||||
)}
|
||||
{d.has_insecure && (
|
||||
@@ -150,106 +212,360 @@ export function AgentDetailModal({ agentUuid, agentLabel, onClose }: Props) {
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-0.5">
|
||||
<div className="flex items-center gap-3 mt-0.5 flex-wrap">
|
||||
<p className="text-xs text-slate-400 font-mono">{d.ip_address}</p>
|
||||
{d.mac_address && <p className="text-xs text-slate-500 font-mono">{d.mac_address}</p>}
|
||||
{d.os_label && <p className="text-xs text-blue-400">{d.os_label}</p>}
|
||||
{d.manufacturer && <p className="text-xs text-slate-500">{d.manufacturer}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0 space-y-0.5">
|
||||
<p className="text-xs text-cyan-400">{fmtBytes(d.download ?? 0)}</p>
|
||||
<p className="text-xs text-cyan-400">↓ {fmtBytes(d.download ?? 0)}</p>
|
||||
<p className="text-xs text-green-400">↑ {fmtBytes(d.upload ?? 0)}</p>
|
||||
{d.encrypted_pct !== null && (
|
||||
<p className="text-xs text-slate-500">🔒 {d.encrypted_pct}%</p>
|
||||
)}
|
||||
<ChevronRight className="w-4 h-4 text-slate-600 group-hover:text-cyan-400 ml-auto transition-colors" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* FLOWS */}
|
||||
{activeTab === "flows" && (
|
||||
<div className="overflow-x-auto">
|
||||
{data.flows.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm text-center py-8">No flows found for this agent.</p>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left border-b border-white/10">
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">Source IP</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">Destination</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">App / Domain</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">Protocol</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400 text-right">Download</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400 text-right">Upload</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{data.flows.map((f, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
|
||||
<td className="py-2 pr-4 font-mono text-xs text-blue-400">{f.src_ip || "-"}</td>
|
||||
<td className="py-2 pr-4 font-mono text-xs text-slate-300">
|
||||
{f.dst_ip || "-"}
|
||||
{f.dst_port ? <span className="text-slate-500">:{f.dst_port}</span> : ""}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-xs text-purple-300 max-w-[140px] truncate">
|
||||
{f.app_label || f.domain || "-"}
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-xs text-slate-400">{f.protocol || "-"}</td>
|
||||
<td className="py-2 pr-4 text-right text-xs text-cyan-400">{fmtBytes(f.download)}</td>
|
||||
<td className="py-2 text-right text-xs text-green-400">{fmtBytes(f.upload)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
data.flows.length === 0 ? <EmptyState msg="No flows found for this agent." /> : (
|
||||
<TableWrap head={["Source IP", "Destination", "App / Domain", "Proto", "↓", "↑", "Last Seen"]}>
|
||||
{data.flows.map((f, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400 whitespace-nowrap">{f.src_ip || "—"}</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-slate-300 whitespace-nowrap">
|
||||
{f.dst_ip || "—"}{f.dst_port ? <span className="text-slate-500">:{f.dst_port}</span> : ""}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-purple-300 max-w-[140px] truncate">{f.app_label || f.domain || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{f.protocol || "—"}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-cyan-400 whitespace-nowrap">{fmtBytes(f.download)}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-green-400 whitespace-nowrap">{fmtBytes(f.upload)}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-500 whitespace-nowrap">{f.last_seen?.slice(0, 16) || "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableWrap>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* TOP APPS */}
|
||||
{activeTab === "apps" && (
|
||||
<div className="space-y-2">
|
||||
{data.top_apps.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm text-center py-8">No application data for this agent.</p>
|
||||
) : (
|
||||
data.top_apps.map((a, i) => {
|
||||
const total = a.download + a.upload;
|
||||
const maxTotal = Math.max(...data.top_apps.map(x => x.download + x.upload), 1);
|
||||
const pct = (total / maxTotal) * 100;
|
||||
data.top_apps.length === 0 ? <EmptyState msg="No application data for this agent." /> : (
|
||||
<div className="space-y-2">
|
||||
{data.top_apps.map((a, i) => {
|
||||
const total = (a.download ?? 0) + (a.upload ?? 0);
|
||||
const maxTotal = Math.max(...data.top_apps.map(x => (x.download ?? 0) + (x.upload ?? 0)), 1);
|
||||
const pct = (total / maxTotal) * 100;
|
||||
return (
|
||||
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-lg transition-colors">
|
||||
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-xl transition-colors">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{a.favicon ? (
|
||||
<img src={a.favicon} alt={a.app_label} className="w-5 h-5 rounded bg-white p-0.5 flex-shrink-0" />
|
||||
) : (
|
||||
<div className="w-5 h-5 rounded bg-slate-700 flex-shrink-0" />
|
||||
)}
|
||||
{a.favicon
|
||||
? <img src={a.favicon} alt={a.app_label} className="w-5 h-5 rounded bg-white p-0.5 flex-shrink-0" />
|
||||
: <div className="w-5 h-5 rounded bg-slate-700 flex-shrink-0" />
|
||||
}
|
||||
<span className="font-medium text-white text-sm flex-1">{a.app_label}</span>
|
||||
{a.category && <span className="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded">{a.category}</span>}
|
||||
<span className="text-xs font-mono text-white">{fmtBytes(total)}</span>
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs text-slate-400">
|
||||
<span className="text-cyan-400">↓ {fmtBytes(a.download)}</span>
|
||||
<span className="text-green-400">↑ {fmtBytes(a.upload)}</span>
|
||||
<div className="flex gap-3 text-xs text-slate-400 mb-2">
|
||||
<span className="text-cyan-400">↓ {fmtBytes(a.download ?? 0)}</span>
|
||||
<span className="text-green-400">↑ {fmtBytes(a.upload ?? 0)}</span>
|
||||
</div>
|
||||
<div className="mt-2 h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* SECURITY */}
|
||||
{activeTab === "security" && (
|
||||
<div className="space-y-6">
|
||||
{/* Encryption Audit */}
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Lock className="w-4 h-4 text-blue-400" /> Encryption Audit
|
||||
<span className="ml-auto text-xs text-slate-500">{data.security?.encryption_audit.length ?? 0} devices</span>
|
||||
</h4>
|
||||
{(data.security?.encryption_audit.length ?? 0) === 0 ? <EmptyState msg="No encryption audit data for this agent." /> : (
|
||||
<TableWrap head={["IP Address", "Device", "Encrypted %", "Risk", "Enc Bytes", "Unenc Bytes"]}>
|
||||
{data.security!.encryption_audit.map((r, i) => {
|
||||
const rc = riskStyle(r.risk_level);
|
||||
return (
|
||||
<tr key={i} className="hover:bg-white/[0.03]">
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.ip_address || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300 truncate max-w-[120px]">{r.device_label || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-16 h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-blue-500 rounded-full" style={{ width: `${r.encrypted_pct ?? 0}%` }} />
|
||||
</div>
|
||||
<span className="text-white">{r.encrypted_pct ?? 0}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ring-1 ${rc.badge}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${rc.dot}`} />
|
||||
{r.risk_level || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-cyan-400">{fmtBytes(r.encrypted ?? 0)}</td>
|
||||
<td className="px-3 py-2 text-xs text-orange-400">{fmtBytes(r.unencrypted ?? 0)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</TableWrap>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Insecure Protocols */}
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Unlock className="w-4 h-4 text-orange-400" /> Insecure Protocols
|
||||
<span className="ml-auto text-xs text-slate-500">{data.security?.insecure_protocols.length ?? 0} records</span>
|
||||
</h4>
|
||||
{(data.security?.insecure_protocols.length ?? 0) === 0 ? <EmptyState msg="No insecure protocols detected for this agent." /> : (
|
||||
<TableWrap head={["IP", "Protocol", "Risk", "App", "Dst IP:Port", "↓", "↑"]}>
|
||||
{data.security!.insecure_protocols.map((r, i) => {
|
||||
const sc = severityStyle(r.risk);
|
||||
return (
|
||||
<tr key={i} className="hover:bg-white/[0.03]">
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.ip_address || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-200">{r.protocol || "—"}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ring-1 ${sc.badge}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${sc.dot}`} />
|
||||
{r.risk || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-purple-300 truncate max-w-[100px]">{r.app_label || "—"}</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-slate-400">{r.dst_ip ? `${r.dst_ip}:${r.dst_port ?? "?"}` : "—"}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-cyan-400">{fmtBytes(r.download)}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-green-400">{fmtBytes(r.upload)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</TableWrap>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Unencrypted Passwords */}
|
||||
{(data.security?.unencrypted_passwords.length ?? 0) > 0 && (
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-red-400 mb-3">
|
||||
<AlertTriangle className="w-4 h-4" /> Unencrypted Passwords Detected!
|
||||
<span className="ml-auto text-xs text-slate-500">{data.security!.unencrypted_passwords.length} records</span>
|
||||
</h4>
|
||||
<TableWrap head={["IP", "Dst IP:Port", "Protocol", "Username", "Severity"]}>
|
||||
{data.security!.unencrypted_passwords.map((r, i) => {
|
||||
const sc = severityStyle(r.severity);
|
||||
return (
|
||||
<tr key={i} className="hover:bg-white/[0.03]">
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.ip_address || "—"}</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-slate-400">{r.dst_ip ? `${r.dst_ip}:${r.dst_port ?? "?"}` : "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300">{r.protocol || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-yellow-300 font-mono">{r.username || "—"}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ring-1 ${sc.badge}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${sc.dot}`} />
|
||||
{r.severity || "—"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</TableWrap>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* IP Reputation */}
|
||||
{(data.security?.ip_reputation.length ?? 0) > 0 && (
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Eye className="w-4 h-4 text-purple-400" /> IP Reputation
|
||||
<span className="ml-auto text-xs text-slate-500">{data.security!.ip_reputation.length} records</span>
|
||||
</h4>
|
||||
<TableWrap head={["Remote IP", "Local IP", "Reputation", "Score", "Country", "Blacklisted"]}>
|
||||
{data.security!.ip_reputation.map((r, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03]">
|
||||
<td className="px-3 py-2 font-mono text-xs text-red-400">{r.ip_address || "—"}</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.local_ip || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300">{r.reputation || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-yellow-400">{r.score ?? "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{r.country || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs">
|
||||
{r.blacklisted
|
||||
? <span className="text-red-400 font-semibold">⛔ Yes</span>
|
||||
: <span className="text-green-400">✓ No</span>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableWrap>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Tor & VPN side-by-side */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Tor */}
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Router className="w-4 h-4 text-red-400" /> Tor Detections
|
||||
<span className="ml-auto text-xs text-slate-500">{data.security?.tor_detections.length ?? 0}</span>
|
||||
</h4>
|
||||
{(data.security?.tor_detections.length ?? 0) === 0
|
||||
? <EmptyState msg="No Tor usage detected." />
|
||||
: <div className="space-y-2">{data.security!.tor_detections.map((r, i) => (
|
||||
<div key={i} className="p-2 bg-red-500/5 border border-red-500/20 rounded-lg text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-mono text-blue-400">{r.ip_address || "—"}</span>
|
||||
<span className="text-slate-400">{r.country || "—"}</span>
|
||||
</div>
|
||||
<div className="text-slate-500 mt-0.5">Exit: {r.exit_node || "—"}</div>
|
||||
</div>
|
||||
))}</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
{/* VPN */}
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Shield className="w-4 h-4 text-blue-400" /> VPN Detections
|
||||
<span className="ml-auto text-xs text-slate-500">{data.security?.vpn_detections.length ?? 0}</span>
|
||||
</h4>
|
||||
{(data.security?.vpn_detections.length ?? 0) === 0
|
||||
? <EmptyState msg="No VPN usage detected." />
|
||||
: <div className="space-y-2">{data.security!.vpn_detections.map((r, i) => (
|
||||
<div key={i} className="p-2 bg-blue-500/5 border border-blue-500/20 rounded-lg text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-mono text-blue-400">{r.ip_address || "—"}</span>
|
||||
<span className="text-purple-400">{r.vpn_type || "—"}</span>
|
||||
</div>
|
||||
<div className="text-slate-500 mt-0.5">Remote: {r.remote_ip || "—"} • {r.country || "—"}</div>
|
||||
{r.confidence && <div className="text-slate-500">Confidence: {(r.confidence * 100).toFixed(0)}%</div>}
|
||||
</div>
|
||||
))}</div>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Server Discovery */}
|
||||
{(data.server_discovery?.length ?? 0) > 0 && (
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Server className="w-4 h-4 text-cyan-400" /> Servers Discovered
|
||||
<span className="ml-auto text-xs text-slate-500">{data.server_discovery!.length} records</span>
|
||||
</h4>
|
||||
<TableWrap head={["IP", "Hostname", "Server Type", "Port", "Protocol", "OS"]}>
|
||||
{data.server_discovery!.map((r, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03]">
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400">{r.ip_address || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300 truncate max-w-[120px]">{r.hostname || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-cyan-400">{r.server_type || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{r.port ?? "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-purple-300">{r.protocol || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-500">{r.os_label || "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableWrap>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* EVENTS */}
|
||||
{activeTab === "events" && (
|
||||
data.events.length === 0 ? <EmptyState msg="No events found for this agent." /> : (
|
||||
<div className="space-y-2">
|
||||
{data.events.map((ev, i) => {
|
||||
const sc = severityStyle(ev.severity);
|
||||
return (
|
||||
<div key={i} className={`p-3 border rounded-xl text-xs transition-colors ${
|
||||
(ev.severity || "").toLowerCase() === "critical" ? "bg-red-500/5 border-red-500/20 hover:bg-red-500/10" :
|
||||
(ev.severity || "").toLowerCase() === "high" ? "bg-orange-500/5 border-orange-500/20 hover:bg-orange-500/10" :
|
||||
"bg-white/[0.03] border-white/5 hover:bg-white/[0.06]"
|
||||
}`}>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs ring-1 flex-shrink-0 ${sc.badge}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${sc.dot}`} />
|
||||
{ev.severity || "—"}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap mb-1">
|
||||
<span className="font-semibold text-white">{ev.event_type || "Unknown"}</span>
|
||||
<span className="font-mono text-blue-400">{ev.ip_address || "—"}</span>
|
||||
{ev.mac_address && <span className="font-mono text-slate-500">{ev.mac_address}</span>}
|
||||
</div>
|
||||
{ev.description && <p className="text-slate-400 leading-relaxed">{ev.description}</p>}
|
||||
</div>
|
||||
<span className="text-slate-600 flex-shrink-0 whitespace-nowrap">{ev.event_at?.slice(0, 16) || "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* MAC BANDWIDTH */}
|
||||
{activeTab === "mac" && (
|
||||
data.mac_bandwidth.length === 0 ? <EmptyState msg="No MAC bandwidth data for this agent." /> : (
|
||||
<div className="space-y-2">
|
||||
{data.mac_bandwidth.map((m, i) => {
|
||||
const maxTotal = Math.max(...data.mac_bandwidth.map(x => x.total ?? 0), 1);
|
||||
const pct = ((m.total ?? 0) / maxTotal) * 100;
|
||||
return (
|
||||
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-xl transition-colors">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Wifi className="w-4 h-4 text-slate-400 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-mono text-xs text-slate-200">{m.mac_address}</p>
|
||||
<p className="text-xs text-slate-500">{m.manufacturer || "Unknown Manufacturer"}</p>
|
||||
</div>
|
||||
<div className="text-right flex-shrink-0">
|
||||
<p className="text-xs text-white font-medium">{fmtBytes(m.total ?? 0)}</p>
|
||||
<p className="text-xs text-slate-500">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 text-xs mb-2">
|
||||
<span className="text-cyan-400">↓ {fmtBytes(m.download ?? 0)}</span>
|
||||
<span className="text-green-400">↑ {fmtBytes(m.upload ?? 0)}</span>
|
||||
</div>
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{selectedDevice && selectedDevice.ip && (
|
||||
<DeviceDetailModal
|
||||
ip={selectedDevice.ip}
|
||||
deviceLabel={selectedDevice.label}
|
||||
macAddress={selectedDevice.mac}
|
||||
onClose={() => setSelectedDevice(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { fetchDeviceDetails, DeviceDetails } from "@/lib/api";
|
||||
import {
|
||||
fetchDeviceDetails, DeviceDetails,
|
||||
} from "@/lib/api";
|
||||
import { fmtBytes } from "@/lib/utils";
|
||||
import { Loader2, X, Monitor, Globe, Activity } from "lucide-react";
|
||||
import {
|
||||
Loader2, X, Monitor, Globe, Activity, Lock, Server,
|
||||
AlertTriangle, Eye, Shield, Bell, Wifi, Unlock, Router,
|
||||
Link
|
||||
} from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
ip: string;
|
||||
ip : string;
|
||||
deviceLabel?: string | null;
|
||||
macAddress?: string | null;
|
||||
onClose: () => void;
|
||||
macAddress? : string | null;
|
||||
onClose : () => void;
|
||||
}
|
||||
|
||||
type Tab = "apps" | "flows";
|
||||
type Tab = "info" | "flows" | "apps" | "encryption" | "servers" | "passwords" | "reputation" | "vpn_events";
|
||||
|
||||
// ── helpers ───────────────────────────────────────────────────────────────────
|
||||
function sevStyle(sev: string | null) {
|
||||
switch ((sev || "").toLowerCase()) {
|
||||
case "critical": return "bg-red-500/15 text-red-400 ring-1 ring-red-500/30";
|
||||
case "high": return "bg-orange-500/15 text-orange-400 ring-1 ring-orange-500/30";
|
||||
case "warning": return "bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30";
|
||||
case "info": return "bg-blue-500/15 text-blue-400 ring-1 ring-blue-500/30";
|
||||
default: return "bg-slate-700/40 text-slate-400";
|
||||
}
|
||||
}
|
||||
|
||||
function riskStyle(lvl: string | null) {
|
||||
switch ((lvl || "").toLowerCase()) {
|
||||
case "critical":
|
||||
case "rawan": return { bar: "bg-red-500", badge: "bg-red-500/15 text-red-400 ring-1 ring-red-500/30" };
|
||||
case "medium":
|
||||
case "sedang": return { bar: "bg-yellow-500", badge: "bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30" };
|
||||
case "low":
|
||||
case "aman": return { bar: "bg-green-500", badge: "bg-green-500/15 text-green-400 ring-1 ring-green-500/30" };
|
||||
default: return { bar: "bg-slate-500", badge: "bg-slate-700/40 text-slate-400" };
|
||||
}
|
||||
}
|
||||
|
||||
function TableWrap({ head, children }: { head: string[]; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl border border-white/5">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-white/10 bg-white/[0.02]">
|
||||
{head.map((h) => <th key={h} className="px-3 py-2 text-left font-medium text-slate-400 whitespace-nowrap">{h}</th>)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">{children}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Empty({ msg }: { msg: string }) {
|
||||
return <p className="text-slate-500 text-sm text-center py-10">{msg}</p>;
|
||||
}
|
||||
|
||||
// ── Main component ────────────────────────────────────────────────────────────
|
||||
export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Props) {
|
||||
const [data, setData] = useState<DeviceDetails | null>(null);
|
||||
const [data, setData] = useState<DeviceDetails | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<Tab>("apps");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<Tab>("info");
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
@@ -29,141 +78,113 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
|
||||
.finally(() => setIsLoading(false));
|
||||
}, [ip]);
|
||||
|
||||
const tabs: { key: Tab; label: string; icon: React.ReactNode; count?: number }[] = [
|
||||
{ key: "apps", label: "Applications", icon: <Globe className="w-4 h-4" />, count: data?.top_apps.length },
|
||||
{ key: "flows", label: "Active Flows", icon: <Activity className="w-4 h-4" />, count: data?.flows.length },
|
||||
const di = data?.device_info;
|
||||
|
||||
// Alert counts
|
||||
const alertCount =
|
||||
(data?.unencrypted_passwords.length ?? 0) +
|
||||
(data?.vpn_detections.length ?? 0) +
|
||||
(data?.events.filter(e => ["critical","high"].includes((e.severity||"").toLowerCase())).length ?? 0);
|
||||
|
||||
const tabs: { key: Tab; label: string; icon: React.ReactNode; count?: number; alert?: boolean }[] = [
|
||||
{ key: "info", label: "Info", icon: <Monitor className="w-3.5 h-3.5" /> },
|
||||
{ key: "flows", label: "Flows", icon: <Activity className="w-3.5 h-3.5" />, count: data?.flows.length },
|
||||
{ key: "apps", label: "Apps", icon: <Globe className="w-3.5 h-3.5" />, count: data?.top_apps.length },
|
||||
{ key: "encryption", label: "Enkripsi", icon: <Lock className="w-3.5 h-3.5" /> },
|
||||
{ key: "servers", label: "Servers", icon: <Server className="w-3.5 h-3.5" />, count: data?.server_discovery.length },
|
||||
{ key: "passwords", label: "Pwd Leaks", icon: <Unlock className="w-3.5 h-3.5" />, count: data?.unencrypted_passwords.length, alert: (data?.unencrypted_passwords.length ?? 0) > 0 },
|
||||
{ key: "reputation", label: "Reputasi IP", icon: <Eye className="w-3.5 h-3.5" />, count: data?.ip_reputation.length },
|
||||
{ key: "vpn_events", label: "VPN & Events", icon: <Bell className="w-3.5 h-3.5" />, count: (data?.vpn_detections.length ?? 0) + (data?.events.length ?? 0), alert: alertCount > 0 },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||||
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" />
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onClick={onClose}>
|
||||
<div className="absolute inset-0 bg-black/75 backdrop-blur-sm" />
|
||||
<div
|
||||
className="relative bg-[#0d1117] border border-white/10 rounded-2xl w-full max-w-3xl max-h-[85vh] flex flex-col shadow-2xl shadow-black/60 animate-slide-up"
|
||||
className="relative bg-[#0b0f16] border border-white/10 rounded-2xl w-full max-w-4xl max-h-[92vh] flex flex-col shadow-2xl shadow-black/70 animate-slide-up"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-gradient-to-r from-cyan-900/30 to-blue-900/20 rounded-t-2xl">
|
||||
{/* ── Header ── */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-gradient-to-r from-cyan-900/30 to-teal-900/20 rounded-t-2xl flex-shrink-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-cyan-500/20 rounded-lg ring-1 ring-cyan-500/30">
|
||||
<Monitor className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-white">{deviceLabel || ip}</h3>
|
||||
<div className="flex items-center gap-3 mt-0.5">
|
||||
<p className="text-xs text-blue-400 font-mono">{ip}</p>
|
||||
{macAddress && <p className="text-xs text-slate-400 font-mono">{macAddress}</p>}
|
||||
<h3 className="text-base font-bold text-white leading-tight">
|
||||
{di?.device_label || deviceLabel || ip}
|
||||
</h3>
|
||||
<div className="flex items-center gap-3 mt-0.5 flex-wrap">
|
||||
<span className="text-xs text-cyan-400 font-mono">{ip}</span>
|
||||
{(di?.mac_address || macAddress) && (
|
||||
<span className="text-xs text-slate-500 font-mono">{di?.mac_address || macAddress}</span>
|
||||
)}
|
||||
{di?.os_label && (
|
||||
<span className="text-xs text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded">{di.os_label}</span>
|
||||
)}
|
||||
{di?.device_type && (
|
||||
<span className="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded">{di.device_type}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all"
|
||||
>
|
||||
<button onClick={onClose} className="p-2 text-slate-400 hover:text-white hover:bg-white/10 rounded-lg transition-all flex-shrink-0">
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{/* ── Body ── */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-3">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
|
||||
<p className="text-slate-400 text-sm">Loading device data...</p>
|
||||
<p className="text-slate-400 text-sm">Loading device data…</p>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-6 text-center text-red-400 text-sm">{error}</div>
|
||||
) : data ? (
|
||||
<>
|
||||
{/* KPI Summary */}
|
||||
<div className="grid grid-cols-3 gap-3 px-6 py-3 border-b border-white/5 bg-white/[0.02]">
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-slate-500">Total Download</p>
|
||||
<p className="text-lg font-bold text-cyan-400">{fmtBytes(data.total_download ?? 0)}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-slate-500">Total Upload</p>
|
||||
<p className="text-lg font-bold text-green-400">{fmtBytes(data.total_upload ?? 0)}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-xs text-slate-500">Total Flows</p>
|
||||
<p className="text-lg font-bold text-white">{data.flow_count ?? data.flows.length}</p>
|
||||
</div>
|
||||
{/* ── KPI bar ── */}
|
||||
<div className="grid grid-cols-3 gap-3 px-6 py-3 border-b border-white/5 bg-white/[0.01] flex-shrink-0">
|
||||
{[
|
||||
{ label: "Download", value: fmtBytes(data.total_download), color: "text-cyan-400" },
|
||||
{ label: "Upload", value: fmtBytes(data.total_upload), color: "text-green-400" },
|
||||
{ label: "Total Flows",value: data.flow_count, color: "text-white" },
|
||||
].map(k => (
|
||||
<div key={k.label} className="text-center">
|
||||
<p className="text-[10px] text-slate-500 uppercase tracking-wider mb-0.5">{k.label}</p>
|
||||
<p className={`text-xl font-bold ${k.color}`}>{k.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Security Info Panel */}
|
||||
{data.security_info && (data.security_info.risk_level || data.security_info.os_label || data.security_info.device_type || data.security_info.insecure_protocols.length > 0 || data.security_info.blacklisted) && (() => {
|
||||
const si = data.security_info!;
|
||||
const riskColor = si.risk_level === "Rawan" || si.risk_level === "Critical" ? "text-red-400 bg-red-500/10 ring-red-500/30"
|
||||
: si.risk_level === "Sedang" || si.risk_level === "Medium" ? "text-yellow-400 bg-yellow-500/10 ring-yellow-500/30"
|
||||
: "text-green-400 bg-green-500/10 ring-green-500/30";
|
||||
const encPct = si.encrypted_pct ?? 0;
|
||||
return (
|
||||
<div className="mx-6 my-3 p-4 bg-white/[0.02] border border-white/8 rounded-xl space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Security Info</p>
|
||||
{/* ── Alert strip ── */}
|
||||
{alertCount > 0 && (
|
||||
<div className="mx-6 mt-3 flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-xs text-red-400">
|
||||
<AlertTriangle className="w-4 h-4 flex-shrink-0" />
|
||||
<span><strong>{alertCount}</strong> security alerts — cek tab <strong>Pwd Leaks</strong> atau <strong>VPN & Events</strong></span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 1: Device Identity */}
|
||||
{(si.device_type || si.os_label || si.manufacturer) && (
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
{si.device_type && <span className="text-xs text-slate-300 bg-white/5 px-2 py-0.5 rounded">{si.device_type}</span>}
|
||||
{si.os_label && <span className="text-xs text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded">{si.os_label}</span>}
|
||||
{si.manufacturer && <span className="text-xs text-slate-400">{si.manufacturer}</span>}
|
||||
</div>
|
||||
)}
|
||||
{/* ── MAC bandwidth strip ── */}
|
||||
{data.mac_bandwidth && (
|
||||
<div className="mx-6 mt-2 flex items-center gap-3 px-3 py-2 bg-white/[0.02] border border-white/5 rounded-lg text-xs">
|
||||
<Wifi className="w-4 h-4 text-slate-400 flex-shrink-0" />
|
||||
<span className="text-slate-400 font-mono">{data.mac_bandwidth.mac_address}</span>
|
||||
<span className="text-slate-500">{data.mac_bandwidth.manufacturer || "Unknown"}</span>
|
||||
<span className="ml-auto text-cyan-400">↓ {fmtBytes(data.mac_bandwidth.download)}</span>
|
||||
<span className="text-green-400">↑ {fmtBytes(data.mac_bandwidth.upload)}</span>
|
||||
<span className="text-slate-400 font-medium">Total: {fmtBytes(data.mac_bandwidth.total)}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 2: Encryption bar */}
|
||||
{si.encrypted_pct !== null && (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs text-slate-400">Enkripsi Traffic</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-xs font-semibold px-2 py-0.5 rounded-full ring-1 ${riskColor}`}>
|
||||
{si.risk_level}
|
||||
</span>
|
||||
<span className="text-xs text-white font-mono">{encPct}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-2 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${encPct >= 80 ? "bg-green-500" : encPct >= 50 ? "bg-yellow-500" : "bg-red-500"}`}
|
||||
style={{ width: `${encPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between mt-1 text-xs text-slate-500">
|
||||
<span>Terenkripsi: {fmtBytes(si.encrypted_bytes ?? 0)}</span>
|
||||
<span>Tidak: {fmtBytes(si.unencrypted_bytes ?? 0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 3: Warnings */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{si.insecure_protocols.length > 0 && si.insecure_protocols.map((p, i) => (
|
||||
<span key={i} className="inline-flex items-center gap-1 text-xs text-orange-300 bg-orange-500/10 px-2 py-0.5 rounded-full ring-1 ring-orange-500/30">
|
||||
⚠ {p.protocol} ({p.risk})
|
||||
</span>
|
||||
))}
|
||||
{si.blacklisted && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-red-300 bg-red-500/10 px-2 py-0.5 rounded-full ring-1 ring-red-500/30">
|
||||
🚫 Blacklisted
|
||||
</span>
|
||||
)}
|
||||
{si.reputation && si.reputation !== "Unknown" && !si.blacklisted && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-slate-300 bg-white/5 px-2 py-0.5 rounded-full">
|
||||
Reputasi: {si.reputation}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 px-6 py-3 border-b border-white/5">
|
||||
{/* ── Tabs ── */}
|
||||
<div className="flex gap-1 px-6 py-3 border-b border-white/5 flex-shrink-0 flex-wrap">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
className={`relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
activeTab === tab.key
|
||||
? "bg-cyan-500/20 text-cyan-300 ring-1 ring-cyan-500/40"
|
||||
: "text-slate-400 hover:text-white hover:bg-white/5"
|
||||
@@ -171,90 +192,432 @@ export function DeviceDetailModal({ ip, deviceLabel, macAddress, onClose }: Prop
|
||||
>
|
||||
{tab.icon}
|
||||
{tab.label}
|
||||
{tab.count !== undefined && (
|
||||
<span className="ml-1 px-1.5 py-0.5 bg-white/10 rounded text-xs text-slate-300">
|
||||
{tab.count !== undefined && tab.count > 0 && (
|
||||
<span className={`px-1.5 py-0.5 rounded text-[10px] ${tab.alert ? "bg-red-500/20 text-red-300" : activeTab === tab.key ? "bg-cyan-500/30 text-cyan-200" : "bg-white/10 text-slate-300"}`}>
|
||||
{tab.count}
|
||||
</span>
|
||||
)}
|
||||
{tab.alert && tab.count === 0 && (
|
||||
<span className="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full" />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4">
|
||||
{activeTab === "apps" && (
|
||||
<div className="space-y-2">
|
||||
{data.top_apps.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm text-center py-8">No application data for this device. It may not have active flows yet.</p>
|
||||
) : (
|
||||
data.top_apps.map((a, i) => {
|
||||
const total = a.download + a.upload;
|
||||
const maxTotal = Math.max(...data.top_apps.map(x => x.download + x.upload), 1);
|
||||
const pct = (total / maxTotal) * 100;
|
||||
return (
|
||||
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-lg transition-colors">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{a.favicon ? (
|
||||
<img src={a.favicon} alt={a.app_label} className="w-5 h-5 rounded bg-white p-0.5 flex-shrink-0" />
|
||||
) : (
|
||||
<div className="w-5 h-5 rounded bg-slate-700 flex-shrink-0" />
|
||||
)}
|
||||
<span className="font-medium text-white text-sm flex-1">{a.app_label}</span>
|
||||
{a.category && (
|
||||
<span className="text-xs text-slate-400 bg-white/5 px-2 py-0.5 rounded">{a.category}</span>
|
||||
)}
|
||||
<span className="text-xs font-mono text-white">{fmtBytes(total)}</span>
|
||||
</div>
|
||||
<div className="flex gap-3 text-xs mb-2">
|
||||
<span className="text-cyan-400">↓ {fmtBytes(a.download)}</span>
|
||||
<span className="text-green-400">↑ {fmtBytes(a.upload)}</span>
|
||||
</div>
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
{/* ── Tab content ── */}
|
||||
<div className="px-6 py-4 space-y-4">
|
||||
|
||||
{/* ══ INFO ══ */}
|
||||
{activeTab === "info" && (
|
||||
<div className="space-y-4">
|
||||
{/* Device identity card */}
|
||||
<div className="p-4 bg-white/[0.02] border border-white/5 rounded-xl space-y-3">
|
||||
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Informasi Device</p>
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
{[
|
||||
{ label: "Label", value: di?.device_label },
|
||||
{ label: "Tipe", value: di?.device_type },
|
||||
{ label: "OS", value: di?.os_label },
|
||||
{ label: "Manufacturer", value: di?.manufacturer },
|
||||
{ label: "IP Address", value: ip },
|
||||
{ label: "MAC Address", value: di?.mac_address || macAddress },
|
||||
{ label: "Is New", value: di?.is_new === 1 ? "Perangkat Baru ✨" : di?.is_new === 0 ? "Dikenal" : null },
|
||||
].filter(f => f.value).map(f => (
|
||||
<div key={f.label} className="flex flex-col gap-0.5">
|
||||
<span className="text-xs text-slate-500">{f.label}</span>
|
||||
<span className="text-xs font-medium text-white font-mono">{String(f.value)}</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top domains */}
|
||||
{data.top_domains.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Top Domains Diakses</p>
|
||||
<div className="space-y-1.5">
|
||||
{data.top_domains.map((d, i) => {
|
||||
const maxDl = Math.max(...data.top_domains.map(x => x.download), 1);
|
||||
const pct = (d.download / maxDl) * 100;
|
||||
return (
|
||||
<div key={i} className="flex items-center gap-3 p-2 bg-white/[0.02] rounded-lg">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-slate-200 truncate font-mono">{d.domain}</p>
|
||||
<div className="h-1 bg-white/5 rounded-full mt-1 overflow-hidden">
|
||||
<div className="h-full bg-gradient-to-r from-teal-500 to-cyan-500 rounded-full" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 text-right">
|
||||
<p className="text-xs text-cyan-400">{fmtBytes(d.download)}</p>
|
||||
<p className="text-[10px] text-slate-500">{d.flow_count} flows</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ══ FLOWS ══ */}
|
||||
{activeTab === "flows" && (
|
||||
<div className="overflow-x-auto">
|
||||
{data.flows.length === 0 ? (
|
||||
<p className="text-slate-500 text-sm text-center py-8">No active flows for this device.</p>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left border-b border-white/10">
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">Destination IP</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">Port</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">App / Domain</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400">Protocol</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400 text-right">Download</th>
|
||||
<th className="pb-2 text-xs font-medium text-slate-400 text-right">Upload</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/5">
|
||||
{data.flows.map((f, i) => (
|
||||
data.flows.length === 0 ? <Empty msg="Tidak ada flows untuk device ini." /> : (
|
||||
<TableWrap head={["Destination IP", "Port", "Domain / App", "Proto", "↓", "↑", "Last Seen"]}>
|
||||
{data.flows.map((f, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
|
||||
<td className="px-3 py-2 font-mono text-xs text-blue-400 whitespace-nowrap">{f.dst_ip || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{f.dst_port ?? "—"}</td>
|
||||
<td className="px-3 py-2 max-w-[180px]">
|
||||
{f.domain ? (
|
||||
/* Domain name takes priority — shown in teal monospace */
|
||||
<span className="text-xs text-teal-300 font-mono truncate block" title={f.domain}>
|
||||
{f.domain}
|
||||
</span>
|
||||
) : f.app_label && !f.app_label.startsWith('Port ') ? (
|
||||
/* Named protocol — purple */
|
||||
<span className="text-xs text-purple-300 truncate block">{f.app_label}</span>
|
||||
) : f.app_label ? (
|
||||
/* Port-only entry — muted */
|
||||
<span className="text-xs text-slate-500 truncate block">{f.app_label}</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-600">—</span>
|
||||
)}
|
||||
{/* Show app_label as secondary if domain is set */}
|
||||
{f.domain && f.app_label && (
|
||||
<span className="text-[10px] text-slate-500 block">{f.app_label}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{f.protocol || "—"}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-cyan-400 whitespace-nowrap">{fmtBytes(f.download)}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-green-400 whitespace-nowrap">{fmtBytes(f.upload)}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-500 whitespace-nowrap">{f.last_seen?.slice(0, 16) || "—"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableWrap>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* ══ APPS ══ */}
|
||||
{activeTab === "apps" && (
|
||||
data.top_apps.length === 0
|
||||
? <Empty msg="Tidak ada data aplikasi / domain yang terdeteksi untuk device ini." />
|
||||
: (
|
||||
<div className="space-y-2">
|
||||
{/* Legend */}
|
||||
<div className="flex items-center gap-3 pb-1 mb-1 border-b border-white/5 flex-wrap">
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-400">
|
||||
<Globe className="w-3 h-3 text-teal-400" /> Domain / Website
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-400">
|
||||
<Shield className="w-3 h-3 text-blue-400" /> Protokol
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-[10px] text-slate-400">
|
||||
<Link className="w-3 h-3 text-slate-500" /> Port
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{data.top_apps.map((a, i) => {
|
||||
const total = a.download + a.upload;
|
||||
const maxTotal = Math.max(...data.top_apps.map(x => x.download + x.upload), 1);
|
||||
const pct = (total / maxTotal) * 100;
|
||||
|
||||
const isDomain = a.type === 'domain';
|
||||
const isProtocol = a.type === 'protocol';
|
||||
|
||||
// Color scheme by type
|
||||
const barColor = isDomain ? 'from-teal-500 to-cyan-500'
|
||||
: isProtocol ? 'from-blue-500 to-indigo-500'
|
||||
: 'from-slate-600 to-slate-500';
|
||||
const iconBg = isDomain ? 'bg-teal-500/15' : isProtocol ? 'bg-blue-500/15' : 'bg-slate-700/40';
|
||||
const iconColor = isDomain ? 'text-teal-400' : isProtocol ? 'text-blue-400' : 'text-slate-500';
|
||||
|
||||
return (
|
||||
<div key={i} className="p-3 bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 rounded-xl transition-colors">
|
||||
<div className="flex items-start gap-3 mb-1.5">
|
||||
{/* Icon */}
|
||||
<div className={`w-7 h-7 rounded-lg flex-shrink-0 flex items-center justify-center ${iconBg}`}>
|
||||
{isDomain
|
||||
? <Globe className={`w-3.5 h-3.5 ${iconColor}`} />
|
||||
: isProtocol
|
||||
? <Shield className={`w-3.5 h-3.5 ${iconColor}`} />
|
||||
: <Link className={`w-3.5 h-3.5 ${iconColor}`} />}
|
||||
</div>
|
||||
|
||||
{/* Label block */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* Main label: domain name or protocol */}
|
||||
<span className={`font-medium text-sm truncate max-w-[200px] ${
|
||||
isDomain ? 'text-teal-200 font-mono' : isProtocol ? 'text-blue-200' : 'text-slate-400'
|
||||
}`}>
|
||||
{a.label}
|
||||
</span>
|
||||
{/* Sub-label: protocol badge if domain */}
|
||||
{a.sub_label && (
|
||||
<span className="inline-flex text-[10px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 ring-1 ring-blue-500/20 flex-shrink-0">
|
||||
{a.sub_label}
|
||||
</span>
|
||||
)}
|
||||
{/* Type badge */}
|
||||
{isDomain && (
|
||||
<span className="inline-flex text-[10px] px-1.5 py-0.5 rounded bg-teal-500/10 text-teal-400 flex-shrink-0">
|
||||
website
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="text-right flex-shrink-0">
|
||||
<p className="text-xs font-mono text-white">{fmtBytes(total)}</p>
|
||||
<p className="text-[10px] text-slate-500">{a.flow_count} flows</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bandwidth breakdown */}
|
||||
<div className="flex gap-3 text-xs mb-1.5 pl-10">
|
||||
<span className="text-cyan-400">↓ {fmtBytes(a.download)}</span>
|
||||
<span className="text-green-400">↑ {fmtBytes(a.upload)}</span>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden ml-10">
|
||||
<div
|
||||
className={`h-full bg-gradient-to-r ${barColor} rounded-full transition-all`}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* ══ ENCRYPTION ══ */}
|
||||
{activeTab === "encryption" && (() => {
|
||||
const enc = data.encryption;
|
||||
if (!enc) return <Empty msg="Tidak ada data enkripsi untuk device ini." />;
|
||||
const pct = enc.encrypted_pct ?? 0;
|
||||
const { bar, badge } = riskStyle(enc.risk_level);
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="p-5 bg-white/[0.02] border border-white/5 rounded-xl">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-sm font-semibold text-white">Status Enkripsi Traffic</p>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${badge}`}>
|
||||
{enc.risk_level || "Unknown"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Big donut-style display */}
|
||||
<div className="flex items-center gap-6 mb-4">
|
||||
<div className="relative w-24 h-24 flex-shrink-0">
|
||||
<svg className="w-24 h-24 -rotate-90" viewBox="0 0 36 36">
|
||||
<circle cx="18" cy="18" r="15.9" fill="none" stroke="#ffffff10" strokeWidth="3" />
|
||||
<circle
|
||||
cx="18" cy="18" r="15.9" fill="none"
|
||||
stroke={pct >= 80 ? "#22c55e" : pct >= 50 ? "#eab308" : "#ef4444"}
|
||||
strokeWidth="3" strokeDasharray={`${pct} 100`} strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-white">{pct}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 space-y-2">
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-slate-400">Terenkripsi</span>
|
||||
<span className="text-green-400">{fmtBytes(enc.encrypted_bytes ?? 0)}</span>
|
||||
</div>
|
||||
<div className="h-2 bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-green-500 rounded-full transition-all" style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-slate-400">Tidak Terenkripsi</span>
|
||||
<span className="text-red-400">{fmtBytes(enc.unencrypted_bytes ?? 0)}</span>
|
||||
</div>
|
||||
<div className="h-2 bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-red-500 rounded-full transition-all" style={{ width: `${100 - pct}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-slate-500 text-right">
|
||||
Total: {fmtBytes(enc.total_bytes ?? 0)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Risk interpretation */}
|
||||
<div className={`p-3 rounded-xl border ${
|
||||
(enc.risk_level || "").toLowerCase().includes("critical") || (enc.risk_level || "").toLowerCase().includes("rawan")
|
||||
? "border-red-500/20 bg-red-500/5 text-red-300"
|
||||
: (enc.risk_level || "").toLowerCase().includes("medium") || (enc.risk_level || "").toLowerCase().includes("sedang")
|
||||
? "border-yellow-500/20 bg-yellow-500/5 text-yellow-300"
|
||||
: "border-green-500/20 bg-green-500/5 text-green-300"
|
||||
} text-xs`}>
|
||||
{(enc.risk_level || "").toLowerCase().includes("critical") || (enc.risk_level || "").toLowerCase().includes("rawan")
|
||||
? "🚨 Device ini memiliki risiko tinggi — sebagian besar traffic tidak terenkripsi!"
|
||||
: (enc.risk_level || "").toLowerCase().includes("medium") || (enc.risk_level || "").toLowerCase().includes("sedang")
|
||||
? "⚠️ Traffic device ini sebagian tidak terenkripsi. Pertimbangkan upgrade ke HTTPS/TLS."
|
||||
: "✅ Device ini memiliki enkripsi yang baik."}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* ══ SERVERS ══ */}
|
||||
{activeTab === "servers" && (
|
||||
data.server_discovery.length === 0 ? <Empty msg="Tidak ada server yang terdeteksi untuk device ini." /> : (
|
||||
<TableWrap head={["Server Type", "Hostname", "Port", "Protocol", "OS", "↓", "↑"]}>
|
||||
{data.server_discovery.map((s, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
|
||||
<td className="px-3 py-2">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-teal-500/10 text-teal-400 ring-1 ring-teal-500/20">
|
||||
{s.server_type || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300 font-mono truncate max-w-[140px]">{s.hostname || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{s.port ?? "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-purple-300">{s.protocol || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-500">{s.os_label || "—"}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-cyan-400">{fmtBytes(s.download)}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-green-400">{fmtBytes(s.upload)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableWrap>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* ══ PASSWORDS ══ */}
|
||||
{activeTab === "passwords" && (
|
||||
data.unencrypted_passwords.length === 0
|
||||
? <div className="text-center py-10">
|
||||
<p className="text-green-400 text-2xl mb-2">✅</p>
|
||||
<p className="text-slate-400 text-sm">Tidak ada password cleartext yang terdeteksi.</p>
|
||||
</div>
|
||||
: (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-lg text-xs text-red-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span><strong>{data.unencrypted_passwords.length}</strong> koneksi dengan password tidak terenkripsi terdeteksi!</span>
|
||||
</div>
|
||||
<TableWrap head={["Destination IP", "Port", "Protocol", "Username", "Severity", "↓"]}>
|
||||
{data.unencrypted_passwords.map((p, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
|
||||
<td className="py-2 pr-4 font-mono text-xs text-blue-400">{f.dst_ip || "-"}</td>
|
||||
<td className="py-2 pr-4 text-xs text-slate-400">{f.dst_port ?? "-"}</td>
|
||||
<td className="py-2 pr-4 text-xs text-purple-300 max-w-[140px] truncate">
|
||||
{(f as any).app_label || (f as any).domain || "-"}
|
||||
<td className="px-3 py-2 font-mono text-xs text-red-400">{p.dst_ip || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{p.dst_port ?? "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300">{p.protocol || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-yellow-300 font-mono">{p.username || "—"}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${sevStyle(p.severity)}`}>
|
||||
{p.severity || "—"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-xs text-slate-300">{f.protocol || "-"}</td>
|
||||
<td className="py-2 pr-4 text-right text-xs text-cyan-400">{fmtBytes(f.download)}</td>
|
||||
<td className="py-2 text-right text-xs text-green-400">{fmtBytes(f.upload)}</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-cyan-400">{fmtBytes(p.download)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</TableWrap>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* ══ REPUTATION ══ */}
|
||||
{activeTab === "reputation" && (
|
||||
data.ip_reputation.length === 0 ? <Empty msg="Tidak ada data reputasi IP untuk device ini." /> : (
|
||||
<TableWrap head={["Remote IP", "Reputation", "Score", "Country", "App", "Blacklisted", "↓"]}>
|
||||
{data.ip_reputation.map((r, i) => (
|
||||
<tr key={i} className="hover:bg-white/[0.03] transition-colors">
|
||||
<td className="px-3 py-2 font-mono text-xs text-red-400">{r.remote_ip || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-300">{r.reputation || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-yellow-400">{r.score ?? "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-slate-400">{r.country || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs text-purple-300 truncate max-w-[80px]">{r.app_label || "—"}</td>
|
||||
<td className="px-3 py-2 text-xs">
|
||||
{r.blacklisted
|
||||
? <span className="text-red-400 font-semibold">⛔ Yes</span>
|
||||
: <span className="text-green-400">✓ No</span>}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right text-xs text-cyan-400">{fmtBytes(r.download)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</TableWrap>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* ══ VPN & EVENTS ══ */}
|
||||
{activeTab === "vpn_events" && (
|
||||
<div className="space-y-6">
|
||||
{/* VPN */}
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Shield className="w-4 h-4 text-blue-400" /> Deteksi VPN
|
||||
<span className="ml-auto text-xs text-slate-500">{data.vpn_detections.length} records</span>
|
||||
</h4>
|
||||
{data.vpn_detections.length === 0 ? (
|
||||
<p className="text-slate-500 text-xs">Tidak ada penggunaan VPN yang terdeteksi.</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{data.vpn_detections.map((v, i) => (
|
||||
<div key={i} className="p-3 bg-blue-500/5 border border-blue-500/15 rounded-xl text-xs space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-blue-400 font-medium">{v.vpn_type || "Unknown VPN"}</span>
|
||||
<span className="text-slate-500">{v.country || "—"}</span>
|
||||
</div>
|
||||
{v.remote_ip && <p className="text-slate-400 font-mono">→ {v.remote_ip}</p>}
|
||||
<div className="flex gap-2 text-slate-500">
|
||||
<span>{v.protocol || "—"}</span>
|
||||
{v.confidence !== null && v.confidence !== undefined && (
|
||||
<span className="ml-auto text-purple-400">
|
||||
Conf: {((v.confidence) * 100).toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Events */}
|
||||
<section>
|
||||
<h4 className="flex items-center gap-2 text-sm font-semibold text-white mb-3">
|
||||
<Bell className="w-4 h-4 text-yellow-400" /> Security Events
|
||||
<span className="ml-auto text-xs text-slate-500">{data.events.length} records</span>
|
||||
</h4>
|
||||
{data.events.length === 0 ? (
|
||||
<p className="text-slate-500 text-xs">Tidak ada security events untuk device ini.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{data.events.map((ev, i) => (
|
||||
<div key={i} className={`p-3 rounded-xl border text-xs ${
|
||||
(ev.severity || "").toLowerCase() === "critical" ? "bg-red-500/5 border-red-500/20" :
|
||||
(ev.severity || "").toLowerCase() === "high" ? "bg-orange-500/5 border-orange-500/15" :
|
||||
"bg-white/[0.02] border-white/5"
|
||||
}`}>
|
||||
<div className="flex items-start gap-2">
|
||||
<span className={`flex-shrink-0 px-2 py-0.5 rounded-full text-[10px] font-semibold ${sevStyle(ev.severity)}`}>
|
||||
{ev.severity || "Info"}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-white">{ev.event_type || "Unknown"}</p>
|
||||
{ev.description && <p className="text-slate-400 mt-0.5 leading-relaxed">{ev.description}</p>}
|
||||
</div>
|
||||
<span className="text-slate-600 flex-shrink-0">{ev.event_at?.slice(0, 16) || "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
+233
-8
@@ -505,6 +505,122 @@ export interface AgentSummary {
|
||||
bandwidth_up: number;
|
||||
}
|
||||
|
||||
export interface AgentEncryptionItem {
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
device_label: string | null;
|
||||
encrypted_pct: number | null;
|
||||
unencrypted: number | null;
|
||||
encrypted: number | null;
|
||||
total: number | null;
|
||||
risk_level: string | null;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentInsecureProtocolItem {
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
protocol: string | null;
|
||||
risk: string | null;
|
||||
app_label: string | null;
|
||||
dst_ip: string | null;
|
||||
dst_port: number | null;
|
||||
download: number;
|
||||
upload: number;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentUnencryptedPwdItem {
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
dst_ip: string | null;
|
||||
dst_port: number | null;
|
||||
protocol: string | null;
|
||||
username: string | null;
|
||||
severity: string | null;
|
||||
download: number;
|
||||
upload: number;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentIpReputationItem {
|
||||
ip_address: string | null;
|
||||
local_ip: string | null;
|
||||
mac_address: string | null;
|
||||
reputation: string | null;
|
||||
score: number | null;
|
||||
country: string | null;
|
||||
app_label: string | null;
|
||||
blacklisted: number | boolean;
|
||||
download: number;
|
||||
upload: number;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentTorItem {
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
exit_node: string | null;
|
||||
circuit_id: string | null;
|
||||
country: string | null;
|
||||
download: number;
|
||||
upload: number;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentVpnItem {
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
vpn_type: string | null;
|
||||
remote_ip: string | null;
|
||||
protocol: string | null;
|
||||
country: string | null;
|
||||
confidence: number | null;
|
||||
download: number;
|
||||
upload: number;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentSecurity {
|
||||
encryption_audit: AgentEncryptionItem[];
|
||||
insecure_protocols: AgentInsecureProtocolItem[];
|
||||
unencrypted_passwords: AgentUnencryptedPwdItem[];
|
||||
ip_reputation: AgentIpReputationItem[];
|
||||
tor_detections: AgentTorItem[];
|
||||
vpn_detections: AgentVpnItem[];
|
||||
}
|
||||
|
||||
export interface AgentEventItem {
|
||||
event_id: string | null;
|
||||
event_type: string | null;
|
||||
severity: string | null;
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
description: string | null;
|
||||
event_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentMacBandwidthItem {
|
||||
mac_address: string;
|
||||
manufacturer: string | null;
|
||||
download: number;
|
||||
upload: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface AgentServerDiscoveryItem {
|
||||
ip_address: string | null;
|
||||
mac_address: string | null;
|
||||
server_type: string | null;
|
||||
hostname: string | null;
|
||||
port: number | null;
|
||||
protocol: string | null;
|
||||
os_label: string | null;
|
||||
download: number;
|
||||
upload: number;
|
||||
detected_at: string | null;
|
||||
}
|
||||
|
||||
export interface AgentDetails {
|
||||
agent_uuid: string;
|
||||
agent_label: string;
|
||||
@@ -512,6 +628,10 @@ export interface AgentDetails {
|
||||
devices: AgentDeviceItem[];
|
||||
flows: AgentFlowItem[];
|
||||
top_apps: AgentAppItem[];
|
||||
security: AgentSecurity | null;
|
||||
events: AgentEventItem[];
|
||||
mac_bandwidth: AgentMacBandwidthItem[];
|
||||
server_discovery: AgentServerDiscoveryItem[];
|
||||
}
|
||||
|
||||
export interface DeviceFlowItem {
|
||||
@@ -540,16 +660,121 @@ export interface SecurityInfo {
|
||||
blacklisted: boolean;
|
||||
}
|
||||
|
||||
export interface DeviceDetails {
|
||||
ip: string;
|
||||
total_download: number;
|
||||
total_upload: number;
|
||||
flow_count: number;
|
||||
top_apps: AgentAppItem[];
|
||||
flows: DeviceFlowItem[];
|
||||
security_info: SecurityInfo | null;
|
||||
export interface DeviceInfo {
|
||||
device_label : string | null;
|
||||
device_type : string | null;
|
||||
os_label : string | null;
|
||||
manufacturer : string | null;
|
||||
mac_address : string | null;
|
||||
is_new : number | null;
|
||||
}
|
||||
|
||||
export interface DeviceAppItem {
|
||||
label : string; // domain name OR protocol name
|
||||
sub_label : string | null; // protocol when label is domain; null otherwise
|
||||
type : 'domain' | 'protocol' | 'port';
|
||||
download : number;
|
||||
upload : number;
|
||||
flow_count : number;
|
||||
}
|
||||
|
||||
export interface DeviceDomainItem {
|
||||
domain : string;
|
||||
download : number;
|
||||
upload : number;
|
||||
flow_count : number;
|
||||
}
|
||||
|
||||
export interface DeviceEncryption {
|
||||
encrypted_pct : number | null;
|
||||
encrypted_bytes : number | null;
|
||||
unencrypted_bytes: number | null;
|
||||
total_bytes : number | null;
|
||||
risk_level : string | null;
|
||||
}
|
||||
|
||||
export interface DeviceServerItem {
|
||||
server_type : string | null;
|
||||
hostname : string | null;
|
||||
port : number | null;
|
||||
protocol : string | null;
|
||||
os_label : string | null;
|
||||
download : number;
|
||||
upload : number;
|
||||
detected_at : string | null;
|
||||
}
|
||||
|
||||
export interface DevicePwdItem {
|
||||
dst_ip : string | null;
|
||||
dst_port : number | null;
|
||||
protocol : string | null;
|
||||
username : string | null;
|
||||
severity : string | null;
|
||||
download : number;
|
||||
upload : number;
|
||||
detected_at : string | null;
|
||||
}
|
||||
|
||||
export interface DeviceReputationItem {
|
||||
remote_ip : string | null;
|
||||
local_ip : string | null;
|
||||
reputation : string | null;
|
||||
score : number | null;
|
||||
country : string | null;
|
||||
app_label : string | null;
|
||||
blacklisted : boolean;
|
||||
download : number;
|
||||
upload : number;
|
||||
}
|
||||
|
||||
export interface DeviceVpnItem {
|
||||
vpn_type : string | null;
|
||||
remote_ip : string | null;
|
||||
protocol : string | null;
|
||||
country : string | null;
|
||||
confidence : number | null;
|
||||
download : number;
|
||||
upload : number;
|
||||
detected_at : string | null;
|
||||
}
|
||||
|
||||
export interface DeviceEventItem {
|
||||
event_type : string | null;
|
||||
severity : string | null;
|
||||
ip_address : string | null;
|
||||
mac_address : string | null;
|
||||
description : string | null;
|
||||
event_at : string | null;
|
||||
}
|
||||
|
||||
export interface DeviceMacBandwidth {
|
||||
mac_address : string;
|
||||
manufacturer : string | null;
|
||||
download : number;
|
||||
upload : number;
|
||||
total : number;
|
||||
}
|
||||
|
||||
export interface DeviceDetails {
|
||||
ip : string;
|
||||
mac_address : string | null;
|
||||
total_download : number;
|
||||
total_upload : number;
|
||||
flow_count : number;
|
||||
device_info : DeviceInfo;
|
||||
top_apps : DeviceAppItem[];
|
||||
top_domains : DeviceDomainItem[];
|
||||
flows : DeviceFlowItem[];
|
||||
encryption : DeviceEncryption | null;
|
||||
server_discovery : DeviceServerItem[];
|
||||
unencrypted_passwords: DevicePwdItem[];
|
||||
ip_reputation : DeviceReputationItem[];
|
||||
vpn_detections : DeviceVpnItem[];
|
||||
events : DeviceEventItem[];
|
||||
mac_bandwidth : DeviceMacBandwidth | null;
|
||||
}
|
||||
|
||||
|
||||
export interface AppAgentItem {
|
||||
agent_uuid: string | null;
|
||||
agent_label: string;
|
||||
|
||||
+5
-4
@@ -5,9 +5,10 @@ export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function fmtBytes(bytes?: number) {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
export function fmtBytes(bytes?: number | null) {
|
||||
if (bytes == null || bytes === 0 || isNaN(bytes)) return '0 B';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'];
|
||||
const i = Math.min(Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024)), units.length - 1);
|
||||
if (i < 0) return '0 B';
|
||||
return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
|
||||
}
|
||||
Reference in new issue
Block a user