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
+2124
-353
No files matched your search
+377
-70
@@ -1217,13 +1217,13 @@ async function fetchAgentDetails(agentUuid) {
|
||||
const label = AGENT_LABELS[agentUuid] || agentUuid;
|
||||
const macs = AGENT_MAC_MAP[agentUuid];
|
||||
|
||||
if (!macs || macs.length === 0) {
|
||||
return { agent_uuid: agentUuid, agent_label: label, summary: null, devices: [], flows: [], top_apps: [] };
|
||||
}
|
||||
const emptyResult = { agent_uuid: agentUuid, agent_label: label, summary: null, devices: [], flows: [], top_apps: [], security: { encryption_audit: [], insecure_protocols: [], unencrypted_passwords: [], ip_reputation: [], tor_detections: [], vpn_detections: [] }, events: [], mac_bandwidth: [], server_discovery: [] };
|
||||
|
||||
if (!macs || macs.length === 0) return emptyResult;
|
||||
|
||||
const ph = inClause(macs);
|
||||
|
||||
// 1. Top apps by this agent (aggregate from flows)
|
||||
// ── 1. Top apps by this agent (from flows) ─────────────────────────────────
|
||||
const appRows = d.prepare(`
|
||||
SELECT app_label,
|
||||
SUM(bytes_download) AS download,
|
||||
@@ -1246,7 +1246,7 @@ async function fetchAgentDetails(agentUuid) {
|
||||
upload : r.upload ?? 0,
|
||||
}));
|
||||
|
||||
// 2. Distinct devices (src_ip + device info + risk badge) for this agent
|
||||
// ── 2. Distinct devices for this agent ─────────────────────────────────────
|
||||
const devRows = d.prepare(`
|
||||
SELECT f.src_ip AS ip_address,
|
||||
f.src_mac AS mac_address,
|
||||
@@ -1266,26 +1266,23 @@ async function fetchAgentDetails(agentUuid) {
|
||||
WHERE f.src_mac IN (${ph})
|
||||
GROUP BY f.src_ip
|
||||
ORDER BY dl DESC
|
||||
LIMIT 50
|
||||
LIMIT 100
|
||||
`).all(...macs);
|
||||
|
||||
// Risk badge per device from intel_encryption_audit (latest snapshot)
|
||||
const agentIPs = [...new Set(devRows.map(r => r.ip_address).filter(Boolean))];
|
||||
const phIPs = agentIPs.length > 0 ? agentIPs.map(() => '?').join(',') : null;
|
||||
|
||||
const latestEncAudit = d.prepare(`SELECT MAX(fetched_at) AS t FROM intel_encryption_audit`).get()?.t;
|
||||
const riskMap = {};
|
||||
if (latestEncAudit) {
|
||||
const riskRows = d.prepare(`
|
||||
SELECT ip_address, encrypted_pct, risk_level
|
||||
FROM intel_encryption_audit
|
||||
WHERE fetched_at = ?
|
||||
`).all(latestEncAudit);
|
||||
const riskRows = d.prepare(`SELECT ip_address, encrypted_pct, risk_level FROM intel_encryption_audit WHERE fetched_at = ?`).all(latestEncAudit);
|
||||
for (const r of riskRows) {
|
||||
if (r.ip_address) riskMap[r.ip_address] = { encrypted_pct: r.encrypted_pct, risk_level: r.risk_level };
|
||||
}
|
||||
}
|
||||
|
||||
// Insecure protocol flags per IP
|
||||
const insecureIPs = new Set(
|
||||
d.prepare(`SELECT DISTINCT ip_address FROM intel_insecure_protocols WHERE ip_address IS NOT NULL`).all().map(r => r.ip_address)
|
||||
phIPs ? d.prepare(`SELECT DISTINCT ip_address FROM intel_insecure_protocols WHERE ip_address IN (${phIPs})`).all(...agentIPs).map(r => r.ip_address) : []
|
||||
);
|
||||
|
||||
const devices = devRows.map(r => ({
|
||||
@@ -1303,14 +1300,14 @@ async function fetchAgentDetails(agentUuid) {
|
||||
has_insecure : insecureIPs.has(r.ip_address),
|
||||
}));
|
||||
|
||||
// 3. Recent flows for this agent
|
||||
// ── 3. Recent flows for this agent ─────────────────────────────────────────
|
||||
const flowRows = d.prepare(`
|
||||
SELECT src_ip, dst_ip, dst_port, protocol, app_label, domain,
|
||||
bytes_download AS download, bytes_upload AS upload, last_seen
|
||||
FROM flows
|
||||
WHERE src_mac IN (${ph})
|
||||
ORDER BY last_seen DESC
|
||||
LIMIT 50
|
||||
LIMIT 100
|
||||
`).all(...macs);
|
||||
|
||||
const flows = flowRows.map(r => ({
|
||||
@@ -1325,7 +1322,7 @@ async function fetchAgentDetails(agentUuid) {
|
||||
last_seen : r.last_seen,
|
||||
}));
|
||||
|
||||
// 4. Summary stats
|
||||
// ── 4. Summary stats ────────────────────────────────────────────────────────
|
||||
const sumRow = d.prepare(`
|
||||
SELECT COUNT(DISTINCT src_ip) AS device_count,
|
||||
COUNT(*) AS flow_count,
|
||||
@@ -1336,22 +1333,128 @@ async function fetchAgentDetails(agentUuid) {
|
||||
`).get(...macs);
|
||||
|
||||
const summary = sumRow ? {
|
||||
total_devices : sumRow.device_count,
|
||||
active_flows : sumRow.flow_count,
|
||||
bandwidth_down : sumRow.total_download,
|
||||
bandwidth_up : sumRow.total_upload,
|
||||
total_devices : sumRow.device_count ?? 0,
|
||||
active_flows : sumRow.flow_count ?? 0,
|
||||
bandwidth_down : sumRow.total_download ?? 0,
|
||||
bandwidth_up : sumRow.total_upload ?? 0,
|
||||
} : null;
|
||||
|
||||
return { agent_uuid: agentUuid, agent_label: label, summary, devices, flows, top_apps };
|
||||
// ── 5. Security Intel filtered by agent IPs & MACs ─────────────────────────
|
||||
const encryptionRows = (latestEncAudit && phIPs)
|
||||
? d.prepare(`SELECT ip_address, mac_address, device_label, encrypted_pct, unencrypted, encrypted, total, risk_level, detected_at FROM intel_encryption_audit WHERE fetched_at = ? AND ip_address IN (${phIPs}) ORDER BY CASE risk_level WHEN 'Rawan' THEN 1 WHEN 'Sedang' THEN 2 ELSE 3 END`).all(latestEncAudit, ...agentIPs)
|
||||
: [];
|
||||
|
||||
const insecureProtoRows = phIPs
|
||||
? d.prepare(`SELECT ip_address, mac_address, protocol, risk, app_label, dst_ip, dst_port, download, upload, detected_at FROM intel_insecure_protocols WHERE ip_address IN (${phIPs}) ORDER BY detected_at DESC LIMIT 50`).all(...agentIPs)
|
||||
: [];
|
||||
|
||||
let unencPwdRows = d.prepare(`SELECT ip_address, mac_address, dst_ip, dst_port, protocol, username, severity, download, upload, detected_at FROM intel_unencrypted_passwords WHERE mac_address IN (${ph}) ORDER BY detected_at DESC LIMIT 50`).all(...macs);
|
||||
if (unencPwdRows.length === 0 && phIPs) {
|
||||
unencPwdRows = d.prepare(`SELECT ip_address, mac_address, dst_ip, dst_port, protocol, username, severity, download, upload, detected_at FROM intel_unencrypted_passwords WHERE ip_address IN (${phIPs}) ORDER BY detected_at DESC LIMIT 50`).all(...agentIPs);
|
||||
}
|
||||
|
||||
// Fetch data for a specific device IP — from local DB flows + intel tables
|
||||
const latestRepSnap = d.prepare(`SELECT MAX(fetched_at) AS t FROM intel_ip_reputation`).get()?.t;
|
||||
const ipReputRows = (latestRepSnap && phIPs)
|
||||
? d.prepare(`SELECT ip_address, local_ip, mac_address, reputation, score, country, app_label, blacklisted, download, upload, detected_at FROM intel_ip_reputation WHERE fetched_at = ? AND (local_ip IN (${phIPs}) OR ip_address IN (${phIPs})) ORDER BY score DESC LIMIT 50`).all(latestRepSnap, ...agentIPs, ...agentIPs)
|
||||
: [];
|
||||
|
||||
let torRows = d.prepare(`SELECT ip_address, mac_address, exit_node, circuit_id, country, download, upload, detected_at FROM intel_tor_detection WHERE mac_address IN (${ph}) ORDER BY detected_at DESC LIMIT 20`).all(...macs);
|
||||
if (torRows.length === 0 && phIPs) {
|
||||
torRows = d.prepare(`SELECT ip_address, mac_address, exit_node, circuit_id, country, download, upload, detected_at FROM intel_tor_detection WHERE ip_address IN (${phIPs}) ORDER BY detected_at DESC LIMIT 20`).all(...agentIPs);
|
||||
}
|
||||
|
||||
let vpnRows = d.prepare(`SELECT ip_address, mac_address, vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at FROM intel_vpn_detection WHERE mac_address IN (${ph}) ORDER BY detected_at DESC LIMIT 20`).all(...macs);
|
||||
if (vpnRows.length === 0 && phIPs) {
|
||||
vpnRows = d.prepare(`SELECT ip_address, mac_address, vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at FROM intel_vpn_detection WHERE ip_address IN (${phIPs}) ORDER BY detected_at DESC LIMIT 20`).all(...agentIPs);
|
||||
}
|
||||
|
||||
const serverDiscRows = phIPs
|
||||
? d.prepare(`SELECT ip_address, mac_address, server_type, hostname, port, protocol, os_label, download, upload, detected_at FROM intel_server_discovery WHERE ip_address IN (${phIPs}) ORDER BY detected_at DESC LIMIT 50`).all(...agentIPs)
|
||||
: [];
|
||||
|
||||
const security = {
|
||||
encryption_audit : encryptionRows,
|
||||
insecure_protocols : insecureProtoRows,
|
||||
unencrypted_passwords: unencPwdRows,
|
||||
ip_reputation : ipReputRows,
|
||||
tor_detections : torRows,
|
||||
vpn_detections : vpnRows,
|
||||
};
|
||||
|
||||
// ── 6. Events filtered by agent IPs & MACs ─────────────────────────────────
|
||||
const eventsByIP = phIPs ? d.prepare(`SELECT event_id, event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE ip_address IN (${phIPs}) ORDER BY event_at DESC LIMIT 100`).all(...agentIPs) : [];
|
||||
const eventsByMAC = d.prepare(`SELECT event_id, event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE mac_address IN (${ph}) ORDER BY event_at DESC LIMIT 100`).all(...macs);
|
||||
|
||||
const seenEvt = new Set();
|
||||
const allEvents = [];
|
||||
for (const r of [...eventsByIP, ...eventsByMAC]) {
|
||||
const key = r.event_id || `${r.ip_address}:${r.event_at}`;
|
||||
if (!seenEvt.has(key)) {
|
||||
seenEvt.add(key);
|
||||
allEvents.push({ event_id: r.event_id, event_type: r.event_type, severity: r.severity, ip_address: r.ip_address, mac_address: r.mac_address, description: r.description, event_at: r.event_at });
|
||||
}
|
||||
}
|
||||
allEvents.sort((a, b) => (b.event_at || '').localeCompare(a.event_at || ''));
|
||||
const events = allEvents.slice(0, 100);
|
||||
|
||||
// ── 7. MAC bandwidth for this agent's MACs ──────────────────────────────────
|
||||
const latestMacSnap = d.prepare(`SELECT MAX(fetched_at) AS t FROM mac_bandwidth`).get()?.t;
|
||||
const mac_bandwidth = latestMacSnap
|
||||
? d.prepare(`SELECT mac_address, manufacturer, download, upload, total FROM mac_bandwidth WHERE fetched_at = ? AND mac_address IN (${ph}) ORDER BY download DESC`).all(latestMacSnap, ...macs)
|
||||
: [];
|
||||
|
||||
return {
|
||||
agent_uuid : agentUuid,
|
||||
agent_label : label,
|
||||
summary,
|
||||
devices,
|
||||
flows,
|
||||
top_apps,
|
||||
security,
|
||||
events,
|
||||
mac_bandwidth,
|
||||
server_discovery: serverDiscRows,
|
||||
};
|
||||
}
|
||||
|
||||
// Fetch data for a specific device IP — from local DB (all 10 correlated tables)
|
||||
async function fetchDeviceDetails(ip) {
|
||||
const db = require('./database');
|
||||
const d = db.getDB();
|
||||
|
||||
// Top apps used by this IP — aggregated from flows
|
||||
const appRows = d.prepare(`
|
||||
// ── 0. Resolve MAC from flows (most recent) ──────────────────────────────
|
||||
const macRow = d.prepare(`SELECT src_mac FROM flows WHERE src_ip = ? AND src_mac IS NOT NULL ORDER BY last_seen DESC LIMIT 1`).get(ip);
|
||||
const mac = macRow?.src_mac || null;
|
||||
|
||||
// ── 1. Device info from devices table ────────────────────────────────────
|
||||
const deviceRow = d.prepare(`
|
||||
SELECT device_label, device_type, os_label, manufacturer, download, upload, last_seen
|
||||
FROM devices
|
||||
WHERE ip_address = ?
|
||||
ORDER BY fetched_at DESC
|
||||
LIMIT 1
|
||||
`).get(ip);
|
||||
|
||||
// ── 2. Discovery info (may differ from devices table) ────────────────────
|
||||
const discRow = d.prepare(`
|
||||
SELECT device_type, os_label, manufacturer, device_label, is_new
|
||||
FROM intel_device_discovery
|
||||
WHERE ip_address = ?
|
||||
ORDER BY fetched_at DESC
|
||||
LIMIT 1
|
||||
`).get(ip);
|
||||
|
||||
const device_info = {
|
||||
device_label : deviceRow?.device_label || discRow?.device_label || null,
|
||||
device_type : deviceRow?.device_type || discRow?.device_type || null,
|
||||
os_label : deviceRow?.os_label || discRow?.os_label || null,
|
||||
manufacturer : deviceRow?.manufacturer || discRow?.manufacturer || null,
|
||||
mac_address : mac,
|
||||
is_new : discRow?.is_new ?? null,
|
||||
};
|
||||
|
||||
// ── 3. Named apps (exclude "Port XXX" port-only entries) ─────────────────
|
||||
const namedAppRows = d.prepare(`
|
||||
SELECT app_label,
|
||||
SUM(bytes_download) AS download,
|
||||
SUM(bytes_upload) AS upload,
|
||||
@@ -1359,28 +1462,94 @@ async function fetchDeviceDetails(ip) {
|
||||
FROM flows
|
||||
WHERE src_ip = ?
|
||||
AND app_label IS NOT NULL
|
||||
AND app_label NOT LIKE 'Port %'
|
||||
GROUP BY app_label
|
||||
ORDER BY download DESC
|
||||
LIMIT 20
|
||||
`).all(ip);
|
||||
|
||||
const top_apps = appRows.map(r => ({
|
||||
app_id : null,
|
||||
app_label : r.app_label,
|
||||
category : null,
|
||||
favicon : null,
|
||||
// ── 4. Top domains accessed by this device ─────────────────────────────
|
||||
const domainRows = d.prepare(`
|
||||
SELECT domain,
|
||||
-- use app_label that appeared most with this domain
|
||||
(SELECT app_label FROM flows
|
||||
WHERE src_ip = f.src_ip AND domain = f.domain
|
||||
AND app_label IS NOT NULL
|
||||
ORDER BY bytes_download DESC LIMIT 1) AS app_label,
|
||||
-- extract root domain for display
|
||||
domain AS display_name,
|
||||
SUM(bytes_download) AS download,
|
||||
SUM(bytes_upload) AS upload,
|
||||
COUNT(*) AS flow_count
|
||||
FROM flows f
|
||||
WHERE src_ip = ?
|
||||
AND domain IS NOT NULL
|
||||
GROUP BY domain
|
||||
ORDER BY download DESC
|
||||
LIMIT 30
|
||||
`).all(ip);
|
||||
|
||||
// ── 5. Smart combined: flows with BOTH domain and app_label, or just one ─
|
||||
// Build combined display list:
|
||||
// Priority 1 = rows with actual domain (show domain as label)
|
||||
// Priority 2 = rows with named app (not port-only)
|
||||
// Merge & de-duplicate by display name
|
||||
const combinedMap = new Map();
|
||||
|
||||
// Add domains first (higher priority)
|
||||
for (const r of domainRows) {
|
||||
combinedMap.set('domain:' + r.domain, {
|
||||
label : r.domain, // the actual website/domain
|
||||
sub_label : r.app_label || null, // protocol (HTTPS/TLS etc)
|
||||
type : 'domain',
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
flow_count : r.flow_count,
|
||||
});
|
||||
}
|
||||
|
||||
// Add named apps that don't duplicate a domain entry
|
||||
for (const r of namedAppRows) {
|
||||
const key = 'app:' + r.app_label;
|
||||
if (!combinedMap.has(key)) {
|
||||
combinedMap.set(key, {
|
||||
label : r.app_label, // protocol name (DNS, HTTPS/TLS, etc)
|
||||
sub_label : null,
|
||||
type : 'protocol',
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
flow_count : r.flow_count,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// If neither domain nor named app found, fall back to ALL app_labels incl Port XXX
|
||||
const top_apps = combinedMap.size > 0
|
||||
? [...combinedMap.values()].sort((a, b) => b.download - a.download).slice(0, 25)
|
||||
: d.prepare(`
|
||||
SELECT app_label AS label, NULL AS sub_label, 'port' AS type,
|
||||
SUM(bytes_download) AS download, SUM(bytes_upload) AS upload, COUNT(*) AS flow_count
|
||||
FROM flows WHERE src_ip = ? AND app_label IS NOT NULL
|
||||
GROUP BY app_label ORDER BY download DESC LIMIT 25
|
||||
`).all(ip).map(r => ({ label: r.label, sub_label: null, type: 'port', download: r.download ?? 0, upload: r.upload ?? 0, flow_count: r.flow_count }));
|
||||
|
||||
// top_domains: keep simple list for Info tab
|
||||
const top_domains = domainRows.map(r => ({
|
||||
domain : r.domain,
|
||||
app_label : r.app_label,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
flow_count : r.flow_count,
|
||||
}));
|
||||
|
||||
// Recent flows from this IP
|
||||
// ── 5. Recent flows ────────────────────────────────────────────────────
|
||||
const flowRows = d.prepare(`
|
||||
SELECT dst_ip, dst_port, protocol, app_label, domain,
|
||||
bytes_download AS download, bytes_upload AS upload, last_seen
|
||||
FROM flows
|
||||
WHERE src_ip = ?
|
||||
ORDER BY last_seen DESC
|
||||
LIMIT 50
|
||||
LIMIT 100
|
||||
`).all(ip);
|
||||
|
||||
const flows = flowRows.map(r => ({
|
||||
@@ -1394,7 +1563,7 @@ async function fetchDeviceDetails(ip) {
|
||||
last_seen : r.last_seen,
|
||||
}));
|
||||
|
||||
// Totals for this IP
|
||||
// ── 6. Totals ─────────────────────────────────────────────────────────
|
||||
const sumRow = d.prepare(`
|
||||
SELECT SUM(bytes_download) AS total_download,
|
||||
SUM(bytes_upload) AS total_upload,
|
||||
@@ -1403,70 +1572,208 @@ async function fetchDeviceDetails(ip) {
|
||||
WHERE src_ip = ?
|
||||
`).get(ip);
|
||||
|
||||
// ── Security Info ──────────────────────────────────────────────
|
||||
// Encryption audit (latest snapshot for this IP)
|
||||
// ── 7. Encryption audit (latest snapshot) ─────────────────────────────
|
||||
const latestAudit = d.prepare(`SELECT MAX(fetched_at) AS t FROM intel_encryption_audit`).get()?.t;
|
||||
const encRow = latestAudit
|
||||
? d.prepare(`
|
||||
SELECT encrypted_pct, encrypted, unencrypted, total, risk_level
|
||||
SELECT encrypted_pct, encrypted, unencrypted, total, risk_level, mac_address
|
||||
FROM intel_encryption_audit
|
||||
WHERE fetched_at = ? AND ip_address = ?
|
||||
LIMIT 1
|
||||
`).get(latestAudit, ip)
|
||||
: null;
|
||||
|
||||
// Insecure protocols used by this IP
|
||||
const insecureRows = d.prepare(`
|
||||
SELECT DISTINCT protocol, risk
|
||||
FROM intel_insecure_protocols
|
||||
// Also try fallback by MAC if not found by IP
|
||||
const encRowMac = (!encRow && mac && latestAudit)
|
||||
? d.prepare(`
|
||||
SELECT encrypted_pct, encrypted, unencrypted, total, risk_level, ip_address
|
||||
FROM intel_encryption_audit
|
||||
WHERE fetched_at = ? AND mac_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 1
|
||||
`).get(latestAudit, mac)
|
||||
: null;
|
||||
|
||||
const encFinal = encRow || encRowMac;
|
||||
|
||||
const encryption = encFinal ? {
|
||||
encrypted_pct : encFinal.encrypted_pct ?? null,
|
||||
encrypted_bytes : encFinal.encrypted ?? null,
|
||||
unencrypted_bytes: encFinal.unencrypted ?? null,
|
||||
total_bytes : encFinal.total ?? null,
|
||||
risk_level : encFinal.risk_level ?? null,
|
||||
} : null;
|
||||
|
||||
// ── 8. Server discovery (servers this device accessed) ─────────────────
|
||||
const serverRows = d.prepare(`
|
||||
SELECT DISTINCT server_type, hostname, port, protocol, os_label,
|
||||
MAX(download) AS download, MAX(upload) AS upload, MAX(detected_at) AS detected_at
|
||||
FROM intel_server_discovery
|
||||
WHERE ip_address = ?
|
||||
GROUP BY server_type, port, protocol
|
||||
ORDER BY download DESC
|
||||
LIMIT 50
|
||||
`).all(ip);
|
||||
|
||||
// Device discovery info (OS, type, manufacturer)
|
||||
const discRow = d.prepare(`
|
||||
SELECT device_type, os_label, manufacturer, device_label
|
||||
FROM intel_device_discovery
|
||||
// fallback by MAC if no rows by IP
|
||||
const serverRowsMac = (serverRows.length === 0 && mac)
|
||||
? d.prepare(`
|
||||
SELECT DISTINCT server_type, hostname, port, protocol, os_label,
|
||||
MAX(download) AS download, MAX(upload) AS upload, MAX(detected_at) AS detected_at
|
||||
FROM intel_server_discovery
|
||||
WHERE mac_address = ?
|
||||
GROUP BY server_type, port, protocol
|
||||
ORDER BY download DESC
|
||||
LIMIT 50
|
||||
`).all(mac)
|
||||
: [];
|
||||
|
||||
const server_discovery = (serverRows.length > 0 ? serverRows : serverRowsMac).map(r => ({
|
||||
server_type : r.server_type,
|
||||
hostname : r.hostname || null,
|
||||
port : r.port,
|
||||
protocol : r.protocol,
|
||||
os_label : r.os_label || null,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
detected_at : r.detected_at,
|
||||
}));
|
||||
|
||||
// ── 9. Unencrypted passwords ───────────────────────────────────────────
|
||||
let pwdRows = d.prepare(`
|
||||
SELECT dst_ip, dst_port, protocol, username, severity, download, upload, detected_at
|
||||
FROM intel_unencrypted_passwords
|
||||
WHERE ip_address = ?
|
||||
ORDER BY fetched_at DESC
|
||||
LIMIT 1
|
||||
`).get(ip);
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 50
|
||||
`).all(ip);
|
||||
|
||||
// IP reputation (is this device flagged?)
|
||||
const reputRow = d.prepare(`
|
||||
SELECT reputation, score, blacklisted
|
||||
if (pwdRows.length === 0 && mac) {
|
||||
pwdRows = d.prepare(`
|
||||
SELECT dst_ip, dst_port, protocol, username, severity, download, upload, detected_at
|
||||
FROM intel_unencrypted_passwords
|
||||
WHERE mac_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 50
|
||||
`).all(mac);
|
||||
}
|
||||
|
||||
const unencrypted_passwords = pwdRows.map(r => ({
|
||||
dst_ip : r.dst_ip,
|
||||
dst_port : r.dst_port,
|
||||
protocol : r.protocol,
|
||||
username : r.username,
|
||||
severity : r.severity,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
detected_at : r.detected_at,
|
||||
}));
|
||||
|
||||
// ── 10. IP Reputation (latest snapshot, this device's local_ip) ─────────
|
||||
const latestRepSnap = d.prepare(`SELECT MAX(fetched_at) AS t FROM intel_ip_reputation`).get()?.t;
|
||||
const repRows = latestRepSnap
|
||||
? d.prepare(`
|
||||
SELECT ip_address, local_ip, reputation, score, country, app_label, blacklisted, download, upload
|
||||
FROM intel_ip_reputation
|
||||
WHERE local_ip = ? OR ip_address = ?
|
||||
ORDER BY fetched_at DESC
|
||||
LIMIT 1
|
||||
`).get(ip, ip);
|
||||
WHERE fetched_at = ? AND (local_ip = ? OR ip_address = ?)
|
||||
ORDER BY score DESC NULLS LAST
|
||||
LIMIT 30
|
||||
`).all(latestRepSnap, ip, ip)
|
||||
: [];
|
||||
|
||||
const security_info = {
|
||||
encrypted_pct : encRow?.encrypted_pct ?? null,
|
||||
encrypted_bytes : encRow?.encrypted ?? null,
|
||||
unencrypted_bytes: encRow?.unencrypted ?? null,
|
||||
risk_level : encRow?.risk_level ?? null,
|
||||
insecure_protocols: insecureRows.map(r => ({ protocol: r.protocol, risk: r.risk })),
|
||||
device_type : discRow?.device_type ?? null,
|
||||
os_label : discRow?.os_label ?? null,
|
||||
manufacturer : discRow?.manufacturer ?? null,
|
||||
device_label : discRow?.device_label ?? null,
|
||||
reputation : reputRow?.reputation ?? null,
|
||||
rep_score : reputRow?.score ?? null,
|
||||
blacklisted : reputRow?.blacklisted ?? false,
|
||||
};
|
||||
const ip_reputation = repRows.map(r => ({
|
||||
remote_ip : r.ip_address,
|
||||
local_ip : r.local_ip,
|
||||
reputation : r.reputation,
|
||||
score : r.score,
|
||||
country : r.country,
|
||||
app_label : r.app_label,
|
||||
blacklisted : !!r.blacklisted,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
}));
|
||||
|
||||
// ── 11. VPN detection ─────────────────────────────────────────────────
|
||||
let vpnRows = d.prepare(`
|
||||
SELECT vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at
|
||||
FROM intel_vpn_detection
|
||||
WHERE ip_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 20
|
||||
`).all(ip);
|
||||
|
||||
if (vpnRows.length === 0 && mac) {
|
||||
vpnRows = d.prepare(`
|
||||
SELECT vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at
|
||||
FROM intel_vpn_detection
|
||||
WHERE mac_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 20
|
||||
`).all(mac);
|
||||
}
|
||||
|
||||
const vpn_detections = vpnRows.map(r => ({
|
||||
vpn_type : r.vpn_type,
|
||||
remote_ip : r.remote_ip,
|
||||
protocol : r.protocol,
|
||||
country : r.country,
|
||||
confidence : r.confidence,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
detected_at : r.detected_at,
|
||||
}));
|
||||
|
||||
// ── 12. Events ────────────────────────────────────────────────────────
|
||||
const evtByIP = d.prepare(`SELECT event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE ip_address = ? ORDER BY event_at DESC LIMIT 50`).all(ip);
|
||||
const evtByMAC = mac ? d.prepare(`SELECT event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE mac_address = ? ORDER BY event_at DESC LIMIT 50`).all(mac) : [];
|
||||
|
||||
const seenEvt = new Set();
|
||||
const evtMerged = [];
|
||||
for (const r of [...evtByIP, ...evtByMAC]) {
|
||||
const key = `${r.event_type}:${r.event_at}`;
|
||||
if (!seenEvt.has(key)) {
|
||||
seenEvt.add(key);
|
||||
evtMerged.push({ event_type: r.event_type, severity: r.severity, ip_address: r.ip_address, mac_address: r.mac_address, description: r.description, event_at: r.event_at });
|
||||
}
|
||||
}
|
||||
evtMerged.sort((a, b) => (b.event_at || '').localeCompare(a.event_at || ''));
|
||||
const events = evtMerged.slice(0, 100);
|
||||
|
||||
// ── 13. MAC bandwidth (latest snapshot) ───────────────────────────────
|
||||
const latestMacSnap = d.prepare(`SELECT MAX(fetched_at) AS t FROM mac_bandwidth`).get()?.t;
|
||||
const macBwRow = (latestMacSnap && mac)
|
||||
? d.prepare(`SELECT manufacturer, download, upload, total FROM mac_bandwidth WHERE fetched_at = ? AND mac_address = ? LIMIT 1`).get(latestMacSnap, mac)
|
||||
: null;
|
||||
|
||||
const mac_bandwidth = macBwRow ? {
|
||||
mac_address : mac,
|
||||
manufacturer : macBwRow.manufacturer,
|
||||
download : macBwRow.download ?? 0,
|
||||
upload : macBwRow.upload ?? 0,
|
||||
total : macBwRow.total ?? 0,
|
||||
} : null;
|
||||
|
||||
return {
|
||||
ip,
|
||||
mac_address : mac,
|
||||
total_download : sumRow?.total_download ?? 0,
|
||||
total_upload : sumRow?.total_upload ?? 0,
|
||||
flow_count : sumRow?.flow_count ?? 0,
|
||||
device_info,
|
||||
top_apps,
|
||||
top_domains : domainRows.map(r => ({ domain: r.domain, download: r.download ?? 0, upload: r.upload ?? 0, flow_count: r.flow_count })),
|
||||
flows,
|
||||
security_info,
|
||||
encryption,
|
||||
server_discovery,
|
||||
unencrypted_passwords,
|
||||
ip_reputation,
|
||||
vpn_detections,
|
||||
events,
|
||||
mac_bandwidth,
|
||||
};
|
||||
}
|
||||
|
||||
// Fetch data for a specific application — from local DB
|
||||
// Fetch data for a specific application// Fetch data for a specific application — from local DB
|
||||
async function fetchAppDetails(appLabel) {
|
||||
const db = require('./database');
|
||||
const d = db.getDB();
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
const db = require('../backend/database').getDB();
|
||||
|
||||
// Check all flows - how many have domain vs just port
|
||||
const stats = db.prepare(`
|
||||
SELECT
|
||||
COUNT(*) as total,
|
||||
SUM(CASE WHEN domain IS NOT NULL THEN 1 ELSE 0 END) as with_domain,
|
||||
SUM(CASE WHEN app_label IS NOT NULL AND app_label NOT LIKE 'Port %' THEN 1 ELSE 0 END) as named_app,
|
||||
SUM(CASE WHEN app_label LIKE 'Port %' THEN 1 ELSE 0 END) as port_only,
|
||||
SUM(CASE WHEN app_label IS NULL AND domain IS NULL THEN 1 ELSE 0 END) as both_null
|
||||
FROM flows
|
||||
`).get();
|
||||
console.log('Flow stats:', stats);
|
||||
|
||||
// What are the unique domain values?
|
||||
const uniqueDomains = db.prepare(`SELECT DISTINCT domain FROM flows WHERE domain IS NOT NULL LIMIT 20`).all();
|
||||
console.log('\nUnique domains in DB:', uniqueDomains.length);
|
||||
uniqueDomains.forEach(r => console.log(' ', r.domain));
|
||||
|
||||
// What devices have domain data, and how many?
|
||||
console.log('\n\nDevices with domain+app data:');
|
||||
const devDomains = db.prepare(`
|
||||
SELECT src_ip, src_mac,
|
||||
COUNT(*) total_flows,
|
||||
SUM(CASE WHEN domain IS NOT NULL THEN 1 ELSE 0 END) domain_flows,
|
||||
SUM(CASE WHEN app_label IS NOT NULL AND app_label NOT LIKE 'Port %' THEN 1 ELSE 0 END) named_flows,
|
||||
GROUP_CONCAT(DISTINCT domain) sample_domains
|
||||
FROM flows
|
||||
WHERE domain IS NOT NULL OR (app_label IS NOT NULL AND app_label NOT LIKE 'Port %')
|
||||
GROUP BY src_ip
|
||||
ORDER BY domain_flows DESC
|
||||
LIMIT 10
|
||||
`).all();
|
||||
devDomains.forEach(r => {
|
||||
const {sample_domains, ...rest} = r;
|
||||
console.log(JSON.stringify(rest));
|
||||
if (sample_domains) console.log(' domains:', sample_domains.split(',').slice(0,3).join(', '));
|
||||
});
|
||||
@@ -0,0 +1,325 @@
|
||||
// patch_device_details.js — replaces fetchDeviceDetails in netify.js
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const filePath = path.join(__dirname, '..', 'backend', 'netify.js');
|
||||
let content = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
const startMarker = '// Fetch data for a specific device IP — from local DB flows + intel tables\r\nasync function fetchDeviceDetails(ip) {';
|
||||
const endMarker = '}\r\n\r\n// Fetch data for a specific application';
|
||||
|
||||
const startIdx = content.indexOf(startMarker);
|
||||
const endIdx = content.indexOf('// Fetch data for a specific application');
|
||||
|
||||
if (startIdx === -1) { console.error('START not found'); process.exit(1); }
|
||||
if (endIdx === -1) { console.error('END not found'); process.exit(1); }
|
||||
|
||||
console.log(`Found fetchDeviceDetails: char ${startIdx} → ${endIdx}`);
|
||||
|
||||
const replacement = `// Fetch data for a specific device IP — from local DB (all 10 correlated tables)
|
||||
async function fetchDeviceDetails(ip) {
|
||||
const db = require('./database');
|
||||
const d = db.getDB();
|
||||
|
||||
// ── 0. Resolve MAC from flows (most recent) ──────────────────────────────
|
||||
const macRow = d.prepare(\`SELECT src_mac FROM flows WHERE src_ip = ? AND src_mac IS NOT NULL ORDER BY last_seen DESC LIMIT 1\`).get(ip);
|
||||
const mac = macRow?.src_mac || null;
|
||||
|
||||
// ── 1. Device info from devices table ────────────────────────────────────
|
||||
const deviceRow = d.prepare(\`
|
||||
SELECT device_label, device_type, os_label, manufacturer, download, upload, last_seen
|
||||
FROM devices
|
||||
WHERE ip_address = ?
|
||||
ORDER BY fetched_at DESC
|
||||
LIMIT 1
|
||||
\`).get(ip);
|
||||
|
||||
// ── 2. Discovery info (may differ from devices table) ────────────────────
|
||||
const discRow = d.prepare(\`
|
||||
SELECT device_type, os_label, manufacturer, device_label, is_new
|
||||
FROM intel_device_discovery
|
||||
WHERE ip_address = ?
|
||||
ORDER BY fetched_at DESC
|
||||
LIMIT 1
|
||||
\`).get(ip);
|
||||
|
||||
const device_info = {
|
||||
device_label : deviceRow?.device_label || discRow?.device_label || null,
|
||||
device_type : deviceRow?.device_type || discRow?.device_type || null,
|
||||
os_label : deviceRow?.os_label || discRow?.os_label || null,
|
||||
manufacturer : deviceRow?.manufacturer || discRow?.manufacturer || null,
|
||||
mac_address : mac,
|
||||
is_new : discRow?.is_new ?? null,
|
||||
};
|
||||
|
||||
// ── 3. Top apps (flows GROUP BY app_label) ─────────────────────────────
|
||||
const appRows = d.prepare(\`
|
||||
SELECT app_label,
|
||||
SUM(bytes_download) AS download,
|
||||
SUM(bytes_upload) AS upload,
|
||||
COUNT(*) AS flow_count
|
||||
FROM flows
|
||||
WHERE src_ip = ?
|
||||
AND app_label IS NOT NULL
|
||||
GROUP BY app_label
|
||||
ORDER BY download DESC
|
||||
LIMIT 20
|
||||
\`).all(ip);
|
||||
|
||||
const top_apps = appRows.map(r => ({
|
||||
app_label : r.app_label,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
flow_count : r.flow_count,
|
||||
}));
|
||||
|
||||
// ── 4. Top domains (flows GROUP BY domain) ─────────────────────────────
|
||||
const domainRows = d.prepare(\`
|
||||
SELECT domain,
|
||||
SUM(bytes_download) AS download,
|
||||
SUM(bytes_upload) AS upload,
|
||||
COUNT(*) AS flow_count
|
||||
FROM flows
|
||||
WHERE src_ip = ?
|
||||
AND domain IS NOT NULL
|
||||
GROUP BY domain
|
||||
ORDER BY download DESC
|
||||
LIMIT 20
|
||||
\`).all(ip);
|
||||
|
||||
// ── 5. Recent flows ────────────────────────────────────────────────────
|
||||
const flowRows = d.prepare(\`
|
||||
SELECT dst_ip, dst_port, protocol, app_label, domain,
|
||||
bytes_download AS download, bytes_upload AS upload, last_seen
|
||||
FROM flows
|
||||
WHERE src_ip = ?
|
||||
ORDER BY last_seen DESC
|
||||
LIMIT 100
|
||||
\`).all(ip);
|
||||
|
||||
const flows = flowRows.map(r => ({
|
||||
dst_ip : r.dst_ip,
|
||||
dst_port : r.dst_port,
|
||||
protocol : r.protocol,
|
||||
app_label : r.app_label,
|
||||
domain : r.domain,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
last_seen : r.last_seen,
|
||||
}));
|
||||
|
||||
// ── 6. Totals ─────────────────────────────────────────────────────────
|
||||
const sumRow = d.prepare(\`
|
||||
SELECT SUM(bytes_download) AS total_download,
|
||||
SUM(bytes_upload) AS total_upload,
|
||||
COUNT(*) AS flow_count
|
||||
FROM flows
|
||||
WHERE src_ip = ?
|
||||
\`).get(ip);
|
||||
|
||||
// ── 7. Encryption audit (latest snapshot) ─────────────────────────────
|
||||
const latestAudit = d.prepare(\`SELECT MAX(fetched_at) AS t FROM intel_encryption_audit\`).get()?.t;
|
||||
const encRow = latestAudit
|
||||
? d.prepare(\`
|
||||
SELECT encrypted_pct, encrypted, unencrypted, total, risk_level, mac_address
|
||||
FROM intel_encryption_audit
|
||||
WHERE fetched_at = ? AND ip_address = ?
|
||||
LIMIT 1
|
||||
\`).get(latestAudit, ip)
|
||||
: null;
|
||||
|
||||
// Also try fallback by MAC if not found by IP
|
||||
const encRowMac = (!encRow && mac && latestAudit)
|
||||
? d.prepare(\`
|
||||
SELECT encrypted_pct, encrypted, unencrypted, total, risk_level, ip_address
|
||||
FROM intel_encryption_audit
|
||||
WHERE fetched_at = ? AND mac_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 1
|
||||
\`).get(latestAudit, mac)
|
||||
: null;
|
||||
|
||||
const encFinal = encRow || encRowMac;
|
||||
|
||||
const encryption = encFinal ? {
|
||||
encrypted_pct : encFinal.encrypted_pct ?? null,
|
||||
encrypted_bytes : encFinal.encrypted ?? null,
|
||||
unencrypted_bytes: encFinal.unencrypted ?? null,
|
||||
total_bytes : encFinal.total ?? null,
|
||||
risk_level : encFinal.risk_level ?? null,
|
||||
} : null;
|
||||
|
||||
// ── 8. Server discovery (servers this device accessed) ─────────────────
|
||||
const serverRows = d.prepare(\`
|
||||
SELECT DISTINCT server_type, hostname, port, protocol, os_label,
|
||||
MAX(download) AS download, MAX(upload) AS upload, MAX(detected_at) AS detected_at
|
||||
FROM intel_server_discovery
|
||||
WHERE ip_address = ?
|
||||
GROUP BY server_type, port, protocol
|
||||
ORDER BY download DESC
|
||||
LIMIT 50
|
||||
\`).all(ip);
|
||||
|
||||
// fallback by MAC if no rows by IP
|
||||
const serverRowsMac = (serverRows.length === 0 && mac)
|
||||
? d.prepare(\`
|
||||
SELECT DISTINCT server_type, hostname, port, protocol, os_label,
|
||||
MAX(download) AS download, MAX(upload) AS upload, MAX(detected_at) AS detected_at
|
||||
FROM intel_server_discovery
|
||||
WHERE mac_address = ?
|
||||
GROUP BY server_type, port, protocol
|
||||
ORDER BY download DESC
|
||||
LIMIT 50
|
||||
\`).all(mac)
|
||||
: [];
|
||||
|
||||
const server_discovery = (serverRows.length > 0 ? serverRows : serverRowsMac).map(r => ({
|
||||
server_type : r.server_type,
|
||||
hostname : r.hostname || null,
|
||||
port : r.port,
|
||||
protocol : r.protocol,
|
||||
os_label : r.os_label || null,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
detected_at : r.detected_at,
|
||||
}));
|
||||
|
||||
// ── 9. Unencrypted passwords ───────────────────────────────────────────
|
||||
let pwdRows = d.prepare(\`
|
||||
SELECT dst_ip, dst_port, protocol, username, severity, download, upload, detected_at
|
||||
FROM intel_unencrypted_passwords
|
||||
WHERE ip_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 50
|
||||
\`).all(ip);
|
||||
|
||||
if (pwdRows.length === 0 && mac) {
|
||||
pwdRows = d.prepare(\`
|
||||
SELECT dst_ip, dst_port, protocol, username, severity, download, upload, detected_at
|
||||
FROM intel_unencrypted_passwords
|
||||
WHERE mac_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 50
|
||||
\`).all(mac);
|
||||
}
|
||||
|
||||
const unencrypted_passwords = pwdRows.map(r => ({
|
||||
dst_ip : r.dst_ip,
|
||||
dst_port : r.dst_port,
|
||||
protocol : r.protocol,
|
||||
username : r.username,
|
||||
severity : r.severity,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
detected_at : r.detected_at,
|
||||
}));
|
||||
|
||||
// ── 10. IP Reputation (latest snapshot, this device's local_ip) ─────────
|
||||
const latestRepSnap = d.prepare(\`SELECT MAX(fetched_at) AS t FROM intel_ip_reputation\`).get()?.t;
|
||||
const repRows = latestRepSnap
|
||||
? d.prepare(\`
|
||||
SELECT ip_address, local_ip, reputation, score, country, app_label, blacklisted, download, upload
|
||||
FROM intel_ip_reputation
|
||||
WHERE fetched_at = ? AND (local_ip = ? OR ip_address = ?)
|
||||
ORDER BY score DESC NULLS LAST
|
||||
LIMIT 30
|
||||
\`).all(latestRepSnap, ip, ip)
|
||||
: [];
|
||||
|
||||
const ip_reputation = repRows.map(r => ({
|
||||
remote_ip : r.ip_address,
|
||||
local_ip : r.local_ip,
|
||||
reputation : r.reputation,
|
||||
score : r.score,
|
||||
country : r.country,
|
||||
app_label : r.app_label,
|
||||
blacklisted : !!r.blacklisted,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
}));
|
||||
|
||||
// ── 11. VPN detection ─────────────────────────────────────────────────
|
||||
let vpnRows = d.prepare(\`
|
||||
SELECT vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at
|
||||
FROM intel_vpn_detection
|
||||
WHERE ip_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 20
|
||||
\`).all(ip);
|
||||
|
||||
if (vpnRows.length === 0 && mac) {
|
||||
vpnRows = d.prepare(\`
|
||||
SELECT vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at
|
||||
FROM intel_vpn_detection
|
||||
WHERE mac_address = ?
|
||||
ORDER BY detected_at DESC
|
||||
LIMIT 20
|
||||
\`).all(mac);
|
||||
}
|
||||
|
||||
const vpn_detections = vpnRows.map(r => ({
|
||||
vpn_type : r.vpn_type,
|
||||
remote_ip : r.remote_ip,
|
||||
protocol : r.protocol,
|
||||
country : r.country,
|
||||
confidence : r.confidence,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
detected_at : r.detected_at,
|
||||
}));
|
||||
|
||||
// ── 12. Events ────────────────────────────────────────────────────────
|
||||
const evtByIP = d.prepare(\`SELECT event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE ip_address = ? ORDER BY event_at DESC LIMIT 50\`).all(ip);
|
||||
const evtByMAC = mac ? d.prepare(\`SELECT event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE mac_address = ? ORDER BY event_at DESC LIMIT 50\`).all(mac) : [];
|
||||
|
||||
const seenEvt = new Set();
|
||||
const evtMerged = [];
|
||||
for (const r of [...evtByIP, ...evtByMAC]) {
|
||||
const key = \`\${r.event_type}:\${r.event_at}\`;
|
||||
if (!seenEvt.has(key)) {
|
||||
seenEvt.add(key);
|
||||
evtMerged.push({ event_type: r.event_type, severity: r.severity, ip_address: r.ip_address, mac_address: r.mac_address, description: r.description, event_at: r.event_at });
|
||||
}
|
||||
}
|
||||
evtMerged.sort((a, b) => (b.event_at || '').localeCompare(a.event_at || ''));
|
||||
const events = evtMerged.slice(0, 100);
|
||||
|
||||
// ── 13. MAC bandwidth (latest snapshot) ───────────────────────────────
|
||||
const latestMacSnap = d.prepare(\`SELECT MAX(fetched_at) AS t FROM mac_bandwidth\`).get()?.t;
|
||||
const macBwRow = (latestMacSnap && mac)
|
||||
? d.prepare(\`SELECT manufacturer, download, upload, total FROM mac_bandwidth WHERE fetched_at = ? AND mac_address = ? LIMIT 1\`).get(latestMacSnap, mac)
|
||||
: null;
|
||||
|
||||
const mac_bandwidth = macBwRow ? {
|
||||
mac_address : mac,
|
||||
manufacturer : macBwRow.manufacturer,
|
||||
download : macBwRow.download ?? 0,
|
||||
upload : macBwRow.upload ?? 0,
|
||||
total : macBwRow.total ?? 0,
|
||||
} : null;
|
||||
|
||||
return {
|
||||
ip,
|
||||
mac_address : mac,
|
||||
total_download : sumRow?.total_download ?? 0,
|
||||
total_upload : sumRow?.total_upload ?? 0,
|
||||
flow_count : sumRow?.flow_count ?? 0,
|
||||
device_info,
|
||||
top_apps,
|
||||
top_domains : domainRows.map(r => ({ domain: r.domain, download: r.download ?? 0, upload: r.upload ?? 0, flow_count: r.flow_count })),
|
||||
flows,
|
||||
encryption,
|
||||
server_discovery,
|
||||
unencrypted_passwords,
|
||||
ip_reputation,
|
||||
vpn_detections,
|
||||
events,
|
||||
mac_bandwidth,
|
||||
};
|
||||
}
|
||||
|
||||
// Fetch data for a specific application`;
|
||||
|
||||
const newContent = content.slice(0, startIdx) + replacement + content.slice(endIdx);
|
||||
fs.writeFileSync(filePath, newContent, 'utf8');
|
||||
console.log('SUCCESS: Patched fetchDeviceDetails, new file length:', newContent.length);
|
||||
@@ -0,0 +1,196 @@
|
||||
// patch_netify.js — patches the fetchAgentDetails function in netify.js
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const filePath = path.join(__dirname, '..', 'backend', 'netify.js');
|
||||
let content = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
// Find the start marker (after the top_apps mapping block)
|
||||
const startMarker = ' // ── 2. Distinct devices for this agent ─────────────────────────────────────\n const devRows = d.prepare(`\n WHERE src_mac IN (${ph})\n ORDER BY last_seen DESC\n LIMIT 50\n `).all(...macs);';
|
||||
|
||||
const endMarker = 'return { agent_uuid: agentUuid, agent_label: label, summary, devices, flows, top_apps };\r\n}';
|
||||
|
||||
const startIdx = content.indexOf(' // ── 2. Distinct devices for this agent ─────────────────────────────────────');
|
||||
const endIdx = content.indexOf('return { agent_uuid: agentUuid, agent_label: label, summary, devices, flows, top_apps };\r\n}');
|
||||
|
||||
if (startIdx === -1) { console.error('START MARKER NOT FOUND'); process.exit(1); }
|
||||
if (endIdx === -1) { console.error('END MARKER NOT FOUND'); process.exit(1); }
|
||||
|
||||
console.log(`Found start at char ${startIdx}, end at char ${endIdx}`);
|
||||
|
||||
const endOffset = endIdx + endMarker.length;
|
||||
|
||||
const replacement = ` // ── 2. Distinct devices for this agent ─────────────────────────────────────
|
||||
const devRows = d.prepare(\`
|
||||
SELECT f.src_ip AS ip_address,
|
||||
f.src_mac AS mac_address,
|
||||
d.device_label,
|
||||
d.device_type,
|
||||
d.os_label,
|
||||
d.manufacturer,
|
||||
SUM(f.bytes_download) AS dl,
|
||||
SUM(f.bytes_upload) AS ul,
|
||||
MAX(f.last_seen) AS last_seen
|
||||
FROM flows f
|
||||
LEFT JOIN (
|
||||
SELECT ip_address, device_label, device_type, os_label, manufacturer
|
||||
FROM devices
|
||||
GROUP BY ip_address
|
||||
) d ON d.ip_address = f.src_ip
|
||||
WHERE f.src_mac IN (\${ph})
|
||||
GROUP BY f.src_ip
|
||||
ORDER BY dl DESC
|
||||
LIMIT 100
|
||||
\`).all(...macs);
|
||||
|
||||
const agentIPs = [...new Set(devRows.map(r => r.ip_address).filter(Boolean))];
|
||||
const phIPs = agentIPs.length > 0 ? agentIPs.map(() => '?').join(',') : null;
|
||||
|
||||
const latestEncAudit = d.prepare(\`SELECT MAX(fetched_at) AS t FROM intel_encryption_audit\`).get()?.t;
|
||||
const riskMap = {};
|
||||
if (latestEncAudit) {
|
||||
const riskRows = d.prepare(\`SELECT ip_address, encrypted_pct, risk_level FROM intel_encryption_audit WHERE fetched_at = ?\`).all(latestEncAudit);
|
||||
for (const r of riskRows) {
|
||||
if (r.ip_address) riskMap[r.ip_address] = { encrypted_pct: r.encrypted_pct, risk_level: r.risk_level };
|
||||
}
|
||||
}
|
||||
|
||||
const insecureIPs = new Set(
|
||||
phIPs ? d.prepare(\`SELECT DISTINCT ip_address FROM intel_insecure_protocols WHERE ip_address IN (\${phIPs})\`).all(...agentIPs).map(r => r.ip_address) : []
|
||||
);
|
||||
|
||||
const devices = devRows.map(r => ({
|
||||
ip_address : r.ip_address,
|
||||
mac_address : r.mac_address,
|
||||
device_label : r.device_label || r.ip_address || 'Unknown',
|
||||
device_type : r.device_type || null,
|
||||
os_label : r.os_label || null,
|
||||
manufacturer : r.manufacturer || null,
|
||||
last_seen : r.last_seen || null,
|
||||
download : r.dl ?? 0,
|
||||
upload : r.ul ?? 0,
|
||||
encrypted_pct: riskMap[r.ip_address]?.encrypted_pct ?? null,
|
||||
risk_level : riskMap[r.ip_address]?.risk_level ?? null,
|
||||
has_insecure : insecureIPs.has(r.ip_address),
|
||||
}));
|
||||
|
||||
// ── 3. Recent flows for this agent ─────────────────────────────────────────
|
||||
const flowRows = d.prepare(\`
|
||||
SELECT src_ip, dst_ip, dst_port, protocol, app_label, domain,
|
||||
bytes_download AS download, bytes_upload AS upload, last_seen
|
||||
FROM flows
|
||||
WHERE src_mac IN (\${ph})
|
||||
ORDER BY last_seen DESC
|
||||
LIMIT 100
|
||||
\`).all(...macs);
|
||||
|
||||
const flows = flowRows.map(r => ({
|
||||
src_ip : r.src_ip,
|
||||
dst_ip : r.dst_ip,
|
||||
dst_port : r.dst_port,
|
||||
protocol : r.protocol,
|
||||
app_label : r.app_label,
|
||||
domain : r.domain,
|
||||
download : r.download ?? 0,
|
||||
upload : r.upload ?? 0,
|
||||
last_seen : r.last_seen,
|
||||
}));
|
||||
|
||||
// ── 4. Summary stats ────────────────────────────────────────────────────────
|
||||
const sumRow = d.prepare(\`
|
||||
SELECT COUNT(DISTINCT src_ip) AS device_count,
|
||||
COUNT(*) AS flow_count,
|
||||
SUM(bytes_download) AS total_download,
|
||||
SUM(bytes_upload) AS total_upload
|
||||
FROM flows
|
||||
WHERE src_mac IN (\${ph})
|
||||
\`).get(...macs);
|
||||
|
||||
const summary = sumRow ? {
|
||||
total_devices : sumRow.device_count ?? 0,
|
||||
active_flows : sumRow.flow_count ?? 0,
|
||||
bandwidth_down : sumRow.total_download ?? 0,
|
||||
bandwidth_up : sumRow.total_upload ?? 0,
|
||||
} : null;
|
||||
|
||||
// ── 5. Security Intel filtered by agent IPs & MACs ─────────────────────────
|
||||
const encryptionRows = (latestEncAudit && phIPs)
|
||||
? d.prepare(\`SELECT ip_address, mac_address, device_label, encrypted_pct, unencrypted, encrypted, total, risk_level, detected_at FROM intel_encryption_audit WHERE fetched_at = ? AND ip_address IN (\${phIPs}) ORDER BY CASE risk_level WHEN 'Rawan' THEN 1 WHEN 'Sedang' THEN 2 ELSE 3 END\`).all(latestEncAudit, ...agentIPs)
|
||||
: [];
|
||||
|
||||
const insecureProtoRows = phIPs
|
||||
? d.prepare(\`SELECT ip_address, mac_address, protocol, risk, app_label, dst_ip, dst_port, download, upload, detected_at FROM intel_insecure_protocols WHERE ip_address IN (\${phIPs}) ORDER BY detected_at DESC LIMIT 50\`).all(...agentIPs)
|
||||
: [];
|
||||
|
||||
let unencPwdRows = d.prepare(\`SELECT ip_address, mac_address, dst_ip, dst_port, protocol, username, severity, download, upload, detected_at FROM intel_unencrypted_passwords WHERE mac_address IN (\${ph}) ORDER BY detected_at DESC LIMIT 50\`).all(...macs);
|
||||
if (unencPwdRows.length === 0 && phIPs) {
|
||||
unencPwdRows = d.prepare(\`SELECT ip_address, mac_address, dst_ip, dst_port, protocol, username, severity, download, upload, detected_at FROM intel_unencrypted_passwords WHERE ip_address IN (\${phIPs}) ORDER BY detected_at DESC LIMIT 50\`).all(...agentIPs);
|
||||
}
|
||||
|
||||
const latestRepSnap = d.prepare(\`SELECT MAX(fetched_at) AS t FROM intel_ip_reputation\`).get()?.t;
|
||||
const ipReputRows = (latestRepSnap && phIPs)
|
||||
? d.prepare(\`SELECT ip_address, local_ip, mac_address, reputation, score, country, app_label, blacklisted, download, upload, detected_at FROM intel_ip_reputation WHERE fetched_at = ? AND (local_ip IN (\${phIPs}) OR ip_address IN (\${phIPs})) ORDER BY score DESC LIMIT 50\`).all(latestRepSnap, ...agentIPs, ...agentIPs)
|
||||
: [];
|
||||
|
||||
let torRows = d.prepare(\`SELECT ip_address, mac_address, exit_node, circuit_id, country, download, upload, detected_at FROM intel_tor_detection WHERE mac_address IN (\${ph}) ORDER BY detected_at DESC LIMIT 20\`).all(...macs);
|
||||
if (torRows.length === 0 && phIPs) {
|
||||
torRows = d.prepare(\`SELECT ip_address, mac_address, exit_node, circuit_id, country, download, upload, detected_at FROM intel_tor_detection WHERE ip_address IN (\${phIPs}) ORDER BY detected_at DESC LIMIT 20\`).all(...agentIPs);
|
||||
}
|
||||
|
||||
let vpnRows = d.prepare(\`SELECT ip_address, mac_address, vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at FROM intel_vpn_detection WHERE mac_address IN (\${ph}) ORDER BY detected_at DESC LIMIT 20\`).all(...macs);
|
||||
if (vpnRows.length === 0 && phIPs) {
|
||||
vpnRows = d.prepare(\`SELECT ip_address, mac_address, vpn_type, remote_ip, protocol, country, confidence, download, upload, detected_at FROM intel_vpn_detection WHERE ip_address IN (\${phIPs}) ORDER BY detected_at DESC LIMIT 20\`).all(...agentIPs);
|
||||
}
|
||||
|
||||
const serverDiscRows = phIPs
|
||||
? d.prepare(\`SELECT ip_address, mac_address, server_type, hostname, port, protocol, os_label, download, upload, detected_at FROM intel_server_discovery WHERE ip_address IN (\${phIPs}) ORDER BY detected_at DESC LIMIT 50\`).all(...agentIPs)
|
||||
: [];
|
||||
|
||||
const security = {
|
||||
encryption_audit : encryptionRows,
|
||||
insecure_protocols : insecureProtoRows,
|
||||
unencrypted_passwords: unencPwdRows,
|
||||
ip_reputation : ipReputRows,
|
||||
tor_detections : torRows,
|
||||
vpn_detections : vpnRows,
|
||||
};
|
||||
|
||||
// ── 6. Events filtered by agent IPs & MACs ─────────────────────────────────
|
||||
const eventsByIP = phIPs ? d.prepare(\`SELECT event_id, event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE ip_address IN (\${phIPs}) ORDER BY event_at DESC LIMIT 100\`).all(...agentIPs) : [];
|
||||
const eventsByMAC = d.prepare(\`SELECT event_id, event_type, severity, ip_address, mac_address, description, event_at FROM events WHERE mac_address IN (\${ph}) ORDER BY event_at DESC LIMIT 100\`).all(...macs);
|
||||
|
||||
const seenEvt = new Set();
|
||||
const allEvents = [];
|
||||
for (const r of [...eventsByIP, ...eventsByMAC]) {
|
||||
const key = r.event_id || \`\${r.ip_address}:\${r.event_at}\`;
|
||||
if (!seenEvt.has(key)) {
|
||||
seenEvt.add(key);
|
||||
allEvents.push({ event_id: r.event_id, event_type: r.event_type, severity: r.severity, ip_address: r.ip_address, mac_address: r.mac_address, description: r.description, event_at: r.event_at });
|
||||
}
|
||||
}
|
||||
allEvents.sort((a, b) => (b.event_at || '').localeCompare(a.event_at || ''));
|
||||
const events = allEvents.slice(0, 100);
|
||||
|
||||
// ── 7. MAC bandwidth for this agent's MACs ──────────────────────────────────
|
||||
const latestMacSnap = d.prepare(\`SELECT MAX(fetched_at) AS t FROM mac_bandwidth\`).get()?.t;
|
||||
const mac_bandwidth = latestMacSnap
|
||||
? d.prepare(\`SELECT mac_address, manufacturer, download, upload, total FROM mac_bandwidth WHERE fetched_at = ? AND mac_address IN (\${ph}) ORDER BY download DESC\`).all(latestMacSnap, ...macs)
|
||||
: [];
|
||||
|
||||
return {
|
||||
agent_uuid : agentUuid,
|
||||
agent_label : label,
|
||||
summary,
|
||||
devices,
|
||||
flows,
|
||||
top_apps,
|
||||
security,
|
||||
events,
|
||||
mac_bandwidth,
|
||||
server_discovery: serverDiscRows,
|
||||
};
|
||||
}`;
|
||||
|
||||
const newContent = content.slice(0, startIdx) + replacement + content.slice(endOffset);
|
||||
fs.writeFileSync(filePath, newContent, 'utf8');
|
||||
console.log('SUCCESS: Patched netify.js, new length:', newContent.length);
|
||||
@@ -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 [isLoading, setIsLoading] = useState(true);
|
||||
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>
|
||||
{/* ── 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" && (
|
||||
data.devices.length === 0 ? <EmptyState msg="No devices found for this agent." /> : (
|
||||
<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.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>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* 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.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="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 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="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>
|
||||
<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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</TableWrap>
|
||||
)
|
||||
)}
|
||||
|
||||
{/* TOP APPS */}
|
||||
{activeTab === "apps" && (
|
||||
data.top_apps.length === 0 ? <EmptyState msg="No application data for this agent." /> : (
|
||||
<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);
|
||||
{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,9 +1,15 @@
|
||||
"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;
|
||||
@@ -12,13 +18,56 @@ interface Props {
|
||||
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 [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<Tab>("apps");
|
||||
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>
|
||||
{/* ── 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 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>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* 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">
|
||||
{/* ── 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>
|
||||
)}
|
||||
|
||||
{/* ── 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>
|
||||
)}
|
||||
|
||||
{/* ── 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>
|
||||
{/* ── 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" && (
|
||||
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>
|
||||
) : (
|
||||
data.top_apps.map((a, i) => {
|
||||
<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-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 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>
|
||||
<div className="flex gap-3 text-xs mb-2">
|
||||
|
||||
{/* 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>
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden">
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="h-1 bg-white/5 rounded-full overflow-hidden ml-10">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full"
|
||||
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="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="px-3 py-2 text-right text-xs text-cyan-400">{fmtBytes(p.download)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</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>
|
||||
)}
|
||||
|
||||
{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) => (
|
||||
<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>
|
||||
<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>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
+227
-2
@@ -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 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;
|
||||
top_apps: AgentAppItem[];
|
||||
device_info : DeviceInfo;
|
||||
top_apps : DeviceAppItem[];
|
||||
top_domains : DeviceDomainItem[];
|
||||
flows : DeviceFlowItem[];
|
||||
security_info: SecurityInfo | null;
|
||||
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