251 lines
9.8 KiB
TypeScript
251 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
import { DataTable, Column } from "@/components/ui/DataTable";
|
|
import { DeviceDetailModal } from "@/components/ui/DeviceDetailModal";
|
|
import { useState, useEffect } from "react";
|
|
import { TimestampCell } from "@/components/ui/TimestampCell";
|
|
import { DeviceStat } from "@/lib/api";
|
|
import { useDevices } from "@/lib/api-with-context";
|
|
import { fmtBytes } from "@/lib/utils";
|
|
import { Loader2, ChevronRight } from "lucide-react";
|
|
|
|
import { UniversalFilters, useUniversalFilterState, FilterConfig } from "@/components/ui/UniversalFilters";
|
|
import { HelpTrigger } from "@/components/help/HelpTrigger";
|
|
|
|
export default function DevicesPage() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const devices = useDevices();
|
|
const [selectedDevice, setSelectedDevice] = useState<DeviceStat | null>(null);
|
|
|
|
const {
|
|
filters, dateFrom, dateTo,
|
|
handleFilterChange, setDateFrom, setDateTo,
|
|
handleReset, activeCount
|
|
} = useUniversalFilterState();
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
document.title = "Devices | BackOne - Deep Package Inspection";
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
const all = devices.data || [];
|
|
|
|
const opts = (key: string) => {
|
|
const raw = Array.from(new Set(all.map((r: any) => String(r[key] || "")).filter(Boolean)));
|
|
return raw.sort();
|
|
};
|
|
|
|
const filterConfigs: FilterConfig[] = [
|
|
{ id: "device_type", label: "Device Type", type: "select", value: filters.device_type, options: opts("device_type") },
|
|
{ id: "os_label", label: "OS", type: "select", value: filters.os_label, options: opts("os_label") },
|
|
{ id: "manufacturer", label: "Manufacturer", type: "select", value: filters.manufacturer, options: opts("manufacturer") },
|
|
{ id: "sort_download", label: "Sort Download", type: "select", value: filters.sort_download, options: ["Descending", "Ascending"] },
|
|
{ id: "sort_upload", label: "Sort Upload", type: "select", value: filters.sort_upload, options: ["Descending", "Ascending"] },
|
|
];
|
|
|
|
const columns: Column<DeviceStat>[] = [
|
|
{
|
|
header: "Last Seen",
|
|
className: "w-[13%]",
|
|
accessor: (row) => <TimestampCell timestamp={row.last_seen} showActiveStatus={true} />
|
|
},
|
|
{ header: "#", accessor: (row, i) => i + 1, className: "w-[4%]" },
|
|
{
|
|
header: "IP Address",
|
|
className: "w-[12%]",
|
|
accessor: (row) => (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<button
|
|
onClick={() => setSelectedDevice(row)}
|
|
className="flex items-center justify-center gap-1 group text-center"
|
|
title="Click to view device details"
|
|
>
|
|
<span className="font-semibold text-blue-400 group-hover:text-blue-300 transition-colors font-mono text-sm">
|
|
{row.ip_address || "-"}
|
|
</span>
|
|
<ChevronRight className="w-3 h-3 text-slate-600 group-hover:text-blue-400 transition-colors" />
|
|
</button>
|
|
{row.device_label && (
|
|
<span className="text-[10px] text-slate-400 font-medium mt-0.5 truncate max-w-[120px]" title={row.device_label}>
|
|
{row.device_label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
header: "MAC Address",
|
|
className: "w-[17%]",
|
|
accessor: (row) => {
|
|
const isRouted = row.is_gateway_routed === 1;
|
|
const hasMan = row.manufacturer && row.manufacturer !== "-" && row.manufacturer !== "Unknown";
|
|
const info = hasMan ? row.manufacturer : (row.device_type && row.device_type !== "-" && row.device_type !== "Generic Client" ? row.device_type : "");
|
|
|
|
return row.mac_address ? (
|
|
<div className="flex flex-col items-center justify-center gap-0.5">
|
|
<code className="text-xs bg-secondary/50 px-1 py-0.5 rounded text-muted-foreground w-fit font-mono">
|
|
{row.mac_address}
|
|
</code>
|
|
{(isRouted || info) && (
|
|
<span className={`text-[10px] font-sans font-medium ${isRouted ? "text-amber-500/90 italic" : "text-slate-400/80"}`}>
|
|
{isRouted ? "Via Routed Gateway" : ""}
|
|
{isRouted && info ? ` • ${info}` : (!isRouted ? info : "")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
) : (
|
|
"-"
|
|
);
|
|
},
|
|
},
|
|
{
|
|
header: "Type",
|
|
accessor: (row) => row.device_type || "-",
|
|
className: "w-[11%]"
|
|
},
|
|
{
|
|
header: "OS",
|
|
accessor: (row) => row.os_label || "-",
|
|
className: "w-[11%]"
|
|
},
|
|
{
|
|
header: "Manufacturer",
|
|
accessor: (row) => row.manufacturer || "-",
|
|
className: "w-[14%]"
|
|
},
|
|
{
|
|
header: "Download",
|
|
accessor: (row) => <span className="text-cyan-400">{fmtBytes(row.download)}</span>,
|
|
className: "w-[9%]",
|
|
},
|
|
{
|
|
header: "Upload",
|
|
accessor: (row) => <span className="text-green-400">{fmtBytes(row.upload)}</span>,
|
|
className: "w-[9%]",
|
|
},
|
|
];
|
|
|
|
const filteredData = all.filter((row: any) => {
|
|
if (filters.device_type && filters.device_type !== "All" && row.device_type !== filters.device_type) return false;
|
|
if (filters.os_label && filters.os_label !== "All" && row.os_label !== filters.os_label) return false;
|
|
if (filters.manufacturer && filters.manufacturer !== "All" && row.manufacturer !== filters.manufacturer) return false;
|
|
|
|
if (dateFrom || dateTo) {
|
|
const d = row.last_seen ? new Date(row.last_seen).toISOString().slice(0, 10) : "";
|
|
if (dateFrom && d < dateFrom) return false;
|
|
if (dateTo && d > dateTo) return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
let processedData = [...filteredData];
|
|
const sortUpload = filters.sort_upload || "All";
|
|
const sortDownload = filters.sort_download || "All";
|
|
|
|
if (sortUpload !== "All") {
|
|
processedData.sort((a, b) => sortUpload === "Descending" ? b.upload - a.upload : a.upload - b.upload);
|
|
} else if (sortDownload !== "All") {
|
|
processedData.sort((a, b) => sortDownload === "Descending" ? b.download - a.download : a.download - b.download);
|
|
}
|
|
|
|
const minTime = all.reduce((min: number, r: any) => {
|
|
if (r.last_seen) {
|
|
const time = new Date(r.last_seen).getTime();
|
|
if (isFinite(time) && time < min) return time;
|
|
}
|
|
return min;
|
|
}, Infinity);
|
|
const minDate = minTime !== Infinity ? new Date(minTime).toISOString().slice(0, 10) : "2024-01-01";
|
|
|
|
return (
|
|
<div className="space-y-6 sm:space-y-8 animate-fade-in pb-10">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold tracking-tight text-white flex items-center gap-2 sm:gap-3 flex-wrap">
|
|
<span>Devices</span>
|
|
{devices.isLoading && <Loader2 className="w-4 h-4 sm:w-5 sm:h-5 animate-spin text-primary flex-shrink-0" />}
|
|
</h2>
|
|
<p className="text-xs sm:text-sm text-muted-foreground mt-1 leading-normal sm:leading-relaxed">
|
|
Monitor and manage connected network devices.{" "}
|
|
<span className="text-slate-500 text-[10px] sm:text-xs block sm:inline mt-0.5 sm:mt-0">Click an IP to see app usage & flows.</span>
|
|
</p>
|
|
</div>
|
|
<HelpTrigger pageId="devices" className="flex-shrink-0" />
|
|
</div>
|
|
|
|
<UniversalFilters
|
|
filters={filterConfigs}
|
|
onChange={(id, val) => {
|
|
if (id === 'sort_download') {
|
|
handleFilterChange('sort_download', val);
|
|
handleFilterChange('sort_upload', 'All');
|
|
} else if (id === 'sort_upload') {
|
|
handleFilterChange('sort_upload', val);
|
|
handleFilterChange('sort_download', 'All');
|
|
} else {
|
|
handleFilterChange(id, val);
|
|
}
|
|
}}
|
|
showDateRange={true}
|
|
dateFrom={dateFrom}
|
|
dateTo={dateTo}
|
|
minDate={minDate}
|
|
onDateChange={(f, t) => { setDateFrom(f); setDateTo(t); }}
|
|
activeFilterCount={activeCount}
|
|
onReset={handleReset}
|
|
/>
|
|
|
|
<Card className="bg-card/80 backdrop-blur-xl border-border/50 animate-slide-up" style={{ animationDelay: "100ms" }}>
|
|
<CardHeader className="border-b border-border/50 pb-4 mb-4">
|
|
<CardTitle className="text-white">Active Devices ({processedData.length})</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<DataTable
|
|
data={processedData}
|
|
columns={columns}
|
|
searchPlaceholder="Search devices by IP, MAC..."
|
|
searchFilter={(row, query) => {
|
|
const q = query.trim().toLowerCase();
|
|
const matchesSearch = (
|
|
(row.ip_address || "").toLowerCase().includes(q) ||
|
|
(row.mac_address || "").toLowerCase().includes(q) ||
|
|
(row.os_label || "").toLowerCase().includes(q) ||
|
|
(row.device_type || "").toLowerCase().includes(q)
|
|
);
|
|
|
|
return matchesSearch;
|
|
}}
|
|
csvExport={{
|
|
filename: `devices-${new Date().toISOString().slice(0,10)}.csv`,
|
|
headers: ["IP Address", "Device Label", "MAC Address", "Device Type", "OS", "Manufacturer", "Download (bytes)", "Upload (bytes)", "Last Seen"],
|
|
rowSerializer: (row) => [
|
|
row.ip_address || "",
|
|
row.device_label || "",
|
|
row.mac_address || "",
|
|
row.device_type || "",
|
|
row.os_label || "",
|
|
row.manufacturer || "",
|
|
row.download ?? 0,
|
|
row.upload ?? 0,
|
|
row.last_seen ? new Date(row.last_seen).toISOString() : "",
|
|
],
|
|
}}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Device Detail Modal */}
|
|
{selectedDevice && (
|
|
<DeviceDetailModal
|
|
ip={selectedDevice.ip_address}
|
|
deviceData={selectedDevice}
|
|
onClose={() => setSelectedDevice(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|