400 lines
17 KiB
TypeScript
400 lines
17 KiB
TypeScript
import { useState, useMemo } from 'react';
|
||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import { Search, Wifi, Network, Users, X, Pencil, Trash2, ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
|
||
import { clientsApi } from '../services/api';
|
||
import type { Client } from '../types';
|
||
import { useCanWrite } from '../hooks/useCanWrite';
|
||
import { useSocket } from '../hooks/useSocket';
|
||
import { formatDistanceToNow } from 'date-fns';
|
||
import clsx from 'clsx';
|
||
|
||
|
||
function ClientModal({
|
||
client,
|
||
onClose,
|
||
}: {
|
||
client: Client;
|
||
onClose: () => void;
|
||
}) {
|
||
const queryClient = useQueryClient();
|
||
const [name, setName] = useState(client.custom_name || '');
|
||
|
||
const mutation = useMutation({
|
||
mutationFn: () => clientsApi.updateHostname(client.mac_address, name),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['clients'] });
|
||
onClose();
|
||
},
|
||
});
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
|
||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-xl w-full max-w-md p-6">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-base font-semibold text-gray-900 dark:text-white">Edit Client</h2>
|
||
<button onClick={onClose} className="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-slate-300">
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-3 text-sm text-gray-500 dark:text-slate-400 mb-4">
|
||
<div className="flex justify-between">
|
||
<span>MAC</span>
|
||
<span className="font-mono text-gray-800 dark:text-white">{client.mac_address}</span>
|
||
</div>
|
||
{client.vendor && (
|
||
<div className="flex justify-between">
|
||
<span>Vendor</span>
|
||
<span className="text-gray-800 dark:text-white">{client.vendor}</span>
|
||
</div>
|
||
)}
|
||
{client.ip_address && (
|
||
<div className="flex justify-between">
|
||
<span>IP</span>
|
||
<span className="font-mono text-gray-800 dark:text-white">{client.ip_address}</span>
|
||
</div>
|
||
)}
|
||
{client.interface_name && (
|
||
<div className="flex justify-between">
|
||
<span>Port</span>
|
||
<span className="font-mono text-gray-800 dark:text-white">{client.interface_name}</span>
|
||
</div>
|
||
)}
|
||
{client.hostname && (
|
||
<div className="flex justify-between">
|
||
<span>Discovered Hostname</span>
|
||
<span className="font-mono text-gray-800 dark:text-white">{client.hostname}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<label className="block text-sm font-medium text-gray-700 dark:text-slate-300 mb-1">
|
||
Custom Name
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="input w-full mb-1"
|
||
placeholder={client.hostname || 'e.g. Office Printer'}
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') mutation.mutate(); }}
|
||
autoFocus
|
||
/>
|
||
<p className="text-xs text-gray-400 dark:text-slate-500 mb-4">
|
||
Overrides the auto-discovered hostname. Persists even when the client is offline.
|
||
</p>
|
||
|
||
<div className="flex justify-end gap-2">
|
||
<button onClick={onClose} className="btn-secondary">Cancel</button>
|
||
<button
|
||
onClick={() => mutation.mutate()}
|
||
disabled={mutation.isPending}
|
||
className="btn-primary"
|
||
>
|
||
{mutation.isPending ? 'Saving…' : 'Save'}
|
||
</button>
|
||
</div>
|
||
{mutation.isError && (
|
||
<p className="mt-2 text-xs text-red-500">Failed to save name.</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function ClientsPage() {
|
||
const queryClient = useQueryClient();
|
||
const navigate = useNavigate();
|
||
const canWrite = useCanWrite();
|
||
const [search, setSearch] = useState('');
|
||
const [showAll, setShowAll] = useState(false);
|
||
const [page, setPage] = useState(0);
|
||
const [editingClient, setEditingClient] = useState<Client | null>(null);
|
||
const [sortCol, setSortCol] = useState<string>('last_seen');
|
||
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
|
||
const PAGE_SIZE = 50;
|
||
|
||
const toggleSort = (col: string) => {
|
||
if (sortCol === col) setSortDir((d) => d === 'asc' ? 'desc' : 'asc');
|
||
else { setSortCol(col); setSortDir('asc'); }
|
||
};
|
||
|
||
const { data, isLoading } = useQuery({
|
||
queryKey: ['clients', { search, showAll, page }],
|
||
queryFn: () =>
|
||
clientsApi
|
||
.list({ search: search || undefined, active: showAll ? undefined : true, limit: PAGE_SIZE, offset: page * PAGE_SIZE })
|
||
.then((r) => r.data),
|
||
refetchInterval: 30_000,
|
||
});
|
||
|
||
const [purgeResult, setPurgeResult] = useState('');
|
||
const purgeMutation = useMutation({
|
||
mutationFn: () => clientsApi.purgeStale(),
|
||
onSuccess: (r) => {
|
||
queryClient.invalidateQueries({ queryKey: ['clients'] });
|
||
setPurgeResult(r.data.message);
|
||
setTimeout(() => setPurgeResult(''), 5000);
|
||
},
|
||
});
|
||
|
||
useSocket({
|
||
'clients:updated': () => queryClient.invalidateQueries({ queryKey: ['clients'] }),
|
||
});
|
||
|
||
const rawClients = data?.clients ?? [];
|
||
const total = data?.total ?? 0;
|
||
|
||
const clients = useMemo(() => {
|
||
const toIpNum = (ip: string) =>
|
||
(ip || '').split('.').reduce((n, o) => n * 256 + parseInt(o || '0', 10), 0);
|
||
|
||
return [...rawClients].sort((a, b) => {
|
||
let av: string | number, bv: string | number;
|
||
switch (sortCol) {
|
||
case 'hostname': av = a.custom_name || a.hostname || ''; bv = b.custom_name || b.hostname || ''; break;
|
||
case 'vendor': av = a.vendor || ''; bv = b.vendor || ''; break;
|
||
case 'ip_address': av = toIpNum(a.ip_address || ''); bv = toIpNum(b.ip_address || ''); break;
|
||
case 'client_type': av = a.client_type || ''; bv = b.client_type || ''; break;
|
||
case 'interface_name': av = a.interface_name || ''; bv = b.interface_name || ''; break;
|
||
case 'vlan_id': av = a.vlan_id ?? -1; bv = b.vlan_id ?? -1; break;
|
||
case 'device_name': av = a.device_name || ''; bv = b.device_name || ''; break;
|
||
case 'last_seen': av = a.last_seen || ''; bv = b.last_seen || ''; break;
|
||
default: av = ''; bv = '';
|
||
}
|
||
if (av === bv) return 0;
|
||
const cmp = av < bv ? -1 : 1;
|
||
return sortDir === 'asc' ? cmp : -cmp;
|
||
});
|
||
}, [rawClients, sortCol, sortDir]);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{editingClient && (
|
||
<ClientModal client={editingClient} onClose={() => setEditingClient(null)} />
|
||
)}
|
||
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
|
||
Clients
|
||
{total > 0 && (
|
||
<span className="ml-2 text-sm font-normal text-gray-500 dark:text-slate-400">
|
||
({total} {showAll ? 'total' : 'online'})
|
||
</span>
|
||
)}
|
||
</h1>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
|
||
<div className="relative w-full sm:flex-1 sm:max-w-sm">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||
<input
|
||
type="text"
|
||
className="input pl-9"
|
||
placeholder="Search hostname, MAC, IP, or vendor…"
|
||
value={search}
|
||
onChange={(e) => { setSearch(e.target.value); setPage(0); }}
|
||
/>
|
||
</div>
|
||
<button
|
||
onClick={() => { setShowAll((s) => !s); setPage(0); }}
|
||
className={clsx(
|
||
'px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
||
showAll
|
||
? 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 border border-amber-300 dark:border-amber-700'
|
||
: 'bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300'
|
||
)}
|
||
>
|
||
{showAll ? 'Active Only' : 'Show Inactive'}
|
||
</button>
|
||
{canWrite && (
|
||
<button
|
||
onClick={() => {
|
||
if (confirm('Purge all inactive clients older than the configured retention period?')) {
|
||
purgeMutation.mutate();
|
||
}
|
||
}}
|
||
disabled={purgeMutation.isPending}
|
||
className="btn-secondary flex items-center gap-1.5 text-sm"
|
||
title="Delete inactive client records older than the retention period (set in Settings)"
|
||
>
|
||
<Trash2 className="w-4 h-4" />
|
||
Purge Stale
|
||
</button>
|
||
)}
|
||
{purgeResult && (
|
||
<span className="text-xs text-green-600 dark:text-green-400">{purgeResult}</span>
|
||
)}
|
||
</div>
|
||
|
||
{isLoading ? (
|
||
<div className="flex items-center justify-center h-48 text-gray-400">Loading...</div>
|
||
) : clients.length === 0 ? (
|
||
<div className="card p-12 flex flex-col items-center gap-3 text-center">
|
||
<Users className="w-12 h-12 text-gray-300 dark:text-slate-600" />
|
||
<p className="text-gray-500 dark:text-slate-400">
|
||
{showAll ? 'No clients found' : 'No active clients detected'}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="card overflow-hidden">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-gray-200 dark:border-slate-700">
|
||
{([
|
||
{ col: 'hostname', label: 'Host / Vendor / MAC', align: 'left' },
|
||
{ col: 'ip_address', label: 'IP Address', align: 'left' },
|
||
{ col: 'client_type', label: 'Type', align: 'left' },
|
||
{ col: 'interface_name', label: 'Port', align: 'left' },
|
||
{ col: 'vlan_id', label: 'VLAN', align: 'left' },
|
||
{ col: 'device_name', label: 'Device', align: 'left' },
|
||
{ col: 'last_seen', label: 'Last Seen', align: 'left' },
|
||
] as { col: string; label: string; align: 'left' | 'right' }[]).map(({ col, label, align }) => (
|
||
<th
|
||
key={col}
|
||
className={clsx('table-header px-4 py-2.5 cursor-pointer select-none whitespace-nowrap', `text-${align}`)}
|
||
onClick={() => toggleSort(col)}
|
||
>
|
||
<span className="inline-flex items-center gap-1">
|
||
{label}
|
||
{sortCol === col ? (
|
||
sortDir === 'asc'
|
||
? <ChevronUp className="w-3 h-3 text-blue-500" />
|
||
: <ChevronDown className="w-3 h-3 text-blue-500" />
|
||
) : (
|
||
<ChevronsUpDown className="w-3 h-3 text-gray-300 dark:text-slate-600" />
|
||
)}
|
||
</span>
|
||
</th>
|
||
))}
|
||
{showAll && (
|
||
<th className="table-header px-4 py-2.5 text-center">Active</th>
|
||
)}
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-100 dark:divide-slate-700 table-zebra">
|
||
{clients.map((client) => (
|
||
<tr
|
||
key={client.id}
|
||
className="hover:bg-gray-50 dark:hover:bg-slate-700/30"
|
||
>
|
||
<td className="px-4 py-2.5">
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
onClick={() => navigate(`/clients/${encodeURIComponent(client.mac_address)}`)}
|
||
className="font-medium text-blue-600 dark:text-blue-400 hover:underline text-left"
|
||
>
|
||
{client.custom_name || client.hostname || (
|
||
<span className="text-gray-400 dark:text-slate-500 italic">No hostname</span>
|
||
)}
|
||
</button>
|
||
{client.custom_name && (
|
||
<span className="text-xs text-blue-500 dark:text-blue-400 ml-1">custom</span>
|
||
)}
|
||
{canWrite && (
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); setEditingClient(client); }}
|
||
className="p-0.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700"
|
||
title="Edit name"
|
||
>
|
||
<Pencil className="w-3 h-3 text-gray-300 dark:text-slate-600 hover:text-gray-500 dark:hover:text-slate-400" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
{client.vendor && (
|
||
<div className="text-xs text-gray-400 dark:text-slate-500">{client.vendor}</div>
|
||
)}
|
||
<div className="text-xs font-mono text-gray-400 dark:text-slate-500">
|
||
{client.mac_address}
|
||
</div>
|
||
</td>
|
||
<td className="px-4 py-2.5 font-mono text-gray-600 dark:text-slate-400">
|
||
{client.ip_address || '—'}
|
||
</td>
|
||
<td className="px-4 py-2.5">
|
||
<span
|
||
className={clsx(
|
||
'inline-flex items-center gap-1 text-xs font-medium',
|
||
client.client_type === 'wireless'
|
||
? 'text-purple-600 dark:text-purple-400'
|
||
: 'text-blue-600 dark:text-blue-400'
|
||
)}
|
||
>
|
||
{client.client_type === 'wireless' ? (
|
||
<Wifi className="w-3 h-3" />
|
||
) : (
|
||
<Network className="w-3 h-3" />
|
||
)}
|
||
{client.client_type}
|
||
{client.signal_strength != null && (
|
||
<span className="text-gray-400 ml-1">({client.signal_strength} dBm)</span>
|
||
)}
|
||
</span>
|
||
</td>
|
||
<td className="px-4 py-2.5 font-mono text-xs text-gray-500 dark:text-slate-400">
|
||
{client.interface_name || '—'}
|
||
</td>
|
||
<td className="px-4 py-2.5 text-xs text-gray-500 dark:text-slate-400">
|
||
{client.vlan_id != null
|
||
? <span className="px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded font-mono">{client.vlan_id}</span>
|
||
: '—'}
|
||
</td>
|
||
<td className="px-4 py-2.5 text-xs text-gray-500 dark:text-slate-400">
|
||
{client.device_name || '—'}
|
||
</td>
|
||
<td className="px-4 py-2.5 text-xs text-gray-400 dark:text-slate-500">
|
||
{client.last_seen
|
||
? formatDistanceToNow(new Date(client.last_seen), { addSuffix: true })
|
||
: '—'}
|
||
</td>
|
||
{showAll && (
|
||
<td className="px-4 py-2.5 text-center">
|
||
<span
|
||
className={clsx(
|
||
'w-2 h-2 rounded-full inline-block',
|
||
client.active ? 'bg-green-500' : 'bg-gray-300 dark:bg-slate-600'
|
||
)}
|
||
/>
|
||
</td>
|
||
)}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
{total > PAGE_SIZE && (
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-gray-500 dark:text-slate-400">
|
||
Showing {page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, total)} of {total}
|
||
</span>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||
disabled={page === 0}
|
||
className="btn-secondary py-1"
|
||
>
|
||
Previous
|
||
</button>
|
||
<button
|
||
onClick={() => setPage((p) => p + 1)}
|
||
disabled={(page + 1) * PAGE_SIZE >= total}
|
||
className="btn-secondary py-1"
|
||
>
|
||
Next
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|